Surround Sound Chillage

Ever feel you just need a bit of harmony in your day, a few moments of clarity and calm? Find yourself battling with noise? Now you can relax online with the 3D Buddha Machine! Load it up and click until happy… if you feel it is too loud, scroll the mouse wheel.

What is it?

Based on the world famous Buddha Machine by FM3 (Zhang Jian and Christiaan Virant), this is an authentic online replica. Coded using the incredible Papervision libraries and my own personal Media Framework, the Buddha Machine 3D features all 9 original sounds from each the Buddha Machine I and II – kindly released under creative commons. Thanks to the magic of the internet, Christiaan popped by to offer his support. Thanks!
.

What does it do?

Put on some headphones, click to find the sound for you, use the mouse wheel to set your volume, and relax. If you need a portable version, consider buying the original product – it fits in your pocket!

How does it work?

The Audio system reacts to the position of the 3D object, decided by the mouse, and considers one face as a speaker. As the object rotates this pans and fades the audio according to the trigonometry formulated from the angle between the user and the normal of the speaker faced plane. The volume is also reactive to clipped faces, and by that I mean speakers that are pointing away from the user, the further a speaker turns away from the user, the less it can be heard.

Sounds are loaded as mp3s from an xspf playlist and streamed, whilst the next track is pre-fetched to prevent gaps and loading delays when changing sounds.

How was it made?

I decided to avoid Flash entirely and instead use the free FLEX compiler from the Adobe site. This was mainly to see how using the FLEX compiler affects the size and performance of swf files compared to compiling through Flash, but also to see if I could avoid non OSS software. Process wise, using this development system, along with swc files for symbols, it is possible to create amazing web apps absolutely free of charge. As I am saving up for the next Flash, but in the meantime this lets me test out new features in the player right now! I see a synthesizer on the horizon next

Once you perfect your workflow, and don’t mind creating libraries of swc files, this is probably the most integrated and fastest method for Flash development. There are many tweaks and hacks that you have to apply to the commandline if you want to use a preloader, or don’t need all the FLEX libraries, or want to set a player target version, but thankfully, my development system of choice, FlashDevelop, has all of these as options preset in the GUI.

On the negative side, using the FLEX compiler does seem to add quite a few extra bytes to the runtime code, so at least consider a preloader!

Check it out

Buddha Machine 3D I.

In this way, the entire site remains pretty similar, with only a few changes that happen on link clicking. To accomplish this, I am using the incredible jQuery Javascript library to make asynchronous calls to load pages into sections, and also to display and control the flash applet with a series of animation and data commands.

The most challenging aspects of designing for such sites lie in how using Javascript removes a lot of the controls that we take for granted – a good example here would be that using Javascript to load in a new page breaks the BACK button in your browser. Which, for most users, is completely unacceptable. Other problems such as incorrect permalinks for bookmarking and placing history items in your list are difficult to remedy, although with cunning use of hidden forms and some Javascript parsing functions for extrapolating Urls and creating permalinks, it is possible.

The site now handles itself cross-browser and deals with all of these issues, as well as scrolling to anchored links and handling bookmarks.

If you find that this site is causing you problems, or that it is not working as I described, please leave a comment along with your machine details and browser specifications. Thanks!

Tested on : Firefox 2+ / IE 6+ / Safari 2+ / Opera 7+ / Konqueror 2+ / Chrome
Machines : Windows XP / Windows 2000 / Windows Vista / Mac OSX Leopard / Linux Kubuntu / Linux Fedora

Know Issues : Konqueror disables the flash applets ability to comminicate with Javascript (See error message in flash) – this is completely outside of my control and seems to depend on how your system is configured. This won’t prevent you from enjoying the site, just won’t let you see alot of the animations!

Certain sections are much more important than others with this site, and depending on why you are here, you will have different interests and want to see specific relevent and pertinent data to your needs. On the whole, most people are here to look at my portfolio and the things that I do – and so communicating this is my most important responsibiliy. As the portfolio itself has so many varied categories, it would be best to show on the front page only the most interesting and largest  sections – such as web and graphics – so that people have a quick access point to what they want.To get to the heart of how I want to promote the content, it is important to understand what people want to look at – and how that affects their next move around the site.

Certain sections are obviously essential – such as Contact and About – these communicate rudimentary information that has to be available site wide. For contact we have the choice of showing a contact page, or even just contact details in the footer. Same with About -it would be best to show some about information all the time – prefereably with a link to more information, best served with it’s own page.

So for added security, I have added some extra .htaccess rules and chmodded any weak folders, updated my password to a crazy length, altered a few MySQL parameters and disabled all FTP users except two. I don’t seem to be paranoid enough these days!

I have very personal preferences when it comes to typography, and for this site I want to focus on readability, rather than aesthetics. I like big fonts, with big gaps between words and lots of space between lines – making it very easy to read, and incredibly easy to skim read. This is an important quality as many people will stumble onto this site needing to be made instantly familiar with the context. For important words, and to highlight significant sentences there are a number of extra CSS classes to handle fancy formatting.

