Epicircle Drawing Fourier

Draw or upload an image to create a Fourier epicycle animation, inspect the math, copy JavaScript, and record a WebM video.

What this tool does

Epicircle Drawing Fourier converts a drawn path or uploaded image outline into a discrete Fourier representation. Animated rotating circles reconstruct the path while the page reports orbit activity and exposes the resulting mathematical and JavaScript forms.

Who this is for

• Students learning Fourier transforms and signal reconstruction
• Creative coders exploring mathematical drawing animations
• Educators demonstrating how a path can be approximated by rotating vectors

How to use this tool

1. Draw a path on the canvas or upload an image
2. Wait for the Fourier path to be processed, then adjust the Epicycles slider
3. Watch the animated reconstruction and review active orbits, progress, and FPS
4. Use Copy Math or Copy JS Func to copy the generated representation
5. Choose Record Video to create a WebM recording of the animation

Inputs

Inputs are a mouse or touch drawing, an uploaded image, and the number of epicycles selected after processing. Clear Canvas removes the current drawing so another path can be created.

Outputs

The app renders a live epicycle animation, status metrics, the reconstructed mathematical function f(t), and copyable JavaScript. Record Video exports the animation as WebM when browser recording is supported.

Example use cases

• Reconstruct a hand-drawn logo with rotating vectors
• Compare a smooth outline with different epicycle counts
• Share a short WebM demonstration or the generated function with a learner

Frequently asked questions