Fluid

The fluid effect simulates an interactive dye-in-fluid simulation. Colorful dye is periodically injected into a velocity field that flows, diffuses, and advects over time. Moving the mouse across the canvas stirs the fluid, creating organic swirling patterns.

Examples

Basic

Fluid simulation with default colors and settings.

Preview

Code

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

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

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

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

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

Configuration

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

const fluid = createFluid({
    speed: 1,
    resolution: 128,
    colors: ['#ff3366', '#33ccff', '#66ff33', '#ff9933', '#cc33ff'],
    viscosity: 0.5,
    diffusion: 0.5,
    mouseForce: 1,
    scale: 1
});
fluid.mount(canvas).start();

Mouse Interaction

Moving the mouse over the canvas stirs the fluid and injects colored dye along the cursor path. The strength of this interaction is controlled by mouseForce.

Speed

// Slow, calm flow
createFluid({ speed: 0.4 });

// Fast, turbulent flow
createFluid({ speed: 2 });

Resolution

Lower resolution is faster but looks blockier; higher is smoother but more expensive:

// Low resolution, fast
createFluid({ resolution: 64 });

// High resolution, detailed
createFluid({ resolution: 256 });

Colors

// Warm palette
createFluid({ colors: ['#ff6600', '#ffcc00', '#ff3300'] });

// Cool palette
createFluid({ colors: ['#0033ff', '#0099ff', '#00ccff'] });

Viscosity & Diffusion

// Thick, slow-spreading fluid
createFluid({ viscosity: 0.9, diffusion: 0.1 });

// Thin, fast-spreading fluid
createFluid({ viscosity: 0.1, diffusion: 0.9 });