Reuleaux Polygon Roll

// Reuleaux polygon (n odd: 3, 5, 7) rolling on a flat floor.
// Constant width: top of shape stays tangent to a fixed ceiling line.
// Mouse X scrubs n. Floor at y=floorY, ceiling at y=floorY-W.

let N = 3;
let bodyAngles;     // body-frame vertex angles, length N
let R;              // circumradius of regular n-gon
let W;              // constant width
let alpha;          // arc angle = pi/n
let floorY;
let ceilY;
let cx, cy;         // current centroid in world
let rot;            // current body rotation (radians; negative = clockwise)
let phase;          // 0 = arc rolling, 1 = corner pivot
let phaseProgress;  // radians completed in current phase
let pivotBodyIdx;   // index of body vertex that is the current pivot
let pivotWorld;     // {x,y} world position of the pivot (fixed during corner; moving during arc)
let arcCenterBodyIdx; // body vertex index that is the center of the arc currently rolling
let runT;
let lastW = 0, lastH = 0;
let trail, trailCtx;
let pendingN = -1;

function buildBody(n) {
  bodyAngles = new Array(n);
  // Vertex 0 at top of polygon (canvas: y=-R from centroid → body angle -pi/2).
  for (let i = 0; i < n; i++) {
    bodyAngles[i] = (2 * Math.PI * i) / n - Math.PI / 2;
  }
  alpha = Math.PI / n;
}

function widthFromR(n, r) {
  const k = (n - 1) / 2;
  return 2 * r * Math.sin((k * Math.PI) / n);
}

function setupScene(width, height, n) {
  N = n;
  buildBody(n);
  const targetWPx = Math.min(height * 0.42, width * 0.22);
  // Set R so that width hits targetWPx
  R = targetWPx / widthFromR(n, 1);
  W = widthFromR(n, R);
  floorY = height * 0.78;
  ceilY = floorY - W;
  // Initial pose: polygon sitting with vertex 0 at top, arc midpoint on floor.
  // Centroid at world (startX, floorY - W + R).
  cx = width * 0.18;
  cy = floorY - W + R;
  rot = 0;
  // Start in arc-rolling phase, mid-arc. The "current arc" is the one
  // opposite body vertex 0, so vertex 0 is the ceiling pivot.
  phase = 0;
  arcCenterBodyIdx = 0;
  pivotBodyIdx = 0;
  pivotWorld = { x: cx, y: ceilY };
  // Mid-arc means we have HALF the arc-rolling phase before reaching the
  // next corner. So set phaseProgress = alpha/2 (we are halfway through).
  phaseProgress = alpha / 2;
}

function init({ width, height }) {
  lastW = width; lastH = height;
  setupScene(width, height, 3);
  runT = 0;
  trail = new OffscreenCanvas(width, height);
  trailCtx = trail.getContext("2d");
  trailCtx.fillStyle = "#0a0d12";
  trailCtx.fillRect(0, 0, width, height);
}

// Vertex world position for body index i given current (cx, cy, rot).
function vertexWorld(i) {
  const a = bodyAngles[i] + rot;
  return { x: cx + R * Math.cos(a), y: cy + R * Math.sin(a) };
}

// Find the two arc-endpoint body vertex indices for the arc opposite body vertex p.
function arcEndpointsOf(p) {
  const k1 = (p + (N - 1) / 2 + N) % N;
  const k2 = (p + (N + 1) / 2 + N) % N;
  return [k1, k2];
}

// Find the two arcs that share body vertex q (q is an endpoint of two arcs).
// Each arc is identified by its center body vertex index.
function arcsAtVertex(q) {
  // The arc opposite body vertex p has endpoints (p + (n-1)/2) and (p + (n+1)/2).
  // So q is an endpoint of arcs whose centers are p where p+(n-1)/2 ≡ q or p+(n+1)/2 ≡ q.
  const c1 = (q - (N - 1) / 2 + N) % N;
  const c2 = (q - (N + 1) / 2 + N) % N;
  return [c1, c2];
}

