let border;

​

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

​

function setup() {

  createCanvas(1000, 1000);

  border = width * 0.02;

​

  palette = getRandomPalette();

  let idx = int(random(palette.length - 1));

  bg = palette[idx];

  palette.splice(idx, 1);

​

  skip_y = [];

​

  background(bg);

  // fill(random(palette)); //color(220,80,0));

​

  let numparticles = width * 0.85;

  let overlaycol = random(palette);

​

  circ_r = int(random(width / 4, width / 8));

  let circ_x = random(0, width); //circ_r, width-circ_r);

  let circ_y = random(/*circ_r*/ 0, height / 2 - circ_r);

​

  let start_band = false;

  let starty, endy;

​

  let ccol = color(overlaycol);

  let circ_d = circ_r * 2;

  let startr = circ_d + random(10, 50);

  let endr = circ_d * 2 + random(-50, 50);

​

  let band = circ_r / 16;

  let suncolor = color(random(palette));

​

  let buildingdensity = random(1, 5);

​

  for (let y = circ_r * sin(-PI / 2); y < circ_r * sin(PI / 2); y++) {

    if (random() > 0.6 && !start_band) {

      start_band = true;

      starty = y;

    }

    if (random() > 0.8 && start_band) {

      start_band = false;

      skip_y.push([starty, y]);

    }

  }

​

  // background

​

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

    let dist = map(y, 0, height, 0.05, 0.9);

​

    for (let i = 0; i < numparticles * dist; i++) {

      let x = random(width);

      let c = lerpColor(

        color(bg),

        color(overlaycol),

        map(y, 0, height, 0.0, 1.0)

      ); //overlaycol);

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

​

      stroke(c);

      drawPoint(x + random(-2, 2), y + random(-2, 2));

    }

  }

  // mountains?

  let start_my = random(height / 4, height / 4);

  let my = start_my;

  noStroke();

  let curved = random([true, false]);

  for (let i = 0; (i < random(1, 10)) | 0; i++) {

    if (i > 0) my += random(height - height / 4, height / 4);

​

    if (my > height) break;

​

    let mcol = color(random(palette));

    mcol.setAlpha(random(10, 40));

    fill(mcol);

    beginShape();

    vertex(0, my);

    for (

      let mx = random(width / 8, width / 16);

      mx < width;

      mx += random(width / 8, width / 32)

    ) {

      if (curved) curveVertex(mx, my + random(-height / 16, height / 16));

      else vertex(mx, my + random(-height / 16, height / 16));

    }

    vertex(width, my);

    vertex(width, height);

    vertex(0, height);

    endShape(CLOSE);

  }

​

  translate(circ_x, circ_y); //width/4,height/4);

  drawShadow(0, 0, 5, color(overlaycol));

​

  // rings

  noFill();

  for (let r = startr; r < endr; r += random(10, 50)) {

    ccol.setAlpha(map(r, startr, endr, 180, 10));

    stroke(ccol);

    circle(0, 0, r);

  }

​

  // fill the sun

  stroke(suncolor);

  for (let r = 0; r < circ_r; r++) {

    let theta_start = random(0, TWO_PI);

    let theta_end = theta_start + TWO_PI;

​

    for (

      let t = theta_start;

      t < theta_end;

      t += map(r, 0, circ_r, PI / 32, TWO_PI / 256)

    ) {

      let _x = r * cos(t);

      let _y = r * sin(t);

​

      let skip = false;

​

      for (let skipy of skip_y) {

        if (_y > skipy[0] && _y < skipy[1]) {

          skip = true;

          break;

        }

      }

​

      if (!skip) {

        drawPoint(_x, _y);

        drawPoint(_x + 5, _y + 5);

      }

    }

  }

​

  translate(-circ_x, -circ_y);

​

​

  // buildings

​

  noStroke();

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

    for (let x = 0; x < width; x += random(40, 60)) {

      if (random() < 0.9) {

        let c = color(random(palette));

        c.setAlpha(random(10, 140));

        fill(c);

        let _y = random(50, 250);

        let _x = random(40, 60);

​

        let x2 = x + random(-5, 5);

        let x3 = x + _x;

        let x4 = x + _x + random(-5, 5);

​

        let y2 = height - _y;

        let y3 = height - _y + random(-5, 5);

​

        beginShape();

        vertex(x, height);

        vertex(x2, y2);

        vertex(x3, y3);

        vertex(x4, height);

        endShape(CLOSE);

​

        beginShape();

        vertex(x + random(1, 5), height + random(1, 5));

        vertex(x + random(-5, 5) + random(1, 5), height - _y + random(1, 5));

        vertex(

          x + _x + random(1, 5),

          height - _y + random(-5, 5) + random(1, 5)

        );

        vertex(x + _x + random(-5, 5) + random(1, 5), height + random(1, 5));

        endShape(CLOSE);

​

        //         for (let w = 0; w < random(50); w++) {

        //           if (random() > 0.15) {

        //             let wcol = color(

        //               random([

        //                 color(bg),

        //                 color(random(50, 150), random(50, 150), 0),

        //                 color(random(20, 60)),

        //               ])

        //             );

        //             wcol.setAlpha(random(10, 140));

        //             fill(wcol);

​

        //             let _size = abs(x4 - x);

        //             let wx = random(x, x4 - _size);

        //             let wy = random(height, height - _size);

​

        //             _size /= random(4, 16);

        //             beginShape();

        //             vertex(wx, wy);

        //             vertex(wx + _size, wy); //+random(-5,5));

        //             vertex(wx + _size, wy - _size); //+random(-5,5)-_size);

        //             vertex(wx , wy - _size); //+random(-5,5)-_size);

        //             endShape(CLOSE);

        //           }

        //         }

      }

    }

  }

