Turning Images into Fourier Sums and Drawing
Overview
This Processing (Java) application takes an input image, extracts its contours using OpenCV, and reconstructs the outline using rotating circles (epicycles) driven by the Discrete Fourier Transform (DFT).
The pipeline converts the image to grayscale, applies thresholding, and extracts contour points. The x and y coordinates of those points are separated and each fed independently into a DFT, producing a set of frequency coefficients that are interpreted as rotating circles with specific amplitudes, frequencies, and phases.
Two chains of epicycles — one for x and one for y — rotate simultaneously. The tip of each chain traces the respective coordinate, and their intersection reconstructs the original contour as time sweeps from to .
How It Works
Contour Extraction
The input image is loaded and processed through an OpenCV pipeline: conversion to grayscale, binary thresholding, and contour detection via findContours. The largest contour is selected and its points are sampled at regular intervals to produce an ordered list of coordinate pairs.
These sampled points define the discrete signal that will be decomposed by the DFT. Separating x and y into independent arrays allows each dimension to be transformed and drawn with its own set of epicycles.
Discrete Fourier Transform
The DFT is applied independently to the x-coordinate array and the y-coordinate array. For each frequency index , the transform computes real and imaginary components by correlating the signal with sine and cosine basis functions:
Each coefficient is converted to polar form — amplitude , phase , and frequency — defining a rotating circle. The coefficients are sorted by descending amplitude so the largest circles are drawn first, giving rapid visual convergence.
Epicycle Drawing
Two independent chains of epicycles are rendered on screen — one arranged horizontally (producing the x-coordinate) and one vertically (producing the y-coordinate). Each chain stacks rotating circles end-to-end: the centre of circle sits on the rim of circle .
As time advances from to , the tip of the x-chain and the tip of the y-chain each trace a coordinate value. A horizontal line from the y-chain tip and a vertical line from the x-chain tip intersect at the drawn point, progressively reconstructing the full contour on the canvas.
Additional Examples
Smooth curved shapes such as this are easier to draw because OpenCV can extract a continuous curve that encompass the entire drawing at once. If multiple curves are present, then there would be discontinuities, the algorithm might fail to draw correctly.
Extending to Text
Text-to-Image Pre-processing
To support drawing text, the application includes an automated pre-processing step. Instead of requiring an external image file, it uses Processing's createGraphics API to render any arbitrary text string offscreen using a custom font (such as Parisienne) at high resolution (default 350px).
The generated image is saved as a temporary PNG file, which is then fed directly into the OpenCV contour detection and sampling pipeline. This creates an extremely flexible system where any text string can be converted into a Fourier drawing sequence on the fly.
Text Epicycle Animation
The drawing stage uses the same dual-epicycle system as the image version, stacked and rotated to trace out the coordinates. However, to distinguish the text version and provide better visibility, the path is rendered with a distinctive yellow stroke color (RGB 255, 248, 21) instead of the cyan used in the image version.
The epicycles trace each character sequentially, resolving the discrete Fourier components of the letters end-to-end to reconstruct the written word.
Text-to-Image Drawing Pipeline
This entire pipeline is fully automated: once a string and font are specified, the program renders the text, processes the image, runs the DFT, and animates the resulting epicycle drawing without any manual step.
The Mathematics
DFT Formulation
The Discrete Fourier Transform converts a finite sequence of equally-spaced samples into a same-length sequence of complex frequency coefficients:
Each coefficient encodes a circle with amplitude , frequency , and phase . The original signal is reconstructed by summing these rotating phasors:
Sorting the coefficients by descending amplitude means the first few circles capture the coarse shape while later, smaller circles add finer detail — analogous to how low-frequency Fourier components carry most of the signal energy.
Technology Stack
Tools & Libraries
- Processing (Java) — Creative-coding framework used for real-time rendering and animation
- OpenCV (gab.opencv) — Image processing: grayscale conversion, thresholding, contour extraction
- PeasyCam — 3D camera control for interactive scene navigation
- Custom Fonts — TTF font rendering for text generation
- Discrete Fourier Transform — Custom implementation converting contour coordinates into frequency coefficients
- Real-time Animation — Epicycle chains drawn each frame, progressively tracing the reconstructed contour
Source Code
The fourier drawing system is split into two implementations: one extracting contours from input source images via OpenCV, and another that generates and draws text outline contours directly.
Fourier Drawing from Images
A Processing-based visualization tool that extracts contours from images using computer vision and recreates them dynamically using Fourier Epicycles (orbiting circles). By treating the extracted 2D contour coordinates as periodic signals, the system applies a Discrete Fourier Transform (DFT) to map the geometry into a sum of rotating vectors (phasors).
Dependencies / Tech Stack
Modules & Components
Fourier Drawing from Texts
An extension of the Fourier drawing tool designed to render text strings as boundary coordinates, converting them to Fourier series parameters for dynamic epicycle drawing.