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

Name: Springy Chain with matter.js (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} = Matter;

​

let engine;

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

let chains, mouse, mouseConstraint;

let colorPalette = ["#abcd5e", "#14976b", "#2b67af", "#62b6de", "#f589a3", "#ef562f", "#fc8405", "#f9d531"]; 

​

​

function setup() {

  createCanvas(400, 400)

  engine = Engine.create();

  mouse = Mouse.create(document.body);

  mouseConstraint = MouseConstraint.create(engine, mouse);

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

    let x = width/2 + 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(width/2, 350, width, 10, {isStatic: true});  

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

}

​

function draw() {

  background(220);

  Engine.update(engine);

  for (let i=0; i<bodies.length; i++) {

    let x1 = bodies[i].position.x;

    let y1 = bodies[i].position.y;

    fill(colorPalette[i % colorPalette.length]);

    ellipse(x1, y1, radius*2, radius*2);

    let x2, y2;

    if (i < bodies.length - 1) {

      x2 = bodies[i + 1].position.x;

      y2 = bodies[i + 1].position.y;

      line(x1, y1, x2, y2);

    }    

  }

  fill(0);

  rectMode(CENTER);

  rect(width/2, 350, width, 10);

}

​