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(random(255),0,0,random(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=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("og-image.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);

  // image(img,70,100);

  fill(color(0,255,0));

  textSize(100);

  textFont('Helvetica');

  textAlign(CENTER,CENTER);

  text("💚", width/2,150);

  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(400,400);//1000, 1000);

  drawBG();

  particles = [];  

  let _n = 2500;

  for (let i = 0; i < _n; 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");

    noLoop();

  }

}