Friday, 3 December 2021

Matter.js How can I make a box that is correctly landing?

I created two rectangle as follows through Matter.js

enter image description here

I am trying to move the "a" box over the "b" box.

I think I should write applyForce at this time, how can I calculate the appropriate X, Y Force values to put in the factor?

The code below is a code that is made up of the rough approximation value. How can I calculate it with being adaptable?

var Engine = Matter.Engine,
  Render = Matter.Render,
  Bodies = Matter.Bodies,
  Body = Matter.Body,
  Composite = Matter.Composite,
  Runner = Matter.Runner;

var canvas = document.createElement('canvas'),
  context = canvas.getContext('2d');
var bodies = [];
canvas.width = 500;
canvas.height = 200;
var count = 0;
document.body.appendChild(canvas);
var engine = Engine.create();
var render = Render.create({
    canvas: canvas,
  engine: engine,
  options: {
    width: canvas.width,
    height: canvas.height,
    showAngleIndicator: true,
    showCollisions: true,
    showVelocity: true
  }
})
var world = engine.world

Render.run(render)
var runner = Runner.create();
Runner.run(runner, engine)

Composite.add(world, Bodies.rectangle(250, 180, 500, 20, { isStatic: true }));
// random position
var b = Bodies.rectangle(200, 80, 50, 25, { isStatic: true });
Composite.add(world, b);

var a = Bodies.rectangle(50, 50, 30, 30);
Composite.add(world, a);

setTimeout(function() {
    // how to calculate it???
    Body.applyForce(a, a.position, {x: 0.012, y: -0.032});
}, 1000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>


from Matter.js How can I make a box that is correctly landing?

No comments:

Post a Comment