Drawing with trigonometry, polar coordinates, and curves
Learning objectives
- learner can map sine/cosine and polar coordinates to draw waves, circles, spirals, and rotational patterns
- learner can build custom vector paths with beginShape, vertex, and bezier curves
- learner can shape periodic motion with custom sine/tan/pow functions and noise perturbation
Capstone — one whole task that evidences the objectives
Create a generative geometric plotter piece — a family of spirals, Lissajous curves, and wave-clock forms built entirely from polar/trig math and custom shaping functions, with at least one form driven by a tan() wave so its radius spikes toward an extreme and wraps back from the other side.
Prerequisite modules
This module builds toward the classic pen-plotter aesthetic: mathematically pure line work — spirals, Lissajous knots, wave-clock mandalas — that reads as hand-drawn precision. In a live-visuals or print-edition practice, these forms are the workhorse vocabulary: they render fast, and pair naturally with slow ambient sets or gallery editions where crisp geometry matters more than pixel effects.
The arc starts supported: draw a single sine wave by mapping sin(angle) to canvas y-coordinates, then internalize the unit-circle move — cos for x, sin for y — until the polar-to-Cartesian conversion (x = cx + r·cos(a), y = cy + r·sin(a)) is automatic; the two drills here target exactly that recurrent conversion, framed inside real drawing tasks rather than isolated math. From there each new form is one twist on the same loop: grow the radius per step for an Archimedean spiral, cross two sinusoids at integer ratios for Lissajous figures, rotate a noise-length chord for the wave clock, and swap sin() for tan() in one family so the radius shoots off-scale near the asymptote and wraps back — a deliberately wilder sibling among the bounded forms. Just-in-time pointers for the composition phase: “Adding Perlin noise to a spiral’s radius” for organic wobble, “A custom pow(sin(x),n) shaping function” for deterministic character, and the beginShape/bezierVertex atoms for turning point streams into smooth paths.
Every required atom is load-bearing for the capstone: the trig and polar atoms generate the forms, the shaping/noise atoms give each family its variance — including the tan wave, whose unbounded spike-and-wrap behaviour drives the capstone’s wildest form family — and the vertex/bezier atoms build the paths. Supporting atoms — 3D sphere coordinates, organic geometry, iterative variance, and vector-vs-raster export for when a piece heads to a plotter or print — extend the same ideas into depth and craft without gating the piece.
Runnable examples
Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.
modulation-warp
osc(4).modulate(src(o0), 0.6).out(o0)
hydra-0022 · CC0-1.0
s0.initP5(); src(s0).modulate(noize(), 0.3).out()
p5live-0038 · CC0-1.0
feedback-trail
osc(4).modulate(src(o0), 0.6).out(o0)
hydra-0022 · CC0-1.0
function draw(){ fill(0, 20); rect(0, 0, width, height); circle(mouseX, mouseY, 40) }
p5live-0003 · CC0-1.0
radial-symmetry
osc(10).kaleid(5).out()
hydra-0010 · CC0-1.0
// sandbox
osc(10, 0.05, 1.3).kaleid(8).out()
// sandbox
p5live-0037 · CC0-1.0
oscillation
let y = height/2 + sin(frameCount * 0.05) * 100
p5live-0004 · CC0-1.0
float rings = abs(sin(length(uv)*20.0 - u_time*2.0));
glsl-0039 · public-domain
polar-warp
float r = length(uv); float a = atan(uv.y, uv.x);
glsl-0008 · public-domain
[rtx [fr, ft + 0.2*time], rty [fr, ft], 0.5] >> rgb
punctual-0032 · CC0-1.0
vector-drawing
beginShape(); for(let p of pts) curveVertex(p.x, p.y); endShape()
p5live-0016 · CC0-1.0
Atoms in this module
Required — these gate the capstone
Supporting — enrichment, not gating
Part of curricula
- Live Visualist — zero to performing live-coded & generative visuals — Generative canvas — colour, motion, and Hydra live-coding required
Unlocks — modules that require this one