let gaplife;

​

let bg, fg;

function setup() {

  createCanvas(800,800);

  // createCanvas(2000, 2000);

  pixelDensity(1);

  // pixelDensity(width/1000);

  gap = width * random(0.05, 0.1);//.01;//random([0.1,0.01,0.05]);

  gaplife = [];

​

  let _gidx = 1;

  for (let y = gap; y < height; y += gap) {

    gaplife.push(5 * _gidx);

    _gidx *= 1.5;

  }

  bg = color(220);

  fg = color(20,20,20,2);

  // bg = color('royalblue');

  // fg = color(220,220,220);

  background(bg);

  console.log(gaplife);

​

  stroke(fg);

  /*

  loadPixels();

​

  for (let _ = 0; _ < 1000; _++) {

    _gidx = 0;

    for (let y = gap; y < height; y += gap) {

      // if (gaplife[_gidx] > frameCount) {

      // beginShape();

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

        // let n = noise(1/frameCount * x + map(y, 0, height, 0.001, 0.5));

        // let ym = map(n, 0.0, 1.0, -5, 5);

        // point(x, y+ym);

​

        let yb = map(y, 0, height, 1, gaplife[_gidx]);

        let ym = map(

          noise(x * 0.1, noise(_ * 0.1)),

          0.0,

          1.0,

          -yb,

          yb

        );

        // let ym = map(x, 0, width, 0, )

​

        let idx = getPixelID(x, y + ym);

        pixels[idx] = 20;

        pixels[idx + 1] = 20;

        pixels[idx + 2] = 20;

        pixels[idx + 3] = 2;

​

        // point(x, y + ym);

        // vertex(x, y + ym);

      }

      // endShape();

      // }

      _gidx++;

      // line(0,y,width,y);

    }

  }

  updatePixels();

​

  noLoop();

  */

}

​

function getPixelID(_x, _y) {

  const _density = pixelDensity();

  const idx = 4 * _density * (int(_y) * _density * width + int(_x));

  return idx;

}

​

function draw() {

  // background(220);

  noFill();

​

  let tx = map(frameCount, 1, 500, 1, width-2);

  fg.setAlpha(255);

  stroke(fg);

  line(tx,0,tx,10);

  line(tx,height-10,tx,height)

  ;

  fg.setAlpha(20);

  // drawingContext.shadowOffsetX = 5;

  // drawingContext.shadowOffsetY = -5;

  // drawingContext.shadowBlur = 10;

  // drawingContext.shadowColor = 'black';

  stroke(fg);

  let _gidx = 0;

  for (let y = gap; y < height; y += gap) {

    // beginShape();

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

      // let n = noise(1/frameCount * x + map(y, 0, height, 0.001, 0.5));

      // let ym = map(n, 0.0, 1.0, -5, 5);

      // point(x, y+ym);

​

      let yb = map(y, 0, height, 1, gaplife[_gidx]);

      let ym = map(noise(x * 0.1, noise(frameCount * 0.1)), 0.0, 1.0, -yb, yb);

      // let ym = map(x, 0, width, 0, )

      point(x, y + ym);

      // vertex(x, y + ym);

    }

    // endShape();

    // }

    _gidx++;

    // line(0,y,width,y);

  }

​

  // if (frameCount > gaplife[gaplife.length - 1]) {

  //   console.log("done");

  //   noLoop();

  // }

​

  // console.log(frameCount);

  if (frameCount > 500) {

    console.log("done");

    noLoop();

  }

}

​