SketchWave Sinusoid Wave Demo

SWSinusoid is a SketchWaveJS utility class that models sinusoidal behavior using the standard formula:

y = A · sin(B · (x − D)) + C

• A — Amplitude: how tall the peaks and troughs are.
• B — Frequency: computed automatically from the period as B = 2π / period.
• C — Vertical shift: the sinusoidal axis height. In this demo, C is controlled by the Sinusoidal axis (c) slider and shifts the whole wave up or down.
• D — Phase shift: slides the wave left or right along the x-axis.

What you can explore in this demo

• x₀ (start x): sets where on the x-axis the wave begins.
• Sinusoidal axis (c): lifts the entire wave above or below the x-axis.
• Amplitude (A): drag negative to flip the wave upside-down.
• Length: how far (in grid units) the wave is drawn. Negative length draws the wave to the left of x₀.
• Period: a shorter period packs more cycles into the same length; longer creates fewer, wider humps.
• Phase shift (D): slides the wave left or right without changing its shape. Use Phase Shift Cycle to animate this continuously.
• Rotation: tilts the entire wave about its start point. Notice how the sinusoidal axis line tilts with it.
• Num Points: drag low (5–15) to reveal the flat polygon facets; drag high (100–150) for a perfectly smooth curve. Great for illustrating how polygon sampling works.
• Stroke Design: sweep the hue slider to recolor the wave across the full spectrum; adjust thickness from hairline to bold.
• Show Vertices: reveals the individual sample points that make up the wave polygon.
• Switch to Cos: toggles between sin and cos — you'll see the wave shift exactly ¼ period (equivalent to D − period/4).

Animations

• Phase Shift Cycle: continuously advances D at a configurable speed (grid units/sec), making the wave scroll from right to left like a traveling wave.
• Amplitude Cycle (Breathe): oscillates A between −max and +max using an SWSinusoid. The wave "breathes" — growing, shrinking, and flipping. Try combining this with Phase Shift Cycle!
• Background Alpha: lower the background opacity to see ghost trails during animation — beautiful with Amplitude Cycle.

Quick controls

• Click the canvas to hide/show the grid.
• Keyboard: p (phase cycle), a (amp cycle), r (factory reset), q (stop all animations).

Where is SWSinusoid used at TNT?

SWSinusoid drives the "breathing" effects across many SketchWaveJS animations — objects that grow and shrink rhythmically (like SWArch's Breathe A and Breathe Base modes). Any quantity you want to oscillate smoothly over time can be expressed as getValue(t).

SketchWaveJS classes used by this demo

• SWSinusoid Reference
• SWGrid Reference
• SWColor Reference