This is a 2018 ECMAScript port of the graphics demo Drivey, from 2007.
Driving down the open road elicits nostalgia in some people. A couple of them made old arcade games about driving. Old driving games triggered nostalgia in Mark Pursey, so he made a graphics demo about driving games. I feel nostalgia for his driving demo, so here we are. I've written a whole lot more on the subject in MY OTHER CAR IS A BÉZIER.
You can use any combination of fingers (or the mouse):
Up-Down, adjust the driving speed.
Left-right, turn the steering wheel.
Up Arrow, gas.
Down Arrow, brake.
Space Bar, handbrake.
Left Arrow, steer left.
Right Arrow, steer right.
Shift and Control keys, slow down and speed up the demo.
Constantly drives with a slight turn. Click to switch between left turns and right turns.
Constantly drives straight. The car turns left and right if the mouse is on the far left or far right of the window.
Unfortunately JujuScript's launcher is a Windows-only executable (which runs very well under wine), and isn't open source. Its "2.5D" graphics API is also undocumented. To expand its reach, break its dependency on 2000s-era Windows APIs and boost its bus factor, it made sense to convert the Drivey demo to a more broadly adopted platform (ie. the web).
As of October 2018, Drivey.js is not yet feature complete; already, though, it ties the long-term fate of the demo to the long-term fate of the web. The old Windows demo is still online, in the meantime, and is still notable for its unique approach to rendering a 3D scene.
You may wonder what process generates these silhouetted landscapes. Set the camera angle to "Satellite" and you'll see the road's shape determines the placement of almost everything:
In fact, most of the geometry in both Drivey and Drivey.js is just an extrusion of a single curve (a closed spline), which runs down the middle of the road. In other words, the demo marches steadily along this curve, regularly dropping points along the side, sometimes suspending them in the air, and afterwards it connects them into shapes. Every solid or dashed line, every wire and pole, is generated in this way, and the level generates them anew each time you visit. There are very few exceptions, such as the clouds and buildings in the City level.
A different process governs the shape of every car. A handful of numbers and decisions are randomly picked— the length of the cabin, for instance, or whether the car is a convertible- and these values are used to create a basic side view diagram of the car:
T---U------V----------W P----Q------R-----------S / | | \ / | | \ K_______-------L-------M------N--------------O | | | | | F--------------G-------H------I--------------J \ __ | | | __ / ====33 A-----/ \---B-------C------D-----/ \---E FA RA
Once the points in this diagram are computed, the areas between them are filled with extruded boxes; some are thin, some are thick, some are opaque, some are transparent, some are light and some are dark. Combined together, they form the shape of a car.