let coX = [];

let coY = [];

let dia = 5;

let points = [];

let txt = "drip"

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255);

  textSize(240);

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  text(txt, width/2, height/2);

  for (let x = 0; 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)));

      }

    }

  }

  angleMode(DEGREES);

//  console.log(points[0].mode);

}

​

function draw() {

  background(240, 240, 255);

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

    points[i].display();

    points[i].update();

  }

}

​

let gravity = new p5.Vector(0,0.1);

​

class bitty {

  constructor(x, y, r, a) {

    this.static = true;

    this.angle = a;

    this.rad = r;

    this.r = 0;

    this.g = 0;

    this.b = 255;

    this.opacityR = random(255);

    this.opacity = 255;

    this.position = new p5.Vector(x, y);

    this.velocity = new p5.Vector();

    this.acceleration = new p5.Vector(0, random(0,0.5));

  }

  display() {

    noStroke();

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

    /*push();

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

      rotate(this.angle);

      ellipse(this.position.x, this.position.y, this.rad, this.rad * 2);

    pop();*/

    ellipse(this.position.x, this.position.y, this.rad * 2, this.rad * 2);

  }

  update() {

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

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

      this.static = false;

    }

    if (this.static === false) {

      this.r = 0;

      this.g = 0;

      this.b = 255;

      this.opacity = this.opacityR;

      //this.acceleration = gravity;

      this.velocity.add(this.acceleration);

      this.position.add(this.velocity);

​

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

        this.position.y = height - this.rad;

      }

    }

  }

}