const HEIGHT = 1920;

const SIZE = Math.min(WIDTH, HEIGHT);

​

const BACKGROUND_COLOR = "black";

const SPIKES_COLOR = [1, 0.1, 0.15];

const GRAIN_COLOR2 = [0.5, 0, 1, 1]

const GRAIN_COLOR1 = [1, 0, 1, 1]

const LINES_COLOR = [1, 0.3, 0];

​

let canvas;

function setup() {

  canvas = createCanvas(WIDTH, HEIGHT);

  setupGraphics(window)

  noLoop();

}

​

function setupGraphics(gfx) {

  gfx.colorMode(RGB, 1);

  gfx.strokeCap(SQUARE);

  gfx.noSmooth()

}

​

function draw() {

  background(BACKGROUND_COLOR)

  grainLayer()

  linesLayer()

  walkerLayer()

  lotusLayer()

  spikesLayer()

  offsetLayer()

  filterLayer()

  // walkerLayer2()

  walkerLayer3()

  // iconLayer()

}

​

function iconLayer() {

  ctx(() => {

    stroke(0.5, 0, 1)

    strokeWeight(125)

    const x = 0.51

    const y = 1.38;

    const sx = 0.125

    const sy = 0.125;

    spikes(x, y, sx, sy)

    fill(0)

    stroke(0)

    strokeWeight(5)

    spikes(x, y, sx, sy)

  });  

}

​

function walkerLayer3() {

   ctx(() => {

    randomSeed(55);

    walker(0, 0, 0.01, 1000, 0.5)

  });

}

​

function walkerLayer2() {

  const count = 20;

  ctx(() => {

    randomSeed(55);

    for_n(count, (i) => {

      const x = random();

      const y = random();

      const size = random(0.03);

      const count = random(100);

      noStroke();

      walker(x, y, size, count, 0.1);

    });

  });

}

​

function filterLayer() {

  ctx(() => {

    randomSeed(3)

    const count = 25;

    for_n(count, i => {

      const x = random(0.9)

      const y = random(0.9)

      const w = random(0.1, 1 - x)

      const h = random(0.1, 1 - y)

      const filt = random([POSTERIZE, BLUR, DILATE, ERODE, GRAY])

      filterArea(x, y, w, h, filt);

    })

  });

}

​

function walkerLayer() {

  const count = 100;

  ctx(() => {

    randomSeed(1);

    for_n(count, () => {

      const x = random();

      const y = random();

      const size = random(0.01);

      noStroke();

      walker(x, y, size, 1000, 0);

    });

  });

}

​

function linesLayer() {

  ctx(() => {

    strokeWeight(10);

    stroke(LINES_COLOR)

    noFill()

    lines();

  });

}

​

function grainLayer() {

  ctx(() => {

    randomSeed(0)

    tint(GRAIN_COLOR1)

    grain(100, 300)

​

    tint(GRAIN_COLOR2)

    grain(50, 10)

  });

}

​

function offsetLayer() {

  ctx(() => {

    randomSeed(0)

    const count = 100;

    for_n(count, (i, f) => {

      offset(f, random() / count, random(-0.05, 0.05));

    });

  });

}

​

function lotusLayer() {

  ctx(() => {

    strokeWeight(10);

    noFill();    

    stroke(1);

    lotus(0.5, 0.5, 0.8, 8);

    const count = 100;

    noiseSeed(1);

    for_n(count, (i, f, ff) => {

      stroke(0, 1, 0);

      const x = 0.5 + nsin(ff) * -noise(pow(ff, 2) * 1) * (1 - ff * 0.5) * 2;

      const pad = 0;

      const y = map(ff, 0, 1, pad, 1 - pad);

      const s = 0.2

      const count = 3;

      lotus(x, y, s, count);

    })

  });

}

​

function spikesLayer() {

  ctx(() => {

    fill(SPIKES_COLOR)

    spikes(0.5, 0.5, 1)

  });

}

​

function filterArea(x, y, w, h, filt) {

  const gfx = createGraphics(floor(w * WIDTH), floor(h * HEIGHT));

  setupGraphics(gfx);

  gfx.copy(

    canvas,

    floor(x * WIDTH), floor(y * HEIGHT), floor(w * WIDTH), floor(h * HEIGHT),

    0, 0, floor(w * WIDTH), floor(h * HEIGHT)

  );

  gfx.filter(filt)

  image(gfx, floor(x * WIDTH), floor(y * HEIGHT))

}

