Animated Perlin Noise

This chart visualizes 1D Perlin noise, but unlike the static version, the offset is automatically incremented at each animation frame. This creates a dynamic, flowing effect—ideal for generative art and creative coding.

The animation is achieved by updating the x-offset in the noise function on every frame, causing the line to move smoothly across the canvas.

Here’s a code snippet showing the core animation logic:

const offsetRef = useRef(0);
useEffect(() => {
  function draw() {
    // ... drawing logic ...
    offsetRef.current += 0.01; // Animate offset
    requestAnimationFrame(draw);
  }
  draw();
  return () => cancelAnimationFrame(draw);
}, [/* dependencies */]);

Distribution

+

Violin

+

Density

+

Histogram

+

Boxplot

+

Ridgeline