Wave Dance
About This Sketch
Flowing sine waves create a mesmerizing pattern of horizontal motion. Each wave oscillates with the sine function, and the progressive phase shift creates the illusion of flowing water or fabric in the wind.
The color gradient from warm to rich tones adds depth, while the continuous animation makes the pattern feel alive and dynamic. This demonstrates how mathematical functions can create organic, natural-looking motion.
Algorithm
This sketch creates flowing sine waves that animate horizontally across the canvas. Multiple waves are layered vertically with colors that gradient smoothly.
**Key Concepts:**
- **Sine Wave Function**: Creates smooth, periodic oscillation
- **Phase Offset**: Animating the offset creates the flowing motion
- **Linear Interpolation (lerp)**: Smoothly transitions colors between waves
- **Vertex Drawing**: Connecting points to form continuous curves
**How it works:**
1. Draw multiple horizontal rows of waves
2. For each row, calculate sine wave with varying phase
3. Interpolate colors from top to bottom
4. Increment offset each frame to animate waves flowing left to right
5. Each row has slightly different phase, creating depth
Pseudocode
SETUP:
CREATE canvas 400×300
SET offset = 0
DRAW (every frame):
CLEAR background
FOR y = 0 to canvas_height STEP 20:
BEGIN shape
FOR x = 0 to canvas_width STEP 5:
wave_height = sin(x × 0.02 + offset + y × 0.01) × 30
color_gradient = map(y, 0, canvas_height, 0, 1)
color = interpolate(accent1, accent2, color_gradient)
ADD vertex at (x, y + wave_height)
END shape
offset = offset + 0.05
Source Code
let sketch = function(p) {
let offset = 0;
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
p.noFill();
for (let y = 0; y < p.height; y += 20) {
p.beginShape();
for (let x = 0; x < p.width; x += 5) {
let wave = p.sin(x * 0.02 + offset + y * 0.01) * 30;
let t = p.map(y, 0, p.height, 0, 1);
let r = p.lerp(colors.accent1[0], colors.accent2[0], t);
let g = p.lerp(colors.accent1[1], colors.accent2[1], t);
let b = p.lerp(colors.accent1[2], colors.accent2[2], t);
p.stroke(r, g, b);
p.strokeWeight(2);
p.vertex(x, y + wave);
}
p.endShape();
}
offset += 0.01;
};
};