function preload() {

  // img = loadImage("images.png");

  img = loadImage("31846.png");

}

​

function setup() {

  createCanvas(img.width, img.height);

  pixelDensity(1);

  image(img, 0, 0);

​

  loadPixels();

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

    for (let x = 0; x < width; x++) {

      const idx = getPixelID(x, y);

      if (pixels[idx] == 0 && pixels[idx + 1] == 0 && pixels[idx + 2] == 128) {

        pixels[idx] = 0;

        pixels[idx + 1] = 0;

        pixels[idx + 2] = 0;

      }

    }

  }

  updatePixels();

​

  let top = [];

  let top_col = 0;

  loadPixels();

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

    for (let x = 0; x < width; x++) {

      const idx = getPixelID(x, y);

      let avg = (pixels[idx] + pixels[idx + 1] + pixels[idx + 2]) / 3;

      if (avg > top_col) top_col = avg;

    }

  }

​

  top_col *= 0.75;

  loadPixels();

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

    for (let x = 0; x < width; x++) {

      const idx = getPixelID(x, y);

​

      let avg = (pixels[idx] + pixels[idx + 1] + pixels[idx + 2]) / 3;

      // console.log(top_col, avg);

      if (avg >= top_col) {

        top.push({

          x: x,

          y: y,

          c: color(pixels[idx], pixels[idx + 1], pixels[idx + 2]),

        });

      }

    }

  }

​

  loadPixels();

  console.log(top[0], top_col);

  for (let t of top) {

    stroke(t.c);

    for (let _y = 0; _y < 50; _y++) {

      if (t.y + _y < height) {

        const idx = getPixelID(t.x, t.y + _y);

        let next_col = color(pixels[idx],pixels[idx+1],pixels[idx+2]);

        let new_col = lerpColor(t.c, next_col, map(_y, 0, 50, 1.0, 0.0))

        pixels[idx] = new_col.red;

        pixels[idx + 1] = new_col.green;

        pixels[idx + 2] = new_col.blue;

      }

    }

  }

  updatePixels();

}

​

function draw() {

  // background(220);

}

​

function getPixelID(_x, _y) {

  let _density = pixelDensity();

  const idx = 4 * _density * (int(_y) * _density * width + int(_x));

  return idx;

}

​