​

function walker(x, y, size, count, clr_rand) {

  let clr = get(x * WIDTH, y * HEIGHT).map(v => v / 255);

  for_n(count, () => {

    clr[3] = 1;

    fill(clr);

    const S = max(WIDTH, HEIGHT);

    rect(x * S, y * S, size * S, size * S);

    const dir = random([0, 0.25, 0.5, 0.75])

    x += ncos(dir) * size;

    y += nsin(dir) * size;

    clr = clr.map(c => constrain(c + random(-clr_rand, clr_rand), 0, 1))

  });  

}

​

function lines() {

  const count = 100;

  beginShape()

  for_n(count, (i, f) => {

    const r = random()

    const a = 0.125 + random(-0.01, 0.01)

    const flip = [-1, 1].at(i % 2) * 0.25

    const x1 = f + ncos(a + flip) * r;

    const y1 = f + nsin(a + flip) * r;

    const S = max(WIDTH, HEIGHT);

    vertex(

      x1 * S,

      y1 * S

    );

  });

  endShape()

}

​

​

function grain(w, h) {

  const gfx = createGraphics(w, h);

  gfx.background(0);

  setupGraphics(gfx);

​

  for_n(gfx.width, x => for_n(gfx.height, y => {

    gfx.set(x, y, random(255));

  }))

  gfx.updatePixels();

  image(gfx, 0, 0, WIDTH, HEIGHT);

}

​

function offset(y, h, dx) {

  copy(

    0, floor(y * HEIGHT), WIDTH, floor(h * HEIGHT), 

    floor(dx * WIDTH), floor(y * HEIGHT), WIDTH, floor(h * HEIGHT)

  );

}

​

function lotus(x, y, scl, count) {

  for_n(count, (i, f) => ctx(() => {

    const w = 0.15;

    const h = 0.1;

​

    const a1 = 0.075;

    const a2 = 0.425;

​

    const offset = 0.017;

    strokeCap(PROJECT)

​

    translate(x * WIDTH, y * HEIGHT);

    rotate(f * TAU)

    scale(scl, scl)

    translate(w * 0.5 * SIZE, 0);

    arc(0, - offset * HEIGHT, w * SIZE, h * SIZE, a1 * TAU, a2 * TAU);

    arc(0, offset * HEIGHT, w * SIZE, h * SIZE, (a1 + 0.5) * TAU, (a2+ 0.5) * TAU);

  }));

}

​

function spikes(x, y, sx=1, sy=1) {

  ctx(() => {

    translate((x - 0.5) * WIDTH, (y - 0.5) * HEIGHT);

    scale(sx, sy);

​

    beginShape();

    // Exterior part of shape, clockwise winding

    const padding = 0.075;

​

    // vertex(padding * WIDTH, padding * HEIGHT);

    // vertex((1 - padding) * WIDTH, padding * HEIGHT);

    // vertex((1 - padding) * WIDTH, (1 - padding) * HEIGHT);

    // vertex(padding * WIDTH, (1 - padding) * HEIGHT);

​

    vertex(0.5 * WIDTH, padding * HEIGHT);

    vertex((1 - padding) * WIDTH, 0.5 * HEIGHT);

    vertex(0.5 * WIDTH, (1 - padding) * HEIGHT);

    vertex(padding * WIDTH, 0.5 * HEIGHT);

​

    // Interior part of shape, counter-clockwise winding

    beginContour();

​

    const count = 50;

    for_n(count, (i, f) => {

      const a = -f;

      const r = cosn(f * count / 2) * 0.3 + 0.15

      const x = 0.5 + ncos(a) * r;

      const y = 0.5 + nsin(a) * r;

​

      vertex(x * WIDTH, y * HEIGHT);

    });

​

    endContour();

    endShape(CLOSE);

  });

}

​

​

function for_n(count, fn) {

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

    const f = i / count;

    const ff = i / (count - 1);

    fn(i, f, ff);

  }

}

function ctx(fn) {

  push()

  fn()

  pop()

} 

​

const ncos = v => cos(v * TAU);

const nsin = v => sin(v * TAU);

const cosn = v => ncos(v) * 0.5 + 0.5;

const sinn = v => nsin(v) * 0.5 + 0.5;

const inv_cosn = v => 1 - cosn(v);