I am trying to create 2 boxes where 1 box B moves down and hits the other box A. I want B to move at constant speed (so I set its friction to 0 and stop it after a while). But I'm stuck on how to set A. I want A to get pushed and move out of B's way, but also at constant speed and with no sliding. Which means A gets pushed until B is not pushing A anymore, which at that point A is not sliding/moving/rotating.
Anyone know how to fix it?
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Body = Matter.Body,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
engine.world.gravity.y = 0;
// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 32, 32);
var boxB = Bodies.rectangle(425, 50, 32, 32);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
console.log(boxA.friction, boxA.frictionAir, boxA.restitution);
boxA.friction = 0.75;
//boxA.frictionAir = 1;
boxA.restitution = 0.01;
boxB.friction = 0;
boxB.frictionAir = 0;
boxB.restitution = 0;
var x=425,y=50;
setTimeout(() => {
Body.applyForce(boxB, boxB.position, {
x: 0,
y: 0.01
});
console.log("moving");
}, 1000);
setInterval(() => {
Body.setAngularVelocity(boxB, 0);
Body.setVelocity(boxB, {x: 0, y:0});
}, 3000);
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
// run the renderer
Render.run(render);
// create runner
var runner = Runner.create();
// run the engine
Runner.run(runner, engine);<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js" integrity="sha512-5T245ZTH0m0RfONiFm2NF0zcYcmAuNzcGyPSQ18j8Bs5Pbfhp5HP1hosrR8XRt5M3kSRqzjNMYpm2+it/AUX/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body></body>
</html>