​

  //   translate(-circ_x, -circ_y);

  //   let thePI = random(PI+PI/16, PI/2-PI/16);

  //   let edge_x = circ_r * cos(thePI);

  //   let edge_y = circ_r * sin(thePI);

​

  //   let bc = color(random(palette));

  //   noStroke();

  //   bc.setAlpha(20);

  //   fill(bc);//0,255,0,10));

  //   noStroke();

  //   beginShape();

  //   vertex(0,height);

  //   vertex(width,height);

  //   vertex(circ_x-edge_x, circ_y + edge_y);

  //   vertex(circ_x+edge_x, circ_y + edge_y);

  //   endShape(CLOSE);

​

  // drawShadow(0,0,0,0);

  // let bgcol = color(bg);

  // bgcol.setAlpha(40);

  // fill(bgcol);

  // // noStroke();

  // // beginShape();

  // // vertex(0,0);

  // // vertex(width,0);

  // // vertex(width,height);

  // // vertex(width-border,height);

  // // vertex(width-border, border);

  // // vertex(0,border);

  // // endShape(CLOSE);

  // // beginShape();

  // // vertex(0,border);

  // // vertex(border,border);

  // // vertex(border,height-border);

  // // vertex(width,height-border);

  // // vertex(width,height);

  // // vertex(0,height);

  // // endShape(CLOSE);

  // rect(0,0,width,border);

  // rect(0,border,border,height-border);

  // rect(border,height-border,width-border,border);

  // rect(width-border,border,border,height-2*border);

​

  // dither(null);

  // frameRate(10);

}

​

// let idx = 0;

function draw() {

  // background(220);

  noLoop();

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

  // idx++;

  // if (idx > gfxs.length - 1) idx = 0;

}

​

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

    }

  }

}

​

//(x2-x1)^2 + (y2-y1)^2 <= (r1+r2)^2

function circCollision(x1, y1, x2, y2, r1, r2) {

  let l = (x2 - x1) ** 2 + (y2 - y1) ** 2;

  let r = (r1 + r2) ** 2;

​

  return l <= r;

}

​

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

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

  _scale = 1.0;

  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;

  }

}

​

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 = true;

  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 factor = 1.0; //min(1.0, map(width, 0, referenceSize, 0, 1, hasMaxSize));//1.0;

        // let newr = round((factor * oldr) / 255) * (255);// / factor);

        // let newg = round((factor * oldg) / 255) * (255);// / factor);

        // let newb = round((factor * oldb) / 255) * (255);// / factor);

​

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

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

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

​

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

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

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

​

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

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

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

​

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

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

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

​

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

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

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

          }

        }

      }

    }

    updatePixels();

  } else {

    g.loadPixels();

​

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

      for (let x = 1; x < g.width - 1; 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 factor = 1.0;

        let newr = round((factor * oldr) / 255) * (255 / factor);

        let newg = round((factor * oldg) / 255) * (255 / factor);

        let newb = round((factor * oldb) / 255) * (255 / factor);

​

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

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

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

​

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

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

        g.pixels[index(g, x + 1, y) + 2] += ((oldr - newr) * 7) / 16.0;

​

        g.pixels[index(g, x - 1, y + 1)] += ((oldr - newr) * 3) / 16.0;

        g.pixels[index(g, x - 1, y + 1) + 1] += ((oldr - newr) * 3) / 16.0;

        g.pixels[index(g, x - 1, y + 1) + 2] += ((oldr - newr) * 3) / 16.0;

​

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

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

        g.pixels[index(g, x, y + 1) + 2] += ((oldr - newr) * 5) / 16.0;

​

        g.pixels[index(g, x + 1, y + 1)] += ((oldr - newr) * 1) / 16.0;

        g.pixels[index(g, x + 1, y + 1) + 1] += ((oldr - newr) * 1) / 16.0;

        g.pixels[index(g, x + 1, y + 1) + 2] += ((oldr - newr) * 1) / 16.0;

        g.updatePixels();

      }

    }

  }

}

​

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

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

      }

    }

  }

}

​