230402a - OpenProcessing

mySketch
xxxxxxxxxx
 
let objs = [];
let w;
let offset;
function setup() {
  createCanvas(800, 800);
  colorMode(HSB, 360, 100, 100, 100);
  angleMode(DEGREES);
  background(0, 0, 90);
​
  w = sqrt(2) * max(width, height);
  offset = w / 15;
  let x = -offset;
  let y = -offset;
  let d = w + offset * 2;
  separateGrid(x, y, d, objs);
}
​
function draw() {
  fill(0,0,100,0);
  noStroke();
  rect(offset,offset,width-offset*2,height-offset*2);
  drawingContext.clip();
  push();
  translate(width / 2, height / 2);
  rotate(frameCount/2);
  translate(-w / 2, -w / 2);
​
  for (let obj of objs) {
    let prev_t = obj.t;
    obj.t = (obj.t + 1 / 150) % 1;
    if (abs(obj.t - prev_t) < 1 / 2) {
      let t = easeInOutElastic(obj.t);
      push();
      translate(obj.x, obj.y);
      rotate(obj.a);
      noStroke();
      fill(0, 0, 100, 0);
      rectMode(CENTER);
      rect(0, 0, obj.d);
      drawingContext.clip();
      drawTruchetPattern(t * obj.d, 0, 0, obj.d, obj.n);
      drawTruchetPattern(-obj.d + t * obj.d, 0, 0, obj.d, obj.n2);
      pop();
    } else {
      obj.n = obj.n2;
      obj.n2 = int(random(40));
    }
  }
  pop();
  // noLoop();
}
​
function easeInOutCirc(x) {
  return x < 0.5
    ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2
    : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
}
​
function easeInOutElastic(x) {
  const c5 = (2 * Math.PI) / 4.5;
  return x === 0
    ? 0
    : x === 1
    ? 1
    : x < 0.5
    ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2
    : (Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5)) / 2 + 1;
}
​
function separateGrid(x, y, d, arr) {
  let sepNum = int(random([1, 2, 3]));
  let w = d / sepNum;
​
  for (let i = x; i < x + d - 1; i += w) {
    for (let j = y; j < y + d - 1; j += w) {
      if ((random(100) < 95 && w > width / 3) || d > width ) {
        separateGrid(i, j, w, arr);
      } else {
        let ox = i + w / 2;
        let oy = j + w / 2;
        let obj = {
          x: ox,
          y: oy,
          d: w,
          a: (int(random(4)) * 360) / 4,
          n: int(random(40)),
          n2: int(random(40)),
          t: random(0.5),
        };
        arr.push(obj);
      }
    }
  }
}
​
function drawTruchetPattern(
  pattern_center_x,
  pattern_center_y,
  pattern_angle,
  pattern_size,
  pattern_num
) {
    pattern_size = ceil(pattern_size);
  let colors = [color(0, 0, 20), color(0, 0, 90)];
  let d = pattern_size / 6;
  let n = 0;
  push();
  noStroke();
  translate(pattern_center_x, pattern_center_y);
  rotate(pattern_angle);
  switch (pattern_num) {
    case 32:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(-pattern_size / 2 + d * 1.5, +pattern_size / 2, d);
      circle(+pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
      circle(+pattern_size / 2 - d * 1.5, +pattern_size / 2, d);
      arc(-pattern_size / 2, -pattern_size / 2, d * 5 * 2, d * 5 * 2, 0, 90);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 4 * 2, d * 4 * 2, 0, 90);
      push();
      fill(colors[0]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
      pop();
      break;
    case 33:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      rectMode(CORNER);
      rect(-pattern_size / 2, -pattern_size / 2, pattern_size, d * 2);
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(+pattern_size / 2 - d * 1.5, pattern_size / 2, d);
​
      circle(-pattern_size / 2, pattern_size / 2 - d * 1.5, d);
      circle(+pattern_size / 2, pattern_size / 2 - d * 1.5, d);
​
      for (let i = 0; i < 3; i++) {
        let x = map(i, 0, 2, -pattern_size / 2, pattern_size / 2);
        let y = -pattern_size / 2;
        fill(colors[1]);
        circle(x, y, d * 2);
      }
      break;
    case 34:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 2; i++) {
        push();
        rotate(i * 90);
        fill(colors[0]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
        fill(colors[1]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
        pop();
      }
      fill(colors[0]);
      arc(0, pattern_size / 2, d * 2 * 2, d * 2 * 2, 180, 360);
      circle(-pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
      circle(+pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
      fill(colors[1]);
      arc(0, pattern_size / 2, d * 1 * 2, d * 1 * 2, 180, 360);
      break;
    case 35:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 4; i++) {
        push();
        rotate(i * 90);
        fill(colors[0]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
        fill(colors[1]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
        pop();
      }
      break;
    case 36:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 4; i++) {
        if (i != 3) {
          push();
          rotate(i * 90);
          fill(colors[0]);
          arc(
            -pattern_size / 2,
            -pattern_size / 2,
            d * 2 * 2,
            d * 2 * 2,
            0,
            90
          );
          fill(colors[1]);
          arc(
            -pattern_size / 2,
            -pattern_size / 2,
            d * 1 * 2,
            d * 1 * 2,
            0,
            90
          );
          pop();
        } else {
          push();
          fill(colors[0]);
          circle(-pattern_size / 2, pattern_size / 2 - d * 1.5, d);
          circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
          pop();
        }
      }
      break;
    case 37:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      n = 0;
      for (let j = 0; j < 5; j++) {
        for (let i = 0; i < 5; i++) {
          let x = map(i, 0, 4, -pattern_size / 2, pattern_size / 2);
          let y = map(j, 0, 4, -pattern_size / 2, pattern_size / 2);
          if (n++ % 2 == 1) {
            fill(colors[0]);
            circle(x, y, d);
          }
        }
      }
      break;
    case 38:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      n = 0;
      for (let j = 0; j < 5; j++) {
        for (let i = 0; i < 5; i++) {
          let x = map(i, 0, 4, -pattern_size / 2, pattern_size / 2);
          let y = map(j, 0, 4, -pattern_size / 2, pattern_size / 2);
          if (
            n == 7 ||
            ((i == 0 || i == 4 || j == 0 || j == 4) && n % 2 == 1)
          ) {
            fill(colors[0]);
            circle(x, y, d);
          }
          n++;
        }
      }
      break;
    case 39:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      n = 0;
      for (let j = 0; j < 5; j++) {
        for (let i = 0; i < 5; i++) {
          let x = map(i, 0, 4, -pattern_size / 2, pattern_size / 2);
          let y = map(j, 0, 4, -pattern_size / 2, pattern_size / 2);
​
          if ((i == 0 || i == 4 || j == 0 || j == 4) && n % 2 == 1) {
            fill(colors[0]);
            circle(x, y, d);
          }
          n++;
        }
      }
      break;
​
    case 0:
      rectMode(CENTER);
      fill(colors[0]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[1]);
      for (let j = 0; j < 3; j++) {
        for (let i = 0; i < 3; i++) {
          let x = map(i, 0, 2, -pattern_size / 2, pattern_size / 2);
          let y = map(j, 0, 2, -pattern_size / 2, pattern_size / 2);
          if (!(i == 1 && j == 1)) circle(x, y, d * 2);
        }
      }
      break;
    case 1:
      rectMode(CENTER);
      fill(colors[0]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[1]);
      for (let j = 0; j < 2; j++) {
        for (let i = 0; i < 3; i++) {
          let x = map(i, 0, 2, -pattern_size / 2, pattern_size / 2);
          let y = map(j, 0, 2, -pattern_size / 2, pattern_size / 2);
          if (!(i == 1 && j == 1)) circle(x, y, d * 2);
        }
      }
      fill(colors[1]);
      rectMode(CORNER);
      rect(-pattern_size / 2, +pattern_size / 2 - d, pattern_size, d);
      fill(colors[0]);
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(pattern_size / 2 - d * 1.5, pattern_size / 2, d);
      break;
    case 2:
      rectMode(CENTER);
      fill(colors[0]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[1]);
      for (let j = 0; j < 3; j++) {
        for (let i = 0; i < 3; i++) {
          let x = map(i, 0, 2, -pattern_size / 2, pattern_size / 2);
          let y = map(j, 0, 2, -pattern_size / 2, pattern_size / 2);
          circle(x, y, d * 2);
        }
      }
      break;
    case 3:
      rectMode(CENTER);
      fill(colors[0]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[1]);
      for (let j = 1; j < 2; j++) {
        for (let i = 0; i < 3; i++) {
          let x = map(i, 0, 2, -pattern_size / 2, pattern_size / 2);
          let y = map(j, 0, 2, -pattern_size / 2, pattern_size / 2);
          if (!(i == 1 && j == 1)) circle(x, y, d * 2);
        }
      }
      fill(colors[1]);
      rectMode(CORNER);
      rect(-pattern_size / 2, -pattern_size / 2, pattern_size, d);
      rect(-pattern_size / 2, +pattern_size / 2 - d, pattern_size, d);
      fill(colors[0]);
      circle(-pattern_size / 2 + d * 1.5, -pattern_size / 2, d);
      circle(pattern_size / 2 - d * 1.5, -pattern_size / 2, d);
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(pattern_size / 2 - d * 1.5, pattern_size / 2, d);
      break;
    case 4:
      rectMode(CENTER);
      fill(colors[0]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[1]);
      for (let j = 0; j < 2; j++) {
        for (let i = 0; i < 3; i++) {
          let x = map(i, 0, 2, -pattern_size / 2, pattern_size / 2);
          let y = map(j, 0, 2, -pattern_size / 2, pattern_size / 2);
          circle(x, y, d * 2);
        }
      }
      fill(colors[1]);
      rectMode(CORNER);
      rect(-pattern_size / 2, +pattern_size / 2 - d, pattern_size, d);
      drawingContext.clip();
      fill(colors[0]);
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(pattern_size / 2 - d * 1.5, pattern_size / 2, d);
      break;
    case 5:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      rectMode(CORNER);
      rect(-pattern_size / 2, -pattern_size / 2 + d, pattern_size, d);
      for (let i = 0; i < 4; i++) {
        fill(colors[0]);
        circle(
          (cos(i * 90) * pattern_size) / 2,
          (sin(i * 90) * pattern_size) / 2,
          d * 2 * 2
        );
        fill(colors[1]);
        circle(
          (cos(i * 90) * pattern_size) / 2,
          (sin(i * 90) * pattern_size) / 2,
          d * 2
        );
      }
      break;
    case 6:
      rectMode(CENTER);
      fill(colors[0]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[1]);
      for (let j = 1; j < 2; j++) {
        for (let i = 0; i < 3; i++) {
          let x = map(i, 0, 2, -pattern_size / 2, pattern_size / 2);
          let y = map(j, 0, 2, -pattern_size / 2, pattern_size / 2);
          circle(x, y, d * 2);
        }
      }
      fill(colors[1]);
      rectMode(CORNER);
      rect(-pattern_size / 2, -pattern_size / 2, pattern_size, d);
      rect(-pattern_size / 2, +pattern_size / 2 - d, pattern_size, d);
      fill(colors[0]);
      circle(-pattern_size / 2 + d * 1.5, -pattern_size / 2, d);
      circle(pattern_size / 2 - d * 1.5, -pattern_size / 2, d);
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(pattern_size / 2 - d * 1.5, pattern_size / 2, d);
      break;
    case 7:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 4; i++) {
        fill(colors[0]);
        circle(
          (cos(i * 90) * pattern_size) / 2,
          (sin(i * 90) * pattern_size) / 2,
          d * 2 * 2
        );
        fill(colors[1]);
        circle(
          (cos(i * 90) * pattern_size) / 2,
          (sin(i * 90) * pattern_size) / 2,
          d * 2
        );
      }
      break;
    case 8:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 5 * 2, d * 5 * 2, 0, 90);
      arc(
        pattern_size / 2,
        pattern_size / 2,
        d * 2 * 2,
        d * 2 * 2,
        180,
        180 + 90
      );
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      fill(colors[1]);
      circle(pattern_size / 2, pattern_size / 2, d * 2);
      circle(-pattern_size / 2, -pattern_size / 2, d * 2);
      circle(-pattern_size / 2, -pattern_size / 2 + d * 3, d * 2);
      circle(-pattern_size / 2 + d * 3, -pattern_size / 2, d * 2);
      break;
    case 9:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
      arc(+pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 90, 180);
      arc(
        -pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 2 * 2,
        d * 2 * 2,
        0,
        90
      );
      arc(
        +pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 2 * 2,
        d * 2 * 2,
        90,
        180
      );
      arc(0, 0, d * 2 * 2, d * 2 * 2, 180, 360);
      arc(0, +pattern_size / 2, d * 2 * 2, d * 2 * 2, 180, 360);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
      arc(+pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 90, 180);
      arc(
        -pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 1 * 2,
        d * 1 * 2,
        0,
        90
      );
      arc(
        +pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 1 * 2,
        d * 1 * 2,
        90,
        180
      );
      arc(0, 0, d * 1 * 2, d * 1 * 2, 180, 360);
      arc(0, +pattern_size / 2, d * 1 * 2, d * 1 * 2, 180, 360);
      break;
    case 10:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 5 * 2, d * 5 * 2, 0, 90);
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
​
      circle(+pattern_size / 2 - d * 1.5, pattern_size / 2, d);
      circle(+pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
​
      fill(colors[1]);
      circle(-pattern_size / 2, -pattern_size / 2, d * 2);
      circle(-pattern_size / 2, -pattern_size / 2 + d * 3, d * 2);
      circle(-pattern_size / 2 + d * 3, -pattern_size / 2, d * 2);
      break;
    case 11:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
      circle(+pattern_size / 2 - d * 1.5, -pattern_size / 2, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      arc(
        -pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 2 * 2,
        d * 2 * 2,
        0,
        90
      );
      arc(
        +pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 2 * 2,
        d * 2 * 2,
        90,
        180
      );
      arc(0, 0, d * 2 * 2, d * 2 * 2, 180, 360);
      arc(0, +pattern_size / 2, d * 2 * 2, d * 2 * 2, 180, 360);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
      arc(+pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 90, 180);
      arc(
        -pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 1 * 2,
        d * 1 * 2,
        0,
        90
      );
      arc(
        +pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 1 * 2,
        d * 1 * 2,
        90,
        180
      );
      arc(0, 0, d * 1 * 2, d * 1 * 2, 180, 360);
      arc(0, +pattern_size / 2, d * 1 * 2, d * 1 * 2, 180, 360);
      break;
    case 12:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 4; i++) {
        if (i !== 2) {
          fill(colors[0]);
          circle(
            (cos(i * 90) * pattern_size) / 2,
            (sin(i * 90) * pattern_size) / 2,
            d * 2 * 2
          );
          fill(colors[1]);
          circle(
            (cos(i * 90) * pattern_size) / 2,
            (sin(i * 90) * pattern_size) / 2,
            d * 1 * 2
          );
        }
      }
      fill(colors[0]);
      rectMode(CORNER);
      rect(pattern_size / 2 - d * 2, -pattern_size / 2, d, pattern_size);
      circle(-pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(-pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
      break;
    case 13:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      rectMode(CORNER);
      rect(-pattern_size / 2, -pattern_size / 2, pattern_size, d * 2);
      rect(-pattern_size / 2, -pattern_size / 2 + d * 4, pattern_size, d);
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(+pattern_size / 2 - d * 1.5, pattern_size / 2, d);
      for (let i = 0; i < 3; i++) {
        let x = map(i, 0, 2, -pattern_size / 2, pattern_size / 2);
        let y = -pattern_size / 2;
        fill(colors[1]);
        circle(x, y, d * 2);
      }
      break;
    case 14:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 4; i++) {
        push();
        rotate(i * 90);
        fill(colors[0]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
        fill(colors[1]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
        pop();
      }
      fill(colors[0]);
      arc(0, d, d * 2 * 2, d * 2 * 2, 180, 360);
      rect(-d * 1.5, d * 2, d, d * 2);
      rect(+d * 1.5, d * 2, d, d * 2);
      fill(colors[1]);
      arc(0, d, d * 1 * 2, d * 1 * 2, 180, 360);
      fill(colors[0]);
      circle(0, d, d);
      break;
    case 15:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      circle(+pattern_size / 2 - d * 1.5, -pattern_size / 2, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(-pattern_size / 2 + d * 1.5, -pattern_size / 2, d);
      circle(-pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      arc(
        -pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 2 * 2,
        d * 2 * 2,
        0,
        90
      );
      arc(
        +pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 2 * 2,
        d * 2 * 2,
        90,
        180
      );
      arc(0, 0, d * 2 * 2, d * 2 * 2, 180, 360);
      arc(0, +pattern_size / 2, d * 2 * 2, d * 2 * 2, 180, 360);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
      arc(+pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 90, 180);
      arc(
        -pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 1 * 2,
        d * 1 * 2,
        0,
        90
      );
      arc(
        +pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 1 * 2,
        d * 1 * 2,
        90,
        180
      );
      arc(0, 0, d * 1 * 2, d * 1 * 2, 180, 360);
      arc(0, +pattern_size / 2, d * 1 * 2, d * 1 * 2, 180, 360);
      break;
    case 16:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 4; i++) {
        if (i !== 2) {
          fill(colors[0]);
          circle(
            (cos(i * 90) * pattern_size) / 2,
            (sin(i * 90) * pattern_size) / 2,
            d * 2 * 2
          );
          fill(colors[1]);
          circle(
            (cos(i * 90) * pattern_size) / 2,
            (sin(i * 90) * pattern_size) / 2,
            d * 1 * 2
          );
        }
      }
      fill(colors[0]);
      circle(-pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(-pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
      break;
    case 17:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 4; i++) {
        push();
        rotate(i * 90);
        fill(colors[0]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
        fill(colors[1]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
        pop();
      }
      fill(colors[0]);
      arc(0, d, d * 2 * 2, d * 2 * 2, 180, 360);
      rect(-d * 1.5, d * 2, d, d * 2);
      rect(+d * 1.5, d * 2, d, d * 2);
      fill(colors[1]);
      arc(0, d, d * 1 * 2, d * 1 * 2, 180, 360);
      break;
    case 18:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
​
      fill(colors[0]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 5 * 2, d * 5 * 2, 0, 90);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 4 * 2, d * 4 * 2, 0, 90);
      for (let i = 0; i < 4; i++) {
        push();
        rotate(i * 90);
        fill(colors[0]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
        fill(colors[1]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
        pop();
      }
      break;
    case 19:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      arc(0, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 180);
      fill(colors[1]);
      arc(0, -pattern_size / 2, d * 2 * 1, d * 2 * 1, 0, 180);
      fill(colors[0]);
      arc(0, +pattern_size / 2, d * 2 * 2, d * 2 * 2, 180, 270);
      fill(colors[1]);
      arc(0, +pattern_size / 2, d * 2 * 1, d * 2 * 1, 180, 270);
      fill(colors[0]);
      rectMode(CORNER);
      rect(-pattern_size / 2, -pattern_size / 2 + d, pattern_size / 2, d);
      rect(0, +pattern_size / 2 - d * 2, pattern_size / 2, d);
      circle(-pattern_size / 2, pattern_size / 2 - d * 1.5, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(d * 1.5, pattern_size / 2, d);
      break;
    case 20:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
​
      fill(colors[0]);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      arc(-pattern_size / 2, -pattern_size / 2, d * 5 * 2, d * 5 * 2, 0, 90);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 4 * 2, d * 4 * 2, 0, 90);
      for (let i = 0; i < 4; i++) {
        if (i != 1) {
          push();
          rotate(i * 90);
          fill(colors[0]);
          arc(
            -pattern_size / 2,
            -pattern_size / 2,
            d * 2 * 2,
            d * 2 * 2,
            0,
            90
          );
          fill(colors[1]);
          arc(
            -pattern_size / 2,
            -pattern_size / 2,
            d * 1 * 2,
            d * 1 * 2,
            0,
            90
          );
          pop();
        }
      }
      break;
    case 21:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 2; i++) {
        push();
        rotate(i * 90);
        fill(colors[0]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
        fill(colors[1]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
        pop();
      }
      fill(colors[0]);
      arc(0, d, d * 2 * 2, d * 2 * 2, 180, 360);
      rect(-d * 1.5, d * 2, d, d * 2);
      rect(+d * 1.5, d * 2, d, d * 2);
      circle(-pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
      circle(+pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
      fill(colors[1]);
      arc(0, d, d * 1 * 2, d * 1 * 2, 180, 360);
      break;
    case 22:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      rectMode(CORNER);
      rect(pattern_size / 2 - d * 2, -pattern_size / 2, d, pattern_size);
      let e = d / 5;
      fill(colors[1]);
      strokeWeight(d / 3);
      stroke(colors[1]);
      rect(-pattern_size / 2, pattern_size / 2 - d * 2, pattern_size, d);
      fill(colors[0]);
      noStroke();
      rect(-pattern_size / 2, pattern_size / 2 - d * 2, pattern_size, d);
      // circle(+pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
      arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
      break;
    case 23:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      circle(-pattern_size / 2 + d * 1.5, pattern_size / 2, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      arc(pattern_size / 2, pattern_size / 2, d * 2 * 2, d * 2 * 2, 180, 270);
      rectMode(CORNER);
      rect(-pattern_size / 2, -pattern_size / 2 + d, pattern_size / 2, d);
      rect(-pattern_size / 2 + d, -pattern_size / 2, d, pattern_size / 2);
      fill(colors[1]);
      arc(pattern_size / 2, pattern_size / 2, d * 1 * 2, d * 1 * 2, 180, 270);
      fill(colors[0]);
      arc(-pattern_size / 2, 0, d * 2 * 2, d * 2 * 2, 0, 90);
      arc(0, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
      fill(colors[1]);
      arc(-pattern_size / 2, 0, d * 1 * 2, d * 1 * 2, 0, 90);
      arc(0, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
      break;
    case 24:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(-pattern_size / 2 + d * 1.5, +pattern_size / 2, d);
      arc(-pattern_size / 2, -pattern_size / 2, d * 5 * 2, d * 5 * 2, 0, 90);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 4 * 2, d * 4 * 2, 0, 90);
      for (let i = 0; i < 4; i++) {
        if (i % 2 == 0) {
          push();
          rotate(i * 90);
          fill(colors[0]);
          arc(
            -pattern_size / 2,
            -pattern_size / 2,
            d * 2 * 2,
            d * 2 * 2,
            0,
            90
          );
          fill(colors[1]);
          arc(
            -pattern_size / 2,
            -pattern_size / 2,
            d * 1 * 2,
            d * 1 * 2,
            0,
            90
          );
          pop();
        }
      }
      break;
    case 25:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      arc(0, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 180);
      fill(colors[1]);
      arc(0, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 180);
      fill(colors[0]);
      for (let i = 0; i < 4; i++) {
        push();
        rotate(i * 90);
        fill(colors[0]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
        fill(colors[1]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
        pop();
      }
      break;
    case 26:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      arc(0, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
      fill(colors[1]);
      arc(0, -pattern_size / 2, d * 2 * 1, d * 2 * 1, 0, 90);
      fill(colors[0]);
      arc(0, +pattern_size / 2, d * 2 * 2, d * 2 * 2, 180, 270);
      fill(colors[1]);
      arc(0, +pattern_size / 2, d * 2 * 1, d * 2 * 1, 180, 270);
      fill(colors[0]);
      rectMode(CORNER);
      rect(-pattern_size / 2, -pattern_size / 2 + d, pattern_size / 2, d);
      rect(0, +pattern_size / 2 - d * 2, pattern_size / 2, d);
      circle(-pattern_size / 2, pattern_size / 2 - d * 1.5, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(d * 1.5, pattern_size / 2, d);
      circle(-d * 1.5, -pattern_size / 2, d);
      break;
    case 27:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      circle(+pattern_size / 2 - d * 1.5, -pattern_size / 2, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(-pattern_size / 2 + d * 1.5, -pattern_size / 2, d);
      circle(-pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      arc(
        -pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 2 * 2,
        d * 2 * 2,
        0,
        90
      );
      arc(
        +pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 2 * 2,
        d * 2 * 2,
        90,
        180
      );
      arc(0, 0, d * 2 * 2, d * 2 * 2, 180, 360);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
      arc(+pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 90, 180);
      arc(
        -pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 1 * 2,
        d * 1 * 2,
        0,
        90
      );
      arc(
        +pattern_size / 2,
        -pattern_size / 2 + d * 3,
        d * 1 * 2,
        d * 1 * 2,
        90,
        180
      );
      arc(0, 0, d * 1 * 2, d * 1 * 2, 180, 360);
      fill(colors[0]);
      circle(d * 1.5, pattern_size / 2, d);
      circle(-d * 1.5, pattern_size / 2, d);
      break;
    case 28:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      arc(0, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 180);
      fill(colors[1]);
      arc(0, -pattern_size / 2, d * 2 * 1, d * 2 * 1, 0, 180);
      fill(colors[0]);
      arc(0, +pattern_size / 2, d * 2 * 2, d * 2 * 2, 180, 270);
      fill(colors[1]);
      arc(0, +pattern_size / 2, d * 2 * 1, d * 2 * 1, 180, 270);
      fill(colors[0]);
      rectMode(CORNER);
      rect(0, +pattern_size / 2 - d * 2, pattern_size / 2, d);
      circle(-pattern_size / 2, pattern_size / 2 - d * 1.5, d);
      circle(-pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(d * 1.5, pattern_size / 2, d);
      break;
    case 29:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      for (let i = 0; i < 2; i++) {
        push();
        rotate(i * 90);
        fill(colors[0]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
        fill(colors[1]);
        arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
        pop();
      }
      fill(colors[0]);
      rect(0, d * 1.5, pattern_size, d);
      circle(d * 1.5, pattern_size / 2, d);
      circle(-d * 1.5, pattern_size / 2, d);
      break;
    case 30:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(-pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(+pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
      circle(-pattern_size / 2, +pattern_size / 2 - d * 1.5, d);
​
      fill(colors[0]);
      arc(0, pattern_size / 2, d * 2 * 2, d * 2 * 2, 180, 360);
      fill(colors[1]);
      arc(0, pattern_size / 2, d * 2 * 1, d * 1 * 2, 180, 360);
      fill(colors[0]);
      fill(colors[0]);
      arc(0, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 180);
      fill(colors[1]);
      arc(0, -pattern_size / 2, d * 2 * 1, d * 1 * 2, 0, 180);
      fill(colors[0]);
      break;
    case 31:
      rectMode(CENTER);
      fill(colors[1]);
      rect(0, 0, pattern_size, pattern_size);
      drawingContext.clip();
      fill(colors[0]);
      circle(+pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(-pattern_size / 2 + d * 1.5, +pattern_size / 2, d);
      arc(-pattern_size / 2, -pattern_size / 2, d * 5 * 2, d * 5 * 2, 0, 90);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 4 * 2, d * 4 * 2, 0, 90);
      push();
      rotate(180);
      fill(colors[0]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 2 * 2, d * 2 * 2, 0, 90);
      fill(colors[1]);
      arc(-pattern_size / 2, -pattern_size / 2, d * 1 * 2, d * 1 * 2, 0, 90);
      pop();
      fill(colors[0]);
      circle(-pattern_size / 2, -pattern_size / 2 + d * 1.5, d);
      circle(-pattern_size / 2 + d * 1.5, -pattern_size / 2, d);
      break;
  }
  pop();
}
​