----- Coding Tutorial by Patt Vira ----- 

Name: Springy Chain with matter.js (w/o p5.js)

Video Tutorial: https://youtu.be/sWUxWiJqocM

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

const {Engine, Body, Bodies, Composite, Composites, Constraint, Mouse, MouseConstraint, Render, Runner} = Matter;

​

let engine;

let bodies = []; let ground; let num = 15; let radius = 10; let length = 25;

let chains, mouse, mouseConstraint;

​

​

function setup() {

  noCanvas();

  engine = Engine.create();

  render = Render.create({

    element: document.body,

    engine: engine,

    options: {

      width: 400,

      height: 400

    }

  });

  mouse = Mouse.create(document.body);

  mouseConstraint = MouseConstraint.create(engine, mouse);

  for (let i=0; i<num; i++) {

    let x = 200 + i * 20;

    let y = random(10, 40);

    let fixed; 

    if (i == 0) {

      fixed = true;

    } else {

      fixed = false;

    }

    bodies[i] = Bodies.circle(x, y, radius, {isStatic: fixed});

  }

  chains = Composite.create();

  Composite.add(chains, bodies);

  let options = {

    stiffness: 1,

    length: length

  }

  Composites.chain(chains, 0, 0, 0, 0, options);

  ground = Bodies.rectangle(200, 350, 400, 10, {isStatic: true});  

  Composite.add(engine.world, [chains, ground, mouseConstraint]);

  Render.run(render);

  runner = Runner.create();

  Runner.run(runner, engine);

}