fig. 03 pen yVOqGe
Trippy Geometry
The same orbit machine with every constant rolled at load: point count, radii, speed, stroke and trail wash.
original “HTML5 canvas: trippy geometry animation” codepen.io/izmaelmag/pen/yVOqGe ↗
● running
§1 About
A fork of Orbit Geometry where nothing is fixed. COUNT, R1, the R2 divisor, SPEED, the stroke width, three point sizes and the colour and strength of the trail wash are all rolled when the page loads.
Most rolls send the satellites far outside the ring — R2 grows with COUNT — and the wash colour tints the trail canvas, so every load is a different figure from the same coordinate algorithm.
§2 Maths
- count
COUNT = ⌊rand(2, 12)⌋ → 2 … 11- ring radius
R1 = rand(60, (H − 100) / 2)- satellite radius
R2 = R1 / (π · rand(1, 4)) · COUNT- speed
SPEED = rand(0.05, 2 / (COUNT · rand(0.5, 2)))- stroke
lw = rand(0.5, 3)- wash
rgba(rand(10, 100) ×3, rand(0.05, 0.3))- geometry
Pᵢ, Sᵢ as in Orbit Geometry, φᵢ = θᵢ + θᵢ · COUNT · 2
§3 Adaptation
- Math.random is replaced by a seeded generator (mulberry32) drawn in the pen’s order, so a seed in the URL reproduces the figure on refresh and can be shared.
- R1 is rolled against an 800 px reference height and the figure scaled to the stage. The original resize handler dropped the “/ 2” from CENTER; the port stays centred.
- Per-frame cost is bounded by COUNT ≤ 11: at most 242 connector strokes, drawn only while the stage is visible.