Aurora Waves
About This Sketch
Layered sine waves flow across the canvas like aurora borealis dancing in the night sky. Each wave combines multiple harmonic frequencies to create organic, flowing motion rather than simple oscillation.
The varying opacity creates a shimmering, ethereal quality—bright in some places, fading in others. This demonstrates how combining simple mathematical functions (sine waves) at different frequencies and amplitudes can create surprisingly complex, natural-looking phenomena.
Algorithm
Flowing aurora-like waves created by layering multiple sine waves with different frequencies and amplitudes. The waves flow and undulate with varying opacity, creating an ethereal light effect.
**Key Concepts:**
- **Wave Superposition**: Combining multiple sine waves creates complex motion
- **Harmonic Frequencies**: Primary wave + half-frequency harmonic
- **Opacity Modulation**: Alpha varies with position for shimmer effect
- **Color Gradients**: Smooth horizontal color transitions
- **Layered Motion**: Multiple waves at different speeds create depth
**How it works:**
1. Create 5 wave layers with different parameters
2. Each wave combines two sine functions (fundamental + harmonic)
3. Primary sine: sin(x × freq + time × speed) × amplitude
4. Add harmonic: sin(x × freq/2 + time × speed × 1.3) × amplitude/2
5. This creates more organic, complex wave motion
6. Color interpolates horizontally across the canvas
7. Opacity varies with additional sine wave for shimmer
8. Different time speeds make waves flow independently
Pseudocode
SETUP:
FOR i = 0 to 5:
CREATE wave with:
yOffset = i × 50 + 50
speed = 0.02 + i × 0.01
amplitude = 20 + i × 10
frequency = 0.015 + i × 0.005
color = cycle through theme colors
DRAW (every frame):
CLEAR background
FOR EACH wave:
FOR x = 0 to canvas_width:
y = wave.yOffset +
sin(x × frequency + time × speed) × amplitude +
sin(x × frequency/2 + time × speed × 1.3) × amplitude/2
horizontal_position = x / canvas_width
color = interpolate(wave_color, next_color, horizontal_position)
opacity = 100 + sin(x × 0.02 + time) × 50
DRAW point at (x, y) with color and opacity
time = time + 1
Source Code
let sketch = function(p) {
let time = 0;
let waves = [];
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
for (let i = 0; i < 5; i++) {
waves.push({
yOffset: i * 50 + 50,
speed: 0.005 + i * 0.003,
amplitude: 20 + i * 10,
frequency: 0.015 + i * 0.005,
colorIndex: i % 3
});
}
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
for (let wave of waves) {
// Draw flowing wave with gradient
for (let x = 0; x < p.width; x++) {
let y = wave.yOffset +
p.sin(x * wave.frequency + time * wave.speed) * wave.amplitude +
p.sin(x * wave.frequency * 0.5 + time * wave.speed * 1.3) * (wave.amplitude * 0.5);
let t = p.map(x, 0, p.width, 0, 1);
let waveColor = wave.colorIndex === 0 ? colors.accent1 :
wave.colorIndex === 1 ? colors.accent2 : colors.accent3;
let nextColor = wave.colorIndex === 0 ? colors.accent2 :
wave.colorIndex === 1 ? colors.accent3 : colors.accent1;
let r = p.lerp(waveColor[0], nextColor[0], t);
let g = p.lerp(waveColor[1], nextColor[1], t);
let b = p.lerp(waveColor[2], nextColor[2], t);
let alpha = 100 + p.sin(x * 0.02 + time) * 50;
p.stroke(r, g, b, alpha);
p.strokeWeight(8);
p.point(x, y);
}
}
time += 1;
};
};