const cc239 = ["#e0eff0", "#e3dd34", "#78496b", "#f0527f", "#a7e0e2"];

const mono = ["#202020", "#333333", "#666666", "#999999", "#cccccc"];

let palette;

let particles;

let pixel_size;

let lines;

let bgcol;

let windowScale;

​

function joyd(gfx, img_gfx) {

  lines = [];

​

  for (

    let y = (pixel_size * pixel_size) / (8 * windowScale);

    y < height - (pixel_size * pixel_size) / (16 * windowScale);

    y += pixel_size

  ) {

    let _line = { col: random(palette), _line: [] };

    for (let x = pixel_size; x < width; x += pixel_size) {

      let distToCenter = abs(x - (width >> 1));

      let variance = max((width >> 1) - 125 * windowScale - distToCenter, 0);

      let rand = random() * (variance >> 1) * -1;

      _line._line.push({ x: x, y: y + rand });

    }

    lines.push(_line);

  }

​

  img_gfx.fill(0);//color(220, 20, 0, random(80, 220)));

  img_gfx.noStroke();

  img_gfx.circle(

    random(0, width / 4),

    random(0, height / 4),

    random(width / 2, width / 16)

  );

  for (let i = 2 * windowScale; i < lines.length; i++) {

    //l of lines) {

    let l = lines[i];

    gfx.noStroke(); //stroke(color(l.col));

    gfx.fill(255);//color(bgcol));

    gfx.beginShape();

    gfx.vertex(l._line[0].x, l._line[0].y);

    gfx.vertex(l._line[1].x, l._line[1].y);

    for (let j = 1; j < l._line.length - 3; j++) {

      let xc = (l._line[j].x + l._line[j + 1].x) >> 1;

      let yc = (l._line[j].y + l._line[j + 1].y) >> 1;

      gfx.quadraticVertex(l._line[j].x, l._line[j].y, xc, yc);

    }

    gfx.vertex(l._line[l._line.length - 2].x, l._line[l._line.length - 2].y);

    gfx.vertex(l._line[l._line.length - 1].x, l._line[l._line.length - 1].y);

    gfx.endShape(CLOSE);

​

    gfx.stroke(0);//color(l.col));

    gfx.noFill();

    gfx.beginShape();

    gfx.vertex(l._line[0].x, l._line[0].y);

    for (let j = 0; j < l._line.length - 2; j++) {

      let xc = (l._line[j].x + l._line[j + 1].x) >> 1;

      let yc = (l._line[j].y + l._line[j + 1].y) >> 1;

      gfx.quadraticVertex(l._line[j].x, l._line[j].y, xc, yc);

    }

    gfx.vertex(l._line[l._line.length - 1].x, l._line[l._line.length - 1].y);

    gfx.endShape();

  }

}

​

function randomWalk(gfx, img_gfx) {

  let particles = [];

  for (let _ = 0; _ < 100 * windowScale; _++) {

    let life = random(width * 0.01, width);

​

    let vx, vy;

    if (random() > 0.5) {

      vx = random(-2, 2) * windowScale;

      vy = random(-2, 2) * windowScale;

    } else {

      if (random() > 0.5) {

        vx = random(-2, 2) * windowScale;

        vy = 0;

      } else {

        vx = 0;

        vy = random(-2, 2) * windowScale;

      }

    }

​

    particles.push({

      x: random(width),

      y: random(height),

      vx: vx,

      vy: vy,

      col: random(palette),

      size: random(0.5, 2.0) * windowScale,

      life: life,

      olife: life,

    });

  }

​

  while (particles.length > 0) {

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

      let p = particles[i];

      gfx.strokeWeight(p.size);

      gfx.stroke(color(p.col));

      gfx.point(p.x, p.y);

      p.x += p.vx;

      p.y += p.vy;

​

      p.life--;

      if (

        p.x < 0 ||

        p.x > gfx.width - 1 ||

        p.y < 0 ||

        p.y > gfx.height - 1 ||

        p.life <= 0

      )

        particles.splice(i, 1);

    }

  }

}

​

function drawBorder(gfx) {

  gfx.strokeWeight(1.0 * windowScale);

  gfx.stroke(random([0,20,color(random(palette))]));

  gfx.noFill();

  gfx.rect(

    pixel_size,

    pixel_size,

    gfx.width - 2 * pixel_size,

    gfx.height - 2 * pixel_size

  );

}

​

function setup() {

  createCanvas(1000, 1000);

  windowScale = width / 1000;

  pixel_size = width * 0.05;

  palette = random([cc239, mono]);

​

  let idx = random(palette.length - 1) | 0;

  bgcol = palette[idx];

  background(255);//color(bgcol));

  // drawingContext.fillStyle = color(palette[idx]);

  palette.splice(idx, 1);

​

  let gfx = createGraphics(width, height);

  gfx.noFill();

  gfx.strokeWeight(pixel_size / 16);

​

  let img_gfx = createGraphics(width, height);

  img_gfx.background(255);//color(bgcol));

​

  drawBorder(gfx);

​

  // if (random() > 0.5) 

    joyd(gfx, img_gfx);

  // else randomWalk(gfx, img_gfx);

​

  img_gfx.image(gfx, 0, 0);

  gfx.clear();

​

  // glitch time

  // sliceGlitch(img_gfx);

​

  // pixellate(img_gfx);

​

  image(img_gfx, 0, 0);

  console.log("done");

}

​

let step = 0;

function draw() {

  noLoop();

  if (step == 0) {

  }

}

​

function pixellate(img_gfx) {

  img_gfx.loadPixels();

  let off = (width * random(0.01, 0.005)) | 0;

  let off2 = off / 2;

  img_gfx.noStroke();

  img_gfx.rectMode(CENTER);

​

  for (let y = off; y < height - off; y += random(off2, off)) {

    for (let x = off; x < width - off; x += random(off, off2)) {

      let c = color(img_gfx.get(x, y));

      c.setAlpha(random(80, 255));

      img_gfx.fill(c);

      if (random() > 0.5) img_gfx.square(x, y, off);

      else img_gfx.circle(x, y, off * 2);

    }

  }

}

​

function sliceGlitch(img_gfx) {

  let off = (width * 0.01) | 0;

  let new_gfx = createGraphics(width, height);

  for (

    let x = lines[0]._line[1].x;

    x < lines[0]._line[lines[0]._line.length - 3].x;

    x += off

  ) {

    let gfx2 = createGraphics(off, height);

    gfx2.copy(x, 0, off, height, 0, 0, off, height);

    if (random() > 0.75) {

      gfx2.copy(

        img_gfx,

        random(0, width - off) | 0,

        0,

        off,

        height,

        0,

        0,

        off,

        height

      );

    } else {

      gfx2.copy(img_gfx, x, 0, off, height, 0, 0, off, height);

    }

    new_gfx.image(gfx2, x, 0);

  }

  img_gfx.image(new_gfx, 0, 0);

}

​