Inspiration
The inspiration for CMSS came from real-world competitive mobility systems from Formula E racing and drone competitions to autonomous delivery fleets and traffic flow simulations. We noticed that existing simulators are either too complex for quick experiments or too basic to represent real-time events and strategy. We wanted to create something lightweight yet powerful, that could simulate multiple agents competing dynamically, react to real-world events, and maintain a live leaderboard all in a visually engaging interface.
What it does
Competitive Mobility Systems Simulator (CMSS) is a lightweight, real-time simulator that models multiple moving agents such as cars, drones, or delivery bots competing in a shared environment. It dynamically handles events, collisions, and strategy-based behaviors, while maintaining a live leaderboard and telemetry dashboard. The simulator allows users to: Run custom race or mobility simulations with configurable agents. Inject live events like hazards, pit stops, or slowdowns. Visualize motion, speed, and performance metrics in real time. Compare strategies between AI-driven and human-controlled agents. In essence, CMSS blends AI-driven decision-making with interactive visualization turning mobility data into a live competition.
How we built it
We built CMSS using a modular three-layer architecture: 1.Simulation Core (Backend) Developed in Node.js, this engine models each agent’s motion using basic kinematic equations. Agents update their velocity and position at 30–60 Hz, enabling smooth motion for up to 50 agents.
2.Frontend Visualization Created using React + PixiJS (Canvas) for fast 2D rendering. It displays real-time leaderboards, trajectories, and event highlights. A WebSocket link ensures near-instant updates with <100 ms latency.
3.Event and AI Logic Layer We implemented rule-based AI controllers to manage overtakes, obstacle avoidance, and pit decisions.
Challenges we ran into
Real-time synchronization: Keeping the leaderboard and UI updates in sync while simulating dozens of agents. Performance optimization: Maintaining 60 FPS on browsers with multiple active events. Deterministic event timing: Ensuring reproducibility of races while supporting random hazards. Balancing complexity vs. speed: Adding realism (friction, pit logic) without slowing down the simulation loop. WebSocket race conditions: Handling concurrent data packets from multiple agents safely.
Accomplishments that we're proud of
Built a real-time, interactive simulator from scratch within the hackathon timeframe. Designed a dynamic leaderboard system that updates live with visual highlights. Integrated AI-driven strategy models for agent decision-making. Created a replay and analytics feature for post-race evaluation. Achieved a visually engaging UI that makes technical mobility data intuitive and exciting to watch.
What we learned
How to combine physics-based motion with event-driven AI control. Optimizing browser rendering with PixiJS and React hooks for real-time visualization. The importance of modular architecture when handling concurrent agents. Managing real-time communication pipelines using WebSockets and asynchronous loops. How design choices (like simplified physics) can make a system both fast and educational.
What's next for Competitive Mobility Systems Simulator
Integrate Reinforcement Learning (RL) agents for self-learning driving strategies. Extend support for 3D environments using Three.js or Unity WebGL. Add multi-user mode for online competitive simulation. Implement geo-mapped simulations for real-world traffic or logistics use cases. Develop analytics dashboards for strategy prediction, energy efficiency, and performance metrics. Our vision is to evolve CMSS into an open-source mobility simulation platform — a tool that can power future innovations in autonomous racing, logistics optimization, and intelligent traffic systems.
Log in or sign up for Devpost to join the conversation.