function advance(dr) {
  // Advance rolling by dr radians of body rotation (always positive amount).
  // Polygon rolls to the right ⇒ body rotates clockwise ⇒ rot decreases.
  let remaining = dr;
  while (remaining > 1e-9) {
    if (phase === 0) {
      // Arc rolling. Pivot is body vertex arcCenterBodyIdx, at height ceilY.
      // Moving horizontally to the right at rate W (per radian).
      const room = alpha - phaseProgress;
      const step = Math.min(remaining, room);
      // Advance pivot horizontally by W*step:
      pivotWorld.x += W * step;
      // Rotate body clockwise by step:
      rot -= step;
      // Recompute centroid so that body vertex `arcCenterBodyIdx` is at pivotWorld:
      const a = bodyAngles[arcCenterBodyIdx] + rot;
      cx = pivotWorld.x - R * Math.cos(a);
      cy = pivotWorld.y - R * Math.sin(a);
      phaseProgress += step;
      remaining -= step;
      if (phaseProgress >= alpha - 1e-9) {
        // Transition to corner pivot. The trailing endpoint of the rolled
        // arc is the one now on the floor. Of the two arc endpoints, pick
        // the one with greatest world y (canvas y is downward → larger y
        // = closer to floor).
        const [e1, e2] = arcEndpointsOf(arcCenterBodyIdx);
        const w1 = vertexWorld(e1);
        const w2 = vertexWorld(e2);
        const onFloorIdx = (w1.y > w2.y) ? e1 : e2;
        const onFloorW = (w1.y > w2.y) ? w1 : w2;
        phase = 1;
        pivotBodyIdx = onFloorIdx;
        pivotWorld = { x: onFloorW.x, y: floorY };
        phaseProgress = 0;
      }
    } else {
      // Corner pivot. Pivot vertex stays at pivotWorld (on the floor).
      // Polygon rotates clockwise around it by alpha radians total.
      const room = alpha - phaseProgress;
      const step = Math.min(remaining, room);
      rot -= step;
      const a = bodyAngles[pivotBodyIdx] + rot;
      cx = pivotWorld.x - R * Math.cos(a);
      cy = pivotWorld.y - R * Math.sin(a);
      phaseProgress += step;
      remaining -= step;
      if (phaseProgress >= alpha - 1e-9) {
        // Transition to next arc rolling. The body vertex that was the
        // floor pivot is now the trailing endpoint of the next arc. The
        // arc to roll on next is the OTHER arc meeting at pivotBodyIdx —
        // the one whose body extent we just rotated INTO floor contact.
        const [c1, c2] = arcsAtVertex(pivotBodyIdx);
        // The two arcs have centers c1 and c2. The "previous" arc had
        // center = arcCenterBodyIdx. The "new" arc center is the OTHER one.
        const newCenter = (c1 === arcCenterBodyIdx) ? c2 : c1;
        arcCenterBodyIdx = newCenter;
        phase = 0;
        // The new ceiling pivot (= new arc center) is at body vertex
        // newCenter. Its current world position:
        pivotWorld = vertexWorld(newCenter);
        // Snap pivot to ceiling y (should already be ≈ ceilY due to constant width):
        pivotWorld.y = ceilY;
        phaseProgress = 0;
      }
    }
  }
}

function drawPolygon(ctx) {
  ctx.beginPath();
  const k = (N + 1) / 2;
  const v0 = vertexWorld(0);
  ctx.moveTo(v0.x, v0.y);
  for (let j = 0; j < N; j++) {
    const jNext = (j + 1) % N;
    const oppIdx = (j + k) % N; // arc center for edge (j, jNext)
    const op = vertexWorld(oppIdx);
    const next = vertexWorld(jNext);
    const cur = vertexWorld(j);
    const a0 = Math.atan2(cur.y - op.y, cur.x - op.x);
    const a1 = Math.atan2(next.y - op.y, next.x - op.x);
    let delta = a1 - a0;
    while (delta > Math.PI) delta -= 2 * Math.PI;
    while (delta < -Math.PI) delta += 2 * Math.PI;
    const anticlockwise = delta < 0;
    ctx.arc(op.x, op.y, W, a0, a1, anticlockwise);
  }
  ctx.closePath();
}

