SketchWaveJS Classes

🎨 SWColor Class

Create and manipulate colors with HSBA color mode with the ability translate to RGB, HSL, or hex values.

📍 SWPoint Class

Create and manipulate points in 2D space with customizable colors, sizes, and labels.

📐 SWGrid Class

Add coordinate grids to your sketches for precise positioning and visual reference.

🟢 SWDisk Class

Create and manipulate disks with customizable colors, sizes, positions. Via SWSinusoid, watch them breathe and color cycle.

🪐 SWDiskStack Class

A composite class built from layered SWDisk instances. SWDiskStack blends a bigDisk into a smallDisk by interpolating center location, radius, border thickness, and HSBA color across n layers. Usage: set both endpoint disks and step count to build layered disk-stack transitions.

🍕 SWSector Class

Create and animate pizza-slice sectors with a vertex, radius, and angular size θ. Via SWSinusoid, watch them spin, breathe radius and theta, and color cycle.

🌙 SWCircleSegment Class

A circle segment is the crescent-shaped region between a chord and its subtended arc — it does not connect to the circle's center. Defined by a center, radius, and central angle θ. Via SWSinusoid, watch it spin, breathe radius and theta, and color cycle.

⌒ SWArc Class

Draw animated arcs — the curved crust of a circle — with customizable thickness and stroke caps. Via SWSinusoid, watch them spin, breathe radius, theta, and thickness, and color cycle.

📶 SWWifi Class

Draw animated WiFi / signal-strength symbols — concentric arcs centered on a shared point, plus a filled dot at the origin. Control signal strength via activeCount (inactive arcs dim automatically) or fire a single-arc pulse. Animate with spin and breathe thickness via SWSinusoid. Drag the shape interactively by its center handle.

🌈 SWRainbow Class

Draw ROYGBIV concentric arcs — a classic rainbow shape. Every arc carries its own independent color, so you can recolor each one by clicking it in the demo. Compare with SWWifi: both share the same geometry (same arc radii, same angle math, same center dot) but are sibling Core classes — not parent/child — because forcing inheritance would create the OOP anti-pattern called "refused bequest". Animate with breathe thickness and spin.

🌓 SWTwoTonedDisk Class

Draw animated two-toned disks — with customizable radii and strokes (borders). Watch them spin, breathe their radii, and color cycle (via SWSinusoid).

🥧 SWPie Class

Draw animated pie charts — with customizable slices and colors. Watch them spin and breathe their radius (via SWSinusoid).

🎱 SWTriDisk Class

Three collinear disks on a rotatable axis — a center disk flanked by light and shadow side disks — create a convincing 3D sphere illusion. Watch the crescents dance as the axis spins!

⭕ SWRing Class

A stroke-only circular outline defined by a center, radius, and thickness — with three independent breathing animations (radius, thickness, opacity) plus hue cycling. Enable the center dot and drag the ring anywhere on the grid!

〰️ SWSinusoid Class

Model sinusoidal motion with y = A · sin(B(x − D)) + C. First, explore the wave itself — tweak amplitude, period, and phase shift. Then put it to work: drive a ball's height to watch the math become motion!

📏 SWLine Class

Draw and manipulate line segments with customizable colors, thickness, and positions. Leverage their attributes in designs, and let them breathe and rotate.

➤ SWArrow Class

Draw and animate directed arrows with a styled shaft and customizable arrowhead. Control tip angle, barb length, color, and thickness — and let them breathe and spin.

🌈 SWGradient Class

Create and manipulate gradients with customizable colors, directions, and transitions.

🔺 SWTriangle Class

Create triangles and manipulate their attributes with customizable colors, thickness, and positions. Not surprisingly, they too can breathe and rotate.

▭ SWRectangle Class

Control a rectangle's dimensions with a sine wave! Change the frequency, and watch the rectangle breathe! Enable breathing and rotation. Be on the lookout for the 'golden rectangle'!

▪ SWSquare Class

A square is a rectangle where every side is equal. SWSquare extends SWRectangle with a single size parameter, adding handy geometric properties like diagonal, inscribed circle radius, and the fun toRhombus() transform.

🏁 SWTwoTonedSquare Class

This SWClass uses a SWSquare for a base, then allows a user to specify a parameter (1-4) that controls the two-toned pattern which can use primitive rectangles, squares or triangles. This shape allows you to make some interesting optical illusions!

⬭ SWEllipse Class

An ellipse defined by a center point and two independent radii. SWEllipse supports four breathing modes, free rotation via p5's push/pop pattern, and exposes geometric properties like eccentricity, focalDistance, and isCircle.

