* Creative Coding Workshop #4 Preview - Colorful Particles

 *

 * Jack B. Du (github@jackbdu.com)

 */

​

let particles = [];

​

function setup() {

  createCanvas(512, 512);

  colorMode(HSL);

  frameRate(60);

}

​

function draw() {

  background(0);

  if (mouseIsPressed) {

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

      particles.push(new Particle(mouseX, mouseY, random(10,20)));

    } 

  }

  for (let p of particles) {

    p.update(); 

    p.display();

  } 

}

class Particle {

  constructor(x, y, d) {

    this.x = x;

    this.y = y; 

    this.d = d;

    if (dist(mouseX, mouseY, width/2, height/2) > 50) {

      this.xMovement = (mouseX-width/2)/20 + random(-2,2);

      this.yMovement = (mouseY-height/2)/20 + random(-2,2);

    // in order to avoid slow speed

    } else {

      this.xMovement = random(1, 3)*random([-1, 1]);

      this.yMovement = random(1, 3)*random([-1, 1]);

    }

    this.c = color(random(360),100,60);

  }

  update() {

    this.x = this.x + this.xMovement; 

    this.y = this.y + this.yMovement;

  }

​

  display() {

    // invisible circular boundary

    if (dist(this.x, this.y, width/2, height/2) < width/2 - this.d/2) {

    // canvas boundary

    // if (this.x < this.w - this.d/2 &&

    //     this.x > this.d/2 &&

    //     this.y < this.h - this.d/2 &&

    //     this.y > this.d/2) {

      fill(this.c);

      strokeWeight(0);

      circle(this.x, this.y, this.d);

    }

  }

}

​