201225

let url = "https://coolors.co/1f2041-4b3f72-ffc857-119da4-19647e";

let palette;

​

function setup() {

  createCanvas(800, 800);

  colorMode(HSB, 360, 100, 100, 100);

  angleMode(DEGREES);

  palette = createPalette(url);

}

​

function draw() {

  background(0, 0, 90);

  let cells = int(random(1, 8));

  let offset = width / 10;

  let margin = offset / 5;

​

  let cellSize = (width - offset * 2 - margin * (cells - 1)) / cells;

​

  for (let j = 0; j < cells; j++) {

    for (let i = 0; i < cells; i++) {

      let x = offset + i * (cellSize + margin) + cellSize / 2;

      let y = offset + j * (cellSize + margin) + cellSize / 2;

      push();

      translate(x, y);

      let n = 0;

      let angle = random(360);

      let step = int(random(7, 12));

      for (let d = cellSize; d > 1; d -= cellSize / step) {

        push();

        rotate(angle + n * 360 / 7);

        drawPatternArc(0, 0, d, d, 0, 120, PIE);

        pop();

        n++;

      }

      pop();

​

    }

  }

  // noLoop();

  frameRate(0.5);

}

​

function drawPatternArc(x, y, w = 1, h = 1, a1, a2, SHAPE) {

  // arc(x,y,w,h,a1,a2,SHAPE);

​

  let colors = shuffle(palette.concat());

​

​

  let c1 = colors[0];

  let c2 = colors[1];

  let c3 = colors[2];

  let g1 = createGraphics(w, h);

  g1.angleMode(DEGREES);

  let g2 = makePattern(w, h, c2);

  // g1.noStroke();

  g1.fill(c1);

  g1.stroke(c3);

  g1.arc(w / 2, h / 2, w - 2, h - 2, a1, a2, SHAPE);

​

​

  let g1_tmp = g1.get();

  let g2_tmp = g2.get();

  g2_tmp.mask(g1_tmp);

​

  imageMode(CENTER);

  drawingContext.shadowColor = color(0, 0, 0, 30);

  drawingContext.shadowBlur = min(w, h) / 5;

  image(g1, x, y);

  image(g2_tmp, x, y);

​

}

​

function makePattern(w, h, c) {

  let scl = 4;

  let g = createGraphics(w, h);

  let gw = g.width;

  let gh = g.height;

​

  let step = int(random(5, 25));

  let ww = sqrt(sq(gw) + sq(gh));

  g.strokeWeight(step / random(1.5, 3));

  g.push();

  g.translate(gw / 2, gh / 2);

  g.rotate(random(360));

  g.translate(-ww / 2, -ww / 2);

  g.stroke(c);

  for (let j = 0; j < ww; j += step) {

    for (let i = 0; i < ww; i += step) {

      g.point(i, j);

    }

  }

​

  g.pop();

  return g;

}

​

function createPalette(_url) {

  let slash_index = _url.lastIndexOf('/');

  let pallate_str = _url.slice(slash_index + 1);

  let arr = pallate_str.split('-');

  for (let i = 0; i < arr.length; i++) {

    arr[i] = color('#' + arr[i]);

  }

  return arr;

}