Drivey.js

This is a JavaScript port of the 2007 graphics demo Drivey.

Play Drivey.js online here.

On older browsers, try the legacy version.

Purpose

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.

Controls

Touch

You can use any combination of fingers (or the mouse):

Up-Down, adjust the driving speed.
Left-right, turn the steering wheel.

Keyboard

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.

1 Switch

Constantly drives with a slight turn. Click to switch between left turns and right turns.

Eye Gaze

Constantly drives straight. The car turns left and right if the mouse is on the far left or far right of the window.

Original features

New features

History

Back in 2000, JavaScript was a slow, underpowered, interpreted scripting language meant for adding simple behaviors to web pages. Still, it showed enormous potential, and lots of money went into various efforts to make more expressive variations of it. Mark Pursey, Drivey's author, invested his free time and creative energy writing his own variant, which he called JujuScript.

JujuScript is very similar to JavaScript, but adds strong type support and operator overloading. Furthermore, Pursey embedded a graphics API in JujuScript's interpreter that specializes in composing and rendering text and font-like graphics. When he decided in 2004 (I believe) to make a driving simulator, naturally it had a high legibility and visual fidelity. And he had the foresight to share the code for free.

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

In the intervening decades, JavaScript has matured into a robust, expressive language, bolstered by a thriving ecosystem. It did take a while to get there, but its momentum has also increased at the same time. The advent of WebGL and three.js marked the introduction of a common hardware-accelerated graphics pipeline to the world's most widespread platform.

As of September 2023, Drivey.js is just shy of being feature complete (see above); 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 realtime 3D graphics.

Techniques

Level generation

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.

Car generation

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.

Rezmason/drivey