Simon White

Braindozer

Animated vector illustration with built-in audio player/visualizer for music artist.

The Braindozer car is a blacked-out seventies Mustang that has been hot-rodded with a gigantic engine and hood scoop that protrudes through a hole in the hood of the car and extends well past the height of the car’s roof. The car is parked in a hero pose that shows us the front and left side. A label on the fuel cap informs the driver that the engine runs on four-twenty only, but the Braindozer car is a zero emission vehicle because the exhaust is routed into a holding tank in the trunk when driving, or into the cabin when parked. The LED running lights come on and flash a decorative pattern as the engine fires. We see a giant spark through the front grille and the rotors on the front of the protruding engine align themselves and then spin furiously in tandem, their kinetic energy causing the car to bounce joyously on its high-performance shocks. The LED headlights light up, glowing pale green to cut through the fog coming off of San Francisco Bay. When the audio player is activated by choosing a song, an antenna telescopes out of the rear of the car so that music can be obtained from the Braindozer server via wireless networking, and a callout appears above the car that shows us the audio player interface from inside the car. The audio player has old-school analog dashboard gauges with pointers that move to inform us when songs are loading and playing and describe their meters and tempos. As a song loads, the loading meter sweeps across its gauge. When songs are playing, the playing meter crawls across its gauge to describe the full length of the song. The car’s running lights also flash random decorative patterns as songs load. When the music begins, the car’s wheels begin to vibrate and we see that they are audio speakers, their cones moving a little or a lot based on the ever-changing amplitude of the audio playback. When the audio levels peak, the car bounces up and down on its shocks like it’s dancing. As the engine continues to run, it starts to glow yellow-orange through the front grille, and the cabin starts to fill with ethereal green light and smoke. Over time, the engine glows hotter and hotter until the front grille and the hole in the hood glow bright red. Desperate for oxygen, the hood scoop on the top of the engine opens up its 3 air intakes and we see the red glow of the engine escaping there, too. The green light in the cabin gets brighter and the cabin smoke gets thicker. Now you’re riding with Braindozer.

Story

Music producer John R Santos asked me to help him bring music artist Braindozer to the World Wide Web. A connoisseur of visual artwork, he was less interested in making a website and more interested in making an online gallery piece that would act as a visual accompaniment to the musical artwork of Braindozer.

The classic Shelby Cobra Mustang car was already a band mascot, so I built the band a custom rat-rod Shelby of their own, with blacked-out paint and chrome, subwoofer speakers in the wheels, biofuel engine upgrade, high-performance shocks, and of course a dashboard music player that’s always ready to play some Braindozer.

The interactive artwork acts as a Web-compatible wrapper for the ISO audio that music producers make in the same way that cardboard artwork wrapped fragile LP’s in the 1970’s, when the Shelby Cobra Mustang was new.

Thank-you John R Santos and Braindozer for allowing me to make this piece a part of my portfolio.


Screens

Braindozer supports all screens from iPhone to 4KTV.

Side-by-side portraits of Braindozer running on simulated iPhone, iPad, and 4KTV screens show the visual layout adapting to each different screen size so that Braindozer can be viewed by everyone, no matter what device they happen to be using.


Bandwidth

Braindozer loads in only 247.2 kilobytes 0.00 gigabytes — about 0.6 seconds over real-world 3G wireless.


Standardization

Braindozer is internationally standardized for universal compatibility.

W3C

Validate HTML or CSS code.

ISO


Keywords: music, music-album, shelby, cobra, mustang, rat-rod, hot-rod, audio-player, audio-visualizer, data-driven-graphics, web-audio-api, svg-visualizer, mpeg-4, mp4, animation, artwork, code, digital-pen, digital-pencil, digital-ink, hand-drawn, hand-drawn, hand-coded, handmade, interactive, html, svg, animated-svg, html5, css3, es5, unobtrusive-javascript, dom-scripting, responsive-animations, responsive-layouts, w3c, iso, audio, classlist, cssanimations, csstransforms, csstransitions, eventlistener, inlinesvg, json, opacity, preserve3d, queryselector, requestanimationframe, rgba, webaudio, xhrresponsetypejson.