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

​

let palette, bg;

let pts;

let ptsize;

let halfpt;

​

function setup() {

  createCanvas(1000, 1000,WEBGL);

​

  palette = random([cc239, mono]);

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

  bg = palette[idx];

  palette.splice(idx, 1);

​

  ptsize = (width * 0.01) | 0;

  halfpt = (ptsize / 2) | 0;

  pts = [];

  for (let y = halfpt; y < height; y += ptsize) {

    pts.push({

      x: 0,

      y: y,

      w: random(width / 2, width * 0.75),

      h: random([0, height]),

      col: random(palette),

    });

​

    if (random() > 0.85) y += random(halfpt, ptsize * 2);

  }

​

  background(color(bg));

  // strokeWeight(halfpt);

  noFill();

}

​

let ystep = 0;

let step = 0;

let xstep = 0;

function draw() {

  translate(-width/2,-height/2);

  let p = pts[ystep];

​

  if (step == 0) {

    let c = color(p.col);

    c.setAlpha(random(20, 140));

    stroke(c);

    beginShape(LINES);

​

    vertex(p.x, p.y);

    vertex(p.x + p.w, p.y);

​

    vertex(width, p.y);

    vertex(width - p.w, p.y);

​

    vertex(p.x + p.w, p.y);

    vertex(p.x + p.w, p.h);

    endShape();//CLOSE);

    ystep++;

    if (ystep > pts.length - 1) {

      ystep = random(0, pts.length - 1) | 0;

      step++;

    }

  } else if (step == 1) {

    stroke(color(p.col));

​

    beginShape(LINES);

    vertex(xstep, p.y);

    xstep += random(halfpt, ptsize);

    let nextY = random(-ptsize,ptsize) + p.y

    vertex(xstep, nextY);

    if (random() > 0.8) {

      push();

      noFill();

      translate(xstep,nextY);

      sphere(random(ptsize,ptsize*2),random(1,14)|0,random(1,14)|0);

      pop();

    }

    xstep += random(halfpt, ptsize);

    endShape();

​

    if (xstep > width) {

      if (random() > 0.7) step++;

      else {

        ystep = random(0, pts.length - 1) | 0;

        xstep = 0;

      }

    }

  } else {

    console.log("done");

    noLoop();

  }

}

​