Fourier Epicycles — Drawn by Circles

Start here

Pick a shape—or bring your own. Each circle captures one repeating motion. Add them tip to tail and their final point redraws the edge.

Starting drawings

Upload a drawingPNG, JPG, WebP, or SVG

Your image never leaves this browser. We trace the largest outer edge locally.

CIRCLES61

DRAWING SPEED1.0×

CIRCLE VISIBILITY65%

Build the chain

Start with one motion, then add circles. The gold circle is the newest ingredient. Watch how its motion changes the point at the end of the chain.

1circle in chain

Teaching shape: Square. The lab stays separate from presets and hand drawings so every visit begins with the same clear experiment.

TRACE POSITION0%

Scrubbing pauses time so you can inspect the chain at one exact moment.

Step 1 · Sample the path

Turn one continuous square into 16 numbered points. They are equally spaced by distance traveled around the perimeter—not across the page.

One full turn is 360°, so 360° / 16 points = 22.5° per sample.

Inspect one finished result

Compare

View

Circle 1 · strongestk = 1 · CCWradius 0.821122.5° per sample · 1 turn total

Selected correction · secondk = −3 · CWradius 0.1012−67.5° per sample · 3 turns total

z₂(t) = c₁e^it + c₋₃e^−i3t

Here t is the same trip-clock angle τ from Step 2. We display degrees for readability; the trig functions use that same angle internally. Values are rounded to four decimals, so sums made from the displayed numbers use ≈.

P0 · 0/16

Time t0.0°

Circle 1 angle−135.0° + 1(0.0°) = −135.0°

Circle 1 vector−0.5806 − 0.5806i

k = −3 angle−135.0° − 3(0.0°) = −135.0°

k = −3 vector−0.0716 − 0.0716i

Tip-to-tail sum−0.6522 − 0.6522i

Gap to square0.0777

Put the current time into the equation

k = +1 vectork = −3 vectoractive chain tracesquare target

Choose a drawing

CIRCLES

Choose any count from 1 to 256. Circles are added in order of radius.

View

ACTIVE CIRCLES1

256-SAMPLE RMS GAP—

CURRENT ENDPOINT—

P0 · 0/256

The pink path is the target. Cyan is the reconstruction made by only the active circles. The white dot is their current sum.

P0 · starting pointCartesian (x, y) = (−0.707, −0.707)Polar (r, θ) = (1.000, −135.0°)Complex position z₀ = −0.707 − 0.707iTrip clock τ₀ = 0 · 0.0° · progress 0/16Testing k = 1 · one turn counter-clockwiseUndo angle −kτ₀ = 0.0° · unwound u₀,₁ = −0.707 − 0.707i

Point	x	y	r	Polar θ	zₙ	Trip	τₙ	k	−kτₙ	uₙ,ₖ

Cartesian(x, y) says how far right and up.

Polar(r, θ) says how far and at what angle.

Trip clockτ says when we visit the point; it is not the point's polar angle.

Unwinding−kτ rotates a sample backward. Their average becomes cₖ.

Heart61 rotating circles
tip path becomes the drawing

One motion at a time1 circle · strongest component
gold marks the newest circle

16 equal-distance samplesstart at P0 · travel counter-clockwise
click a point or table row to inspect it

Draw one continuous line.
Mouse wobble is gently smoothed.
Release to turn it into circles.

This drawing

Circles used61largest coefficients

Source points256evenly sampled

Reconstruction error—lower is closer

Loop progress0%one complete trace

What you are seeing

Circle size is the strength of one frequency. Spin direction and speed come from its signed frequency. The last circle’s tip is the sum of all of them.

Try lowering the circle count. The drawing remains recognizable, but small details disappear first.

Frequency fingerprint

STRONGEST COMPONENTS

rotating construction

reconstructed trace

original edge

Newest circle

Component#1ranked by circle size

Frequency+11 turn per trace

DirectionCCWspin direction

Relative radius100%vs. the largest circle

Live math

z(t) = Σ r_k e^{i(k t + φ_k)}

Selected term

Trace time t0.000 rad

Angle θ0.000 rad

Circle vector(0.000, 0.000)

Chain endpoint(0.000, 0.000)

All active component values

How the circles were found

From the square's 256 sampled points:

c_k = (1/N) Σ z_n e^−i2πkn/N

Each coefficient c_k supplies one circle's radius and starting phase.

Read the motion

This circle turns once counter-clockwise while the full drawing is traced.

The endpoint is addition made visible. Every circle begins where the previous one ends. Their vectors add to one moving point; that point draws the cyan path.

Canvas key

newest circle

earlier circles

current reconstruction

complete target drawing

Lesson steps

Why 16?

Four samples per side are enough to preserve the corners and distinguish the first three important square frequencies later.

The square is centered at the origin and scaled so every corner is exactly one unit from the center.

Two different angles

Polar θ belongs to the grid. It locates a point relative to the origin.

Traversal τ belongs to the trip clock. It advances exactly 22.5° per sample, wherever the point happens to be.

The clock is a timing guide—not a Fourier circle yet.

All 16 frequencies were tested

The bins are fixed: 0, ±1, ±2, …, ±7, and 8. The square—not us—determines each resulting radius.

This is a direct projection, not trial-and-error. Orthogonal frequencies let us calculate every coefficient independently—no sweeping through radius and phase combinations.

Click any frequency to watch all 16 samples become its coefficient →

For each k:
cₖ = (1/16) Σ zₙe^−ikτₙ

The largest |cₖ| values identify the spinners worth drawing first.

The radii are already known

Step 3 produced complete complex coefficients. Each coefficient contains both the radius and starting phase of its circle.

c₁ = −0.5806 − 0.5806i|c₁| = 0.8211

c₋₃ = −0.0716 − 0.0716i|c₋₃| = 0.1012

c₅ = −0.0320 − 0.0320i|c₅| = 0.0452

Only time t changes now.
The selected coefficients are fixed. Each new t changes their angles; everything else follows from those angles.

Three available vectors:

v₁(t) = c₁e^it
v₋₃(t) = c₋₃e^−i3t
v₅(t) = c₅e^i5t

The endpoint is the sum of exactly the vectors named in the selected view.

Each new vector begins at the previous vector’s tip. That geometric chain is ordinary complex-number addition made visible.

The same recipe, more detail

Sample the chosen path at equal travel distances.
Stamp time around one complete 360° trip.
Project onto every available frequency to calculate cₖ.
Rank and add the rotating vectors tip-to-tail.

Steps 1–4 used 16 square samples to make the arithmetic manageable. Here we use 256 samples, just like the Drawing Machine, so you can explore finer detail with up to 256 coefficients.

All five shapes come from the same preset definitions as the Drawing Machine. The calculation stays the same; the radii, directions, and starting angles change with the path.

z(t) = Σ cₖe^ikt

Sum only the selected number of largest coefficients. Time t moves every vector together.

Reading the gap: RMS combines the distances at all 256 sample positions. It is shown as a percent of the normalized maximum radius, which is 1. All coefficients reproduce the samples; the curve between them can still differ.

A zero-radius coefficient contributes nothing. k = 0 is a fixed offset, with no rotation.

Calculate frequency k = 1

P0 · counter-rotate this sample

Running sum · 1 of 16 samples