Matter-many

var engine;

var boxes = []

//var colors = "f6bd60-f7ede2-f5cac3-84a59d-f28482".split("-").map(a=>"#"+a)

​

function setup() {

  createCanvas(1112, 834);

  colorMode(HSB, 255);

  background(0);

  let {Engine,Bodies,World} = Matter

  engine = Engine.create()

  let boxA = Bodies.rectangle(-1000,200,8,8)  // don't show this box on screen!

  let ground = Bodies.rectangle(width/2,height*.7,width,50,{isStatic: true})

  boxes.push(ground)

  World.add(engine.world,[boxA,ground])

  Engine.run(engine)

}

​

function generateNewBox(){

  let {Engine,Bodies,World} = Matter

  let boxA = Bodies.rectangle(mouseX,mouseY,8,8)  

  boxA.color = color(random(255), 255, 255);

  boxes.push(boxA)

  World.add(engine.world,boxA)

}

​

function mousePressed(){

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

  generateNewBox()}

}

​

function draw() {

  // ellipse(mouseX, mouseY, 20, 20);

  background(0)

  for(let box of boxes){

    fill(box.color || 'white')

    beginShape()

    for(let vert of box.vertices){

      vertex(vert.x,vert.y)

    }

    endShape()

  }

}

​

function keyPressed(){ 

  save('pix.jpg');  

}