AI Spirograph Generator - Geometric Pattern Art Create intricate hypotrochoid patterns with adjusta

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  smooth();          // ensure anti-aliased drawing
  noFill();
  frameRate(60);

  createUI();
}

function createUI() {
  controlsDiv = createDiv();
  controlsDiv.id("controls");

  const title = createElement("h1", "Spirograph");
  title.parent(controlsDiv);

  // Reasonable defaults based on window size
  const maxR = floor(min(width, height) / 2) - 40;
  const initialR = max(80, floor(maxR * 0.6));
  const initialr = floor(initialR * 0.45);
  const initiald = floor(initialr * 0.75);

  // Outer radius R
  ({ slider: RSlider, valueSpan: RValSpan } = createLabeledSlider(
    "Outer R",
    40,
    maxR,
    initialR,
    1
  ));

  // Inner radius r
  ({ slider: rSlider, valueSpan: rValSpan } = createLabeledSlider(
    "Inner r",
    10,
    maxR - 10,
    initialr,
    1
  ));

  // Pen distance d
  ({ slider: dSlider, valueSpan: dValSpan } = createLabeledSlider(
    "Pen d",
    1,
    maxR,
    initiald,
    1
  ));
}

function createLabeledSlider(labelText, min, max, initial, step) {
  const row = createDiv();
  row.addClass("control-row");
  row.parent(controlsDiv);

  const label = createSpan(labelText);
  label.addClass("label");
  label.parent(row);

  const valueSpan = createSpan(String(initial));
  valueSpan.addClass("value");
  valueSpan.parent(row);

  const slider = createSlider(min, max, initial, step);
  slider.parent(row);
  slider.input(() => {
    valueSpan.html(slider.value());
  });

  return { slider, valueSpan };
}

function draw() {
  // Dark, slightly non‑black background
  background(0, 0, 5, 100);

  // Read parameters from sliders
  const R = Number(RSlider.value());
  let r = Number(rSlider.value());
  const d = Number(dSlider.value());

  // Keep r positive and smaller than R to avoid division problems
  if (r < 1) r = 1;
  if (r >= R) r = R - 1;

  // Update value spans in case we clamped r
  rValSpan.html(nfc(r, 0));

  // Compute angle range for a closed hypotrochoid:
  // tMax = 2π * r / gcd(r, |R - r|)
  const Rint = max(1, round(R));
  const rint = max(1, round(r));
  const diff = abs(Rint - rint);
  let loops = 1;
  if (diff > 0) {
    const g = gcd(rint, diff);
    loops = rint / g;
  }
  const tMax = TWO_PI * loops;

  // Resolution: more loops → more steps
  let steps = floor(loops * 800);
  steps = constrain(steps, 1500, 12000);

  push();
  translate(width / 2, height / 2);
  strokeWeight(2);

  for (let i = 0; i < steps; i++) {
    const t1 = map(i, 0, steps, 0, tMax);
    const t2 = map(i + 1, 0, steps, 0, tMax);

    const p1 = spiroPoint(t1, R, r, d);
    const p2 = spiroPoint(t2, R, r, d);

    // Rainbow along the path: hue wraps from 0..360
    const hue = map(i, 0, steps, 0, 360);
    stroke(hue, 90, 100, 100);

    line(p1.x, p1.y, p2.x, p2.y);
  }

  pop();
}

function spiroPoint(t, R, r, d) {
  const k = (R - r) / r;
  const x = (R - r) * cos(t) + d * cos(k * t);
  const y = (R - r) * sin(t) - d * sin(k * t);
  return { x, y };
}

function gcd(a, b) {
  a = abs(a);
  b = abs(b);
  while (b !== 0) {
    const temp = b;
    b = a % b;
    a = temp;
  }
  return a;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);

  // Update slider maxes based on new canvas size
  const maxR = floor(min(width, height) / 2) - 40;
  RSlider.attribute("max", maxR);
  rSlider.attribute("max", maxR - 10);
  dSlider.attribute("max", maxR);
}