advertisement
advertisement
advertisement

This Dashcam Simulation Is Just 1K Of JavaScript Magic

This Dashcam Simulation Is Just 1K Of JavaScript Magic

There isn’t much to “Highway At Night“–a road, cars, flashing police sirens, a starry sky, glowing skyscrapers, a “dragon’s eye view of a flight to 3D city.” That is until you realize it’s a manually coded JavaScript animation, just 1k in size.

advertisement

This is the animation. This is the code, it’s written by Jani Ylikangas.


“Highway At Night” is a runner-up in the “JS1k, a JavaScript code golfing competition,” an annual online event where devs show off their coding prowess. There are many rules, from the purely technical–demos cannot exceed 1024 bytes and should be fit in a single script tag–to the more aesthetic and experiential–“do not submit HTML soup.”


Ylikangas’s submission comes with an explanation:

“My initial idea was to do a very realistic looking demo of a car driving along a highway on a dark night,” Ylikangas writes. “I watched some dashcam videos on YouTube and realized that what we see in real life is very limited – it’s mainly just lights and silhouettes. I made notes on what I saw and how I could try and implement it. But first I needed a good yet small engine for road construction and rendering. I wanted the demo to have true perspective [sic] 3D drawing combined with cheap tricks. I found out that I only needed to do the center line with real polygons… the initial idea of photorealistic graphics was dropped in favor of vintage video game looks. Another thing that helps to fool the eye is high speed. This allowed the graphics to be very simple and raw.”


Those are some very specific, very beautiful applications of classic code. Other impressive submissions–including glowing fireflies, WebGL-less 3-D, and foggy Minecraft landscapes–can be found here.

[h/t: Prosthetic Knowledge]

advertisement
advertisement