Physics-Centric

💡 The Inspiration (Why we built it) Usually, planning a trip means staring at boring checklists and spreadsheets. We wanted to make travel planning fun! We asked: What if your trip plans behaved like actual physical toys? By turning budget costs into heavy blocks and packing lists into floating capsules, planning your vacation feels like playing a game.

🏗️ How it was Built The Physics (Matter.js): We used a coding tool called Matter.js. It acts like a virtual gravity chamber, letting blocks collide, slide, bounce, and float. The Drawing Board (Canvas): Instead of boring grey shapes, we custom-painted everything to look like a neon space game, adding a glowing suitcase, a mechanical budget scale, and twinkling stars. The Synthesizer (Web Audio): We didn't use any pre-recorded sound files. Instead, we wrote code that makes the computer generate "tink" sounds on collisions, pleasant chimes when items are packed, and buzzer alarms when you go over budget. 🧮 How the Physics Works (Simply) Zero Gravity: When gravity is set to 0, items float around. We added a tiny bit of "air thickness" so they glide smoothly and slow down naturally, rather than bouncing off the walls forever. 🧠 What we Learned & Challenges Browser Quiet Rules: Modern web browsers block websites from making sounds automatically to prevent annoying ads. We had to write code that waits for your first click or slider nudge before activating the audio system. Aligning Visuals: A big challenge was making sure the virtual physics shapes matched the glowing boxes you see. If they were even slightly misaligned, boxes would look like they were floating or colliding in mid-air. Instant Sync: We had to make sure that the moment a packing item drifts into the suitcase, the checklist on the left checks it off instantly without slowing down the game.

Built With

• antigravity