let grid;

​

class Particle {

  constructor(x,y,col) {

    this.position = createVector(x, y);

    this.velocity = createVector(random(-0.5,0.5), random(0.15, 0.75));

    this.life = random(10000);

    this.color = col;

  }

  update() {

    this.position.x += this.velocity.x;

    this.position.y += this.velocity.y;

    let _x = int(this.position.x);

    let _y = int(this.position.y);

    if (grid[`${_x}:${_y}`] == true) {

      this.color = color(0,101,164,255);//color(255,0,0);

      this.velocity.x = random(-0.75, 0.75);

      this.velocity.y = random(-0.25, 0.75);

    } else {

      this.color = color(0);

    }

    if (this.position.y >= height-20)

      return false

    else if (this.position.y <= 10) 

      this.velocity.y *= -1.0;

    else if (this.position.x <= 10 || this.position.x >= width-10) {

      this.velocity.x *= -1.0;

      // this.velocity.y *= -1.0;

    } //else

      //return false;

    this.life--;

    if (this.life <= 0) return false;

    if (this.position.y > height/2) {

      if (random() > 0.9) {

        this.velocity.x = random(-0.25, 0.25);

        if (random() > 0.8) {

          this.velocity.y = random(-0.5, 0.5);

        }

      }

      // let _b = map(this.position.y, height/2,height-10,0,255);

      let _a = map(this.position.y, height/2,height-10,255, 0);

      this.color._array[3] = _a/255;

      // this.color=color(40,_b,_b, _a);

      // this.color = color(0,0,0,_a);

    }

    return true;

  }

  draw() {

    noStroke();

    fill(this.color);

    circle(this.position.x, this.position.y, 1);

  }

}

function preload() {

  img = loadImage("gvsu-logo-1000.png");

}

​

function drawBG() {

  background(180);

  stroke(0);

  strokeWeight(0.5);

  fill(1);

  rect(10,10,width-20,height-20);

  stroke(255);

  strokeWeight(0.5);

  fill(200);

  rect(20,20,width-40,height-40);

  push();

  // scale(2);

  image(img,298,298);//100,100);

  pop();

  loadPixels();

  let d = 1;

  for (let y = 11; y < height-20; y++) {

    for (let x = 11; x < width-20; x++) {

            let index = 4 * (y * d * width * d + x * d);

      if (

              pixels[index] == 0 &&

              pixels[index + 1] == 0 &&

              pixels[index + 2] == 0

            ) {

        grid[`${x}:${y}`] = true;

      }

    }

  }

}

function setup() {

  grid = {};

  pixelDensity(1);

  // createCanvas(1000, 1000);

  createCanvas(1562,1562);

  // mpix recommends 1562x156x

  drawBG();

  particles = [];  

  for (let i = 0; i < 3000; i++) {//1000; i++) {

    particles.push(new Particle(random(11,width-20),10, color(0)));

  }

}

​

function draw() {

  for (let i = particles.length-1; i >= 0; i--) {

    let r = particles[i].update();

    if (r)

      particles[i].draw();

    else 

      particles.splice(i, 1);

  }

  if (particles.length === 0) {

    console.log("done");

    // noStroke();

    // fill(255,255,255,50);

    // rect(20,height/2-20,width-40,40);

    // beginShape();

    // vertex(-50,50);

    // vertex(50,-50);

    // vertex(width+50,height-50);

    // vertex(width-50,height+50);

    // endShape(CLOSE);

    noLoop();

  }

}