let offset;

let radius;

let ease = 0.005;

const wipetimer = 50;

let wipeactive = 0;

let wipesize;

let paused = false;

​

let accentCol;

let bg;

​

function setup() {

  createCanvas(1000, 1000);

​

  accentCol = random(["#55BD59", "#ff00ff"]);

  bg = 110;

  wipesize = width * 0.1;

  radius = width / 4;

  offset = width * 0.05;

​

  particles = [];

​

  // particles.push({x:offset, y:-height/2, vx:0, vy:1});

  // particles.push({x:-offset, y:height/2, vx:0, vy:-1});

  // particles.push({x:-offset, y:height/2, vx:0, vy:-1, target:0});

  // particles.push({x:random})

​

  for (let i = 0; i < 10; i += 2) {

    let d = random([true, false]);

    if (d)

      particles.push({

        x: random(5, width - 5),

        y: random(5, height - 5),

        vx: 0,

        vy: random([-1, 1]),

        target: false,

      });

    else

      particles.push({

        x: random(5, width - 5),

        y: random(5, height - 5),

        vx: random([-1, 1]),

        vy: 0,

        target: false,

      });

​

    particles.push({

      x: random(5, width - 5),

      y: random(5, height - 5),

      vx: 0,

      vy: random([-1, 1]),

      target: i,

    });

  }

​

  noStroke();

  fill(220);

  // background(0);

​

  frameRate(60);

  background(color(bg));

}

​

function draw() {

  if (!paused) {

    // background(0);

    // translate(width/2, height/2);

​

    for (let p of particles) {

      let col = color(220);

      if (p.target) col = color(accentCol); //color(255,0,255);

      drawShadow(0, 0, 25, color(col));

      fill(col);

      circle(p.x, p.y, 5);

​

      if (!p.target) {

        p.x += p.vx;

        p.y += p.vy;

      } else {

        let dx = particles[p.target].x - p.x;

        let dy = particles[p.target].y - p.y;

​

        p.x += dx * ease;

        p.y += dy * ease;

      }

​

      if (p.y < 0 || p.y > height || p.x < 0 || p.y > height) {

        p.x = random(5, width - 5);

        p.y = random(5, height - 5);

      }

    }

​

    if (frameCount % 300 == 0) {

      wipeactive = wipetimer;

    }

    if (wipeactive > 0) {

      drawShadow(0, 0, 0, 0);

      let b = color(bg);

      b.setAlpha( map(wipeactive, wipetimer, 0, 0, 220)); //120));

      fill(b)

      rect(0, map(wipeactive, wipetimer, 0, 0, height), width, wipesize); //height);

      wipeactive--;

      // if (wipeactive == 0) dither(null);

    }

​

    stroke(color(accentCol));

    noFill();

    rect(offset, offset, width - 2 * offset, height - 2 * offset);

​

    dither(null)

  }

}

​

function keyPressed() {

  if (key == " ") paused = !paused;

}

​

// 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;

  }

}

​

function index(g, x, y) {

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

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

}

​

function DivideBy255(value) {

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

}

function dither(g) {

  let referenceSize = 1000;

  let hasMaxSize = false;

  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[index(g, x, y)];

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

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

​

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

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

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

​

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

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

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

​

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

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

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

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

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

​

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

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

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

​

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

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

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

​

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

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

            pixels[index(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[index(g, x, y)];

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

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

​

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

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

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

​

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

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

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

​

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

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

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

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

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

​

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

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

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

​

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

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

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

​

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

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

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

          }

        }

      }

    }

    g.updatePixels();

  }

}

​