let txt;

​

let perc1, perc2;

let color1, color2;

​

// https://sighack.com/post/fifteen-ways-to-draw-a-line

function dline(x1, y1, x2, y2, weight, value, _type, dir) {

  /*

   * Draw a line from (x1, y1) to (x2, y2) with a given

   * weight and darkness (value)

   */

  strokeWeight(weight);

  let _c = color(255);//colors[1]; // color(0);

  _c._array[3] = value;

  stroke(_c);

​

  // y=mx+b

  let dy = y2 - y1;

  let dx = x2 - x1;

  let m = dy / dx;

​

  if (_type == null) line(x1, y1, x2, y2);

  else if (_type == "jagged") {

    let variance = weight / 2;

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

      strokeWeight(random(0.1, 0.8));

      line(

        x1 + random(-variance, variance),

        y1 + random(-variance, variance),

        x2 + random(-variance, variance),

        y2 + random(-variance, variance)

      );

    }

  } else if (_type == "stippled") {

    let _x = x1;

    for (let _y = y1; _y < y2; _y++) {

      // for (let _x = x1; _x < x2; _x++) {

      _c._array[3] = random(1.0);

      fill(_c);

      noStroke();

      circle(_x, _y, random(weight / 2, weight));

      _x++;

      // }

    }

  } else if (_type == "stippled2") {

    if (dir) {

      let _x = x1;

      for (let _y = y1; _y < y2; _y += random(0.5, 3.0)) {

        // for (let _x = x1; _x < x2; _x++) {

        _c._array[3] = random(1.0);

        fill(_c);

        noStroke();

        circle(_x, _y, random(weight / 2, weight));

        _x += random(-0.2, 0.2); //0.5,3.0);

        // }

      }

    } else {

      let _y = y1;

      for (let _x = x1; _x < x2; _x += random(0.5, 3.0)) {

        // for (let _x = x1; _x < x2; _x++) {

        _c._array[3] = random(1.0);

        fill(_c);

        noStroke();

        circle(_x, _y, random(weight / 2, weight));

        _y += random(-0.2, 0.2); //0.5,3.0);

        // }

      }

    }

  }

}

​

​

function drawShadow(b,g) {

  g.drawingContext.shadowOffsetX = 3;

  g.drawingContext.shadowOffsetY = 3;

  g.drawingContext.shadowBlur = b;

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

}

​

let l1,l2;

​

function preload() {

  skull = loadImage("skull2.png");

}

​

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

}

​

let glitch;

function setup() {

  createCanvas(1000, 1000);

  gfx = createGraphics(width, height);

  gfx2 = createGraphics(width, height);

  glitch = new Glitch();

  // glitch.loadImage(skull);

  // makeDithered(skull,1);

​

  let freq = 0.005; //0.01;

  let octaves = 14;

  _noise = new FastSimplexNoise({ frequency: freq, octaves: octaves });

  points = [];

  o = 10;

  step = 0;

  maxSteps = 150;//0;

  let r = 50.0;

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

    let t = (1.0 * i) / maxSteps;

    points[i] = [];

​

    for (let j = o + 10; j < width - o - 10; j+=5) {

      // let _n = _noise.get4DNoise(j, i, r*cos(TWO_PI*t), r*sin(TWO_PI*t));

      let _n = _noise.get3DNoise(j, r*cos(TWO_PI*t), r*sin(TWO_PI*t))

      // let _y = height/2 + 250*_n;//

      let _y = map(_n, -1.0, 1.0, height / 2 + 400, height / 2 - 300);

      points[i].push({ x: j, y: _y });

    }

  }

​

  textSize(48);

  noStroke();

  textFont("VT323");

  let s = "everything is going to be a-ok";

  txt = [];

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

    let _tw = textWidth(s[i]);

    txt.push({

      letter: s[i],

      x: width + 5 + i * _tw,

      y: height / 2,

      i: null,

    });

  }

​

  perc1 = 0.5;

  perc2 = 1 - perc1;

  color1 = color(177, 255, 0);

  color2 = color(255, 58, 103);

  l1 = 0;

  l2 = points[0].length-1;

//   let t1 = "deliver";//"hello";

//   let t2 = "reviled";//"olleh";

//   gfx.textSize(120);

//   gfx.textFont("VT323");

//   gfx.stroke(color2);

//   gfx.fill(color(255,0,255));

//   gfx.text(t1, 20, 90);

//   gfx.fill(color(20,20,20,100));

//   gfx.text(t1, 22, 92);

//   // s = "olleh"

//   gfx.stroke(color1);

//   let _tw = textWidth(t2);

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

//   gfx.text(t2, width-86-_tw*2, height-22);

//   gfx.fill(0);

//   gfx.text(t2, width-84-_tw*2, height-20);

//   makeDithered(gfx, 1);

  // gfx.tint(255,10);

  y_off = height;

  frameRate(30);

​

}

​

let p1dir = true;

let p2dir = true;

let timer = 0;

let skull;

let y_off;

​

function keyPressed() {

  if (key === 'r' && timer == 0) timer = 100;

}

