Orb Catcher

Orb Catcher is a browser game that grew out of a curl-noise experiment I made with Rust, Macroquad, and WebAssembly.

The original prototype was my way of learning how the paper Curl-Noise for Procedural Fluid Flow uses noise to create smoke-like motion. I later turned that experiment into a game: collect the target color orbs, avoid obstacle orbs, and use movement or boosts to disturb the flow.

Project Links

• Play Orb Catcher on itch.io
• Original curl-noise paper

Playable Build

How the Visuals Work

It looks like a fluid sim, but it is not solving real fluid equations. It makes a moving field across the screen, and each particle follows whatever direction the field gives it.

The paper’s basic trick is to start with smooth noise and take its curl. In 2D, that turns one value into a direction and speed:

psi = perlin(x * scale, y * scale, time) * amplitude

dpsi_dx = (psi(x + h, y) - psi(x - h, y)) / (2 * h)
dpsi_dy = (psi(x, y + h) - psi(x, y - h)) / (2 * h)

velocity = (dpsi_dy, -dpsi_dx)

The particles follow an invisible moving current. Taking the curl makes that current loop and swirl instead of bunching everything into fake drains or blasting it out of fake sources.

The build does this each frame:

1. Sample time-varying Perlin noise at each particle position.
2. Estimate the nearby slope of that noise with small finite-difference offsets.
3. Convert that slope into a 2D curl velocity.
4. Move each tracer particle through the field every frame.
5. Store recent particle positions in a short trail buffer.
6. Draw each trail as tapered line segments with a head, middle, and tail color.

You can mess with wave speed, particle count, trail length, the background, and all three trail colors. A few slider changes can make the same effect look completely different.

Making It React to the Player

Boosting or grabbing an orb sends a quick ripple through the field. Particles near the player also get pushed around based on how fast and where you are moving. That way it reacts to what you are doing instead of looking like a screensaver behind the game.

Recreating the Core Effect

To recreate the visual effect in another engine, you need four pieces:

• A smooth noise function that accepts x, y, and time.
• A function that samples that noise slightly left, right, up, and down from a point.
• A particle system where each particle moves by the curl velocity.
• A trail renderer that draws recent particle positions with fading alpha.

After that, tweak the scale, particle count, and trail length until it looks right. I also add quick ripples for boosts and pickups.

What I Learned

This was my intro to web assembly. It also served as a coding exercise in Rust.

Read the latest Orb Catcher post