Cloth Matter.js

//Module aliases

​

var Engine = Matter.Engine,

    //Render = Matter.Render,

    World = Matter.World,

    Bodies = Matter.Bodies,

    Constraints = Matter.Constraint,

    Mouse = Matter.Mouse,

    Body = Matter.Body,

    MouseConstraint = Matter.MouseConstraint;

​

var engine;

var world;

var particles = [];

var constraints = [];

var ground;

var bar;

var mConstraint;

​

​

// Imagine a 3x3

// y   0 1 2 <-x

// 0:  0 3 6  

// 1:  1 4 7 

// 2:  2 5 8 

​

// i = x + y

// i = x*rowtotal+y

​

function setup() {

  var canvas = createCanvas(windowWidth, windowHeight);

  engine = Engine.create();

  world = engine.world;

  Engine.run(engine);

  rectMode(CENTER);

  // bar = new Bod(width/2,25,0,20,width-500,90,"rectangle",color(255),true);

  // ground = new Bod(0,height,0,width*2,10,0,"rectangle",color(255),true);

    // var p = new Bod(width/2,100,20,0,0,0,"circle",color(random(0,255),random(0,255),random(0,255)),true);

    // particles.push(p);

  for(let x  = 0; x<7;x++){

    for(let y = 0; y<7; y++){

      var i = (x*7)+y;

      //x,y,size,w,h,boundAng,shape,col,stat

      particles[i]= new Bod((width/2-300)+(100*x),100+100*y,20,0,0,0,"circle",color(random(0,255),random(0,255),random(0,255)),false);

      if(y ==0){

        var options = {

          bodyA: particles[i].body,

          // bodyB: bar.body,

          length: 35,

          stiffness: 0.035,

          pointA: {x:0,y:0},

          pointB: {x:(width/2-300)+(100*x),y:100+100*y},

        }

        constraints.push(new Constraint(options));

      }else if(y !=0){

        var options = {

          bodyA: particles[i-1].body,

          bodyB: particles[i].body,

          length: 75,

          stiffness: 0.035,

          pointA: {x:0,y:0},

          pointB: {x:0,y:0},

        }

        constraints.push(new Constraint(options));

      }

       if(x != 0){

        var options = {

          bodyA: particles[i-7].body,

          bodyB: particles[i].body,

          length: 100,

          stiffness: 0.035,

          pointA: {x:0,y:0},

          pointB: {x:0,y:0},

        }

        constraints.push(new Constraint(options));

      }

    }

  }

  var canvasmouse = Mouse.create(canvas.elt);

  canvasmouse.pixelRatio = pixelDensity();

  var options2 = {

    mouse:canvasmouse

  }

  mConstraint = MouseConstraint.create(engine, options2);

  World.add(world,mConstraint);

}

​

function draw() {

  background(0,0,0);

  fill(0);

  // ground.show();

  checkKeys();

  // bar.show();

  for(var p of particles){

    p.show();

  }

  if(mConstraint.body){

    var pos = mConstraint.body.position;

    var offset = mConstraint.constraint.pointB;

    var m =  mConstraint.mouse.position;

    stroke(0,255,0);

    line(pos.x+offset.x,pos.y+offset.y,m.x,m.y);

  }

  for(var c of constraints){

    c.show();

  }

}

function keyPressed(){

  if(keyCode == 32){

    destroyAll();

  }

}

function checkKeys(){

  if(keyIsDown(RIGHT_ARROW)){

    for(p of particles){

      Body.applyForce(p.body,{x:p.body.position.x,y:p.body.position.y},{x:.0007,y:-.0005})

    }

  }else if(keyIsDown(LEFT_ARROW)){

    for(p of particles){

      Body.applyForce(p.body,{x:p.body.position.x,y:p.body.position.y},{x:-.0007,y:-.0005})

    }

  }else if(keyIsDown(DOWN_ARROW)){

    for(p of particles){

      Body.applyForce(p.body,{x:p.body.position.x,y:p.body.position.y},{x:0,y:.0015})

    }

  }else if(keyIsDown(UP_ARROW)){

    for(p of particles){

      Body.applyForce(p.body,{x:p.body.position.x,y:p.body.position.y},{x:0,y:-.0015})

    }

  }

}

function destroyAll(){

  for(var i = constraints.length-1; i>=0; i--){

    constraints[i].delete();

    constraints.splice(i,1);

  }

}

class Constraint{

  constructor(options){

    this.constraint = Constraints.create(options);

    World.add(world,this.constraint);

  }

  show(){

    if(this.constraint.bodyB){

      var posA = this.constraint.bodyA.position;

      var posB = this.constraint.bodyB.position;

    }else if(!this.constraint.bodyB){

      var posA = this.constraint.bodyA.position;

      var posB = this.constraint.pointB;

    }

    stroke(255);

    line(posA.x,posA.y,posB.x,posB.y);

  }

  delete(){

    World.remove(world,this.constraint);

  }

}

class Bod{

  constructor(x,y,size,w,h,boundAng,shape,col,stat){

    this.size = size;

    this.w= w;

    this.h = h;

    this.shape = shape;

    this.static = stat;

    this.col = col;

    let options = {

      isStatic: this.static,

      angle: radians(boundAng),

      friction:0,

    }

    if(this.shape == "rectangle"){

      this.body = Bodies.rectangle(x,y,this.w,this.h, options);

    }if(this.shape == "circle"){

      this.body = Bodies.circle(x,y,this.size, options);

    }

    World.add(world,this.body);

  }

  show(){

    var pos = this.body.position;

    var angle = this.body.angle;

    strokeWeight(3);

    stroke(this.col);

    push();

    translate(pos.x,pos.y);

    rotate(angle);

    if(this.shape == "rectangle"){

        rect(0,0,this.w,this.h);

      }if(this.shape == "circle"){

        ellipse(0,0,this.size*2,this.size*2);

        rect(0,0,this.size*1.25,this.size*1.25);

      } 

    pop();

  }

  // ifOffScreen(){

  //  return (this.body.position.y > height+100);

  // }

  // removeFromWorld(){

  //  World.remove(world,this.body);

  // }

}