function tick({ ctx, width, height, dt, input }) {
  if (width !== lastW || height !== lastH) {
    lastW = width; lastH = height;
    setupScene(width, height, N);
    trail = new OffscreenCanvas(width, height);
    trailCtx = trail.getContext("2d");
    trailCtx.fillStyle = "#0a0d12";
    trailCtx.fillRect(0, 0, width, height);
  }

  // Choose n from mouse X.
  let desiredN = N;
  const mx = input ? input.mouseX : -1;
  if (mx >= 0) {
    const frac = Math.max(0, Math.min(0.9999, mx / width));
    desiredN = [3, 5, 7][Math.floor(frac * 3)];
  }
  if (desiredN !== N) {
    setupScene(width, height, desiredN);
    trailCtx.fillStyle = "#0a0d12";
    trailCtx.fillRect(0, 0, width, height);
  }

  runT += dt;
  const omega = (2 * Math.PI) / 5; // one revolution per 5 seconds
  let dr = omega * dt;
  // Clamp dr so we don't skip multiple phase transitions per frame
  // (alpha is the max phase length; cap at alpha/4 per advance call).
  while (dr > alpha / 4) {
    advance(alpha / 4);
    dr -= alpha / 4;
  }
  advance(dr);

  // Wrap horizontally if centroid leaves screen.
  if (cx > width + R * 2) {
    const shift = width + R * 4;
    cx -= shift;
    if (phase === 0) pivotWorld.x -= shift;
    if (phase === 1) pivotWorld.x -= shift;
    trailCtx.fillStyle = "#0a0d12";
    trailCtx.fillRect(0, 0, width, height);
  }

  // Trail fade + centroid trace
  trailCtx.fillStyle = "rgba(10,13,18,0.18)";
  trailCtx.fillRect(0, 0, width, height);
  const hue = (runT * 40) % 360;
  trailCtx.fillStyle = `hsla(${hue},80%,60%,0.9)`;
  trailCtx.beginPath();
  trailCtx.arc(cx, cy, 2.2, 0, Math.PI * 2);
  trailCtx.fill();

  ctx.drawImage(trail, 0, 0);

  // Floor
  ctx.strokeStyle = "#3a4250";
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.moveTo(0, floorY);
  ctx.lineTo(width, floorY);
  ctx.stroke();

  // Ceiling (constant-width tangent line)
  ctx.strokeStyle = "#5cb6ff";
  ctx.setLineDash([6, 5]);
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.moveTo(0, ceilY);
  ctx.lineTo(width, ceilY);
  ctx.stroke();
  ctx.setLineDash([]);

  // Polygon body
  drawPolygon(ctx);
  ctx.fillStyle = "rgba(255,180,80,0.18)";
  ctx.fill();
  ctx.strokeStyle = "#ffb84a";
  ctx.lineWidth = 2;
  ctx.stroke();

  // Centroid marker
  ctx.fillStyle = "#fff";
  ctx.beginPath();
  ctx.arc(cx, cy, 3, 0, Math.PI * 2);
  ctx.fill();

  // Compute floor and ceiling contact points by sampling boundary.
  let topX = cx, topY = Infinity, botX = cx, botY = -Infinity;
  const k = (N + 1) / 2;
  const SAMPLES = 28;
  for (let j = 0; j < N; j++) {
    const oppIdx = (j + k) % N;
    const op = vertexWorld(oppIdx);
    const jNext = (j + 1) % N;
    const va = vertexWorld(j), vb = vertexWorld(jNext);
    let a0 = Math.atan2(va.y - op.y, va.x - op.x);
    let a1 = Math.atan2(vb.y - op.y, vb.x - op.x);
    let delta = a1 - a0;
    while (delta > Math.PI) delta -= 2 * Math.PI;
    while (delta < -Math.PI) delta += 2 * Math.PI;
    for (let s = 0; s <= SAMPLES; s++) {
      const t = s / SAMPLES;
      const ang = a0 + delta * t;
      const sx = op.x + W * Math.cos(ang);
      const sy = op.y + W * Math.sin(ang);
      if (sy < topY) { topY = sy; topX = sx; }
      if (sy > botY) { botY = sy; botX = sx; }
    }
  }
  ctx.fillStyle = "#5cb6ff";
  ctx.beginPath(); ctx.arc(topX, topY, 4, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = "#ff6464";
  ctx.beginPath(); ctx.arc(botX, botY, 4, 0, Math.PI * 2); ctx.fill();

  // HUD
  ctx.fillStyle = "#cfd6e0";
  ctx.font = "13px ui-sans-serif, system-ui, sans-serif";
  ctx.textBaseline = "top";
  ctx.fillText(`n = ${N}`, 12, 12);
  ctx.fillText(`width w = ${W.toFixed(1)} px (constant)`, 12, 30);
  ctx.fillText(`vertical extent = ${(botY - topY).toFixed(1)} px`, 12, 48);
  ctx.fillStyle = "#7d8896";
  ctx.font = "11px ui-sans-serif, system-ui, sans-serif";
  ctx.fillText("move mouse left/right: n = 3, 5, 7", 12, height - 22);
}