let _scale;

const Y_AXIS = 1;

const X_AXIS = 2;

​

// 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",

  "#333333",

  "#666666",

  "#999999",

  "#cccccc",

  "#eeeeee",

  "#ffffff",

];

​

const jung_hippo = ["#ffffff", "#fe7bac", "#ff921e", "#3da8f5", "#7ac943"];

​

const dt02 = [

  "#000000", // added

  "#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 = [

  "miradors",

  "powerpuff",

  "butterfly",

  "cc239",

  "monochrome",

  "jung hippo",

  "dt02",

  "frozen rose",

  "foxshelter",

  "revolucion",

  "cc245",

];

​

function getRandomPalette() {

  let ret_palette;

  let _palette = random(palettes);

​

  if (_palette == "miradors") ret_palette = miradors;

  else if (_palette == "powerpuff") ret_palette = powerpuff;

  else if (_palette == "butterfly") ret_palette = butterfly;

  else if (_palette == "cc239") ret_palette = cc239;

  else if (_palette == "jung hippo") ret_palette = jung_hippo;

  else if (_palette == "dt02") ret_palette = dt02;

  else if (_palette == "frozen rose") ret_palette = frozen_rose;

  else if (_palette == "foxshelter") ret_palette = foxshelter;

  else if (_palette == "revolucion") ret_palette = revolucion;

  else if (_palette == "cc245") ret_palette = cc245;

  else ret_palette = monochrome;

​

  return ret_palette;

}

let palette;

​

let bg,bg2;

let linecol;

​

function setup() {

  createCanvas(1000, 1000);

  palette = getRandomPalette();

  let idx;

  idx = random(0,palette.length-1)|0;

  bg = palette[idx];

  palette.splice(idx,1);

  idx = random(0,palette.length-1)|0;

  linecol = palette[idx];

  palette.splice(idx,1);

​

  _scale = width / 1000;

  offset = width * 0.05;

​

  angleMode(RADIANS);

  stroke(linecol);

​

  // bg = random(palette);

  // bg2 = random(palette);

  // setGradient(0, 0, width, height, color(bg), color(bg2), 2)

  // while (bg == linecol) bg = random(palette);

  // background(bg);

  background(random([20,220]));

  let _col = color(bg);

  _col.setAlpha(20);

  stroke(_col);

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

    for (let i = 0; i < map(y, 0, height, width*0.1, width*0.75); i++) {

      let x = random(width)|0;

      drawPoint(x,y);

    }

  }

​

  // border

  strokeWeight(0.5 * _scale);

  let pts = [];

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

    drawPoint(x, offset);

    drawPoint(x, height - offset);

  }

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

    drawPoint(offset, y);

    drawPoint(width - offset, y);

  }

​

  // dither(null);

  // lines

  //   for (let y = height-offset; y >= offset; y--) {

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

  //       if ((height-y) == x) {

  //         // drawPoint(x,y);

  //         if (random() > 0.8) {

  //           for (let y2 = y; y2 < height-offset; y2++) {

  //             drawPoint(x,y2);

  //           }

​

  //           for (let x2 = offset; x2 < x; x2++)

  //             drawPoint(x2,y);

  //         }

  //       }

  //     }

  //   }

​

  // circle

  //   translate(width / 2, height / 2);

  //   let r = width / 3;

  //   step = PI / 256;

  //   for (let theta = 0; theta < 2 * TWO_PI; theta += step) {

  //     let x = r * cos(theta);

  //     let y = r * sin(theta);

​

  //     if (random() > 0.8) {

  //       if (y < 0) {

  //         // for (let y2 = y; y2 > -height / 2 + offset; y2--) {

  //         //   drawPoint(x, y2);

  //         // }

  //       } else {

  //         for (let y2 = y; y2 < height / 2 - offset; y2++) {

  //           drawPoint(x, y2);

  //         }

  //       }

​

  //       // for (let x2 = offset; x2 < x; x2++) drawPoint(x2, y);

  //     }

  //     // drawPoint(x, y);

  //   }

​

  // vertical patterns?

  //   let x = offset+random(offset/2,2*offset);

  //   while (x < width-offset) {

  //     for (let y = offset+random(0,2); y < height-offset-random(0,2); y++)

  //       drawPoint(x,y);

  //     x += random(offset/2,2*offset);

  //   }

​

  //   let y = offset+random(offset/2,2*offset);

  //   while (y < height-offset) {

  //     for (let x = offset+random(0,2); x < width-offset-random(0,2); x++)

  //       drawPoint(x,y);

  //     y += random(offset/2,2*offset);

  //   }

