Traffic Intersection

Description

This project simulates a 4-way traffic intersection. The intersection is a four-way intersection. Each part of the intersection has four lanes:

• A left turn lane
• Two middle lanes that go straight
• A right turn lane
• A light can either be red, yellow, or green. The left-hand turn lane has its own dedicated light. That light can either be red, yellow, green, or flashing orange (go if no cars are coming the other way).

Features

• All lights change based on a timer. Green lights stay active for 5 seconds and yellow lights stay active for 2 seconds.
• Traffic flow is modeled by a pulsing directional arrow. This currently is only implemented for the straight traffic lanes.
• Left turn signals respect the opposite signal and provide both a dedicated left turn signal and a flashing orange light.

Organization

Components

• SolidLight - A solid light that can be red, yellow, green, or off.
• ArrowLight - A directional arrow that can be red, yellow, green, or flashing orange.
• TrafficLight - A traffic light that contains 4 lights: one independent left turn light and three solid lights representing red, yellow, and green. This component also renders the 4 lanes of traffic.
• Intersection - The main component that renders the intersection, all of its lights, and the simulation of flowing traffic.

State Machine

Intersection uses a state machine to manage the state of the intersection. The state machine is defined in intersectionMachine.ts.

• All lights start off red
• Northbound traffic gets a green light, including the left turn lane
• After 5 seconds, the northbound turn light turns yellow
• After 2 seconds, north and southbound lights turn green and turn signals flash orange
• After 5 seconds, northbound turns yellow
• After 2 seconds, northbound is red. Southbound stays green and has a protected left turn signal
• After 5 seconds, southbound turns yellow
• After 2 seconds, southbound turns red
• Repeat the above steps for east and westbound traffic (starting with eastbound)

Coming soon

• Add sensors to detect cars waiting at the intersection. This would override the default timers and then fall back into the default timer once the sensor is no longer triggered.
• Add crosswalks and pedestrian signals.

Demo

Best viewed on a larger screen (not mobile friendly) https://traffic-intersection.vercel.app/

Tech Stack

• React
• Next.js
• TypeScript
• Tailwind
• XState

Installation

npm install

Local Development

npm run dev