/traffic-intersection-challenge

Coding challenge to build a traffic intersection. http://intersection-challenge.surge.sh/

Primary LanguageJavaScript

Traffic Intersection Code Challenge

Make sure your browser has a square-ish aspect ratio to see each side of the intersection.

http://intersection-challenge.surge.sh/

Task:

Write a program that models a 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

The 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).

Design & Implementation

I wanted to show off a little bit of design using either canvas or SVG. I chose SVG simply because vector graphics look good at any size. I started hand-rolling the SVG, but once I realized that my lanes didn't quite line up I chose to just use vector editing software and export the SVG. I then cleaned it up by hand to fit the use-case.

I chose JavaScript as my language since that's the language I'm most comfortable in, and Parcel for bundling the assets because parcel makes it easy to bundle virtually any asset. I leaned on Snap.svg for animating the traffic through the intersection instead of implementing my own animations.

The car "AI" is very simple and only checks the traffic light to decide weather to go. The cars in the left turn lane also check if cross-traffic is clear. However a lane is considered to be clear once cars start moving (so other cars can enter the lane). So collision avoidance is only facilitated by animation timing.

The Features

  • Create a traffic signal whose lights change on a timer.
  • Model cars arriving at the intersection and traveling through while the light is green.
  • Make the left-hand turn lights on opposite sides of the intersection turn green at the same time, letting cars safely turn left. Make sure the "straight" lights are red! You don't want any accidents!
  • Some traffic lights have sensors underneath the road to detect if there are cars waiting. Make your signal smart! For example, if there are no cars waiting, keep that light red. What if cars begin to arrive? How long do you keep the light red?
  • Add support for a "walk" button at each intersection. When the button is pressed, it should cause the intersection to become clear long enough for a person to walk through it.

Retrospective

This is a very rough first approach and if I were to continue, I would make each vehicle it's own entity. That would make it easier to implement collision detection with other traffic instead of having the intersection determine when cars are safe to go and rely on timing alone. The intersection could then be made to detect vehicle entities and the sensor feature would be easier to implement as well.

To implement pedestrian traffic, the turning lane cars would have to account for crossing pedestrians before deciding when to go.

Overall, this was a fun and interesting project unlike many other coding challenges. If I didn't already have side-projects I might come back to this periodically to slowly make the AI smarter.