let vaporwave = ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96"];

let cv;

function setup() {

  // cv = createCanvas(2000,2000);

  cv = createCanvas(800, 800);

  pixelDensity(1);

  noStroke();

  fill(220);

  noiseDetail(4, 0.85);

​

  sq = width * 0.05;

  hsq = sq / 2;

  sqs = [];

  let xid,

    yid = 0;

  for (let y = hsq * 2; y < height - hsq; y += sq) {

    sqs.push([]);

    let dir = "off";

    if (yid == 0) dir = "down";

    for (let x = hsq * 2; x < width - hsq; x += sq) {

      let n = noise(x * 0.01, y * 0.01);

      let shape = "square";

      // if (n < 0.25 || n > 0.75) shape = "circle";

      if (n < 0.45) shape = "circle";

      else if (n > 0.95) shape="none";

      sqs[yid].push({

        x: x,

        y: y,

        sq: hsq,

        spd: 1,

        dir: dir, //"off", //random(["down", "off"]),

        col: random(vaporwave),

        shape: shape,

      });

      // sqs.push({x:x, y:y, sq: sq-2, spd: 1, dir: random(["down","off"])});

      xid++;

    }

    xid = 0;

    yid++;

  }

  rectMode(CENTER);

​

  /*

  let xstart = int(random(0,sqs.length/2));

  for (let yid = 0; yid < sqs.length; yid++) {

    for (let xid = 0; xid < sqs[0].length; xid++) {

      if (xid == 1 || xid == sqs[0].length-2 || yid == 1 || yid == sqs.length-2)

      sqs[yid][xid].dir = "down";

    }

  }*/

​

  // console.log(sqs)

​

  // for ()

}

​

let ystep = 0;

let totalsteps = 5;

function draw() {

  background(color(20, 20, 20, 5));

​

  drawingContext.shadowOffsetX = 0;

  drawingContext.shadowOffsetY = 0;

  drawingContext.shadowBlur = 10;

  drawingContext.shadowColor = color(100, 0, 100, 20);

​

  // for (let _square of sqs) {

  for (let yid = 0; yid < sqs.length; yid++) {

    for (let xid = 0; xid < sqs[yid].length; xid++) {

      let _square = sqs[yid][xid];

      // let a = map(_square.spd, 0.25, 2, 255, 20);

​

      fill(color(_square.col));

​

      if (_square.shape == "circle") circle(_square.x, _square.y, _square.sq);

      else if (_square.shape == "square") rect(_square.x, _square.y, _square.sq, _square.sq);

​

      // jiggly

      // if (random() > 0.7) _square.dir = !_square.dir;

      // if (random() > 0.9) _square.spd = random([0.25, 2])

      if (_square.dir == "down") {

        _square.sq -= _square.spd;

        if (_square.sq <= 1) _square.dir = "up";

      } else if (_square.dir == "up") {

        _square.sq += _square.spd;

        if (_square.sq >= random([hsq, sq])) _square.dir = "down";

      }

​

      /*

      if (frameCount % 100 == 0) {

        if (_square.dir == "off") _square.dir = random(["down","up"]);

        else _square.dir = "off";

      }

      */

    }

  }

​

  if (frameCount % 10 == 0) {

    for (let xstep = 0; xstep < sqs[0].length; xstep++) {

      sqs[ystep][xstep].dir = "off";

    }

    ystep++;

    if (ystep > sqs.length - 1) {

      ystep = 0;

      totalsteps--;

    }

    for (let xstep = 0; xstep < sqs[0].length; xstep++) {

      sqs[ystep][xstep].dir = random(["up", "down"]);

    }

  }

​

  if (totalsteps == 0) {

    console.log("done");

​

    let gfx = createGraphics(width, height);

    gfx.copy(cv, 0, 0, width, height, 0, 0, width, height);

​

    let pts = [];

    for (let yid = 0; yid < sqs.length; yid++) {

      for (let xid = 0; xid < sqs[0].length; xid++) {

        let _sq = sqs[yid][xid];

        if (_sq.sq > hsq) pts.push({ x: _sq.x, y: _sq.y });

      }

    }

​

    gfx.loadPixels();

    const _density = pixelDensity();

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

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

        let idx = 4 * _density * (y * _density * width + x);

        if (

          gfx.pixels[idx] < 20 &&

          gfx.pixels[idx + 1] < 20 &&

          gfx.pixels[idx + 2] < 20

        ) {

          // gfx.pixels[idx] = 255;

          // gfx.pixels[idx+1] = 0;

          // gfx.pixels[idx+2] = 255;

          gfx.pixels[idx + 3] = 0;

        }

      }

    }

    gfx.updatePixels();

​

​

    /*

    for (let _ = 0; _ < random(5,15); _++) {

      let xw = random(width*0.01, width*0.2);

      let xstart = random(0, width-xw);

      let g = createGraphics(xw, height);

      g.copy(cv, xstart, 0, xstart+xw, height, 0, 0, xw, height);

      image(g, int(random(0,width-xw)), 0);

    }

    for (let _ = 0; _ < random(5,15); _++) {

      let yw = int(random(height*0.01, height*0.2));

      let ystart = random(0, height-yw);

      let g = createGraphics(width, yw);

      g.copy(cv, 0, ystart, width, ystart+yw, 0, 0, width, yw);

      image(g, 0, int(random(0,height-yw)));

    }*/

​

    /*

    loadPixels();

    for (let y = hsq; y < height - hsq; y++) {

      for (let x = hsq; x < width - hsq; x++) {

        let idx = 4 * _density * (y * _density * width + x);

        let n = noise(x*0.01, y*0.01);

        let cidx = constrain(int(map(n, 0.0, 1.0, 0, vaporwave.length-1)), 0, vaporwave.length-1);

        let c = vaporwave[cidx];

        pixels[idx] = red(c);

        pixels[idx+1] = green(c);

        pixels[idx+2] = blue(c);

        pixels[idx+3] = 40;

      }

    }

    updatePixels();

    */

    for (let _ = 0; _ < random(2, 10); _++) {

      let a = random(40, 220);

      let c = color(random(vaporwave));

      let c2 = color(random(vaporwave));

      c.setAlpha(a);

      // c2.setAlpha(a);

      fill(c); //color(random(vaporwave)));

      stroke(c2); //color(random(vaporwave)));

      strokeWeight(random(1, 40));

      let _pts = shuffle(pts);

      let idx = int(random(2, _pts.length - 1));

      _pts.splice(idx, _pts.length - idx - 1);

​

      beginShape(TRIANGLE_STRIP);

      for (let p of _pts) vertex(p.x, p.y);

      endShape();

    }

    image(gfx, 0, 0);

    noLoop();

  }

}

​

function keyPressed() {

  if (key == "s") saveGif("sqs.gif", 10);

}

​