See the Pen Traffic Lights in Html5 Canvas by June Rockwell (@junerockwell) on CodePen.

Backstory

When I was in High School, my paternal grandfather would come by so I could help him with computer related things such as making emails, printing formal letters, etc. I had this HP Laptop which I used to help him with. At the same time, I was taking a Programming Class that was teaching Dr. Scheme. I didn’t like Dr. Scheme, but we had this schoolwork to create a set of traffic lights with the lights toggling automatically. I ended up having to make it work with some help. I also was able to setup the Dr. Scheme environment on that HP Laptop around the same time.

My Traffic Light schoolwork in Dr. Scheme would end up to continuously switch between lights non-stop. I showed this project to my grandpa, and he was so amused! He even thought that one day I’d work for a government agency to “program the traffic lights” (lol!). I did work at a government agency, but not to program the traffic lights. I definitely wouldn’t know how traffic lights actually work anyways. After that, my grandpa wouldn’t stop talking about it to anybody, and he really thought that I could make it as a programmer, that it’d be my career. He was super glad and hopeful! One time we were waiting to cross the street, and he pointed at the Traffic Lights and told a relative, “I saw June making the traffic lights blink on her computer. She can probably work as programmer one day!”

As he grew older, he started forgetting things easily. But by the time I graduated college, he still remembers the traffic light schoolwork and asked me if I was going to “program the traffic lights,” lol.

That was such a fond memory for me that I’ve been thinking of re-creating that schoolwork in HTML5 Canvas and JavaScript. Unlike Dr. Scheme, I literally prefer HTML5 Canvas to do certain graphic projects like this. I don’t even remember how Dr. Scheme works, and I don’t want to. The code is definitely not similar at all (so glad it isn’t either).

My grandpa was just buried this week. And this is one of the things I did in his memory. I wish I had re-created it sooner, for fun, but I think this timing works just as well.

So here’s the Traffic Light in HTML5 Canvas via CodePen

The source code is also in my GitHub Account.