Dev Blog: Engineering the “Infinite Run” – Audio & more balls

Asset: Ball_Rumble_Loop.sys

Deep 40Hz Triangle Wave – Simulates heavy rolling friction.

Asset: Walking_Thud.sys

60Hz Sine Pitch-Drop – Simulates a massive 2X giant footstep.

Asset: Flatten_Crunch.sys

Filtered White Noise Burst – Simulates a cartoon crushing impact.

Subtitle: Engineering a Zero-Asset Audio-Visual Landscape

To elevate the Infinite Run project to a professional standard, we move away from "beeps" and "boops" toward Dynamic Sound Synthesis and Multi-Material Physics. Professional game design isn't just about playing a file; it is about Audio Geometry and Physical Logic—where the sound and movement feel physically connected to the 3D objects.

In high-performance web applications, latency and loading times are the enemy. For Infinite Run, we engineered a Real-Time DSP (Digital Signal Processing) solution and a Dynamic Ball Controller that changes the laws of physics on the fly.


1. The Physics of the "Thud" (Walking)

Instead of a simple tone, we synthesized an Impulse Response. We use a Sine Oscillator that starts at 60Hz and drops exponentially. This creates a "weighted" impact that sounds like a massive 2X giant hitting the ground, rather than a digital beep.

2. Spatial Rumble (The Ball)

To give the Giant Ball its threatening presence, we utilized a Triangle Wave. Unlike a smooth Sine wave, a Triangle wave has subtle harmonics that mimic the friction of a heavy object rolling. By calculating the distance between the camera and the ball every frame, we adjust the gain dynamically so the sound "zooms" past the listener.

3. The "Crunch" (Collision)

For the flattening effect, we synthesized White Noise. By generating a 0.25-second buffer of randomized data and passing it through a Biquad Filter (Low-Pass), we removed the harsh "hiss" and kept only the "bone-crushing" low frequencies.

4. The Material Engine: 3 Modes of Threat

To keep the simulation unpredictable, we implemented three distinct physics profiles for the ball:

  • Standard Mode: Linear momentum for a heavy, unstoppable roll.
  • Rubber Mode (Parabolic Gravity): This ball drops from the sky ( Y=60Y=60 ) and calculates Restitution. It loses 25% energy per bounce, creating realistic jumping arcs.
  • Snake Mode (Trigonometric Path): Governed by a Sine wave, this ball weaves across the lanes, forcing runners to track its horizontal oscillation.

The Professional Code (The "Secret Sauce")

Here are the specific lines that make the physics and sound feel "Pro."

I. The Step (Synced to Animation)

We play it exactly when the animation "swing" crosses zero (the moment the foot touches the floor).

code JavaScript

// Inside the runner update loop
if (this.state === 'running' && Math.sign(swingX) !== this.lastSwing) {
    if (this.group.position.z > 0) sfx.playStep(); // Triggered at the exact frame of impact
    this.lastSwing = Math.sign(swingX);
}

II. The Ball Gain (Distance Mapping)

Instead of gain.value = x, we use setTargetAtTime for smooth, click-free transitions.

code JavaScript

updateBallVolume(zPos, mode) {
    // Standard mode uses distance-based rumble; Rubber is silent in-air
    let vol = (mode === 'standard') ? THREE.MathUtils.mapLinear(zPos, -400, 140, 0, 0.4) : 0;
    this.ballGain.gain.setTargetAtTime(Math.max(0, vol), this.ctx.currentTime, 0.05);
}

III. The Rubber Ball (Gravity & Bouncing)

Using a restitution coefficient to simulate energy loss.

code JavaScript

if (currentBallMode === 'rubber' && ballActive) {
    ballVY += ballGravity; // Apply constant downward force
    deathBall.position.y += ballVY;
    if (deathBall.position.y <= ballRadius) {
        deathBall.position.y = ballRadius;
        ballVY = -ballVY * 0.75; // Bounce with 75% energy return
        if (Math.abs(ballVY) > 0.15) sfx.playBoing(); // Synthesized impact sound
    }
}

IV. The Snake Ball (Sine Wave Oscillation)

Using time-based trigonometry to create the S-path.

code JavaScript

if (currentBallMode === 'snake' && ballActive) {
    // ballStartX is the tap location, 25 is the weave width
    deathBall.position.x = ballStartX + Math.sin(elapsed * 5) * 25;
    deathBall.position.y = ballRadius;
}

Why this is Professional:

  • Zero Latency: Sound triggers at the exact microsecond of the collision or footstep.
  • Zero Bandwidth: No one has to download audio files; the CPU creates them on the fly.
  • Infinite Variety: Because the ball volume and snake path are based on real-time calculations, the experience is never exactly the same twice.
  • Persistence: Every kill and every minute played is stored in the Memory Core (LocalStorage), ensuring the player's history is preserved.