220115a

let Engine = Matter.Engine;

let World = Matter.World;

let Bodies = Matter.Bodies;

​

let engine;

let world;

let circles = [];

​

function setup() {

  createCanvas(w=720, w);

  pixelDensity(1);

​

  fps = 48;

  frameRate(fps);

  engine = Engine.create();

  world = engine.world;

  let d = 15;

  World.add(world, [

        // walls

        Bodies.rectangle(width/2, 0, width, d, { isStatic: true }),

        Bodies.rectangle(width/2, height/2, width/6, d, { isStatic: true }),

        Bodies.rectangle(width, height/2, d, height, { isStatic: true }),

        Bodies.rectangle(0, height/2, d, height, { isStatic: true })

    ]);

  bg = rand_color();

}

​

function draw() {

  if(frameCount<fps*15){

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

      circles.push(new Circle(width/2+random(-1,1)*width/64, random(height/8), random([1,2])));

    }

  }

​

  background(bg);

  Engine.update(engine);

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

    circles[i].show();

    if(circles[i].body.position.y > height+5){

      circles.splice(i,1);

    }

  }

}

​

​

function Circle(x, y, r) {

  var options = {

    friction: 0.075,

    restitution: 0.001

  };

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

  this.r = r;

  Matter.Body.setMass(this.body, 20);

  Matter.Body.setDensity(this.body, 20)

  World.add(world, this.body);

​

  this.color = rand_color();

​

  this.show = function() {

    let pos = this.body.position;

    let angle = this.body.angle;

    push();

    translate(pos.x, pos.y);

    rotate(angle);

    rectMode(CENTER);

    strokeWeight(0);

    stroke(0);

    fill(this.color);

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

    pop();

  };

}

​

function rand_color(){

  return color(random(["#227c9d", "#17c3b2", "#ffcb77", "#fef9ef", "#fe6d73"]));

}

​

//save PNG

function keyPressed() {

  save("img_" + month() + day() + hour() + minute() + second() + ".png");

}