const Engine = Matter.Engine,

  Render = Matter.Render,

  Runner = Matter.Runner,

  Bodies = Matter.Bodies,

  Composite = Matter.Composite;

​

// create an engine

const engine = Engine.create();

​

const options = {

  friction:0,

  frictionAir: 0,

  frictionStatic: 0,

  restitution: 1,

  slop: 0.001

}

​

function setup() {

  createCanvas(400, 400);

  textAlign(CENTER, CENTER)

  textSize(16)

  Matter.Resolver._restingThresh = 0.00001;

​

  // saveGif("file.gif", 200, {

  //   units: "frames"

  // })

​

​

   boxA = Bodies.rectangle(300, 100, 20, 100, {

    isStatic: true,

     ...options

  });

   boxB = Bodies.rectangle(300, 300, 20, 100, {

    // isStatic: true,

    mass: Infinity,

     ...options

  });

  Matter.Body.setVelocity(boxB,{x: 0.5,y: 0 })

​

  engine.gravity.y = 0;

​

   ball1 = Bodies.circle(0, 100, 10, options);

   ball2 = Bodies.circle(0, 300, 10, options);

​

  Matter.Body.applyForce(ball1, ball1.position, { x: 0.026, y: 0 });

  Matter.Body.applyForce(ball2, ball2.position, { x: 0.026, y: 0 });

​

  Composite.add(engine.world, [boxA, boxB, ball1, ball2]);

}

​

function draw() {

  background(220);

​

  const bodies = Composite.allBodies(engine.world);

​

  line(0, 50, width, 50);

  line(0, 150, width, 150);

  line(0, 250, width, 250);

  line(0, 350, width, 350);

​

  line(boxA.position.x, boxA.position.y, width, boxA.position.y);

  line(boxB.position.x, boxB.position.y, width, boxB.position.y);

  text("v = " + nf(ball1.velocity.x, 1, 2), 300, 160)

  text("v = " + nf(ball2.velocity.x, 1, 2), 300, 360)

  for (const body of bodies) {

    beginShape();

    for (const v of body.vertices) {

      vertex(v.x, v.y);

    }

    endShape(CLOSE);

  }  

  for (let i = 0; i < 10; i++)

  Engine.update(engine, 2);

}

​