Inspiration. Quick.

Inspired by Brian Eno and Peter Schmidt’s work to prevent creative blocks… try this widget out when you are facing the wall.

Full of sage like quotes and abstract commands, the Oblique Strategies are a series of cards designed to be pulled out when you need to shake things up creatively.

I have tried to keep these cards as accurate as possible (even down to the 10 point sans-serif font!) to the real thing. The further you click away from the card, the more inertia you spin it with, and the angle of spin is entirely dependent on where you are clicking. It features all the original 4 versions – you can select between them using the controls in the lower left corner – the original version is still available from Eno’s shop. The only thing really missing from this virtual version are the 6 blank cards that came with the original. I will leave that for you create.

Try it out and tell me what you think!
Oblique Strategies : V5

Find out more about the original Oblique Strategies and order your own :

1. The Oblique Strategies Fansite
2. Buy your own

So far there is a dancing robot who has a TV for a belly, a shifty looking ninja and a pig with a jetpack. I’m just playing for now

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.

We See the Stars And We Want Them

1. Mr Fingers – Stars
2. Jeff Wayne – War of the Worlds
3. NASA – Symphony of the Planets 2
4. Vangelis – Blade Runner Blues
5. Arthur C. Clarke – Interview
6. Cybotron – Clear
7. Geinoh Yamashirogumi – Dolls’ Polyphony – Akira OST
8. Procul Harlem – Strangers in Space
9. John Carpenter – Darkstar OST
10. 2001 – HAL 9000 (Excerpt)
11. NASA – Symphony of the Planets 4
12. Jeff Noon – Needle in the Groove
13. Ceephax Acid Crew – Northern Spirit
14. The Vulcans – Journey into Space
15. Sun Ra – Journey Through the Outer Darkness (part I)
16. Ry Cooder – El U.F.O Cayó
17. NASA – Symphony of the Planets 5
18. DJ Spooky – Twighlight Fugue
19. Sun Ra – Journey Through the Outer Darkness (part II)
20. Baby Mammoth – Moonburn
21. Marshall Chess – Interview
22. Kevin J Anderson – Hidden Empire
23. Symarip – Skinhead Moonstomp
24. Cowboy Bebop OST – Radio Free Mars Talk 1
25. Mike Ladd – Starship Nigga
26. Sun Ra – Journey Through the Outer Darkness (part III)
27. ESG – UFO
28. William Shatner – Rocket Man
29. The Time & Space Machine – The Trip
30. Death in Vegas – Neptune City (Concrete Funk Mix)
31. The Hitchhiker’s Guide to the Galaxy – Heart of Gold
32. The Halle Orchestra – Mars, the Bringer of War
33. Jerry Goldsmith – Metropia – Logan’s Run OST
34. Lonnie Liston Smith – Floating through Space
35. Kraftwerk – Spacelab
36. Dark City (Excerpt)
37. The Seatbelts – Cats on Mars (DMX Crew Remix)
38. Aliens (Excerpt)
39. RZA – Afro Droid Showdown II (Rap Suite)
40. Echospace – First Point of Aries
41. Killah Priest – Temple of the Mental
42. Scientist & Prince Jammy – Storming the Death Star
43. Basic Channel – Mutism
44. BBC Recordings – Daleks
45. Kool Keith – I’m Seeeing Robots
46. NASA – Symphony of the Planets 1
47. Brian Eno – Stars
48. Langley Schools Project – Calling Occupants of Interplanetary Craft
49. Acid Mother Temples – Ange mzcanique de saturn
50. NASA – Original Moon Recordings
51. Farm Fresh – Space
52. NASA – Symphony of the Planets 3
53. David Bowie – Space Oddity
54. Cowboy Bebop OST – Radio Free Mars talk 7
55. Stereolab – Space Moth
56. Kevin J Anderson – The Ashes of the World
57. She Satelites – No Satellites
58. Anti-Pop Consortium – Tron Man Speaks
59. BattleStar Galactica (Excerpt)
60. Silver Apples – Oscillations
61. Add (N) to (X) – Robot New York
62. Alec Empire – Dreaming is a Form of Astrotravel
63. Cabaret Voltaire – Earthshaker
64. Brave New World – Saga of the Seven Suns
65. Vienna Philharmonic Orchestra – Also Sprach Zarathustra
66. Sun Ra – Journey Through the Outer Darkness (part IV)

Here are some examples with text

1. Example 01 : Red Links, Blue Text (set as individual RGB colours), Maximum font size is 96 points, baseline set at 22 pixels, paragraph set to 14pts
2. Example 01 : Red Links, Blue Text, Maximum font size is 96 points, baseline set at 22 pixels, Headlines in Capitals
3. Example 01 : Red Links, Brown Text (set as individual RGB colours), Maximum font size is 72 points, baseline set at 18 pixels
4. Example 02 : Blue Links, Maximum font size is 46 points, Minimum is 4 points, baseline set at 22 pixels, Headlines are in capitals
5. Example 03 : Green Links, H1 set as 56 points, p set to 18 points, baseline set at 34 pixels
6. Example 04 : Blue Text, H1 set at 100 points, H2 set at 90 points, H3 set at 80 points, H2 set at 40 points, blockquote set at 24points
7. Example 05 : Double size deafults
8. Example 06 : This site!

