let y = 0;

let spacing = 30;

​

let Engine = Matter.Engine,

  World = Matter.World,

  Body = Matter.Body,

  Bodies = Matter.Bodies;

​

let engine;

let world;

let sides = [];

let balls = [];

​

function setup() {

  createCanvas(800, 800);

  background(0);

  engine = Engine.create();

  world = engine.world;

  while (y <= width) {

    var r = random(1);

    if (r < 1 / 6) {

      // Left side of square

      // line(x, y, x, y + spacing);

      sides.push(new Side(x, y, x, y + spacing));

    } else if (r < 1 / 3) {

      // Right side of square

      // line(x + spacing, y, x + spacing, y + spacing);

      sides.push(new Side(x + spacing, y, x + spacing, y + spacing));

    } else if (r < 1 / 2) {

      // Top side of square

      // line(x, y, x + spacing, y);

      sides.push(new Side(x, y, x + spacing, y));

    } else if (r < 2 / 3) {

      // Bottom side of square

      // line(x, y + spacing, x + spacing, y + spacing);

      sides.push(new Side(x, y + spacing, x + spacing, y + spacing));

    } else if (r < 5 / 6) {

      // Forward slash

      // line(x + spacing, y, x, y + spacing);

      sides.push(new Side(x + spacing, y, x, y + spacing));

    } else {

      // Backward slash

      // line(x, y, x + spacing, y + spacing);

      sides.push(new Side(x, y, x + spacing, y + spacing));

    }

    x = x + spacing;

    if (x >= width) {

      x = 0;

      y = y + spacing;

    }

  }

​

  for (var i = spacing / 2; i < width; i += spacing * 2) {

    for (var j = spacing / 2; j < height; j += spacing * 2) {

      let optionsCircle = {

        friction: 0,

        restitution: 0.5

      }

      let b = Bodies.circle(i, j, spacing / 4, optionsCircle);

      World.add(world, b);

      Body.applyForce(b, b.position, p5.Vector.div(p5.Vector.random2D(), 300));

      balls.push(b);

    }

  }

}

​

function mousePressed() {

  let optionsCircle = {

    friction: 0,

    restitution: 0.5

  }

  let b = Bodies.circle(mouseX, mouseY, spacing / 4, optionsCircle);

  World.add(world, b);

  balls.push(b);

}

​

function draw() {

  background(0);

  Engine.update(engine);

  for (let s of sides) {

    s.show();

  }

  for (let b of balls) {

    push();

    stroke(255);

    strokeWeight(2);

    noFill();

    translate(b.position.x, b.position.y);

    rotate(b.angle);

    ellipse(0, 0, spacing / 2);

    line(0, 0, spacing / 4, 0);

    // ellipse(b.position.x, b.position.y, 20);

    pop();

  }

}