/** @jsxImportSource https://esm.sh/react */ import Chart from "https://esm.sh/chart.js/auto"; import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const R = 120; // Set R as a constant const numPointsPerCircle = 200; // Set number of points per circle function gcd(a: number, b: number): number { return b === 0 ? a : gcd(b, a % b); } function lcm(a: number, b: number): number { return (a * b) / gcd(a, b); } function App() { const chartRef = useRef(null); const chartInstanceRef = useRef(null); const [rho, setRho] = useState(37); const [offset, setOffset] = useState(37); const [tMax, setTMax] = useState(0); useEffect(() => { if (chartInstanceRef.current) { chartInstanceRef.current.destroy(); } if (chartRef.current) { const ctx = chartRef.current.getContext("2d"); const omega = 2 * Math.PI; const zeta = (R / rho) * omega; const tMax = lcm(R, rho) / R; const numPoints = tMax * numPointsPerCircle + 1; const tStep = 1 / numPointsPerCircle; // Generate points for the curve const points = []; for (let pointIdx = 0; pointIdx < numPoints; pointIdx++) { const t = pointIdx * tStep; const z = complexAdd( complexMult(complexExp(omega * t), R - rho), complexMult(complexExp(zeta * t), offset), ); points.push({ x: z.re, y: z.im }); } const maxAbs = Math.max(...points.map(p => Math.sqrt(p.x ** 2 + p.y ** 2))); const chartRange = Math.ceil(maxAbs * 1.2); chartInstanceRef.current = new Chart(ctx, { type: "scatter", data: { datasets: [{ label: "Complex Curve", data: points, borderColor: "rgba(0, 0, 255, 0.3)", backgroundColor: "transparent", pointRadius: 0, showLine: true, borderWidth: 1, }], }, options: { plugins: { legend: { display: false }, }, aspectRatio: 1, scales: { x: { type: "linear", position: "center", min: -chartRange, max: chartRange, }, y: { type: "linear", position: "center", min: -chartRange, max: chartRange, }, }, }, }); setTMax(tMax); } return () => { if (chartInstanceRef.current) { chartInstanceRef.current.destroy(); } }; }, [rho, offset]); return (

Spiroplot

rho: {rho} { const newRho = Number(e.target.value); setRho(newRho); setOffset(newRho); }} />

offset: {offset} setOffset(Number(e.target.value))} />

R is set to a constant value of {R}

We will circle {Math.round(tMax)} times

); } function complexExp(t) { return { re: Math.cos(t), im: Math.sin(t) }; } function complexMult(a, b) { if (typeof b === "number") { return { re: a.re * b, im: a.im * b }; } return { re: a.re * b.re - a.im * b.im, im: a.re * b.im + a.im * b.re, }; } function complexAdd(a, b) { return { re: a.re + b.re, im: a.im + b.im }; } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Spiroplot

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } #root { background-color: white; padding: 20px; max-width: 90vw; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } div { margin-bottom: 10px; } label { display: inline-block; width: 100px; } input[type="range"] { width: 200px; } p { text-align: center; font-style: italic; color: #666; } canvas { max-width: 100%; height: auto; } `;

spiroplot