All of the output CSS is w3c valid, cross browser compatible, scales neatly and is commented and laid out readably.

If you are interested in the inner workings of the script, I am more than happy to release it under a GNU license which would mean that you could use it for any reason you liked, so long as any improvements you do – I have access to! Everyone wins.

You can currently access the latest version in the SVN at Google Code.

Note :  the query sent to the test page is identical to the query sent to the dynamic CSS file.

By simply including the type.css file, you automatically reset and normalize the presentation of HTML elements.
The process creates a level playing field upon which to author your layout CSS. The most common elements are automatically created with sufficient vertical spacing so as to fit onto any sized grid

Typograhpy is handled internally so that all text is easy to read (even at the smallest sizes) and sticks to the specified baseline.
Kerning and Leading is added to all small fonts, and margins to all larger ones in keeping with the vertical rythmn that you can specify as part of the query string.
The current baseline is set at 22 pixels and the source code CSS can be viewed here.

The idea for this script came from various sources, most notably webtypography.net, and css reset by Eric Meyer.
Its main goal is to ensure that web principles for good typography are followed automatically for all type sizes, and that all elements flow vertically along a measured rythmn.
Almost all elements are affected by the CSS, from H1 through H6, to more obscure elements such as ABBR and KBD – each is reset so as to remove any existing styles imposed by certain browsers.
All code is fully cross platform and complies with W3C standards for web accessibilty.

CSS Source Code : type.css

Options :

Headings :

1. 
   

   Toggle Capitalisation of Headlines

2. 
   

   Toggle to SERIF Typefaces

3. 
   

   Print Mode

   Sizes :

4. 
   

   Increase Maximum Font Size by +1 (to 37 points)

5. 
   

   Decrease Maximum Font Size by +10 (to 46 points)

6. 
   

   Increase Maximum Font Size by -1 (to 35 points)

7. 
   

   Decrease Maximum Font Size by -10 (to 26 points)

8. Max Size : 36 points | 40 points | 48 points | 96 points

Grid :

9. 
   

   Increase Baseline by +1 (new size : 23 pixels)

10. 
    

    Decrease Baseline by -1 (new size : 21 pixels)

11. Baseline : 18 pixels | 20 pixels | 22 pixels | 24 pixels | 32 pixels

Colour :

1. 
   

   Black Text

2. 
   

   Brown Text

3. 
   

   Red Links

4. 
   

   Green Links

5. 
   

   Blue Links
6. Text Colour :
   (You can use Hex or RGB Values)
7. Link Colour :
   (You can use Hex or RGB Values)

Examples :

1. Example 01 :
   Red Links, Blue Text (set as individual RGB colours), Maximum font size is 96 points, baseline set at 22 pixels, paragraph set to 14pts
2. Example 01 :
   Red Links, Blue Text, Maximum font size is 96 points, baseline set at 22 pixels, Headlines in Capitals
3. Example 01 :
   Red Links, Brown Text (set as individual RGB colours), Maximum font size is 72 points, baseline set at 18 pixels
4. Example 02 :
   Blue Links, Maximum font size is 46 points, Minimum is 4 points, baseline set at 22 pixels, Headlines are in capitals
5. Example 03 :
   Green Links, H1 set as 56 points, p set to 18 points, baseline set at 34 pixels
6. Example 04 :
   Blue Text, H1 set at 100 points, H2 set at 90 points, H3 set at 80 points, H2 set at 40 points, blockquote set at 24points
7. Example 04 :
   Double size deafults

Firstly, I have a primary navigation system that is constantly highly visible – even on first glance – this is important as these are the main category links that have to be obvious as to their function. These sections are Portfolio, Articles, News, Contact and About : More information can be reached by first visiting these links.

Secondly, there is a sub-navigation system to reach popular content, new content and recently changed content, located well away from the primary navigation bar. Once on the site for a few seconds, having scrolled the content, this relevant related system of links takes you to places that you may find interesting as a result of similarity to what you have read. This is also used to filter the portfolio page down to relevant sub-categories.

Thirdly is the tertiary quick links section – hidden in the background and in post footers. By using highly muted colours the links fade into the background but light brightly if mouse overed. In this way, the navigation does not distract the user away from content, but does offer a very useful shorthand for broswing fast.

3 types of navigation in one site – but only one is truly prominent. Hopefully this will simplify the complexity of navigating directly to where you want to be

Renegade Web Radio

Bored of the charts? Looking for sounds to keep you occupied? Look no longer with music and mixes from around the world in one simple interface – combining a podcast, blog and mix aggregator – held together with AJAX magic

check it out @ nomadradio.fm

Features

• Cross Fading between tracks
• Prefetching of the next track so that there aren’t any gaps between songs
• A fast visualiser that reacts onbeat as well as to the frequencies
• Saved volume and a rotary dial
• AJAX backend so that you can browse around without losing audio
• Flash <-> Javascript bi-communication

Get involved and send over your mixes!

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!