let vaporwave = ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96"];

const Y_AXIS = 1;

const X_AXIS = 2;

const referenceSize = 1000;

const hasMaxSize = true;

​

function setup() {

  createCanvas(2000, 2000);

​

  setGradient(

    0,

    0,

    width,

    height,

    color(random(vaporwave)),

    color(random(vaporwave)),

    Y_AXIS

  );

​

  background(20);

​

  let targets = [];

  for (let _ = 0; _ < 25; _++) {

    targets.push({ x: random(0, width), y: random(0, height) });

  }

​

  let w = 5;

  for (let _ = 0; _ < 100000; _++) {

    let c = random(vaporwave);

​

    noFill();

    stroke(color(c));

    // drawShadow(-2, -2, 10, color(20));

​

    let t = random(targets);

    let t2 = random(targets);

​

    while (t == t2) t2 = random(targets);

​

    drawShadow(-2, -2, 10, color(random(vaporwave)));

    fill(0);

    ellipse(t.x, t.y, 20, 20);

    ellipse(t2.x, t2.y, 40, 40);

    drawShadow(0, 0, 0, color(20));

    noFill();

    while (dist(t.x, t.y, t2.x, t2.y) > 0.01) {

      let dx = t2.x - t.x;

      let dy = t2.y - t.y;

​

      rect(t.x, t.y, w, w);

​

      t.x += dx * easing;

      t.y += dy * easing;

    }

  }

​

  dither(null);

  loadPixels();

  let tw = 12;

  textFont("Consolas");

  textSize(tw);

  textAlign(CENTER);

  let htw = tw / 2;

  for (let y = htw; y < height; y+=tw) {

    for (let x = htw; x < width; x += tw) {

    }

  }

​

  //   let dx = targetX - x;

  // x += dx * easing;

}

​

function draw() {

  // background(220);

}

​

function index(g, x, y) {

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

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

}

let getPixelID = (g = null, x, y) => {

  let _density;

  if (g == null) _density = pixelDensity();

  else _density = g.pixelDensity();

​

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

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

};

function DivideBy255(value) {

  return (value + 1 + (value >> 8)) >> 8;

}

