home/ modules/ drawing-with-trigonometry-and-curves

Drawing with trigonometry, polar coordinates, and curves

  • 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

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.

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

Mapping sin(angle) to canvas y-coordinates draws a smooth periodic wave
Concept L1 Foundations H
sin() and cos() convert angles to unit-circle coordinates, enabling circular motion and oscillation
Concept L2 First instrument H
Polar coordinates (r, angle) map to Cartesian (x, y) as x = cx + r*cos(a), y = cy + r*sin(a)
Concept L2 First instrument H
Points on a circle's circumference are computed from center, radius, and angle using sin/cos
Procedure L2 First instrument H
An Archimedean spiral is drawn by incrementing both angle and radius simultaneously in a loop
Procedure L2 First instrument H
Lissajous figures are closed curves traced by combining two perpendicular sinusoids at integer frequency ratios
Concept L3 Craft H
Rotating a diameter chord around a circle while varying its length by noise produces a wave-clock pattern
Procedure L2 First instrument H
A custom pow(sin(x),n) shaping function replaces noise() to give a smooth periodic radius variation with a distinctive character
Procedure L2 First instrument H
The sine function produces smooth repeating variance usable as a custom noise alternative
Concept L2 First instrument H
A tan() wave drives motion that shoots off-screen and returns from the opposite side, unlike a bounded sin() wave
Concept L2 First instrument H
Adding Perlin noise to a spiral's radius each step produces organic, irregular loop shapes
Procedure L2 First instrument H
beginShape/endShape with vertex() and bezierVertex() builds arbitrary polygons and smooth curves in p5.js
Procedure L2 First instrument H
Processing's beginShape/endShape with bezierVertex() enables smooth custom vector paths
Concept L2 First instrument H

Supporting — enrichment, not gating

Points on a sphere's surface are computed from two angles using nested sin and cos
Procedure L3 Craft H
Organic geometry builds natural-looking forms from strictly geometric primitives
Concept L2 First instrument HL
Deconstructing a shape into steps enables naturalistic variance at each step
Procedure L2 First instrument H
Vector PDF output preserves resolution at any scale while raster output has fixed pixel resolution
Concept L2 First instrument H
Polar warp reinterprets Cartesian coordinates as (radius, angle), turning stripes into rings and scrolling into rotation
Concept L2 First instrument LGH
Polar-warp plus radial-symmetry forms the mandala/kaleidoscope skeleton of a psychedelic visual
Concept L2 First instrument HG