Topography

Animated contour lines that shift and flow like a living topographic map. The underlying height field evolves over time, causing the contour lines to merge, split, and reshape continuously.

Examples

Basic

Default settings.

Preview

Code

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

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createTopography({ scale: 1 });
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration

All options are passed via a config object:

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

const topography = createTopography({
    speed: 0.5,
    resolution: 4,
    contourSpacing: 0.1,
    lineWidth: 1.5,
    color: '#2d5016',
    scale: 1
});
topography.mount(canvas).start();

speed

Controls how fast the height field evolves. Default: 0.5.

createTopography({ speed: 1 });

resolution

Pixel step size for the height field grid. Lower values produce smoother contour lines at higher rendering cost. Default: 4.

createTopography({ resolution: 2 });

contourSpacing

Spacing between contour levels as a fraction of the height range (0–1). Smaller values produce more contour lines. Default: 0.1.

createTopography({ contourSpacing: 0.05 });

lineWidth

Width of the contour lines in pixels. Default: 1.5.

createTopography({ lineWidth: 2 });

color

Color of the contour lines. Use earthy greens for a classic topo map look.

createTopography({ color: '#446633' });

scale

Scales all size-related values proportionally. Default: 1.

createTopography({ scale: 1.5 });