physics with matter.js

index.html

<!--- https://www.youtube.com/watch?v=Iu3M-X1yRFU --> 

physics-with-matter-js.markdown

physics with matter.js

coding after an example from Daniel Shiffman at https://www.youtube.com/watch?v=Iu3M-X1yRFU

A Pen by grilly 🚀 on CodePen.

License.

script.js

var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

var bars = [];
var particles = [];
var bounds = [];

var engine,world;

function setup() {
  createCanvas(600,800);
  rectMode(CENTER);
  // create engine
  engine = Engine.create();
  world = engine.world;
  
  var cols = 10, rows = 10;
  var spacing = width/cols;
  for (var i = 0; i < cols+1; i++) {
    for (var j = 0; j < rows; j++) {
      var x_pos = i*spacing + (j%2?spacing/2:0);
      var y_pos = j*spacing/Math.sqrt(2) + spacing; 
      
      bars.push(new Particle(x_pos, y_pos, 2, {isStatic:true}, 70)); 
    }
  }
 
  // bottom
  bounds.push(new Boundary(width/2,height+50,width,100));
  
  // left
  bounds.push(new Boundary(-50,height/2,100,height));
  
  // right
  bounds.push(new Boundary(width+50,height/2,100,height));
  
  //baskets
  var baskets = cols;
  
  for (var x = 0; x < baskets; x++)  {
    if (x > 0) {
      bounds.push(new Boundary((width/baskets*x), height-150, 2, 300));
    }
    
  }
  
  
}

function addParticle() {
  particles.push(new Particle(width/2+random(2)-1,0, 14));
}

var prevTime; 
var maxAmount = 128;

function draw() {
  background(0x22);
  
  // var time = performance.now();
  // var ms = time - prevTime;
  // prevTime = time;
  
  Engine.update(engine);
  
  if (frameCount % 40 == 0 && particles.length < maxAmount) {
    addParticle();
  }

  
  for (var x = 0; x < bounds.length; x++) {
    var b = bounds[x];
    b.draw();
  }
  for (var x = 0; x < bars.length; x++) {
    var b = bars[x];
    b.draw();
  }
  for (var x = 0; x < particles.length; x++) {
    var p = particles[x];
    p.draw();
  }
  
}


// PARTICLE
function Particle(x,y,r,options,c) {
  this.r = r || 20;
  this.c = c || color(random(100), random(120)+120,random(100)+100);
  this.options = {
    restitution:.9,
    friction :.25
  }
  if (options) this.options.isStatic = options.isStatic;
  
  this.body = Bodies.circle(x,y,this.r,this.options);
  World.add(world,this.body);  
}
Particle.prototype.draw = function() {
  var pos = this.body.position;
  noStroke()
  fill(this.c);
  push();
  translate(pos.x,pos.y);
  ellipse(0,0,this.r * 2);
  pop(); 
}


// BOUNDARY

function Boundary(x,y,w,h,options,c) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  
  this.c = c || 25;
  this.options = {
    restitution:.9,
    friction :0.1,
    isStatic:true,
  }
  this.body = Bodies.rectangle(this.x,this.y,this.w,this.h,this.options);
  World.add(world,this.body);  
}
Boundary.prototype.draw = function() {
  var pos = this.body.position;
  noStroke();
  fill(this.c);
  push();
  translate(pos.x,pos.y);
  rect(0,0,this.w,this.h);
  pop(); 
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>

style.scss

body {
  margin: 0;
  background:#111;
}
canvas {
  display: block;
  margin: auto;
}