⬡ SWKite Class

The general kite quadrilateral — a standalone base class with two independent vertical half-diagonals (diagTop and diagBottom) creating two pairs of adjacent equal sides. SWDiamond extends SWKite as the special symmetric case where all four sides are equal.

◇ SWDiamond Class

A rhombus (diamond) that extends SWKite — the special case where diagTop equals diagBottom, making all four sides equal. Adds sideLength, aspectRatio, and isSquare while inheriting all drawing, breathing, rotation, and drag from SWKite.

⬜ SWRoundedRectangle Class

Extends SWRectangle with smoothly rounded corners via p5's native rect() corner-radius support. Inherits all breathing modes and rotation animation. The cornerRadius property is in user units and scales automatically with the grid.

🏳️ SWFlag Class

A flag-shaped composite of n SWRoundedRectangle stripes. Supports breathing animations, rotation, and customizable colors, gaps, and corner radii.

⬡ SWRegularPolygon Class

A regular n-sided polygon (triangle → dodecagon) defined by a center point, circumradius, and number of sides. Supports sharp-corner and Catmull-Rom rounded-corner drawing modes. Breathing scales the circumradius uniformly. Exposes apothem, sideLength, interior and exterior angles.

⌂ SWPolygon Class

A polygon with an arbitrary number of sides, defined by a set of vertices. Supports SWPoint placement (with draggability and snap-to-grid adjustments), scaling, translations, and rotations.

★ SWStar Class

A regular n-pointed star defined by a center point, outer circumradius (tip reach), and inner radius (valley depth). Outer and inner radii breathe independently via separate SWSinusoid objects — tips and valleys can pulse at completely different rates. Tip rounding uses quadratic-bezier chamfering on outer vertices only.

❄️ SWSnowFlake Class

A procedural crystal class that can render realistic snowflake structures using both iterative and recursive design patterns. Explore style families like Stellar and Plate crystals, then switch to Koch and Recursive Dendrite modes to study fractal depth, branch scale, and branching angle.

🐝 SWBug Class

An SWBug is a SWPoint. Why a bug? Because it has additional behaviors and properties that extend the basic SWPoint functionality: it can move erratically or with Perlin noise and mimic the behavior of a real bug as it crawls (or flys) around the screen. We can use it as a locator point for other objects in the future!

🅰️ SWCharacter Class

This 'shape' has a lot of 'character!' We use it to animate symbols and text in creative ways. A SWCharacter has a SWBug instance that locates it in a canvas, and enables it to move and interact dynamically with its environment.

👁️ SWEyeball Class

A fully interactive eyeball built from sclera, iris/pupil, and dual glint highlights. The pupil is draggable and constrained to stay inside the sclera at all times. Use setPupilOffset() with polar coordinates to aim the gaze programmatically — perfect for animating a character that looks around a scene.

👻 SWGhost Class

A composite ghost silhouette built from a rounded head disk, a rectangular body, and a configurable row of toe bumps. The whole shape is draggable as a single unit. Animate it with stretching() — a sinusoidal body-height oscillation that keeps the head fixed while the body and toes bob up and down. Attach SWEyeball instances to bring it to life!

🛞 SWWheel Class

A wagon-wheel shape built from three components: a filled hub (SWDisk), an outlined rim (SWDisk), and an array of spokes (SWLine). The wheel can spin at a given angular velocity via rotate(), and the rim can breathe (pulse in and out) via breathe() using a SWSinusoid. Claude developed this class quickly using basic SketchWave classes. His chatlog shows how.

🚑 SWCross Class

SWCross extends SWWheel as a locked-down plus-sign shape: always 4 arms, no visible rim, no visible hub. An initialRotation parameter pre-tilts the arms to any starting angle before animation begins. rotate() bakes that offset in so the spin always starts from the right position, and reset() returns to initialRotation rather than zero. Arm thickness, length, color, and cap style are all customizable.

Explore the SWWheel Saga to see how this shape was used to make multiple optical illusions.

🌉 SWArch Class

A parabolic arch defined by the quadratic y = ax² centered at the vertex. The sign of a sets orientation: a < 0 gives a rainbow arch (∩, vertex is the peak) while a > 0 gives a bowl (∪, vertex is the low point). xLeft and xRight set how far the arch extends on each side of the vertex independently — make them unequal for an asymmetric arch.

Rotate the arch about its vertex, spin it continuously, breathe the curvature (oscillate a via SWSinusoid), or breathe the base (oscillate xLeft & xRight) to open and close the arch like a pair of wings.

