How the Delivery Simulator Works
This dashboard simulates a real-time on-demand delivery network using a Discrete Event Simulation (DES) approach running at 60 FPS. It models the complex interaction between order demand, fleet supply, and urban geography.
Assignment Strategies
The simulator implements two different order-to-courier assignment algorithms that significantly impact fleet efficiency and delivery times.
Greedy (Naive)
Iterates through orders chronologically. For each order, it grabs the nearest idle courier immediately.
Pros: Fast O(N) complexity
Cons: Suboptimal, high total travel time
Hungarian (Global Optimization)
Solves the Linear Assignment Problem (LAP) using a cost-matrix approach. It considers all pending orders and all idle couriers simultaneously to minimize global fleet travel distance.
Pros: Optimal efficiency, minimizes total fleet travel distance
Cons: Computationally expensive O(N³), high CPU usage
Pseudo-Algorithm
The simulation runs at 60 FPS, with each frame executing the following steps:
1. Tick Loop (60Hz):
- Advance simulation clock by dt seconds
- dt = (1/60) * BASE_SIM_SPEED * simSpeedFactor
2. Demand Generation:
- Probabilistic order creation based on time of day
- Peak hours (12:00-14:00, 20:00-22:00): 2.8x - 3.5x multiplier
- Off-hours (before 7:00, after 23:00): 0.05x multiplier
- Orders clustered 70% in city center, 30% random
3. Dispatching:
IF Greedy:
- Loop through pending orders chronologically
- For each order, find closest idle courier
- Assign immediately
IF Hungarian:
- Build cost matrix (distance) for all pending orders × idle couriers
- Solve minimum-cost matching problem
- Assign batch of optimal pairings
4. Physics Update:
- Move couriers by (Speed * dt)
- Handle state transitions:
* IDLE → MOVING_TO_PICKUP (when assigned)
* MOVING_TO_PICKUP → AT_RESTAURANT (when arrived)
* AT_RESTAURANT → MOVING_TO_CUSTOMER (after wait time)
* MOVING_TO_CUSTOMER → IDLE (when delivered)
5. Statistics Update:
- Track delivery times, fleet efficiency, backlog
- Efficiency = (Active Time / Total Time) × 100%
Key Parameters
Simulation Control
- Sim Speed: 1x to 20x real-time
- Algorithm: Greedy vs Hungarian
Scenario Settings
- Fleet Size: 10-100 couriers
- Order Demand: 0-100%
- City Size: 2-15 km
- Avg Speed: 25 km/h (configurable in code)
Key Metrics
- Deliveries: Total completed orders
- Avg Delivery Time: From order creation to delivery (minutes)
- Backlog: Active orders not yet delivered
- Fleet Efficiency: Percentage of time couriers spend actively working vs idle
- Compute Load: Algorithm execution time per frame (ms/tick)
Network Effect
Non-Linear System Dynamics
The system exhibits non-linear behavior. If Demand > Fleet Capacity, the backlog grows indefinitely, causing delivery times to spike exponentially rather than linearly. This mirrors real-world delivery platforms where insufficient fleet size during peak hours leads to cascading delays.
Visual Elements
- Blue circles: Idle couriers (drifting randomly)
- Yellow triangles: Active couriers (pointing toward destination)
- Blue trails: Courier movement history (optional)
- Yellow squares: Restaurant locations (pickup points)
- Green circles: Customer locations (delivery points)
- White lines: Active delivery routes
- Road network: Procedurally generated grid with major/minor roads
Technical Implementation
Tech Stack:
- React with hooks (useState, useRef, useEffect, useCallback)
- HTML5 Canvas API for real-time rendering
- Vanilla JavaScript for simulation logic
- Tailwind CSS for UI styling
- Lucide React for icons
Performance Optimizations:
- Cached map background rendering (drawn once, reused)
- Refs for real-time parameter access without re-renders
- Periodic stats updates (once per minute) vs continuous rendering
- Order cleanup (removes old delivered orders to prevent memory bloat)
- Simplified Hungarian algorithm using greedy matching for demo performance