let off;

let particles;

let gfx;

​

class Particle {

  constructor(x, y, size, col) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.col = col;

    this.life1 = random(10, height);

    this.life2 = random(10, height);

    this.width = random(off / 4, off);

    this.dir = random([true,false]);

    this.ydir = true;

  }

​

  update() {

    if (this.y < height-base_y) return false;

​

    if (random(0,1000) > 998) this.ydir = !this.ydir;

    if (this.life1 > 0) {

      if (this.ydir)

        this.y-=random(1.0,1.5);

      else

        this.y+=random(1.0,1.5);

      if (this.y > base_y) {

        this.y = base_y;

        this.ydir = !this.ydir;

      }

      this.life1--;

      return true;

    } else if (this.life2 > 0) {

      if (this.ydir)

        this.y-=random(1.0,1.5);

      else

        this.y+=random(1.0,1.5);

      if (this.y > base_y) {

        this.y = base_y;

        this.ydir = !this.ydir;

      }

      if (this.dir)

        this.x -= random(0.1, 0.5);

      else

        this.x += random(0.1,0.5);

      if (this.x < off) {

        this.x = off;

        this.dir = !this.dir;

      }

      if (this.x+this.width > width-off) {

        this.x = width-off-this.width;

        this.dir = !this.dir;

      }

      this.life2--;

      return true;

    } else {

      return false;

    }

  }

​

  draw() {

    gfx.noFill();

    gfx.stroke(this.col);

    gfx.strokeWeight(this.size);

    gfx.line(this.x, this.y, this.x + this.width, this.y);

  }

}

​

function setup() {

  createCanvas(1000, 1000);

  pixelDensity(1);

  gfx = createGraphics(width, height);

  base_y = random(height - 20, height - height / 4);

  off = width * 0.1;

​

  background(220);

​

  stroke(0);

  strokeWeight(0.5);

  line(off, base_y, width - off, base_y);

​

  particles = [];

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

    particles.push(

      new Particle(

        random(off, width - 2 * off),

        base_y,

        random(0.25, 0.75),

        random(color(random(0, 100)))

      )

    );

  }

}

​

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");

    stroke(0);

    strokeWeight(0.5);

    line(off, height-base_y, width - off, height-base_y);

    // chonk feature

    dither(null);

    let img = createImage(gfx.width,gfx.height);

    img.copy(gfx, 0, 0, gfx.width, gfx.height, 0, 0, gfx.width, gfx.height);

    // img.filter(POSTERIZE);

    for (let i = -1; i >= -25; i-=4) {

      push();

      tint(255,map(i,0,-10,200,0));

      image(img,i, i);

      pop();  

    }

    image(gfx,0,0);

    // dither(gfx);

    noLoop();

  }

}

​

function index(g, x, y) {

  if (g == null) return (x + y * width) * 4;

  else return (x + y * g.width) * 4;

}

​

function dither(g) {

  if (g == null) {

    loadPixels();

    for (let y = 0; y < height - 1; y++) {

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

        let oldr = pixels[index(g, x, y)];

        let oldg = pixels[index(g, x, y) + 1];

        let oldb = pixels[index(g, x, y) + 2];

​

        let factor = 1.0;

        let newr = round((factor * oldr) / 255) * (255 / factor);

        let newg = round((factor * oldg) / 255) * (255 / factor);

        let newb = round((factor * oldb) / 255) * (255 / factor);

​

        pixels[index(g, x, y)] = newr;

        pixels[index(g, x, y) + 1] = newg;

        pixels[index(g, x, y) + 2] = newb;

​

        pixels[index(g, x + 1, y)] += ((oldr - newr) * 7) / 16.0;

        pixels[index(g, x + 1, y) + 1] += ((oldr - newr) * 7) / 16.0;

        pixels[index(g, x + 1, y) + 2] += ((oldr - newr) * 7) / 16.0;

​

        pixels[index(g, x - 1, y + 1)] += ((oldr - newr) * 3) / 16.0;

        pixels[index(g, x - 1, y + 1) + 1] += ((oldr - newr) * 3) / 16.0;

        pixels[index(g, x - 1, y + 1) + 2] += ((oldr - newr) * 3) / 16.0;

​

        pixels[index(g, x, y + 1)] += ((oldr - newr) * 5) / 16.0;

        pixels[index(g, x, y + 1) + 1] += ((oldr - newr) * 5) / 16.0;

        pixels[index(g, x, y + 1) + 2] += ((oldr - newr) * 5) / 16.0;

​

        pixels[index(g, x + 1, y + 1)] += ((oldr - newr) * 1) / 16.0;

        pixels[index(g, x + 1, y + 1) + 1] += ((oldr - newr) * 1) / 16.0;

        pixels[index(g, x + 1, y + 1) + 2] += ((oldr - newr) * 1) / 16.0;

      }

    }

    updatePixels();

  } else {

    g.loadPixels();

    for (let y = 0; y < height - 1; y++) {

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

        let oldr = g.pixels[index(g, x, y)];

        let oldg = g.pixels[index(g, x, y) + 1];

        let oldb = g.pixels[index(g, x, y) + 2];

​

        let factor = 1.0;

        let newr = round((factor * oldr) / 255) * (255 / factor);

        let newg = round((factor * oldg) / 255) * (255 / factor);

        let newb = round((factor * oldb) / 255) * (255 / factor);

​

        g.pixels[index(g, x, y)] = newr;

        g.pixels[index(g, x, y) + 1] = newg;

        g.pixels[index(g, x, y) + 2] = newb;

​

        g.pixels[index(g, x + 1, y)] += ((oldr - newr) * 7) / 16.0;

        g.pixels[index(g, x + 1, y) + 1] += ((oldr - newr) * 7) / 16.0;

        g.pixels[index(g, x + 1, y) + 2] += ((oldr - newr) * 7) / 16.0;

​

        g.pixels[index(g, x - 1, y + 1)] += ((oldr - newr) * 3) / 16.0;

        g.pixels[index(g, x - 1, y + 1) + 1] += ((oldr - newr) * 3) / 16.0;

        g.pixels[index(g, x - 1, y + 1) + 2] += ((oldr - newr) * 3) / 16.0;

​

        g.pixels[index(g, x, y + 1)] += ((oldr - newr) * 5) / 16.0;

        g.pixels[index(g, x, y + 1) + 1] += ((oldr - newr) * 5) / 16.0;

        g.pixels[index(g, x, y + 1) + 2] += ((oldr - newr) * 5) / 16.0;

​

        g.pixels[index(g, x + 1, y + 1)] += ((oldr - newr) * 1) / 16.0;

        g.pixels[index(g, x + 1, y + 1) + 1] += ((oldr - newr) * 1) / 16.0;

        g.pixels[index(g, x + 1, y + 1) + 2] += ((oldr - newr) * 1) / 16.0;

      }

    }

    g.updatePixels();

  }

}

​