🌀 SWSpiral Class

An Archimedean spiral defined by the polar equation r = k·θ⁄π, where k controls arm spacing: after each full turn the arms are 2k units apart. Set the number of revolutions and choose CW or CCW winding. Watch it spin with rotate() or breathe as k oscillates sinusoidally, expanding and contracting the arms in real time.

🌹 SWRose Class

A polar rose defined by r = a·cos(n·θ) (or sin), where a controls petal size and n determines petal count: odd n → n petals, even n → 2n petals. Toggle between cosine and sine forms to rotate the rose by 90/n°. Animate with rotate() to spin, or bloom the amplitude sinusoidally to watch the petals pulse in and out.

❤ SWCardioid Class

A polar cardioid defined by r = a·(1 + cos(θ)) (or sin) — a single-cusped, heart-shaped curve where a controls the overall size (max radius = 2a, cusp at the pole). Toggle between cosine and sine forms to rotate the shape 90°. Animate with rotate() to spin, or pulse the amplitude sinusoidally to make the cardioid breathe like a beating heart.

🐌 SWLimacon Class

The complete limaçon family in one class, defined by r = a + b·cos(θ) (or sin). Five named variants emerge from the ratio |a/b|: Convex (a/b>2), Trisectrix (a=2b), Dimpled (1<a/b<2), Cardioid (a=b), and Inner Loop (a<b). Slide a or b to morph between variants live; negative r creates the inner loop automatically. Supports spin, pulse (variant-morphing) animation, and draggable pole.

❤️ SWHeart Class

A parametric heart curve defined by x = a·sin³(t) and y = b·cos(t) + c·cos(2t) + d·cos(3t) + e·cos(4t). Five independent coefficients let you sculpt the width, lobe height, cleft depth, tip sharpness, and fine detail. Watch it spin with rotate() or beat as scale oscillates sinusoidally at a configurable BPM.

〰️ SWLissajous Class

A parametric class for Lissajous figures — closed curves defined by x = ampX·sin(freqX·t + φ) and y = ampY·sin(freqY·t). Adjust integer frequency ratios, amplitudes, and phase to explore circles, figure-8s, and complex braided forms. Animate with rotate() to spin or use the unique driftPhase() to smoothly morph the figure through all its configurations.

∞ SWFigure8 Class

A parametric class for the lemniscate of Bernoulli — the figure‑8 / infinity‑symbol curve defined by the polar equation r² = a²·cos(2θ). Trace both lobes in one smooth pass, control scale and rotation, animate with rotate() (spin) or the Pulse feature (sinusoidal scale oscillation). Combine with low background opacity for glowing motion trail effects.

✦ SWSpire Class

A parametric class for the Lamé super-ellipse spire — defined by x(t) = rx·cos^p(t), y(t) = ry·sin^p(t). With odd integer p ≥ 3 and ry > rx, the shape resembles a Gothic cathedral pinnacle with four sharp cusps. Animate with rotate() (spin) or the unique Morph feature (sinusoidal power oscillation), which morphs continuously between ellipse and star forms.

☘ SWClover Class

A parametric class for epicycloid clover curves — defined by x(t) = a·(n·cos(t)−cos(n·t)), y(t) = a·(n·sin(t)−sin(n·t)) where n = numPetals+1. Use numPetals=3 for a three-lobed club ♣, numPetals=4 for a classic four-leaf clover ☘, or higher values for multi-petal rosettes. Features rotate() (spin) and sinusoidal Breathe animation (radius oscillation).

☘ SWShamrock Class

A polar-curve class for shamrock curves — defined by r(θ) = SCALE·radius·(sin(3θ/2) + sin(9θ/2)/5)² with three rounded lobes. Features rotate() (spin) and sinusoidal Breathe animation (radius oscillation), as well as a customizable SWSpire stem.

♣ SWClub Class

Draws the classic playing-card club symbol (♣) as a composite of two shapes. The body is a SWClover epicycloid parametric curve with numPetals = 3 and a 270° rotation offset, so the top lobe always points up and the shape is symmetric about the y-axis. The stem was initially three overlapping SWDisk circles plus a trapezoid; the final version replaces the whole assembly with a single SWSpire (halfShape=true) for a clean, elegantly pointed arch. Stem position is computed each frame from the lower-cusp midpoint, keeping it correctly attached during Breathe (radius oscillation) and rotate() spin animations.

♠ SWSpade Class