function dither(g) {

  if (g == null) {

    let _scale = Math.ceil(1, map(width, 0, referenceSize, 0, 1, hasMaxSize));

    loadPixels();

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

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

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

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

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

​

        let newr = (DivideBy255(oldr) * 255) | 0;

        let newg = (DivideBy255(oldg) * 255) | 0;

        let newb = (DivideBy255(oldb) * 255) | 0;

​

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

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

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

​

        for (let _y = 1; _y <= _scale; _y++) {

          for (let _x = 1; _x <= _scale; _x++) {

            pixels[getPixelID(g, x + _x, y)] += ((oldr - newr) * 7) >> 4;

            pixels[getPixelID(g, x + _x, y) + 1] += ((oldr - newr) * 7) >> 4;

            pixels[getPixelID(g, x + _x, y) + 2] += ((oldr - newr) * 7) >> 4;

​

            pixels[getPixelID(g, x - _x, y + _y)] += ((oldr - newr) * 3) >> 4;

            pixels[getPixelID(g, x - _x, y + _y) + 1] +=

              ((oldr - newr) * 3) >> 4;

            pixels[getPixelID(g, x - _x, y + _y) + 2] +=

              ((oldr - newr) * 3) >> 4;

​

            pixels[getPixelID(g, x, y + _y)] += ((oldr - newr) * 5) >> 4;

            pixels[getPixelID(g, x, y + _y) + 1] += ((oldr - newr) * 5) >> 4;

            pixels[getPixelID(g, x, y + _y) + 2] += ((oldr - newr) * 5) >> 4;

​

            pixels[getPixelID(g, x + _x, y + _y)] += ((oldr - newr) * 1) >> 4;

            pixels[getPixelID(g, x + _x, y + _y) + 1] +=

              ((oldr - newr) * 1) >> 4;

            pixels[getPixelID(g, x + _x, y + _y) + 2] +=

              ((oldr - newr) * 1) >> 4;

          }

        }

      }

    }

    updatePixels();

  } else {

    let _scale = Math.ceil(1, map(g.width, 0, referenceSize, 0, 1, hasMaxSize));

    g.loadPixels();

    for (let y = 0; y < g.height - _scale; y++) {

      for (let x = _scale; x < g.width - _scale; x++) {

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

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

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

​

        let newr = (DivideBy255(oldr) * 255) | 0;

        let newg = (DivideBy255(oldg) * 255) | 0;

        let newb = (DivideBy255(oldb) * 255) | 0;

​

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

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

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

​

        for (let _y = 1; _y <= _scale; _y++) {

          for (let _x = 1; _x <= _scale; _x++) {

            g.pixels[getPixelID(g, x + _x, y)] += ((oldr - newr) * 7) >> 4;

            g.pixels[getPixelID(g, x + _x, y) + 1] += ((oldr - newr) * 7) >> 4;

            g.pixels[getPixelID(g, x + _x, y) + 2] += ((oldr - newr) * 7) >> 4;

​

            g.pixels[getPixelID(g, x - _x, y + _y)] += ((oldr - newr) * 3) >> 4;

            g.pixels[getPixelID(g, x - _x, y + _y) + 1] +=

              ((oldr - newr) * 3) >> 4;

            g.pixels[getPixelID(g, x - _x, y + _y) + 2] +=

              ((oldr - newr) * 3) >> 4;

​

            g.pixels[getPixelID(g, x, y + _y)] += ((oldr - newr) * 5) >> 4;

            g.pixels[getPixelID(g, x, y + _y) + 1] += ((oldr - newr) * 5) >> 4;

            g.pixels[getPixelID(g, x, y + _y) + 2] += ((oldr - newr) * 5) >> 4;

​

            g.pixels[getPixelID(g, x + _x, y + _y)] += ((oldr - newr) * 1) >> 4;

            g.pixels[getPixelID(g, x + _x, y + _y) + 1] +=

              ((oldr - newr) * 1) >> 4;

            g.pixels[getPixelID(g, x + _x, y + _y) + 2] +=

              ((oldr - newr) * 1) >> 4;

          }

        }

      }

    }

    g.updatePixels();

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis, g) {

  if (g == null) {

    noFill();

​

    if (axis === Y_AXIS) {

      // Top to bottom gradient

      for (let i = y; i <= y + h; i++) {

        let inter = map(i, y, y + h, 0, 1);

        let c = lerpColor(c1, c2, inter);

        stroke(c);

        line(x, i, x + w, i);

      }

    } else if (axis === X_AXIS) {

      // Left to right gradient

      for (let i = x; i <= x + w; i++) {

        let inter = map(i, x, x + w, 0, 1);

        let c = lerpColor(c1, c2, inter);

        stroke(c);

        line(i, y, i, y + h);

      }

    }

  } else {

    g.noFill();

​

    if (axis === Y_AXIS) {

      // Top to bottom gradient

      for (let i = y; i <= y + h; i++) {

        let inter = map(i, y, y + h, 0, 1);

        let c = lerpColor(c1, c2, inter);

        g.stroke(c);

        g.line(x, i, x + w, i);

      }

    } else if (axis === X_AXIS) {

      // Left to right gradient

      for (let i = x; i <= x + w; i++) {

        let inter = map(i, x, x + w, 0, 1);

        let c = lerpColor(c1, c2, inter);

        g.stroke(c);

        g.line(i, y, i, y + h);

      }

    }

  }

}

​

// https://p5js.org/reference/#/p5/drawingContext

function drawShadow(x, y, b, c, g = null) {

  if (g == null) {

    drawingContext.shadowOffsetX = x;

    drawingContext.shadowOffsetY = y;

    drawingContext.shadowBlur = b; // * scale;

    drawingContext.shadowColor = c;

  } else {

    g.drawingContext.shadowOffsetX = x;

    g.drawingContext.shadowOffsetY = y;

    g.drawingContext.shadowBlur = b; // * scale;

    g.drawingContext.shadowColor = c;

  }

}

​