Why "Loopy Circle"?
SWLoopyCircle draws a parametric curve where a point traces a main circle of radius r while simultaneously making smaller loops controlled by displacement d and frequency b. The result looks like a circle with graceful inner loops — exactly like a Spirograph toy drawing. With b = 3 (the default), the curve produces 2 elegant inner loops.
The Parametric Equations
x(t) = r · cos(t) + d · cos(b · t)
y(t) = r · sin(t) − d · sin(b · t)
t ∈ [0, 2π)
The first terms (r·cos(t), r·sin(t)) move the point around a circle of radius r. The second terms add a smaller oscillation at frequency b. The opposing sign in the y-equation creates the characteristic looping geometry.
Parameter Guide
| b | Loops (d > r/b) | Shape Character |
|---|
| 0 | — | Offset circle: a circle of radius r shifted d units along x |
| 1 | — | Ellipse: semi-axes (r+d) and (r−d); collapses to a line when d = r |
| 2 | 3 | Dimpled when d < r/2; 3 loops appear once d exceeds r/2 |
| 3 | 4 | 4-loop default; balanced and symmetric |
| 4 | 5 | 5-loop figure; resembles a rounded star |
| 5 | 6 | 6-loop figure; star-like |
| 6–10 | 7–11 | Dense multi-loop rosettes |
r (main radius) controls the overall size of the figure. d (displacement) controls whether loops appear at all: loops only form when d > r/b (the rolling-circle radius). Increasing d beyond that threshold deepens the loops; increasing it past r pushes them outside the navy guide circle.
Instructive Limits
Dragging b or d all the way to 0 reveals what each parameter actually contributes:
| Setting | What you see | Why it matters |
|---|
| d = 0 | Perfect circle of radius r | Proves d is the sole cause of the loops — zero displacement, zero loops |
| b = 0 | Circle of radius r shifted right by d | cos(0·t) = 1, sin(0·t) = 0, so the frequency term becomes a fixed offset |
| b = 1 | Ellipse with semi-axes (r+d) and (r−d) | When d = r the ellipse collapses to a straight line segment |
| b = 2 | Dimpled oval (d < r/2) or 3 loops (d > r/2) | Loop threshold is d = r/b = r/2; at defaults (r=5, d=2) the curve is smooth — slide d above 2.5 to see 3 loops appear |
The navy guide circle (radius r) and the amber outer boundary circle (radius r+d) in the canvas make these relationships easy to see as you drag the sliders.
Connection to Spirograph
The Spirograph toy (patented 1965 by Denys Fisher) draws hypotrochoids and epitrochoids by rolling a small gear inside or outside a fixed ring gear. SWLoopyCircle uses a simplified direct parametric form that captures the same looping aesthetic. The parameter b corresponds to the gear ratio — loops form when the pen arm d exceeds the inner gear radius r/b, producing exactly b+1 inner loops.
The Breathe Animations
Three independent Breathe animations let you oscillate each parameter sinusoidally:
- Breathe r — oscillates the main radius, making the entire figure grow and shrink. Loops become more or less prominent relative to d.
- Breathe d — oscillates the displacement arm, deepening and shallowing the loops each cycle. With a large amount, loops can appear and disappear rhythmically as d crosses the r/b threshold.
- Breathe b — oscillates the frequency. Since b is an integer, the animation snaps between adjacent loop counts, creating a discrete morphing effect.
Each breathe has its own Speed (Hz) and Amount sliders. All three can run simultaneously. Combine any or all with Spin and a low Background opacity for hypnotic glowing trail patterns!
Using the Controls
- b (Frequency) — b = 0: offset circle; b = 1: ellipse; b ≥ 2: produces b+1 loops once d > r/b. Try b=3 (4-loop default), b=5 for a 6-loop star, or b=0–1 for the degenerate cases.
- r (Main Radius) — overall size of the figure in grid units.
- d (Displacement) — depth of the inner loops. d < r keeps loops inside; d > r creates exterior excursions.
- Rotation — rotates the figure. Different rotations reveal the symmetry.
- Breathe (accordion) — three independent oscillations for r, d, and b. Each has its own toggle, Speed (Hz), and Amount slider. All three can run simultaneously. The keyboard shortcut b toggles Breathe r.
- Spin (accordion) — continuously rotates the figure.
- Drag the center dot to reposition the figure.
- Click the canvas to toggle the grid on/off.
Keyboard Shortcuts
- s — Toggle spin
- b — Toggle breathe
- r — Factory reset
- q — Stop all animations