const {

  Engine,

  World,

  Bodies,

  Composite,

  Constraint,

  Mouse,

  MouseConstraint,

} = Matter;

​

let engine;

let world;

let mouse, mouseConstraint;

let tentacles = [];

let boundaries = [];

let baseConstraint;

​

function setup() {

  let canvas = createCanvas(400, 400);

  pixelDensity(1); // why??

  background(0);

  // create an engine

  engine = Engine.create();

  world = engine.world;

  mouse = Mouse.create(canvas.elt);

​

  engine.gravity.scale = 0;

​

  for (let n = -20; n < 20; n+=5) {

    let circles = [];

    for (let i = 0; i < 30; i += 1) {

      let r = 1;

      let new_node = new Circle(200+n+n*i, i, r);

      circles.push(new_node);

​

      if (i != 0) {

        let constraint_options = {

          bodyA: circles[circles.length - 1].body,

          bodyB: circles[circles.length - 2].body,

          length: 2 + r,

          stiffness: 0.4-i/400,

        };

        // add r to constraint length, otherwise, the constraint will intend to shrink and cause too vibrant movement

        /* methods to reduce crazy movements:

        1. length += r

        2. decrease stiffness

        3. decrease gravity scale

        4. constraint length not shorter than r

        */

​

        let constraint = Constraint.create(constraint_options);

        Composite.add(world, constraint);

      }

    }

    let base_options = {

    bodyA: circles[0].body,

    pointB: { x:mouseX+n, y:mouseY },

    length: 0,

    stiffness: 0.1,

  };

  base_constraint = Constraint.create(base_options);

  Composite.add(world, base_constraint);

  tentacles.push(circles);

  }

​

//   let base_options = {

//     bodyA: circles[0].body,

//     pointB: { x:mouseX, y:mouseY },

//     length: 0,

//     stiffness: 0.1,

//   };

//   base_constraint = Constraint.create(base_options);

//   Composite.add(world, base_constraint);

​

//   let mouse_options = {

//     mouse: mouse

//   };

//   mouseConstraint = MouseConstraint.create(engine, mouse_options);

//   Composite.add(world, mouseConstraint);

​

​

  boundaries.push(new Boundary(width / 2, height, width, 20, 0));

}

​

function draw() {

  background(0);

  Engine.update(engine);

  // engine.gravity.scale = sin(frameCount/6000)/1000;

​

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

    let circles = tentacles[i];

    for (j = 0; j < circles.length; j ++) {

      circles[j].show();

      if (j > 0) {

        // line(circles[i].body.position.x,

        //     circles[i].body.position.y,

        //     circles[i-1].body.position.x,

        //     circles[i-1].body.position.y)

      }

    }

    circles[i].show();

    if (i > 0) {

      // line(circles[i].body.position.x,

      //     circles[i].body.position.y,

      //     circles[i-1].body.position.x,

      //     circles[i-1].body.position.y)

    }

  }

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

    boundaries[i].show();

  }

  for (let n = 0; n < 8; n++) {

    let offset = (n-4)*5;

    let base_options = {

      bodyA: tentacles[n][0].body,

      pointB: { x:mouseX+offset, y:mouseY },

      length: 0,

      stiffness: 0.5,

    };

    base_constraint = Constraint.create(base_options);

    Composite.add(world, base_constraint);

  }

  fill(255,50);

  ellipse(mouseX, mouseY,50,30);

}

​