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

// chromotome palettes

const miradors = [

  "#020202",

  "#ff6936",

  "#fddc3f",

  "#0075ca",

  "#03bb70",

];

const powerpuff = [

  "#201010",

  "#5dece1",

  "#ea50c4",

  "#47e752",

  "#130d0d",

];

const butterfly = [

  "#191e36",

  "#f40104",

  "#f6c0b3",

  "#99673a",

  "#f0f1f4",

];

const cc239 = [

  "#e0eff0",

  "#e3dd34",

  "#78496b",

  "#f0527f",

  "#a7e0e2"

];

​

const monochrome = [

  // "#000000",

  "#111111",

  "#333333",

  "#666666",

  "#999999",

  "#cccccc",

  "#eeeeee",

  "#ffffff",

];

​

const jung_hippo = [

  "#ffffff",

  "#fe7bac",

  "#ff921e",

  "#3da8f5",

  "#7ac943",

];

​

const dt02 = [

  // "#000000", // added

  "#111111",

  "#eee3d3",

  "#302956",

  "#f3c51a",

];

​

const frozen_rose = [

  "#f2e8e4",

  "#2a358f",

  "#e9697b",

  "#1b164d",

  "#f6d996",

];

​

const foxshelter = [

  "#dddddd",

  "#ff3931",

  "#007861",

  "#311f27",

  "#bab9a4",

];

​

const revolucion = [

  "#2d1922",

  "#ed555d",

  "#fffcc9",

  "#41b797",

  "#eda126",

  "#7b5770",

];

​

const cc245 = [

  "#f6f4ed",

  "#0d4a4e",

  "#ff947b",

  "#ead3a2",

  "#5284ab",

];

​

let palettes = [vaporwave,miradors,powerpuff,butterfly,cc239,monochrome,jung_hippo,dt02,frozen_rose,foxshelter,revolucion];

let palette;

​

function setup() {

  createCanvas(1000, 1000);

  background(20);

​

  palette = random(palettes);

  setGradient(0, 0, width, height, color(random(palette)), color(random(palette)), 1);

​

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

  //   strokeWeight(random(0.5,1))

  //   stroke(random(255))

  //   line(random(0,width),random(0,height),random(0,width),random(0,height));

  // }

​

  noiseDetail(2, 0.5);

  let w2 = width / 2;

  let h2 = height / 2;

​

  let w3 = width / 3;

  let h3 = height / 3;

​

  /*

  let ysep = random(10, 40);

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

    let step = random(1, 40);

    let c = color(random(palette));

    // c.setAlpha(random(20,220))

    fill(c);

    noStroke();

​

    drawingContext.shadowOffsetX = -5;

    drawingContext.shadowOffsetY = -5;

    drawingContext.shadowBlur = 10; // * scale;

    drawingContext.shadowColor = color(20);

​

    beginShape();

    vertex(0, y);

​

    let _y = y;

    let maxy = map(y, h3, height - h3, ysep / 2, ysep * 2);

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

      curveVertex(x, _y);

​

      let n = noise(x, y);

      let o = map(n, 0.0, 1.0, 0, maxy);

​

      if (random() > 0.5) _y -= o;

      else _y += o;

    }

    */

​

    /*

    vertex(0,y);

    let _y = y;

    let dir = false;

    if (random() > 0.5) dir = true;

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

      curveVertex(x,_y);

      // if (dir)

      _y += map(noise(x, y), 0.0, 1.0, height*0.05, height*0.1);

      // else

      //   _y += map(noise(y, x), 0.0, 1.0, 0, height*0.05);

    }

    */

  /*

    vertex(width, y);

    vertex(width, height);

    vertex(0, height);

    endShape(CLOSE);

  }

  */

  /*

  if (random() > 0.5)

    dither(null);

​

  noStroke();

  drawingContext.shadowOffsetX = 0;

  drawingContext.shadowOffsetY = 0;

  drawingContext.shadowBlur = 0;

  // mask overlay

  let gfx = createGraphics(width, height);

  let bgc = color(random(palette))

  bgc.setAlpha(random(20,255))

  gfx.background(color(220, 0, 220, 50));

  gfx.fill(bgc);

​

  // the contour

  gfx.beginShape();

  gfx.endShape();

  */

  /*

  gfx.translate(w2, h2);

​

  gfx.beginShape();

  gfx.vertex(-w2, -h2);

  gfx.vertex(w2, -h2);

  gfx.vertex(w2, h2);

  gfx.vertex(-w2, h2);

​

  gfx.beginContour();

​

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

    let x = w3 * cos(t);

    let y = h3 * sin(t);

    gfx.vertex(x, y);

  }

​

  gfx.endContour();

  gfx.endShape(CLOSE);

  */

​

  // image(gfx, 0, 0);

  noLoop();

}

​

function draw() {

  // background(220);

}