An important part of any site is how it moves your user’s eyes around the page, and in particular how the vertical spacing between headings,  paragraphs and other elements maintains a rhythmn that balances and spaces out all of the information. To develop, demonstrate and code the typography I have created a special test page which contains all the headings, paragraphs and special class codes that need to be styled for the content on this site. In the background you can see the vertical rythmn shown as equally spaced horizontal stripes, or ‘baselines’.

This is the vertical drumbeat for our content. All headings, paragraphs, images and charts have to be able to sit perfectly either on these lines or use margins to offset themselves asymnetrically between (like an offbeat). This beat runs through all sections of the site and never changes.

For designerZen, I am using an 18px baseline. This was derived from playing around with the basic 12pt font (that is used for most of the site content) and changing the leading until a long paragraph was easily readable, and short paragraphs were clear. 18px with a 12px base font means 12 pixels vertically of text, then 6 pixels of space below.

Check out this page for the test.

For all fonts smaller than 18px, it is important to add line-height so that their baseline extend to the full 18px. For fonts larger than 18px, it is important to set it so that the entire hieght of the font plus line-height is a direct multiple of 18px and also the margins above and below them. Take a look at the typography.css for more information.

There are many resources to help you build to a baseline, my favourite debugging tool is syncotype, which overlays a grid of horizontal lines spaced along a baseline that you can specify. Try it out for yourself on the test page!

I have written a piece about the elegance of Phi here and how it can be derived mathematically.

Main Colour Palette

The soft brown makes for an extremely easy on the eye text colour, and the blues lend themselves to links with hover classes.

The interesting thing is going to be where to use the accent greens and how to display the extra blue so that it ties the style together. This palette is quite bold, and without making the entire site dark, I have decided to partition the colours into sections with only one colour repeating everywhere.

What is nice about this colour scheme is that there are alternative combinations of colours that can be used that complement each other but look radically different when used side by side with other combinations. Take for example green and brown next to green and navy – these contrast very strongly and so could be useful to draw fences between sections.

These five colours will be used all over, but for backgrounds there needs to be some shades of neutral tone. White is an obvious choice, but as a lot of my art uses white as the highlight colour, the works will not be as vibrant if placed on sheer white. Thanks to new CSS specifications we can utilise opacity to help blend these tones together with the white content sections.

Also, as the site is already becoming overcrowded with navigation – most of which is secondary – we need a non distracting colour for hiding these away.

introducing a new way to enjoy music!

Mix your favourite music blogs with your social bookmarks, add streaming radio and folksonomy… integrate with new music web services plus the latest web trends and what do you get…?

What is it?

A fancy new website that collects your favourite music blogs, MP3s and net playlists into one universally accessible site. Read about music, discover new music, and listen to & download the latest songs based on your web-based bookmarks and the social bookmarks of thousands.

What does it do?

The use of a social bookmarking service allows you to bookmark practically any music service. You can save simple RSS or ATOM feeds from your favourite music blog, your XSPF playlists, even M3U radiostreams! The volume of music services is growing by the day, so you can aggregate all your favourite music from sites such as Imeem, IJig, The Hype Machine, BlogDigger or any blog from the thousands collected on el.bo.ws.

Furthermore, if you use last.fm webservices – which I highly recommend – you can save your recently played songs, find out which songs you already have in your collection and get advice on music that you would like but just haven’t yet heard.

How does it work?

The channels are saved in your favourite online social bookmark collection. If you don’t have one, look no further than Del.icio.us…

Simply save the RSS feed from your favourite music blog using the tag mp3blogfeed and your music-blog will be automatically available to everybody in the world on the home page with the most recent at the top. If you prefer to only see your own bookmarks, simply enter your del.icio.us username in the settings box, or if you are using another service, the correct RSS URL.

Playlists are automatically saved onto your hard disk as shared flash-cookies along with such useful things as volume and the last page you visited – dive back in from where you started!

Technical details

Written entirely from the ground up in actionscript 2 – no components, no templates.
Uses Shared Local Objects to save xspf playlist, volume and recent browsing history.
Features javascript data api to allow bookmarking and the emailing of blog links.
Uses your existing social bookmarking services – imports RSS, XML & OPML.
Intelligent caching of data and pre-empting of user desired information.

Features a scrolling data window with mousewheel input, inertia and variable speed scrolling.

Note : This project has been discontinued due to lack of time thanks to my new job as the head of flash at Last.fm!

music meet art / east meets west

A fascinating hybrid of electro J-Pop and classical cello, the Stereo Art project is still in its early phase, but thanks to many live performances, the word is spreading!

As the idea is to combine music & art, I was commissioned to put together a clean but ‘scribbled’ style Flash website to show off the music and display live news. The end result is a scruffy but-not-too-shabby gallery and news reader all wrapped round a live music streamer. The design process was refreshingly quick with this project…After five minutes of sketch ideas, Producer Pop lifts up the most basic looking sketch and finalised,

Less is more! … Complete! and so within a short space of sketching (and a few months of actionscript coding!) the site was launched and began picking up popularity

Technical details

Full Screen 100% actionscript 2 – no components, no templates. Uses Shared Local Objects to save volume. Imports web services from Flickr and Blogger.com. Intelligent gallery module with thumbnail zoom and comments. Designed as a widget to be entirely embeddable into any site with just three lines of html.

If you want to check out the Western J-Pop sounds, see it here!