Chromopong
A color-reactive Pong game where every rally shifts the entire visual field. The longer the volley, the more the world changes around you. Built in the browser, no dependencies.
How It Works
Chromopong starts as a dead-simple Pong clone — two paddles, one ball, a score counter. The twist is in the feedback loop: every time the ball connects with a paddle, the entire color palette rotates by a small, compounding degree. At rally 1, nothing much changes. By rally 15, you're playing in a completely different visual world.
The color state is driven by HSL rotation. I start at a neutral palette and increment the hue angle on each successful hit. The background, paddles, ball, and trail all derive their colors from the same root hue, maintaining visual coherence while the atmosphere shifts beneath the gameplay.
Miss a shot, and the palette resets — back to neutral, back to the beginning. The visual reward and the gameplay stakes are identical. A long rally is beautiful and it's worth defending.
Mechanic Breakdown
◎
Color Engine
HSL hue rotation on every successful hit. Compounding angle means later rallies shift color faster.
→
Ball Trail
Three ghost positions follow the ball with decreasing opacity — a motion blur baked into canvas math.
↺
Reset Penalty
Missing the ball resets the hue to zero. All visual progress is tied directly to performance.
Color Progression
Each bar represents the game state at a given rally count, from neutral through a full hue rotation.
Built With
Vanilla JS
Game loop, physics, and input handling — zero dependencies
HTML Canvas
All rendering — paddles, ball, trail, and color fields
HSL Color Model
Hue rotation engine driving all visual state
Replit
Development environment and public hosting
What I Learned
The most interesting discovery was how tightly aesthetics and gameplay can be coupled without feeling gimmicky. In most games, visuals are decorative. In Chromopong, the visuals are the feedback loop — you feel the momentum of a long rally not just in the score but in the entire visual field around you.
Building without any libraries forced me to re-learn the basics of browser rendering: requestAnimationFrame timing, canvas state management, and how to keep a 60fps loop clean. It's the kind of constraint that makes you a better engineer.
I also learned that the reset mechanic was the whole game. A palette that only ever progressed forward would lose its emotional charge after a few minutes. The threat of losing your visual progress is what makes protecting a long rally feel real.