An ECMAScript port of the graphics demo "Drivey"
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
js Default controls are now touch for mobile and arrow keys for desktop Oct 17, 2018
lib
.gitignore
README.md Adding screenshot to readme Oct 17, 2018
TODO.txt
index.html You know what, let's pixelate. Oct 17, 2018
reset.css
screenshot.png Adding screenshot to readme Oct 17, 2018

README.md

Drivey screenshot

Drivey.js

This is a 2018 ECMAScript port of the graphics demo Drivey, from 2007.

You can see Drivey.js online here, or download it for offline play.

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.

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

  • Stylized 3D Rendering
  • Four levels: Deep Dark Night, Tunnel, City and Industrial Zone
  • Simulated self-driving car with optional manual control
  • NPC cars
  • Rear view
  • Optional simulated dashboard
  • Support for driving on the left and on the right
  • Collision detection
  • Custom color palette control
  • Engine revving audio support
  • Steering wheel peripheral support
  • Wireframe mode

New features

  • Runs right in the browser, on any computer
  • Three new levels: Cliffside Beach, Warp Gate and Spectre (inspired by Craig Fryar)
  • Drivey.js mixtape (see above)
  • Procedural automobile generator
  • Tablet-friendly UI
  • Three camera angles
  • One switch support
  • Eye gaze support
  • Touch screen steering control scheme
  • Optional ambient audio

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 (technically ECMAScript 6+) 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 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.

Technique

Most of the geometry in Drivey and Drivey.js is offset and extruded from a closed spline representing the middle of the road. In other words, the demo marches steadily along the road, regularly dropping points along the side, sometimes suspending them in the air. Every solid or dashed line, every wire and pole, is generated in this way, and the level generates them anew every time you visit. There are very few exceptions, such as the clouds and buildings in the City level. The cars are also custom made every time Drivey launches, but with a different process. Read through the source code for more information.