​

  // generate random rects, track the x/y/w/h and draw lines from that?

  let boxes = [];

  for (let i = 0; i < random(2, 150); i++) {

    let timeout = 1000;

    while (timeout > 0) {

      let w = random(offset/2, offset * 8);

      let h = random(offset/2, offset * 8);

​

      let x = random(offset, width - offset - w);

      let y = random(offset, height - offset - h);

​

      let valid = true;

      for (let b of boxes) {

        // boxbox?

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

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

            if (badPointRectCollision(_x, _y, b.x, b.y, b.w, b.h)) {

              valid = false;

              break;

            }

          }

        }

​

        // newbox lines

        for (let _x = offset; _x < width - offset; _x++) {

          if (badPointRectCollision(_x, y, b.x, b.y, b.w, b.h) || 

             badPointRectCollision(_x, y+h, b.x, b.y, b.w, b.h) ||

             badPointRectCollision(_x, b.y, x, y, w, h) ||

             badPointRectCollision(_x, b.y+b.h, x, y, w, h)) {

            valid = false;

            break;

          }

        }

        for (let _y = offset; _y < height-offset; _y++) {

          if (badPointRectCollision(x, _y, b.x, b.y, b.w, b.h) ||

              badPointRectCollision(x+w, _y, b.x, b.y, b.w, b.h) ||

             badPointRectCollision(b.x, _y, x, y, w, h) ||

             badPointRectCollision(b.x+b.w, _y, x, y, w, h)) {

            valid = false;

            break;

          }

        }

        if (!valid) break;

      }

      if (valid) {

        boxes.push({ x: x, y: y, w: w, h: h });

        break;

      } else timeout--;

    }

  }

  // draw lines from boxes

  let _l = color(linecol);

  _l.setAlpha(80);

  stroke(_l);//linecol);

  for (let b of boxes) {

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

      drawPoint(x, b.y);

      drawPoint(x, b.y + b.h);

    }

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

      drawPoint(b.x, y);

      drawPoint(b.x + b.w, y);

    }

  }

//   for (let b of boxes) {

//     for (let b2 of boxes) {

//       if (b != b2) {

//         fill(color(linecol));

//         quad(b.x,b.y,b.x+b.w,b.y+b.h,b2.x,b2.y,b2.x+b2.w,b2.y+b2.h);

//         noFill();

//         quad(b.x+b.w, b.y, b.x, b.y+b.h, b2.x+b.w, b.y, b2.x, b2.y+b.h )

//       }

//     }

//   }

  // dither(null);

  // fill boxes

  for (let b of boxes) {

    let drippy = false;

    if (random() > 0.9) drippy = true;

    let col = color(random(palette));

​

    stroke(col);

​

    // box

    for (let y = b.y; y < b.y + b.h; y++) {

      for (let i = 0; i < map(y, b.y, b.y+b.h, b.w * 0.1, b.w); i++) {

        let x = random(b.x, b.x+b.w)|0;

      // for (let x = b.x; x < b.x + b.w; x++) {

        if (random() > 0.15) drawPoint(x, y);

      }

    }

    // circle - blah

//     push();

//     let _a = b.w/2;

//     let _b = b.h/2;

//     translate(b.x+_a, b.y+_b);

//     // for (let r = 0.1; r < b.w; r += random(0.1, 1.0)) {

//     for (let _b = 0; _b < b.h/2; _b += random(0.1, 1.0)) {

//       for (let _a = 0; _a < b.w/2; _a += random(0.1, 1.0)) {

//       let theta = random(TWO_PI);

//       // acost

//       // bcost

//       // a = 

//       let x = _a * cos(theta);

//       let y = _b * sin(theta);

//       drawPoint(x,y);

//       }

//     }

//     // }

//     pop();

    if (drippy) {

      for (let i = 0; i < random(1, b.w); i++) {

        let x = random(b.x, b.x+b.w);

        let y = b.y+b.h;//random(b.y+b.h/2, b.y+b.h);

        let l = random(10, height-offset-y);

        for (let _y = y; _y < y+l; _y+=random(1,3)) {

          drawPoint(x, _y);

        }

      }

    }

  }

  // dither(null);

}

​

function badPointRectCollision(x1, y1, x2, y2, w, h) {

  if (x1 >= x2 && x1 <= x2 + w && y1 >= y2 && y1 <= y2 + h) return true;

  return false;

}

​

function draw() {

  noLoop();

}

​

function drawPoint(x, y) {

  if (random() > 0.25) point(x, y);

  else {

    for (let i = 0; i < random(5); i++) {

      point(x + random(-1, 1), y + random(-1, 1));

    }

  }

}

​

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) {

  let referenceSize = 1000;

  let hasMaxSize = false;

  if (g == null) {

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

    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, hasMaxSize));

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

  }

}

​

// p5

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

  if (g == null) {

    noFill();

​

    if (axis === Y_AXIS) {

      // 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 === X_AXIS) {

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

      }

    }

  } else {

    g.noFill();

    if (axis === Y_AXIS) {

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

        g.stroke(c);

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

      }

    } else if (axis === X_AXIS) {

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

        g.stroke(c);

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

      }

    }

  }

}

​

// https://p5js.org/reference/#/p5/drawingContext

function drawShadow(x, y, b, c, g = null) {

  if (g == null) {

    drawingContext.shadowOffsetX = x;

    drawingContext.shadowOffsetY = y;

    drawingContext.shadowBlur = b * _scale;

    drawingContext.shadowColor = c;

  } else {

    g.drawingContext.shadowOffsetX = x;

    g.drawingContext.shadowOffsetY = y;

    g.drawingContext.shadowBlur = b * _scale;

    g.drawingContext.shadowColor = c;

  }

}