So many acts in this Big Top! 🎪
### examples and growing! Click on any card below to see class engines make magic with p5js!
👀 SWEyeball Saga
Take a 'look-see' at how we made a new class from some core SW classes and made it come to life!
👻 SWGhost Saga
Another thrilling saga where we bring ghosts to life using some core SW classes!
🍪 Cookie Monster
With our SWEyeball class, Cookie Monster can keep an eye out for cookies!
🏝 SWIsland Saga
Land ho! Create islands using SWGrid and SWSquare using recursion! See other a-maze-ing applications as well! Now featuring 🌊 Fractal Coastlines (Stage 8) — midpoint displacement transforms blocky grid borders into organic, realistic coastlines.
🔐Beale Cipher
In the mood for some cryptography? Explore the Beale Cipher and its secrets! This is part of a larger saga involving SWCharacter and recursive techniques. Be sure to check out the other examples in the saga!
🛞 SWWheel/SWCross Saga
Spin up some fun with SWWheel and its lean sibling SWCross! SWWheel assembles a hub, rim, and spokes from core classes and lets them rotate and breathe. SWCross locks it down to four arms and strips away the rim for a clean plus-sign that can be pre-tilted with initialRotation. Together they power some eye-popping optical illusions — including the Lingelbach effect!
🪞Palindrome
A palindrome reads the same forwards as backwards — pure mirror symmetry in text! Explore classic examples and discover the elegant logic behind detecting them using recursion.
🌀 Warped Square Illusion
This illusion uses our SWTwoTonedSquare class. Although everything is 'square' the colors and placements give the illusion that the image is warped. Play with the controls to see if you can alter this perception. The image may be animated as well!
🗺️ Topo Map Demo
A topographic map encodes terrain elevation as contour lines — here we capture that spirit mathematically. An N×N grid of SWTwoTonedDisk, SWArrow, SWTriDisk, SWCross, or SWTwoTonedSquare shapes is tiled across the canvas, and each shape's orientation is determined by a topo function of its (x, y) position. The Ripple map, for example, uses a radial sine wave to produce concentric rings of smoothly-rotating shapes. Swap shape types, tune colors, spin the field, and watch equations become landscapes!
🪄 Claude Wizard Demo
We wondered just how much of a Wizard Claude Sonnet 4.6 was. We were not disappointed. With a simple prompt to create a 'wizard' image using existing SWClasses, Claude conjured a magical scene that exceeded our expectations. He (it?!!) even did some self-reflection on the design process. Be sure to see his wizard and his insights!
⎈ Epicycloid Family
From Nephroid to 7-Petal Rosette — meet the entire epicycloid family in one gallery! Six SWClover shapes (numPetals 2–7) are arranged side by side, each labelled with its classical name and internal n parameter. Spin them all, set them breathing, or lower the background opacity for ghosted mandala trails. Powered by the epicycloid parametric equations documented in SWClover.
◎ Rolling-Circle Epicycloid
See where the SWClover curve comes from! Watch a small circle roll around a fixed circle in real time as its rim traces out the classic epicycloid shape. Control the number of petals (k), the fixed-circle radius, rotation speed, and direction. Toggle the rolling circle, spoke arm, orbit ring, and trace path on and off to isolate any part of the construction. Uses SWDisk, SWPoint, and SWGrid.
🚀 Griffin's Rocket Saga
It's time for takeoff! Take novice Griffin's basic p5js rocket design to new heights by incorporating SWClasses and animations!
💣 Crosby's Bomb Saga
Obviously, this program is the bomb! It was Crosby's first attempt with p5js, and as you'll see, it's packed with explosive power. We'll see how to get more yield from it as we refactor it with professional techniques and the inclusion of SWClass instances. We may even take a template or two on a trial run as we do!
✨ Glow Path
Thousands of random points scatter across the canvas — each one quietly tested against a hidden geometric rule. The closer a point is to satisfying it perfectly, the brighter it glows. Over time, a shape emerges from the noise. Drag ptF and lineAB to reshape the mystery path. Can you figure out what curve the light is tracing?
🛰 Jackson's Orbit Saga
Join Jackson as he explores the vastness of space with his innovative orbit design. This saga takes his initial concepts and elevates them with advanced p5js techniques and SWClass instances.
⛰ Fractal Mountains
A layered mountain range generated by the Midpoint Displacement algorithm — the same technique used in game engines and film VFX. Four parallax depth layers (far, mid, near, foreground) are tessellated with SWTriangle. Roughness and Time of Day controls let you dial in the perfect landscape.
⛰ Fractal Mountains 2 — Watch It Build
Same Midpoint Displacement terrain as v1, but now with a Detail Level slider (0–8 subdivision passes) so you can watch the fractal being constructed one iteration at a time. Hit Animate and see coarse bands grow into wispy peaks before your eyes — the best demonstration of fractal self-similarity in the collection.
⛅ Animated Sky — SWCloud Puffs
A live drifting sky built from overlapping SWEllipse puffs via the SWCloud class. Clouds breathe, morph with Perlin noise, and drift across three parallax depth layers. Note: despite the file name, the shape generation here uses single-octave noise — not true fractal fBm. Compare with v2 to see the visual difference.
⛅ Fractal Clouds 2 — Genuine fBm
A photorealistic animated sky using genuine fBm (fractional Brownian motion) — the real fractal algorithm. Cloud shapes come from a multi-octave Perlin density field; puffs are drawn with radial gradients (no hard ellipse edges); each puff is top-lit for a physical 3-D appearance. Cloud Count and Cover sliders let you go from partly cloudy to full overcast.
🌳 Fractal Tree — Recursive Branching
One recursive rule — split into two shorter, angled children — applied to itself at every scale produces the branching structure of every tree in nature. Watch Animate Build add one depth level at a time and observe the exponential growth (2N leaves). Adjust spread, length ratio, and wind sway. 5 seasonal color schemes.
🗺️ Diamond-Square Terrain
The Diamond-Square algorithm fills a 2D grid via iterative midpoint displacement — alternating diamond and square steps while halving the noise scale each pass. Produces fractal heightmaps with controllable roughness (Hurst exponent). Sea-level flooding, 4 color schemes, seeded PRNG for reproducible terrain. The 2D extension of the Mountains midpoint algorithm.
📐 Special Triangles
Explore the geometry of 30-60-90 and 45-45-90
special right triangles on an interactive Cartesian grid. Generate random or
textbook-quality examples, toggle Annotate to label every side and angle
directly on the canvas, and flip between standard and rotated orientations.
In Textbook mode all side lengths appear as exact radical expressions
— never a messy decimal. New to radicals?
Understanding Radicals
covers the history, anatomy, and simplification of radical expressions using the
companion Radical.js class. Curious why the ratios work?
Why Special Triangles?
walks through both proofs from scratch using only the Pythagorean Theorem —
no trigonometry required.
📐 Solving Right Triangles
Practice finding unknown sides and angles in right triangles across five problem types: 30-60-90, 45-45-90, Pythagorean triples, general right triangles (exact radical answers), and SohCahToa problems using sine, cosine, and tangent. Answers are checked as you type — the canvas redraws the solved triangle each time you get one right. Toggle the SohCahToa switch to mix in trig problems or keep practice purely algebraic. New to trig ratios? See Understanding SohCahToa for the history, the ratios, and an interactive calculator.
🏃➡️ Glow Track
Thousands of random points scatter across the canvas, each scored by how close it is to an special rule: the sum of distances to two fixed points (foci) stays constant. Points near that target glow bright in path hue, while off-target points fade darker. Drag F1 and F2 to reshape the locus and reveal the true track shape.
