211127a_Fork

let palette = [];

let tex;

​

function preload() {

  tex = loadImage("IMG_3392.JPG");

}

function setup() {

  createCanvas(600, 400);

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

  angleMode(DEGREES);

  noSmooth();

  noLoop();

  while (palette.length < 5) {

    palette = shuffle(chromotome.get().colors);

  }

}

​

function draw() {

  // drawGradientShape(width / 2, height / 2, width, true);

  image(tex, 0, 0);

  background(0, 0, 95, 33);

  // blendMode(MULTIPLY);

  // background(0, 0, 95);

  blendMode(BLEND);

  let offset = width / 15;

  let margin = offset / 3;

  let cell_num = int(random(1, 4));

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

  let w = sqrt(sq(width) + sq(height));

​

  push();

  translate(width / 2, height / 2);

  rotate(45);

  translate(-w / 2, -w / 2);

  setGrid(

    -offset,

    -offset,

    w + offset * 2,

    w + offset * 2,

    cell_num,

    margin

  );

  pop();

}

​

function setGrid(x, y, w, h, cell_num, margin) {

  let cw, ch;

  let rotate_num = int(random(4));

  if (rotate_num % 2 == 0) {

    cw = w;

    ch = h;

  } else {

    cw = h;

    ch = w;

  }

  push();

  translate(x + w / 2, y + h / 2);

  // rotate((rotate_num * 360) / 4);

  translate(-cw / 2, -ch / 2);

  let cdw = (cw - margin * (cell_num - 1)) / cell_num;

  let cdh = (ch - margin * (cell_num - 1)) / cell_num;

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

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

      let cx = i * (cdw + margin);

      let cy = j * (cdh + margin);

      if (min(cdw, cdh) > width / 10) {

        setGrid(cx, cy, cdw, cdh, int(random(1, 5)), margin / 2);

      } else {

        // rect(cx, cy, cdw, cdh);

        let sep = 1;

        push();

        drawArrow(cx + cdw / 2, cy + cdh / 2, cdw * 0.9, sep);

        pop();

      }

    }

  }

  pop();

}

​

function drawArrow(cx, cy, d, sep) {

  let angle = (int(random(4)) * 360) / 4;

  for (let e = 1; e > 0; e -= 1 / sep) {

    let step = random(3, 9);

    let f = d * e;

    push();

    translate(cx, cy);

    scale(0.9);

    rotate(angle);

    let r = f / 2;

    curveTightness(map(random(), 0, 1, -0.2, 0.9));

    let arr = [];

    fill(random(palette));

    drawingContext.shadowBlur = d / 5;

    drawingContext.shadowOffsetX = d / 10;

    drawingContext.shadowOffsetY = d / 10;

​

    noStroke();

​

    beginShape();

    for (let angle = 0; angle <= 180; angle += 180 / 2) {

      let x = cos(angle) * r;

      let y = sin(angle) * r;

      curveVertex(x, y);

      if (arr.length < 3) {

        arr.push(createVector(x, y));

      }

    }

    curveVertex(-f / step, 0);

    curveVertex(-f / step, -f / 2);

    curveVertex(f / step, -f / 2);

    curveVertex(f / step, 0);

    for (let p of arr) {

      curveVertex(p.x, p.y);

    }

    endShape();

    drawingContext.clip();

    drawGradientShape(0, 0, f * sqrt(2), true);

    pop();

  }

}

​

function drawGradientShape(x, y, d, bool = false) {

  rectMode(CENTER);

  noStroke();

  push();

  translate(x, y);

  if (bool) {

    fill(random(palette));

    rect(0, 0, d, d);

  }

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

  drawingContext.shadowBlur = d / 5;

  let c = color(random(palette));

  // c.setAlpha(50);

  // translate(d/2,d/2);

  rotate((int(random(4)) * 360) / 4);

  translate(-d / 2, -d / 2);

  fill(c);

  if (bool) {} else {

    arc(0, 0, d * 2, d * 2, 0, 90);

  }

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

  drawingContext.clip();

  translate(d / 2, d / 2);

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

​

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

    rotate(90);

    let gradient = drawingContext.createRadialGradient(

      -d / 2,

      -d / 2,

      0,

      -d / 2,

      -d / 2,

      d * 5

    );

    gradient.addColorStop(0, colors[i % colors.length]);

    gradient.addColorStop(1 / 5, color(0, 0, 100, 0));

    noStroke();

    fill(0, 0, 100, 0);

    drawingContext.fillStyle = gradient;

    circle(-d / 2, -d / 2, d * 2);

  }

  pop();

}