let cell_w;

let vaporwave = [

  // (0, 0, 0),

  (220, 220, 220),

  "#ff71ce",

  "#01cdfe",

  "#05ffa1",

  "#b967ff",

  "#fffb96",

];

​

// vaporwave = [

//   (0, 0, 0),

//   (20, 20, 20),

//   (40, 40, 40),

//   (80, 80, 80),

//   (160, 160, 160),

//   (220, 220, 220),

// ];

​

// rgb - based on https://editor.p5js.org/BarneyCodes/sketches/XUer03ShM

let fragSrc_rgb = `precision mediump float;

varying vec2 vTexCoord;

uniform float _noise;

uniform sampler2D tex0;

​

void main() {

  vec2 uv = vTexCoord;

  vec3 col;

  vec4 _col = texture2D(tex0, uv);

  col = _col.rgb;

​

  float noise = _noise;//0.1;

  // glitch rgb components

​

  vec2 offset = vec2(noise, noise);

  col.r = texture2D(tex0, cos(uv+offset)).r;

  col.g = texture2D(tex0, log(uv)).g;

  col.b = texture2D(tex0, uv+offset).b;

​

  col.r = step(col.r, 0.5);

​

  gl_FragColor = vec4(col, 1.0);

}`;

​

let fragSrc_pixelate = `

precision mediump float;

​

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float tileSize;

void main() {

​

  vec2 uv = vTexCoord;

​

  // uv step for tiling 

  float tiles = tileSize;//800.;

  uv = uv * tiles;

  uv = floor(uv);

  uv = uv / tiles;

​

  vec4 tex = texture2D(tex0, uv);

  gl_FragColor = tex;

}`;

let fs, fs2;

​

function pointCircle(px, py, cx, cy, cr) {

  let d = dist(px, py, cx, cy);

  return d < cr;

}

​

// vaporwave = ["#f5fe31", "#ff2ae1", "#b3fe3e", "#ed4e04", "#95fef8"];

function setup() {

  createCanvas(800, 800);

  noiseDetail(8,0.75);

  cell_w = random([0.1, 0.05,0.01]) * width; //0.01, 0.05]);

​

  fs = createFilterShader(fragSrc_rgb);

  fs2 = createFilterShader(fragSrc_pixelate);

  _y = cell_w / 2;

  // texture

​

  let _x = 0;

  gfxs = [];

  for (let c of vaporwave) {

    let gfx = createGraphics(cell_w, cell_w);

​

    let cx = gfx.width / 2;

    let cy = gfx.height / 2;

    gfx.stroke(color(c));

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

      let perc = map(y, 0, gfx.height, 0.1, 0.7);

      let num = gfx.width * perc;

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

        let x = random(0, gfx.width);

        if (pointCircle(x, y, cx, cy, cx)) gfx.point(x, y);

      }

    }

​

    // cutout center circle

    //     gfx.fill(20);

    //     gfx.noStroke();

    //     gfx.beginShape();

    //     gfx.vertex(0,0);

    //     gfx.vertex(gfx.width,0);

    //     gfx.vertex(gfx.width,gfx.height);

    //     gfx.vertex(0, gfx.height);

​

    //     let step = PI/64;

    //     let cx = gfx.width/2;

    //     let cy = gfx.height/2;

    //     gfx.beginContour();

​

    //     for (let t = TWO_PI; t > 0; t -= step) {

    //       gfx.vertex(cx +cx * cos(t), cy + cy * sin(t));

    //     }

    //     gfx.endContour();

    //     gfx.endShape(CLOSE);

​

    gfxs.push(gfx);

    // image(gfx, _x, 0);

    _x += gfx.width;

  }

​

  imageMode(CENTER);

  rectMode(CENTER);

  for (let y = cell_w / 2; y < height; y += cell_w) {

    for (let x = cell_w / 2; x < width; x += cell_w) {

      // fill(random(255))

      // rect(x,y,cell_w,cell_w);

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

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

      idx = constrain(idx, 0, vaporwave.length - 1);

​

      let angle = map(n, 0.0, 1.0, -TWO_PI, TWO_PI);

​

      push();

      translate(x, y);

      rotate(angle);

​

      image(gfxs[idx], 0, 0);

      rotate(-angle);

      translate(-x, -y);

      pop();

    }

  }

  fs.setUniform("_noise", 0.01);

  fs2.setUniform("tileSize", 300.0); //100.0);

  filter(fs);

  filter(fs2);

​

  // console.log("done");

  // noLoop();

}

​

// let _y;

// function draw() {

//   // background(220);

//   for (let _x = cell_w / 2; _x < width; _x += cell_w) {

//     rect(_x, _y, cell_w, cell_w);

// //     let n = noise(_x * 0.01, _y * 0.01);

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

// //     idx = constrain(idx, 0, vaporwave.length - 1);

​

// //     console.log(idx, gfxs.length)

// //     image(gfxs[idx], _x, _y);

//   }

​

//   _y += cell_w;

//   if (_y > height) {

//     console.log("done");

//     noLoop();

//   }

// }

​