Sound Waves

The sound waves effect visualizes interference patterns from multiple wave sources. Each source emits circular waves that propagate outward and interfere constructively and destructively with other sources, producing colorful ripple patterns. Clicking the canvas adds a temporary burst source at the click position.

Examples

Basic

Three wave sources with default blue tones.

Preview

Code

<template>
    <EffectDemo>
        <canvas ref="canvasRef"></canvas>
    </EffectDemo>
</template>

<script
    setup
    lang="ts">
    import { onMounted, onUnmounted, ref } from 'vue';
    import { createSoundWaves } from '@basmilius/sparkle';

    const canvasRef = ref<HTMLCanvasElement>();
    let sim: ReturnType<typeof createSoundWaves> | null = null;

    onMounted(() => {
        if (canvasRef.value) {
            sim = createSoundWaves();
            sim.mount(canvasRef.value).start();
        }
    });

    onUnmounted(() => {
        sim?.destroy();
        sim = null;
    });
</script>

Configuration

import { createSoundWaves } from '@basmilius/sparkle';

const waves = createSoundWaves({
    speed: 1,
    sources: 3,
    frequency: 1,
    amplitude: 1,
    colors: ['#1e40af', '#0891b2', '#0d9488', '#2563eb', '#06b6d4'],
    resolution: 4,
    damping: 0.98,
    scale: 1
});
waves.mount(canvas).start();

Click Interaction

Clicking anywhere on the canvas adds a temporary wave source at that position. It emits a short burst and then fades out.

Number of Sources

// Minimal interference pattern
createSoundWaves({ sources: 1 });

// Complex multi-source interference
createSoundWaves({ sources: 6 });

Frequency & Amplitude

// Long wavelength, gentle ripples
createSoundWaves({ frequency: 0.5, amplitude: 0.8 });

// Short wavelength, tight ripples
createSoundWaves({ frequency: 2, amplitude: 1.5 });

Damping

Controls how quickly waves fade with distance from the source:

// Sharp falloff, localized patterns
createSoundWaves({ damping: 0.9 });

// Slow falloff, wide-reaching interference
createSoundWaves({ damping: 0.999 });

Colors

Each source is assigned one of the provided colors:

// Warm palette
createSoundWaves({ colors: ['#f97316', '#eab308', '#ef4444'] });