Summer.02: Environmental Simulation

Driven by Javascript, powered by Coffee

Summer.02

Something - I believe it was Lionhead Studios' game, "Black And White" in part - inspired me to attempt recreating a life-like environment setting that would be interactive and would alter behavior according to the time of day in the user's real-life environment.

The irony here, of course, was that it was summer at the time this project was underway. I was beautiful outside; meanwhile, here I was indoors trying to recreate what was happening outside. Ah yes, the downfall of computer geeks everywhere.

Watching the clock

The environment changes dynamically according to the time on the client. During the day, it is light out and birds are heard chirping along with the occasional woodpecker noise - the ambience is that of the day time. As nightfall approaches, the appearance changes accordingly: It gradually gets darker, and harder to see things; the birds are eventually lost for the sound of crickets, and an owl comes out later on at night to disturb the peace at random. This is accomplished primarily through the use of a few CSS-based filters and some Flash-driven audio, both driven via Javascript. The site initially sets itself to behave according to the user's clock, but the setting can be overridden to show day or night at any time if desired.

120+ hours, with limitations

Speaking of time, a lot was spent working on the functionality side of the site. Despite this, Summer.02 is still limited to Internet Explorer. D'oh!. The irony is that there are likely only a few minor proprietary gotchas or non-standard bits of code (IE-only CSS filters, etcetera,) and it wouldn't have taken much to get it working under Mozilla. I had not started thinking about that audience yet, but the next big project (DHTML Arkanoid) certainly did.

Flash-based, scripted audio

Since sound was desired for adding to the realism side of the presentation, an "audio-only" Flash movie was created and embedded in the page for this purpose. It is a simple one-frame movie that contains a named movie clip for each sound desired loop/effect; to play a given sound, Javascript calls public methods in the Flash ActiveX object to instruct the player to target the "start" frame in a specific movie clip. This was originally hacked out to provide sound for the March.02 design, and has since been extended to work under Mozilla (supported with Flash 6.0 r47 and newer I think.)

Related links