SketchWaveJS Classes

A library of custom graphics classes for p5.js

We've got class! (& so can you! )

Click on any card below to learn more and see interactive demos

🎨 SWColor Class

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

Core Class Try Demo View Reference

📍 SWPoint Class

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

Core Class Try Demo View Reference

📐 SWGrid Class

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

Core Class Try Demo View Reference

🟢 SWDisk Class

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

Core Class Try Demo View Reference

〰️ SWSinusoid Class

Control a ball's height with a sine wave! Change the frequency, and watch the ball bounce! Enable breathing and color cycling with your favorite shape!

Core Class Try Demo View Reference

📏 SWLine Class

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

Core Class

App 1 App 2 App 3

View Reference

🌈 SWGradient Class

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

Core Class

App 1 App 2

View Reference

🔺 SWTriangle Class

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

Core Class

App 1 App 2

View Reference

▭ 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'!

Core Class Try Demo View Reference

▪ 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.

Extended Class Try Demo View Reference

⬭ 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.

Core Class Try Demo View Reference

⬜ 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.

Extended Class Try Demo View Reference

⬡ 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.

Core Class Try Demo View Reference

★ 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.

Core Class Try Demo View Reference