let colors, bgcol, col, h;

let x, y;

let glitch, gfx;

let skull, skull2, skull3;

​

let lines;

​

function preload() {

  skull = loadImage("skull2.png");

  skull2 = loadImage("skull2.png");

  skull3 = loadImage("skull2.png");

}

​

function drawShadow(b, s) {

  gfx.drawingContext.shadowOffsetX = 1;

  gfx.drawingContext.shadowOffsetY = 1;

  gfx.drawingContext.shadowBlur = b;

  gfx.drawingContext.shadowColor = s; //color(255,0,255); //"black";

}

​

function setup() {

  bgcol = color(2, 2, 2);

  lines = [];

  colors = [

    // color(2,2,2),

    color(255, 105, 54),

    color(253, 220, 63),

    color(0, 117, 202),

    color(3, 187, 112),

  ];

  createCanvas(1500, 500);

  gfx = createGraphics(width, height);

  gfx.background(bgcol);

​

  image(gfx, 0, 0);

  makeDithered(skull, 1);

  // makeDithered(skull2,1);

  gfx.image(skull, width / 2 - skull.width / 2, height / 2 - skull.height / 2);

​

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

    let c = random(colors);

    c._array[3] = random(0.1, 0.8);

    lines.push({

      x: random(0, -50),

      y: random(height),

      h: random(2, 6),

      col: c,

      mid: false,

      vy: 0,

      s: random([color(255, 0, 255), color(0, 255, 0)]),

    });

  }

}

​

function draw() {

      glitch = new Glitch();

    glitch.loadType("jpg"); // specify jpeg file glitching, default

    glitch.loadQuality(0.25); // optionally crunch to low quality

    glitch.loadImage(skull3);

​

    glitch.randomBytes(10); // randomize 10 bytes

    glitch.replaceBytes(45, 127); // find + replace all

    glitch.replaceHex("ffdb00430001", "ffdb004300ff"); // jpg quant table

​

    /* build and display image */

    glitch.buildImage(); // creates image from glitched data

    image(glitch.image, 0, 0); // display glitched image

​

  noLoop();

  for (let i = lines.length - 1; i >= 0; i--) {

    let l = lines[i];

    drawShadow(10, l.s);

    gfx.noStroke();

    gfx.fill(l.col);

    gfx.rect(l.x, l.y, l.h);

​

    l.x += random(0.5, 5);

    l.y += l.vy;

​

    if (l.x > width / 2 + 100 + random(-100, 100) && !l.mid) {

      l.mid = true;

      l.vy = random([-0.5, 0.5]);

      // l.y += random(-10,10);

      l.col = color(255, 255, 255, random(10, 180));

    }

    if (l.x > width || l.y < -10 || l.y > height + 10) lines.splice(i, 1);

  }

  image(gfx, 0, 0);

  if (lines.length == 0) {

    makeDithered(gfx, 1);

    makeDithered(gfx, 5);

​

    // image(gfx,0,0);

​

    gfx.tint(255, 255 / 3);

    gfx.image(

      skull2,

      width / 2 - skull.width / 2,

      height / 2 - skull.height / 2

    );

    image(gfx, 0, 0);

​

​

​

    console.log("done");

    noLoop();

  }

}

​

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

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

}

​