Render = Matter.Render,

    World = Matter.World,

    Bodies = Matter.Bodies,

    Constraint=Matter.Constraint;

var engine;

let bob,origin,origin2,bob2;

 let constraint;

let world;

function setup(){

  createCanvas(400,400);

 let optionsOrigin={

   isStatic:true

 }

   engine = Engine.create();

   world=engine.world

 bob= Bodies.circle(200,200,40,{frictionAir:0.001})

  origin= Bodies.circle(200,0,10,optionsOrigin)

  bob2= Bodies.circle(300,200,40)

  origin2= Bodies.circle(300,0,10,optionsOrigin)

World.add(world,bob)

  World.add(world,origin)

​

  var option={

    bodyA:bob,

    bodyB:origin,

    lenght:80,

    stiffness:1,

    resitution:1,

  }

  console.log(bob)

   constraint=Constraint.create(option)

  let vector={

    x: 0,

    y: 0,

  }

  Matter.Body.applyForce(bob, vector, { x: -0.10, y: 0 })

  World.add(world,[constraint,bob2,origin2])

​

  Engine.run(engine);

​

​

}

​

function draw(){

  background(0);

  fill('#2ecc71')

  circle(bob.position.x,bob.position.y,40)

  push()

  strokeWeight(0)

  text("use arrow keys to move it again (make sure canvas is clicked before)",20,300)

  pop()

  stroke(255)

  line(origin.position.x,origin.position.y,bob.position.x,bob.position.y)

​

}

 function keyPressed()

{

  if(keyCode===LEFT_ARROW)

    {

      Matter.Body.applyForce(bob, {x:0,y:0}, { x: -0.20, y: 0 })

    }

  if(keyCode===RIGHT_ARROW)

    {

      Matter.Body.applyForce(bob, {x:0,y:0}, { x: 0.20, y: 0 })

    }

}