​

function draw() {

  // if (random() > 0.999 && timer == 0) timer = 100;

  gfx2.background(220);

​

  gfx2.fill(0);

  gfx2.noStroke();

  gfx2.rect(o, o, width - o * 2, height - o * 2);

​

  // push();

  drawShadow(1,gfx2);

  gfx2.strokeWeight(1.5);

  gfx2.stroke(0);

  // gfx.fill(color(36,110,185,255));

  if (timer == 0)

  gfx2.fill(color1);

  else {

    // gfx2.image(skull,width-skull.width-o,height/2-50);

    // glitch.randomBytes(10);

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

    // gfx2.image(glitch.image, width-skull.width-o,height/2-50); // display glitched image

    gfx2.fill(color2);

    timer--;

    if (timer < 0) timer = 0;

  }

​

  gfx2.beginShape();

  // gfx2.vertex(o + 10, height - o - 10);

  gfx2.vertex(o+10,o+10);

  gfx2.vertex(o + 10, points[step][0].y);

  for (let i = 0; i < points[step].length; i++) {

    let p = points[step][i];

    gfx2.vertex(p.x, p.y);

  }

  gfx2.vertex(width - o - 10, points[step][points[step].length - 1].y);

  // let off2 = 200;

  // for (let i = points[step].length-1; i >= 0; i--) {

  //   let p = points[step][i];

  //   gfx2.vertex(p.x, p.y+off2);

  // }

  gfx2.vertex(width-o-10,o+10);

  // gfx2.vertex(width - o - 10, points[step][points[step].length - 1].y+off2);

  // gfx2.vertex(o + 10, points[step][0].y+off2);

  // gfx2.vertex()

  // gfx2.vertex(width - o - 10, height - o - 10);

  gfx2.endShape(CLOSE);

​

//   let off = 50;

//   // gfx.fill(color(240,101,67,255));

//   gfx2.fill(color2);

//   gfx2.beginShape();

//   // gfx2.vertex(o + 10, o + 10);

//   gfx2.vertex(o + 10, points[step][0].y - off);

//   for (let i = 0; i < points[step].length; i++) {

//     let p = points[step][i];

//     gfx2.vertex(p.x, p.y - off);

//   }

//   gfx2.vertex(width - o - 10, points[step][points[step].length - 1].y - off2);

//   for (let i = points[step].length-1; i >= 0; i--) {

//     let p = points[step][i];

//     gfx2.vertex(p.x, p.y - off2);

//   }

//   gfx2.vertex(o+10, points[step][0].y-off2);

//   // gfx2.vertex(width - o - 10, o + 10);

//   gfx2.endShape(CLOSE);

​

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

//     gfx2.fill(0);

//     gfx2.textSize(48);

//     gfx2.strokeWeight(2);

//     gfx2.stroke(255);

//     gfx2.textFont("VT323");

//     gfx2.text(txt[i].letter, txt[i].x, txt[i].y - 14);

​

//     if (

//       txt[i].x <= points[step][points[step].length - 1].x &&

//       txt[i].i == null

//     ) {

//       txt[i].x = points[step][points[step].length - 1].x;

//       txt[i].y = points[step][points[step].length - 1].y;

//       txt[i].i = points[step].length - 1;

//     } else if (txt[i].i != null && txt[i].i != "done") {

//       txt[i].i--;

//       if (txt[i].i < 0) txt[i].i = "done";

//       else {

//         txt[i].x = points[step][txt[i].i].x;

//         txt[i].y = points[step][txt[i].i].y;

//       }

//     } else {

//       txt[i].x--;

//       if (txt[i].i == "done") txt[i].y = points[step][0].y;

//       else txt[i].y = points[step][points[step].length - 1].y;

​

//       if (txt[i].x < 0) {

//         txt[i].x = width + 5;

//         txt[i].i = null;

//       }

//     }

//   }

  let pl = points[step][l1];

  let p2 = points[step][l2];

  l2--;

  l1+=random([-1,-2,-3,1,2,3,4,5]);

  if (l1 > points[step].length-1) l1 = 0;

  if (l1 < 0) l1 = 0;

  if (l2 < 0) l2 = points[step].length-1;

//   gfx2.strokeWeight(random(5));

//   gfx2.line(pl.x,pl.y,pl.x,pl.y+off2);//height-o-10);

//   gfx2.strokeWeight(0.5);

//   gfx2.line(p2.x, p2.y-off,p2.x,p2.y-off2);//o+10);

  // image(gfx, 0, 0);

  // pop();

​

  // TODO - 4D!

  // makeDithered(gfx2,1);

  image(gfx2,0,0);

  image(gfx,0,0);

  // dline(0, y_off, width, y_off, random(0.5,2.0), color(255,0,255,random(255)), "stippled2", false);

  // y_off -= random(0.5, 2.0);

  // if (y_off < 20) y_off = height;

  step++;

  if (step > maxSteps - 1) {

    console.log("loop");

    step = 0;

    noLoop();

  }

  // noLoop();

}

​