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;

​

let faces = [

    "( ͡° ͜ʖ ͡°)",

    "¯\\_(ツ)_/¯",

    "̿̿ ̿̿ ̿̿ ̿'̿'\̵͇̿̿\з= ( ▀ ͜͞ʖ▀) =ε/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿ ̿̿",

    "( ͡°( ͡° ͜ʖ( ͡° ͜ʖ ͡°)ʖ ͡°) ͡°)",

    "ʕ•ᴥ•ʔ",

    "(▀̿Ĺ̯▀̿ ̿)",

    "(ง ͠° ͟ل͜ ͡°)ง",

    "༼ つ ◕_◕ ༽つ",

    "ಠ_ಠ",

    "(づ｡◕‿‿◕｡)づ",

    // "̿'̿'\̵͇̿̿\з=( ͠° ͟ʖ ͡°)=ε/̵͇̿̿/'̿̿ ̿ ̿ ̿ ̿ ̿", // issue

    "[̲̅$̲̅(̲̅5̲̅)̲̅$̲̅]",

    "(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ ✧ﾟ･: *ヽ(◕ヮ◕ヽ)",

    "┬┴┬┴┤ ͜ʖ ͡°) ├┬┴┬┴",

    // "( ͡°╭͜ʖ╮͡° )", // issue

    "(͡ ͡° ͜ つ ͡͡°)",

    "(• ε •)",

    "(ಥ﹏ಥ)",

    "(ง'̀-'́)ง",

    "﴾͡๏̯͡๏﴿ O'RLY?",

    "(ノಠ益ಠ)ノ彡┻━┻",

    "(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧",

    "[̲̅$̲̅(̲̅ ͡° ͜ʖ ͡°̲̅)̲̅$̲̅]",

    "(☞ﾟ∀ﾟ)☞",

    "| (• ◡•)| (❍ᴥ❍ʋ)",

    "(ᵔᴥᵔ)",

    "(◕‿◕✿)",

    "(╯°□°)╯︵ ʞooqǝɔɐɟ",

    "(¬‿¬)",

    "(づ￣ ³￣)づ",

    "(☞ﾟヮﾟ)☞ ☜(ﾟヮﾟ☜)",

    "ლ(ಠ益ಠლ)",

    "ಠ╭╮ಠ",

    "/╲/\\╭( ͡° ͡° ͜ʖ ͡° ͡°)╮/\\╱\\",

    "̿ ̿ ̿'̿'\\̵͇̿̿\\з=(•_•)=ε/̵͇̿̿/'̿'̿ ̿",

    "(;´༎ຶД༎ຶ`)",

    "♪~ ᕕ(ᐛ)ᕗ",

    "༼ つ  ͡° ͜ʖ ͡° ༽つ",

    "♥‿♥",

    "༼ つ ಥ_ಥ ༽つ",

    "(╯°□°）╯︵ ┻━┻",

    "ヾ(⌐■_■)ノ♪",

    "( ͡ᵔ ͜ʖ ͡ᵔ )",

    "~(˘▾˘~)",

    "◉_◉",

    "(~˘▾˘)~",

    "\\ (•◡•) /",

    "(._.) ( l: ) ( .-. ) ( :l ) (._.)",

    "༼ʘ̚ل͜ʘ̚༽",

    "┬┴┬┴┤(･_├┬┴┬┴",

    "༼ ºل͟º ༼ ºل͟º ༼ ºل͟º ༽ ºل͟º ༽ ºل͟º ༽",

    "ᕙ(⇀‸↼‶)ᕗ",

    "ᕦ(ò_óˇ)ᕤ",

    "⚆ _ ⚆",

    "┻━┻ ︵ヽ(`Д´)ﾉ︵ ┻━┻",

    "(•_•) ( •_•)>⌐■-■ (⌐■_■)",

    "(｡◕‿‿◕｡)",

    "ヽ༼ຈل͜ຈ༽ﾉ",

    "ಥ_ಥ",

    "(☞ຈل͜ຈ)☞",

    "˙ ͜ʟ˙",

    "☜(˚▽˚)☞",

    "(ง°ل͜°)ง",

    "(•ω•)",

    "(｡◕‿◕｡)",

    "（╯°□°）╯︵( .o.)",

    "┬──┬ ノ( ゜-゜ノ)",

    ":')",

    "(っ˘ڡ˘ς)",

    "ಠ⌣ಠ",

    "(°ロ°)☝",

    "ლ(´ڡ`ლ)",

    "｡◕‿‿◕｡",

    "( ಠ ͜ʖರೃ)",

    "(─‿‿─)",

    "╚(ಠ_ಠ)=┐",

    "ƪ(˘⌣˘)ʃ",

    "(；一_一)",

    "( ⚆ _ ⚆ )",

    "(¬_¬)",

    "(ʘᗩʘ')",

    "☜(⌒▽⌒)☞",

    "｡◕‿◕｡",

    "¯\\(°_o)/¯",

    "ლ,ᔑ•ﺪ͟͠•ᔐ.ლ",

    "(ʘ‿ʘ)",

    "(´・ω・`)",

    "ಠ~ಠ",

    "┬─┬ノ( º _ ºノ)",

    "(° ͡ ͜ ͡ʖ ͡ °)",

    "(´・ω・)っ由",

    "ಠ_ಥ",

    "(>ლ)",

    "ಠ‿↼",

    "ʘ‿ʘ",

    "ಠoಠ",

    "(ღ˘⌣˘ღ)",

    "ರ_ರ",

    "(▰˘◡˘▰)",

    "◔̯◔",

    "◔ ⌣ ◔",

    "¬_¬",

    "(✿´‿`)",

    "ب_ب",

    "｡゜(｀Д´)゜｡",

    "(ó ì_í)=óò=(ì_í ò)",

    "°Д°",

    "┬─┬• ︵ /(.□. ）'",

    "( ﾟヮﾟ)",

    "٩◔̯◔۶",

    "≧☉_☉≦",

    "^̮^",

    "☼.☼",

    "(>人<)",

    "〆(・∀・＠)",

    "^̮^",

    "☼.☼",

    "(>人<)",

    "〆(・∀・＠)",

    "(~_^)",

    ">_>",

    "(/) (°,,°) (/)",

    "(^̮^)",

    "=U",

    "(･.◤)",

  ];

function setup() {

  createCanvas(1000, 1000);

  background(20);

​

  pixelDensity(1);

  palette = random(palettes);

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

  fill(color(random(palette)));

  let tsize = width * 0.15;

  noStroke();

  //rect(0,(height/2)-tsize, width, 2*tsize);

  setGradient(0,(height/2)-tsize, width, 2*tsize, color(random(palette)), color(random(palette)), 2);

  textFont("Helvetica");

  textSize(tsize);

  textAlign(CENTER,CENTER);

  fill(color(random(palette)))

  text(random(faces), width/2, height/2);

​

  // 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(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);

​

  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();

  }

}

​