Draws the classic playing-card spade symbol (♠) as a composite of two shapes. The body is a trigonometric parametric heart curve with the y-component negated, so the sharp tip points up and the rounded lobes fall to the bottom — the same inversion used in the original v0 design. The stem was initially a simple trapezoid; the final version replaces it with a SWSpire (halfShape=true) for a smooth, elegantly pointed arch. Stem position is computed each frame from the body's minimum y, keeping it correctly attached during Pulse (scale oscillation) and rotate() spin animations. A stemOffset parameter provides fine-grained vertical control.

⛅ SWCloud Class

A cumulus cloud built from N overlapping SWEllipse puffs. Random offsets create a natural, organic silhouette. Watch it breathe with staggered puff oscillations, drift across the sky with canvas wrap-around, and morph in real time with per-puff Perlin noise. Independent spread sliders rescale the cloud without losing its random character. Call randomize() to generate a fresh arrangement, and reset() to restore the exact original shape.

Inspired by the sky backdrop in Crosby's Bomb Saga.

💥 SWParticle Class

A physics-driven particle for explosions, fire, sparks, and emitter effects. Each particle launches from a spawn point with a random velocity, decelerates under configurable drag, falls under gravity, and fades out as its alpha decreases each frame. Call update() + draw() in your loop and remove particles when isDead() returns true. Choose circle or square shapes; tune speed, size, hue range, and Fade Rate for fire, confetti, or zero-gravity sparkles. Supports motion-trail effects via semi-transparent backgrounds.

Generalized from the explosion in Crosby's Bomb Saga.

◯ SWBumpyCircle Class

A polar curve where the radius oscillates sinusoidally around a base circle: r(θ) = radius + amplitude · sin(frequency · θ)^power. Control bump count, height, and shape. Animate with spin and breathe.

☀️ SWSun Class

A sun (or moon) built from a central SWDisk ball surrounded by radiating shapes. Choose from four ray types — line, arrow, triangle, and sinusoid — with up to 5 cycling colours. A multi-layer concentric glow softens the centre. Animate with breathe (ball + rays pulsing via SWSinusoid), rotate (rays spinning), and ripple (sinusoid rays radiating outward). Drag the sun to any position on the canvas.

💧 SWTearDrop Class

A smooth parametric teardrop (water-drop) shape defined by x(t) = b · sin(t) · sin^m(t/2) and y(t) = −a · cos(t). The curve-power exponent m controls tip sharpness: 0 = ellipse, 1 = classic teardrop, 3+ = needle-sharp tip. Animate with breathe (proportional scale via SWSinusoid) and rotate — choose a pivot at the shape’s centre or at its tip. Drag the drop anywhere on the canvas.

▱ SWTrapezoid Class

A quadrilateral with one pair of parallel bases. Set regular for a symmetric isosceles trapezoid, or use offset to skew the top base for a general trapezoid. Area = (a + b)/2 × h. Animate with top-base breathing, bottom-base breathing, or uniform breathing via SWSinusoid, and rotate about its centre. Drag anywhere on the canvas.

▱ SWRoundedTrapezoid Class

Extends SWTrapezoid by rounding all four corners using quadratic Bézier curves. Inherits top-base and bottom-base breathing, rotation, grid drawing, and drag support from its parent. The only new property is cornerRadius (pixels, clamped at draw time to prevent overlapping arcs).

SWBellCurve Class

Draws a Gaussian bell curve as a closed filled shape — the smooth arc on top and a flat baseline at the bottom. Positioned by its bounding-box centre. Supports three independent breathing modes: vertical (taller/shorter), horizontal (wider/narrower), and both (uniform scale). Key statistical properties — FWHM, area, and sigma — are exposed as computed getters. Standalone Core Class; no parent.

🍃 SWBifolium Class

A quartic polar curve with one or two organic leaf-shaped lobes, defined by r(θ) = A · sin(θ) · cosn(θ). A is automatically normalized so the peak lobe distance always equals scale. The power exponent n sculpts lobe width: 2 = classic rounded bifolium, higher values give progressively more slender leaves. Toggle between one leaf and the symmetric two-leaf bifolium. Animate with spin (rotate()) and breathe (sinusoidal scale oscillation). Drag the center dot to reposition the figure.

◎ SWLoopyCircle Class

A Spirograph-style parametric curve defined by x(t) = r·cos(t) + d·cos(b·t) and y(t) = r·sin(t) − d·sin(b·t). The frequency parameter b controls loop count: b+1 inner loops appear once d > r/b. Set b=0 for an offset circle, b=1 for an ellipse, or b≥2 for classic loopy forms. Animate with spin (rotate()) and breathe (sinusoidal r oscillation). Drag the center dot to reposition.