// (220, 220, 220),

  "#ff71ce",

  "#01cdfe",

  "#05ffa1",

  "#b967ff",

  "#fffb96",

];

​

function getPixelID(x, y, g = null) {

  if (g == null) {

    const _density = pixelDensity();

    return 4 * _density * (int(y) * _density * width + int(x));

  } else {

    const _density = g.pixelDensity();

    return 4 * _density * (int(y) * _density * g.width + int(x));

  }

}

let gfx, off, off2;

function setup() {

  createCanvas(1000, 1000);

  pixelDensity(1);

  noiseDetail(4, 0.75);

  background(20);

​

  /*

  loadPixels();

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

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

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

      let c = map(n, 0.0, 1.0, 0, 220);

​

      let idx = getPixelID(x, y);

      pixels[idx] = c;

      pixels[idx + 1] = c;

      pixels[idx + 2] = c;

      pixels[idx + 3] = 255;

    }

  }

  updatePixels();

  */

  off = width * 0.01;

  off2 = off / 2;

  // strokeWeight(5);

  // stroke(color(255,0,255,40));

  loadPixels();

  gfx = createGraphics(width, height);

  // gfx.strokeWeight(15);

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

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

      let idx = getPixelID(int(x + off2), int(y + off2), null);

      let c = pixels[idx];

      let cid = int(map(c, 0, 255, 0, vaporwave.length));

​

      /*

      gfx.strokeWeight(5);

      gfx.stroke(color(20,20,20,180));

      gfx.line(x, y, x+off, y+off);

      gfx.line(x, y+off, x+off, y);

      gfx.strokeWeight(15);

      let vc = color(vaporwave[cid]);

      vc.setAlpha(80);

      gfx.stroke(vc);

      gfx.line(x, y, x+off, y+off);

      gfx.line(x, y+off, x+off, y);

      */

​

      // let vc = color(vaporwave[cid]);

      // let _x = x;

      // gfx.noStroke();

      // for (let _y = y; _y < _y+off; _y++) {

      //   for (let _ = 0; _ < 5; _++) {

      //     vc.setAlpha(random(20, 80));

      //     gfx.fill(vc);

      //     gfx.ellipse(_x+random(-2,2), _y+random(-2,2), random(1,3), random(1,3));

      //   }

      //   _x++;

      // }

      // _x = x+off;

      // for (let _y = y; _y < _y+off; _y++) {

      //   for (let _ = 0; _ < 5; _++) {

      //     vc.setAlpha(random(20, 80));

      //     gfx.fill(vc);

      //     gfx.ellipse(_x+random(-2,2), _y+random(-2,2), random(1,3), random(1,3));

      //   }

      //   _x--;

      // }

    }

  }

​

  // background(20);

  // image(gfx, 0, 0);

​

  _x = off2;

  _y = off2;

}

​

let _x, _y;

function draw() {

  // background(220);

  loadPixels();

  gfx.noStroke();

  let x = _x - off2;

  for (let y = _y - off2; y < _y + off; y++) {

    // let c = get(_x, _y);

​

    let idx = getPixelID(x, y, null);

    let c = pixels[idx];

    let cid = int(map(c, 0, 255, 0, vaporwave.length - 1));

​

    gfx.fill(vaporwave[cid]);

    gfx.ellipse(x, y, random(1,3), random(1,3));

    x++;

  }

  x = _x + off2;

  for (let y = _y - off2; y < _y + off; y++) {

    let idx = getPixelID(x, y, null);

    let c = pixels[idx];

    let cid = int(map(c, 0, 255, 0, vaporwave.length - 1));

​

    gfx.fill(vaporwave[cid]);

    gfx.ellipse(x, y, random(1,3), random(1,3));

    x--;

  }

​

  _x += off;

  if (_x > width) {

    _x = off2;

    _y += off;

  }

  image(gfx, 0, 0);

  if (_y > height) {

    console.log("done");

    noLoop();

  }

}

​

function keyPressed() {

  if (key == "s") saveGif("x.gif", 7);

}

​