let step, theta, r;

let circs;

let targets;

let easing = 0.05;

let circ_timer = 150;

let bgpixels;

​

let launched = false;

function keyPressed() {

  if (key == "s") launched = true;

}

function setup() {

  angleMode(RADIANS);

​

  createCanvas(1000, 1000);

  gfx = createGraphics(width, height);

  gfx2 = createGraphics(width, height);

​

  r = 100;

  theta = 0;

  step = TWO_PI / 32;

​

  drawShadow(2, 2, 2, gfx);

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

  gfx.noStroke();

  gfx.fill(120);

  gfx.circle(0, 0, width / 8);

  makeDithered(gfx, 1);

​

  gfx2.background(255);

  drawShadow(2, 2, 2, gfx2);

  gfx2.noStroke();

  gfx2.fill(color(0, 255, 0, 100));

  gfx2.rect(0, 0, width / 2, height / 2);

  gfx2.fill(color(0, 0, 255, 100));

  gfx2.rect(width / 2, 0, width / 2, height / 2);

  gfx2.fill(color(255, 0, 0, 100));

  gfx2.rect(0, height / 2, width / 2, height / 2);

  gfx2.fill(color(120, 120, 120, 100));

  gfx2.rect(width / 2, height / 2, width / 2, height / 2);

  makeDithered(gfx2, 1);

  image(gfx2, 0, 0);

  // image(gfx,0,0);

​

  push();

  translate(-width / 4, -height / 4);

  image(gfx, 0, 0);

  pop();

​

  push();

  tint(204, 0, 0, 126);

  translate(width / 4, -height / 4);

  image(gfx, 0, 0);

  pop();

​

  push();

  tint(0, 153, 204, 126);

  translate(-width / 4, height / 4);

  image(gfx, 0, 0);

  pop();

​

  push();

  tint(0, 204, 153, 126);

  translate(width / 4, height / 4);

  image(gfx, 0, 0);

  pop();

​

  push();

  let g = createGraphics(width, height);

  let o = 20;

  g.fill(0);

  g.noStroke();

  g.rect(0, 0, width, o);

  g.rect(0, 0, o, height);

  g.rect(width - o, 0, o, height);

  g.rect(0, height - o, width, o);

  image(g, 0, 0);

  pop();

​

  circs = [];

  targets = [

    { x: -width / 4, y: -height / 4, color: color(120) },

    { x: width / 4, y: -height / 4, color: color(255, 0, 0, 120) },

    { x: width / 4, y: height / 4, color: color(0, 255, 0, 120) },

    { x: -width / 4, y: height / 4, color: color(0, 0, 255, 120) },

  ];

  circs.push({

    x: -width / 4,

    y: -height / 4,

    target: 1,

    timer: circ_timer,

  });

​

  // bg_gfx.copy(0,0,width,height,0,0,width,height);

  loadPixels();

  bgpixels = new Array(pixels.length);

  for (let i = 0; i < pixels.length; i++) bgpixels[i] = pixels[i];

}

​

function draw() {

  if (launched) {

    loadPixels();

    for (let i = 0; i < pixels.length; i++) pixels[i] = bgpixels[i];

    updatePixels();

    // image(bg_gfx, 0, 0);

    translate(width / 2, height / 2);

    for (let i = 0; i < circs.length; i++) {

      // fill(color(120, 120, 120, 100));

​

      let c = circs[i];

      let t = targets[c.target];

​

      noStroke();

      let last = c.target - 1;

      if (last < 0) last = targets.length - 1;

      fill(color(120,120,120,map(c.timer,circ_timer,0,255,0)))

      // fill(

      //   lerpColor(

      //     targets[last].color,

      //     targets[c.target].color,

      //     map(c.timer,circ_timer,0,0.4,0.5)

      //   )

      // );

​

      let dx = t.x - c.x;

      c.x += dx * easing;

      let dy = t.y - c.y;

      c.y += dy * easing;

​

      drawShadow(2, 2, 2, null);

      circle(c.x, c.y, width / 8);

​

      c.timer--;

      if (c.timer <= 0) {

        c.timer = circ_timer;

        c.target++;

        if (c.target > targets.length - 1) c.target = 0;

      }

    }

  }

  // console.log("done");

  // noLoop();

}

​

function drawShadow(b, x, y, g) {

  if (g != null) {

    g.drawingContext.shadowOffsetX = x;

    g.drawingContext.shadowOffsetY = y;

    g.drawingContext.shadowBlur = b;

    g.drawingContext.shadowColor = color(120); //"black";

  } else {

    drawingContext.shadowOffsetX = x;

    drawingContext.shadowOffsetY = y;

    drawingContext.shadowBlur = b;

    drawingContext.shadowColor = color(120); //"black";

  }

}

​

// dithering - https://editor.p5js.org/codingtrain/sketches/-YkMaf9Ea

function imageIndex(img, x, y) {

  return 4 * (x + y * img.width);

}

​

function getColorAtindex(img, x, y) {

  let idx = imageIndex(img, x, y);

  let pix = img.pixels;

  let red = pix[idx];

  let green = pix[idx + 1];

  let blue = pix[idx + 2];

  let alpha = pix[idx + 3];

  return color(red, green, blue, alpha);

}

​

function setColorAtIndex(img, x, y, clr) {

  let idx = imageIndex(img, x, y);

​

  let pix = img.pixels;

  pix[idx] = red(clr);

  pix[idx + 1] = green(clr);

  pix[idx + 2] = blue(clr);

  pix[idx + 3] = alpha(clr);

}

​

// Finds the closest step for a given value

// The step 0 is always included, so the number of steps

// is actually steps + 1

function closestStep(max, steps, value) {

  return round((steps * value) / 255) * floor(255 / steps);

}

​

function makeDithered(img, steps) {

  img.loadPixels();

​

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

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

      let clr = getColorAtindex(img, x, y);

      let oldR = red(clr);

      let oldG = green(clr);

      let oldB = blue(clr);

      let newR = closestStep(255, steps, oldR);

      let newG = closestStep(255, steps, oldG);

      let newB = closestStep(255, steps, oldB);

​

      let newClr = color(newR, newG, newB);

      if (newR > 10 && newG > 10 && newB > 10)

        setColorAtIndex(img, x, y, newClr);

​

      let errR = oldR - newR;

      let errG = oldG - newG;

      let errB = oldB - newB;

​

      distributeError(img, x, y, errR, errG, errB);

    }

  }

​

  img.updatePixels();

}

​

function distributeError(img, x, y, errR, errG, errB) {

  addError(img, 7 / 16.0, x + 1, y, errR, errG, errB);

  addError(img, 3 / 16.0, x - 1, y + 1, errR, errG, errB);

  addError(img, 5 / 16.0, x, y + 1, errR, errG, errB);

  addError(img, 1 / 16.0, x + 1, y + 1, errR, errG, errB);

}

​

function addError(img, factor, x, y, errR, errG, errB) {

  if (x < 0 || x >= img.width || y < 0 || y >= img.height) return;

  let clr = getColorAtindex(img, x, y);

  let r = red(clr);

  let g = green(clr);

  let b = blue(clr);

  clr.setRed(r + errR * factor);

  clr.setGreen(g + errG * factor);

  clr.setBlue(b + errB * factor);

​

  setColorAtIndex(img, x, y, clr);

}

​