A physics puzzle game where your actions create feedback loops that gradually break reality
System Collapse Hackathon 2024
Navigate a ball through 8 increasingly chaotic levels. But here's the twist: the system isn't broken by design—you break it through play. Every collision, every movement creates entropy. As entropy builds, the game world degrades until the fundamental rules of physics invert.
By the end, you won't be moving the ball anymore. You'll be rotating the entire universe around it.
The Challenge: Create system degradation through feedback loops, not random bugs.
Our Approach:
Instead of programming glitches randomly, we designed cascading feedback systems:
- Collision Spiral: Hit wall → Entropy increases → Walls shake harder → Hit walls more often → More entropy → Loop intensifies
- Control Degradation: Use controls → Entropy builds → Visual corruption increases → Harder to see → Need more control → More entropy
- Gravity Trap: Near gravity well → Entropy rises → Pull gets stronger → Harder to escape → More time near well → More entropy
- Reality Shift: Complete goals → Physics shift → Controls feel wrong → Fight the physics → More collisions → Faster shift
Every action has consequences. Those consequences make the next action harder. The system eats itself.
The Challenge: Make the UI look physically broken, with corruption tied to entropy.
Our Approach:
All visual effects are direct mathematical functions of your entropy (stress) level:
Low Entropy (0-100):
- Subtle CRT scanlines
- Slight screen shake (2-3 pixels)
- Minimal chromatic aberration
Medium Entropy (100-200):
- Noticeable RGB color separation
- Walls vibrating visibly
- Screen shake intensifies (5-8 pixels)
- Horizontal glitch lines appear
High Entropy (200-300):
- Severe chromatic aberration (colors split)
- Violent screen shake (10+ pixels)
- Constant screen tearing
- Ghosting trails from incomplete frame clears
- Color distortion and hue shifts
Critical (300):
- System collapse, game over
The corruption isn't cosmetic—it's information. When you see heavy glitches, you know you're close to collapse.
The Challenge: Create cognitive dissonance by shifting coordinate frames.
Our Approach:
The game gradually transforms how physics work:
Phase 1 (0-25% shift) - "Normal":
- You control the ball
- Drag/tilt → Ball moves
- World is static
Phase 2 (25-50% shift) - "Something's Wrong":
- 50% ball movement, 50% world rotation
- Controls feel increasingly "inverted"
- Players start noticing something off
Phase 3 (50% shift) - "The Reveal":
- System notice appears: "WHO IS MOVING?"
- Shows ball movement: 50%, world movement: 50%
- The aha moment: You've been rotating the universe
Phase 4 (75-100% shift) - "Full Inversion":
- Ball mostly/completely stationary in screen space
- Entire level rotates around the ball
- Your inputs now control world rotation, not ball movement
The shift is gradual and automatic, triggered by completing goals and collisions. Players don't notice until it's too late.
The Challenge: Use only Canvas API. Math-based effects, not assets.
Our Approach:
Zero dependencies. Zero libraries. Zero build tools.
- HTML5 Canvas for rendering
- Pure JavaScript for physics and logic
- CSS3 for UI styling
- Web Audio API for procedural sound
Every effect is calculated in real-time:
- Particle explosions: Trigonometry and velocity math
- Chromatic aberration: Manual RGB channel offset rendering
- Physics engine: Custom implementation with SAT collision detection
- Sound effects: Generated with oscillators, not audio files
Total file size: 52KB
Installation: Open index.html
Build time: 0 seconds
The Player (White Circle):
- You control a white glowing ball
- Has momentum and physics (rolls, bounces, slides)
- Subject to gravity wells pulling/pushing it
- Leaves a particle trail showing movement path
- Takes damage from collisions (increases entropy)
The Goal (Green Circle):
- Large green glowing circle
- Reach it to complete the level
- When you get close enough, triggers victory and moves to next level
Checkpoints (Yellow Circles):
- Save your progress mid-level
- Turn dim/gray after use
- If you die (entropy hits 300), respawn at last checkpoint instead of level start
Gravity Wells (Purple Circles):
- Pull (or push) the ball toward/away from them
- Larger = stronger pull
- Some move around (roaming wells) in later levels
Walls (White Lines):
- Solid barriers you bounce off
- In later levels: shake, flicker, teleport, or close in
- Hitting them increases entropy
How It Works:
- Click and hold anywhere on the screen
- Drag in the direction you want gravity to pull
- The ball will accelerate in that direction
- Release and gravity continues in the last set direction
Tips:
- You're not dragging the ball—you're tilting the gravity field
- Longer drags don't make gravity stronger, only set direction
- Small adjustments work better than big sweeping motions
- Watch the small gravity indicator circle at bottom center
Arrow Keys or WASD:
- ↑ / W - Gravity pulls upward
- ↓ / S - Gravity pulls downward
- ← / A - Gravity pulls left
- → / D - Gravity pulls right
Diagonal Movement:
- Press two keys simultaneously for 45° angles
- Example: W + D = gravity pulls upper-right
Advantages:
- More precise than mouse
- Easier to maintain steady direction
- Better for quick direction changes
What It Does:
- Toggles "Ghost Mode" ON/OFF
- When ON: You can pass through walls without collision
- The ball becomes slightly transparent when active
- Status shown in bottom-left HUD: "GHOST MODE: ON/OFF"
When to Use Ghost Mode:
✅ Stuck in a difficult section?
- Turn ON Ghost Mode
- Phase through the problematic walls
- Reach the checkpoint or goal
- Turn it back OFF for normal gameplay
✅ Want to explore the level layout?
- Ghost Mode lets you fly freely through the arena
- See where walls, wells, and goals are positioned
- Plan your route before attempting normally
✅ Testing entropy mechanics?
- Ghosts don't collide = no entropy from wall hits
- Useful to see later levels without stress buildup
✅ Learning the coordinate shift?
- In later levels when controls feel inverted
- Use Ghost Mode to reach areas and understand the physics
Important Notes:
- Ghost Mode is a help/debug feature, not cheating
- You still take entropy from moving and gravity wells
- Debris can still hit you even in Ghost Mode
- Great for casual exploration or practice
Keyboard Shortcut: Press P at any time to toggle ON/OFF
- Entropy = System Stress
- Displayed as "SYSTEM STABILITY" bar (top center)
- Increases from: Moving, collisions, staying near gravity wells, debris hits
- Lose condition: Entropy hits 300 → System collapse
- Minimize entropy: Move efficiently, avoid unnecessary collisions
- Use checkpoints: Yellow circles save your progress
- Embrace the shift: Don't fight the inverted physics in later levels
- Watch visual cues: Heavy corruption = high entropy = danger
Each level introduces new chaos mechanics as the system degrades:
Level 1 - INITIALIZATION
- Tutorial: Stable physics, learn controls
- Entropy multiplier: 1.0×
Level 2 - INSTABILITY
- First signs: Walls shake (4px), walls flicker
- Entropy multiplier: 1.2×
Level 3 - ENTROPY STORM
- Chaos escalates: Gravity wells move, walls teleport
- Visual corruption: 40%
- Entropy multiplier: 1.6×
Level 4 - TOTAL COLLAPSE
- Arena shrinks, attacking debris hunts you
- Visual corruption: 70%
- Entropy multiplier: 2.0×
Level 5 - FRAGMENTATION
- Minefield: 40 stationary explosive mines
- Entropy multiplier: 1.5×
Level 6 - EVENT HORIZON
- Massive black hole at center, you must orbit around it
- Roaming gravity well
- Entropy multiplier: 1.8×
Level 7 - DUAL REALITY
- Two chambers with teleporting dividers
- Anti-gravity (repulsion) introduced
- Visual corruption: 80%
- Entropy multiplier: 2.5×
Level 8 - SINGULARITY
- Everything maxed: Shrinking arena, debris, teleporting walls, 3 roaming wells
- Visual corruption: 100%
- Entropy multiplier: 3.0×
By Level 4-5, you'll notice controls feel "weird." By Level 7, they feel completely broken.
What's actually happening:
- Early levels: You move the ball
- Mid levels: 50% ball movement + 50% world rotation
- Late levels: Ball stays centered, you rotate the universe
The transition is seamless. Your inputs haven't changed—the reference frame has.
This is the "system collapse": Not that the game broke, but that the fundamental physics inverted as a direct result of your play.
Neon Cyberpunk Aesthetic:
- Cyan (#00f3ff) and Magenta (#ff00ff) color scheme
- Dark background with glowing elements
- CRT scanline overlay
- Particle effects for all events
Corruption Effects (Entropy-Driven):
- Chromatic aberration (RGB color split)
- Screen shake (camera jitter)
- Glitch lines (horizontal tearing)
- Trail ghosting (frame persistence)
- Wall tremor (geometry vibration)
All effects scale mathematically with your entropy level. High entropy = high corruption.
This game explores:
1. Feedback Loops as Gameplay
- Every action creates consequences
- Consequences compound over time
- System degrades naturally from use
2. Perceptual Gameplay
- Challenge mental models, not just reflexes
- Create doubt ("Am I moving or is the world moving?")
- Reveal the illusion gradually
3. Visual Communication
- Corruption is information, not decoration
- Players learn to "read" the entropy through visuals
- System health is always visible
4. Emergent Complexity
- Simple rules create complex behavior
- Cascading effects from basic interactions
- No scripted events, only consequences
git clone https://github.com/yourusername/neon-gravity.git
cd neon-gravity
# Just open index.html - no build needed!- Modern web browser (Chrome, Firefox, Safari, Edge)
- JavaScript enabled
- That's it!
neon-gravity/
├── index.html - Game page with canvas and UI
├── main.js - Physics engine, game logic, rendering (~1,500 lines)
├── audio.js - Procedural sound effects
├── style.css - Neon styling and animations
└── README.md - You are here
- ✅ Emergent Instability: 4 cascading feedback loops create organic degradation
- ✅ Not Random Bugs: All corruption mathematically tied to entropy
- ✅ Visual Breakdown: CRT, chromatic aberration, shake, tearing, ghosting
- ✅ Entropy Coupling: Every visual effect scales with system health
- ✅ Coordinate Shift: Gradual 0→100% inversion of reference frame
- ✅ Cognitive Dissonance: "Aha moment" reveals the illusion
- ✅ Vanilla JS Only: Zero dependencies, pure Canvas API
- ✅ Math-Based Effects: All visuals procedurally generated
- 52KB total - Smaller than most images
- 0 dependencies - Runs anywhere with a browser
- 1,500 lines - Entire physics engine + rendering + audio
- 8 levels - Progressive difficulty curve
- 4 feedback loops - All interconnected
- 7 visual effects - All entropy-driven
- 100% procedural - Every pixel calculated, no assets
Created for: System Collapse Hackathon 2024
Theme: Emergent behavior, feedback loops, and system breakdowns
Built with: Passion for experimental game mechanics and technical creativity
MIT License - Feel free to learn from, modify, and share!
Trust your senses... until you can't.
What breaks first: The system or your perception?