let Engine = Matter.Engine,

    World = Matter.World,

    Bodies = Matter.Bodies;

​

let engine, world;

​

let dia = 2;

let points = [];

let txt;

let font;

​

function preload() {

  font = loadFont('hershey_futura.otf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // Initialize Matter.js engine and world

  engine = Engine.create();

  world = engine.world;

​

  getText();

}

​

function draw() {

  background(255);

  // Update Matter.js engine

  Engine.update(engine);

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

    points[i].display();

    points[i].update();

  }

}

​

class bitty {

  constructor(x, y, r, a) {

    this.static = true;

    this.angle = a;

    this.rad = r;

    this.r = 0;

    this.g = 0;

    this.b = 0;

    this.opacityR = random(255);

    this.opacity = 255;

    // Create a Matter.js circle body

    this.body = Bodies.circle(x, y, r, { isStatic: this.static });

    World.add(world, this.body);

  }

  display() {

    let position = this.body.position;

    let angle = this.body.angle;

​

    noStroke();

    fill(this.r, this.g, this.b, this.opacity);

​

    push();

    translate(this.body.position.x, this.body.position.y);

    rotate(angle);

    ellipse(0, 0, this.rad * 2); // Use diameter for drawing

    pop();

  }

  update() {

    let mouse = new p5.Vector(mouseX, mouseY);

    //this.position = this.body.position;

    if (mouse.dist(this.body.position) < 20) {

      this.static = false;

      Matter.Body.setStatic(this.body, false); // Make the body dynamic

    }

​

    if (!this.static) {

      this.r = 0;

      this.g = 0;

      this.b = 255;

      this.opacity = this.opacityR;

​

      if (position.y > (height - this.rad)) {

        Matter.Body.setVelocity(this.body, { x: 0, y: 0 }); // Stop the body when it hits the bottom

        Matter.Body.setPosition(this.body, { x: position.x, y: height - this.rad });

      }

    }

  } 

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  getText();

}

​

function keyPressed() {

  getText();

}

​

function getText() {

  let starts = [0, 1, 2, 3, 4, 5, 6];

  let start = random(starts);

  points = [];

  background(255);

  txt = "Jean Y. Kim";

  dia = 3.5;

  if (width > 800) {

    txt = "Jean Y. Kim";

  } else {

    txt = "JYK";

  }

  fill(0);

  textSize(220);

  textWrap(CHAR);

  textFont(font);

  textAlign(LEFT, TOP);

  text(txt, 0, -60, width);

  loadPixels();

  for (let x = start; x < width; x += dia * 2) {

    for (let y = 0; y < height; y += dia * 2) {

      let c = get(x, y);

      let b = brightness(c);

      if (b === 0) {

        points.push(new bitty(x, y, dia, random(360)));

      }

    }

  }

}

​