const HEIGHT = 1920;

​

// const COLOR1 = [1, 0.5, 0];

const COLOR1 = [0.5, 0, 1];

​

// const COLOR2 = [0, 1, 1];

const COLOR2 = [1, 0.5, 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(COLOR2); 

  noiseLayer();

  clipLayer();

  background(COLOR1); 

  linesLayer();

  mangleLayer();  

  erosionLayer();

}

​

function noiseLayer() {

  const gfx = createGraphics(10, 10);

  randomSeed(0);

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

    gfx.set(x, y, [0,0,0,random([0, 255])]);

  }))

  gfx.updatePixels();

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

}

​

function clipLayer() {

  clip(() => {

    randomSeed(0);

    for_n(10, () => {

      const x = random();

      const y = random();

      const d = random();

      circle(x * WIDTH, y * HEIGHT, d * WIDTH);

    });

    lines(0.5, 0.5, 1, 1, 150)

  });

}

​

​

function linesLayer() {

  ctx(() => {

    randomSeed(0)

    fill(1, 1)

    lines(0.5, 0.5, 1, 1, 100)

  })

​

  ctx(() => {

    randomSeed(3)

    for_n(25, () => {

      stroke(

        random(0.4, 0.6),

        0, 

        random(0.1, 1)

      )

      fill(0)

      strokeWeight(5)

      lines(random(), random(0.3, 1), 1, random(0.35), 15)

    })

  });

  ctx(() => {   

    randomSeed(0)

    strokeWeight(1) 

    noFill()

    stroke("red")

    lines(0, 0, 1 / TAU, 1, 250)

  });

}

​

function mangleLayer() {

  randomSeed(3);

  for_n(15, () => {

    const pos_range = 0.1;

    const size_range = 0.1;

    mangle(

      random(), random(), 

      random(1), random(1),

      random(-pos_range, pos_range), random(-pos_range, pos_range), 

      random(-size_range, size_range), random(-size_range, size_range),

      COLOR2,

    )

  });

}

​

function erosionLayer() {

  randomSeed(7)

  for_n(500, () => {

    erode(

      random(), random(), 

      random(50), random(50),

      0, 1,

      random(5)

     );

  });

​

 randomSeed(5)

  for_n(100, () => {

    erode(

      random(), random(), 

      random(5), random(5),

      0, 1,

      random(150)

     );

  });

  randomSeed(5)

  for_n(200, () => {

    const s = random(15);

    erode(

      random(), random(), 

      s, s,

      4, 4,

      random(150)

     );

  });

  randomSeed(34)

  for_n(4, () => {

    erode(

      random(), random(), 

      random(500), random(500),

      random(-1, 1), random(-1, 1),

      5,

      1

     );

  });

}

​

function lines(o_x, o_y, a_range, r_range, count) {

  beginShape()

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

    const a = (f + random() * 0.1) * a_range;

    const r = random() * r_range;

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

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

    vertex(x * WIDTH, y * HEIGHT);

  })

  endShape()

}

​

function mangle(sx, sy, sw, sh, dx, dy, dw, dh, tnt) {

  const DW = floor((sw + dw) * WIDTH);

  const DH = floor((sh + dh) * HEIGHT);

  const DX = floor((sx + dx) * WIDTH);

  const DY = floor((sx + dy) * HEIGHT);

  const gfx = createGraphics(DW, DH);

  setupGraphics(gfx);

  gfx.copy(canvas,

    floor(sx * WIDTH), floor(sy * HEIGHT), floor(sw * WIDTH), floor(sh * HEIGHT),

    0, 0, DW, DH

  )

  tint(tnt)

  image(gfx, DX, DY)

}

​

function erode(x, y, w, h, dx, dy, n, alpha) {

  ctx(() => {

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

    clr[3] = alpha;

    fill(clr)

    noStroke();

    for_n(n, (i) => {

      rect(

        floor(x * WIDTH + i * w * dx), 

        floor(y * HEIGHT + i * h * dy),

        ceil(w),

        ceil(h),

      );

    });

  });

}

​

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