Traffic Simulation

A browser-based traffic simulator built with plain JavaScript and HTML5 Canvas.

Screenshot

Features

• ASCII-layout-driven road network (road-layout.txt) with dynamic canvas scaling.
• Junction detection and per-intersection traffic lights (N/S vs E/W phases).
• Car spawning from valid edge entry points based on road connectivity.
• Direction-aware lane positioning with right-hand traffic lane offsets.
• Car motion model with:
  • acceleration/braking
  • stop-line compliance
  • signal-aware stopping behavior
  • anti-collision following distance and lead-car gap control
• Turning logic at intersections with lane correction during/after turns.
• Event-driven debug system with unique IDs for cars, lights, junctions, and events.

Debugging And Observability

• Canvas debug overlay with per-car direction/advice labels.
• Filterable event visualization and event markers.
• Live event log panel with runtime updates.
• Event categories include:
  • car accelerate / brake / stop / turn
  • traffic light state changes
  • junction enter / exit

UI Controls

The top UI is split into two settings panels:

• Simulator Settings:
  • Cars
  • Min km/h
  • Max km/h
  • Accel
  • Brake
• Debug Settings:
  • Toggle debug overlay
  • Toggle live log
  • Event-type/entity checkboxes for filtering

Project Structure

• index.html: UI layout, styles, script loading order.
• main.js: game loop, UI wiring, rendering orchestration.
• road.js: road parsing, geometry, intersections, road rendering.
• trafficLight.js: traffic light state machine and drawing.
• car.js: car sprite rendering.
• simulation.js: core simulation logic (spawning, movement, turns, compliance).
• simulationEventProcessor.js: event pipeline (emit/filter/prune/log/overlay helpers).
• road-layout.txt: ASCII road map input.

How To Run

1. Open index.html in a browser.
2. Use the settings panels to tune simulation and debug behavior.

Notes

• No framework or build step required.
• Script order is important and is handled in index.html.