​

function keyPressed() {

  if (key == "d") dither(null);

  if (key == "s") save("masked.png");

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

​

  if (axis === 1) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis === 2) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

}

​

const referenceSize = 1000;

function index(g, x, y) {

  if (g == null)

    return (x + y * width) * 4;

  else

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

}

function DivideBy255(value) {

  return (value + 1 + (value >> 8)) >> 8;

}

function dither(g) {

  if (g == null) {

    let _scale = Math.ceil(1, map(width, 0, referenceSize, 0, 1, false));

    loadPixels();

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

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

        let oldr = pixels[index(g, x, y)];

        let oldg = pixels[index(g, x, y) + 1];

        let oldb = pixels[index(g, x, y) + 2];

​

        let newr = (DivideBy255(oldr) * 255) | 0;

        let newg = (DivideBy255(oldg) * 255) | 0;

        let newb = (DivideBy255(oldb) * 255) | 0;

​

        pixels[index(g, x, y)] = newr;

        pixels[index(g, x, y) + 1] = newg;

        pixels[index(g, x, y) + 2] = newb;

​

        for (let _y = 1; _y <= _scale; _y++) {

          for (let _x = 1; _x <= _scale; _x++) {

            pixels[index(g, x + _x, y)] += ((oldr - newr) * 7) >> 4;

            pixels[index(g, x + _x, y) + 1] += ((oldr - newr) * 7) >> 4;

            pixels[index(g, x + _x, y) + 2] += ((oldr - newr) * 7) >> 4;

​

            pixels[index(g, x - _x, y + _y)] += ((oldr - newr) * 3) >> 4;

            pixels[index(g, x - _x, y + _y) + 1] += ((oldr - newr) * 3) >> 4;

            pixels[index(g, x - _x, y + _y) + 2] += ((oldr - newr) * 3) >> 4;

​

            pixels[index(g, x, y + _y)] += ((oldr - newr) * 5) >> 4;

            pixels[index(g, x, y + _y) + 1] += ((oldr - newr) * 5) >> 4;

            pixels[index(g, x, y + _y) + 2] += ((oldr - newr) * 5) >> 4;

​

            pixels[index(g, x + _x, y + _y)] += ((oldr - newr) * 1) >> 4;

            pixels[index(g, x + _x, y + _y) + 1] += ((oldr - newr) * 1) >> 4;

            pixels[index(g, x + _x, y + _y) + 2] += ((oldr - newr) * 1) >> 4;

          }

        }

      }

    }

    updatePixels();

  } else {

    let _scale = Math.ceil(1, map(g.width, 0, referenceSize, 0, 1, false));

    g.loadPixels();

    for (let y = 0; y < g.height - _scale; y++) {

      for (let x = _scale; x < g.width - _scale; x++) {

        let oldr = g.pixels[index(g, x, y)];

        let oldg = g.pixels[index(g, x, y) + 1];

        let oldb = g.pixels[index(g, x, y) + 2];

​

        let newr = (DivideBy255(oldr) * 255) | 0;

        let newg = (DivideBy255(oldg) * 255) | 0;

        let newb = (DivideBy255(oldb) * 255) | 0;

​

        g.pixels[index(g, x, y)] = newr;

        g.pixels[index(g, x, y) + 1] = newg;

        g.pixels[index(g, x, y) + 2] = newb;

​

        for (let _y = 1; _y <= _scale; _y++) {

          for (let _x = 1; _x <= _scale; _x++) {

            g.pixels[index(g, x + _x, y)] += ((oldr - newr) * 7) >> 4;

            g.pixels[index(g, x + _x, y) + 1] += ((oldr - newr) * 7) >> 4;

            g.pixels[index(g, x + _x, y) + 2] += ((oldr - newr) * 7) >> 4;

​

            g.pixels[index(g, x - _x, y + _y)] += ((oldr - newr) * 3) >> 4;

            g.pixels[index(g, x - _x, y + _y) + 1] += ((oldr - newr) * 3) >> 4;

            g.pixels[index(g, x - _x, y + _y) + 2] += ((oldr - newr) * 3) >> 4;

​

            g.pixels[index(g, x, y + _y)] += ((oldr - newr) * 5) >> 4;

            g.pixels[index(g, x, y + _y) + 1] += ((oldr - newr) * 5) >> 4;

            g.pixels[index(g, x, y + _y) + 2] += ((oldr - newr) * 5) >> 4;

​

            g.pixels[index(g, x + _x, y + _y)] += ((oldr - newr) * 1) >> 4;

            g.pixels[index(g, x + _x, y + _y) + 1] += ((oldr - newr) * 1) >> 4;

            g.pixels[index(g, x + _x, y + _y) + 2] += ((oldr - newr) * 1) >> 4;

          }

        }

      }

    }

    g.updatePixels();

  }

}

​