fractalkitty looking for math? fractalkitty.com

Genuary 2024

extended gears of time

#random#trig#interactive#animation#time#genuary

gearCircleborder


function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);
  strokeCap(SQUARE);
  c1 = random(200, 255);
  c2 = random(200, 255);
  c3 = random(200, 255);
}

function draw() {
  background(c1 - 200, c2 - 200, c3 - 200);

  strokeWeight(6);
  translate(width / 2, height / 2);
  t = frameCount / 6;
  push();
  rotate(-PI / 2);
  gearCircle(240, 50, 500, 33, 24, 10, 0);
  strokeWeight(2);
  gearCircle(180, 10, 255, 9, 60, 10, 1);
  strokeWeight(2);
  gearCircle(150, 8, 245, 7, 60, 10, 2);
  pop();

  border();
}

function gearCircle(r1, r2, d1, d2, nRot, ngears, mode) {
  for (let i = 0; i < nRot; i++) {
    if (
      (mode === 0 && i === hour()) ||
      (mode === 1 && i === minute()) ||
      (mode === 2 && i === second())
    ) {
      color1 = 255;
      color3 = color(255, 255, 255, 40 - mode * 15);
    } else {
      color1 = [c1 - 180, c2 - 180, c3 - 180];
      color3 = color(c1 - 180, c2 - 180, c3 - 100, 10);
    }
    for (let j = 0; j < ngears / 2; j++) {
      if (i % 2 === 0) {
        dt = t / 100;
      } else {
        dt = -t / 100 + TAU / ngears / 2;
      }

      push();
      translate(r1 * cos((i * TAU) / nRot), r1 * sin((i * TAU) / nRot));
      rotate((j * TAU) / (ngears / 2) + dt);
      stroke(color3);
      line(-d1 * 4, 0, d1 * 4, 0);
      stroke(color1);
      line(-d2, 0, d2, 0);
      pop();
    }
  }
  for (let i = 0; i < nRot; i++) {
    if (
      (mode === 0 && i === hour()) ||
      (mode === 1 && i === minute()) ||
      (mode === 2 && i === second())
    ) {
      a = 255;
      b = 255;
      c = 255;
    } else {
      a = c1 - 100;
      b = c2 - 100;
      c = c3 - 100;
    }
    noStroke();
    for (let k = 20; k > 0; k--) {
      push();
      fill(a - k * 4, b - k * 4, c - k * 4);
      translate(r1 * cos((i * TAU) / nRot), r1 * sin((i * TAU) / nRot));
      circle(0, 0, (r2 / 20) * k);
      pop();
    }
  }
}

function border() {
  noFill();
  stroke(c1 - 20, c2 - 20, c3 - 20);
  strokeWeight(4);
  rect(0, 0, width - 20, height - 20);
}

function mousePressed() {
  setup();
  draw();
}