The competition was split into two sections; 1k and freestyle. I find both interesting but as I’ve mentioned before in previous blog posts I’m always amazed at what can be done with 1k of code.

The video above is of a demo created by Silexars that came in second place. A live demo can be viewed here. All created with less than 1k of code! WebGL really is starting to come of age. As with any of these demo’s it’s so easy to copy / paste, modify and learn from them. View source is a wonderful tool.

Another demo that caught my eye was by p01 (who I’ve blogged about before). This time he created Quaternion Julia Fractal in only 550 bytes of JavaScript and GLSL! It came in third place.

All this possible in less that 1k of code.

From the freestyle section the Particles.js by basecode has completely killed my productivity today!

Nice work guys and gals! If you have a spare few minutes (hours) check out the rest of the DemoJS results, you won’t be disappointed.

I’m quite late to the web parallax party as the effect was recreated and popularised back in 2008. I first remember seeing it being used by the holding page for Clearleft’s Silverback application, but it may have appeared elsewhere before that. Three years on the web is a long time and technology has moved on, so I set myself a little project to recreate the effect using the HTML5 canvas element.

Move your mouse to see the Parallax scrolling effect.

To demonstrate the effect I used a few graphics from another iconic retro game: Space Invaders. As you move the mouse the scary alien separates into its constituent pixels. The foreground pixels move faster than the background pixels creating a slight parallax effect. You have three aliens to choose from: Dave, Julian and Brian, which I’ve named for no particular reason. I think the names quite suit them. I’ve also added a little randomness to the demo in how they are generated, which you can see by reloading the page.

Hooray for retro games and pointless demo’s! :)

Trees generated at random using some CreateiveJS and Three.js.

Over a month has passed since my last blog post and much has happened. We’ve had a wedding, a funeral at sea (maybe in bad taste!) and I’ve gone full-time freelance (yay!). I’ve had a little more time to work on a couple of personal projects so I’ve finished one that I started way back in January.

I had the pleasure of attending a Creative JavaScript course in Brighton, UK, hosted by Seb Lee-Delisle; a two-day course that covered a wealth of topics from Vanilla JavaScript to Three.js. If you’re looking for some inspiration I highly recommend looking out for one of Seb’s courses. Great fun and you get to meet some really nice people. Quick tip: You may want to brush up on a little Trigonometry before you go as it’s used numerous times. I knew that A-Level Mathematics course would come in useful one day :).

Seb produced a demo in Canvas that created ‘trees’ and it really caught my eye. The trees were in 2D so as I’ve had a bit of experience with Three.js I decided to create a 3D version! I’m quite happy with the result although I’ve had to restrict the number of branches rendered due to the lack of dedicated graphics card in my laptop; I get about 1fps when stopping at a branch length value of 10 (line 211) :(

The demo also allowed me to use the new request animation frame API which vendors have added to aid animations in browsers. The main advantage of using it is if you have the animation running in a tab that isn’t visible, the browser will know to stop the animation! Using the old setTimeout method, the animation still runs in the background and uses up precious CPU, memory and battery power (especially on a laptop). As with most new browser features the API isn’t set in stone (yet) but luckily Paul Irish has created a polyfill that falls back to setTimeout in older browsers.

View the demo here; reload for different trees. JavaScript finally seems to be coming of age!

Update: Original credit goes to Jean-No with his amazing OpenProcessing work! I’ll be bookmarking that link, some stunning work there. Thanks to Seb for pointing out who to credit :)

Pure mathematical worlds generated using Fractal Lab

Fractal Lab, as the name suggests, is a fractal rendering tool using OpenGL Shading Language (GLSL) by a very talented programmer called Tom Beddard. Now I’m not going to lie to you, the mathematics behind all this goes way over my head! OpenGL on the other hand is something I’ve read about with increasing frequency recently due to the WebGL explosion happening on the ‘net at the moment. Big thanks to all the developers of Firefox, Chrome (Webkit) and Opera for that! Internet Explorer 9 on the other hand isn’t planning on supporting it. Hopefully that will change in the future.

Fractal Lab allows you to render out 2D & 3D fractals directly to your browser and navigate through them in real time! Be warned though, this will push your browser and graphics card really hard. It mentions this on the site; it’s possible to lock-up your GPU with certain GLSL fractal shaders, so be careful (my poor laptops on-board graphics card did exactly that, so he’s not lying) :)

There’s hours of fun and experimentation to be had with this superb example or WebGL. Thank you to Tom for developing it.

What’s always amazed me about these demos is the amount of space the programmers had to play with and the hardware available at the time; both extremely limited. While the space and hardware limitations are no longer an issue, people are still developing these amazing demos. One reason for this is due to an exciting area in Web Development that’s currently flourishing: WebGL. The technical specification was finalised last week and developers have started to take notice of this very powerful visual programming language. Developing demos in the browser environment is a new limitation and programmers are looking at WebGL to push the boundaries.

WebGL port of "glass", an old 64kb demo from 2000.

The demo above has been converted into WebGL by a very talented programmer called Per-Olov Jernberg (Possan). You can even take a look at the source on Github if your that way inclined! You can view the original from April 2000 here.

With modern browsers like Chrome, Firefox 4 and now Opera adding WebGL support and improving their JavaScript engines, there’s never been a better time for Web Developers to get involved in this new demoscene. All that’s needed is some JavaScript, Canvas and a little creativity. I genuinely look forward to seeing all the old school programmers diving into WebGL. I personally know very little about this new language so I’ll be able to learn so much by doing a quick “view source”.

There’s already a WebGL competition in progress called gl64k where programmers have to create an interesting visual demo with only 64k (65,536 bytes) at their disposal. Awesome stuff will be emerging from this new technology in the next couple of years and I for one can’t wait to see what!

The Julia Map with a random colour scheme (nice feature).

Julia of course refers to Julia fractals rather than a person called Julia. Named after Gaston Julia, a French mathematician who studied them in the 1920′s. His works were largely forgotten until Benoît Mandelbrot mentioned them in his now famous works on fractals.

Google Labs have created an extremely slick way of navigating around various types of fractals. From the plain old boring(!), Mandelbrot and it’s many variations to the Julia and Newton fractal. Select a fractal and colour scheme then zoom and drag just like a standard Google Map.

According to the article the demo uses the Google Maps API; I guess it may use it loosely in it’s user interface but there are an infinite number of zoom levels with fractals. When you zoom into a coastline on a Google Maps you will eventually reach a limit where you will be presented with a fuzzy image (or a blank tile); this will never happen on the Julia Map. The ’tile’ information isn’t downloaded from a server like Google Maps, it’s calculated on the fly by the browsers JavaScript engine. The faster the JavaScript Engine the better. If you have a browser that supports the new Web Workers API you will notice a huge difference in performance, as the CPU intensive fractal calculation will be offloaded to separate worker threads rather than the single main UI thread.

I could spend hours investigating the infinite mathematical landscape of the Julia Map, why not try it out for yourself and post your results on Twitter under hashtag #juliamap.

Visual thesaurus representation of the word 'clean'.

You may (or may not) know of the Visual Thesaurus by Thinkmap; very useful but it’s a paid for service, I use it so infrequently I can’t justify paying for it (there is a free trial though). Recently a very interesting graph visualisation library popped up on delicious called arbor.js, so I decided to have a closer look and see if I could use it for the JavaScript version. For the word data I’ve used the Bighugelabs thesaurus API which I previously used to create my Post Thesaurus WordPress plug-in (shameless plug!).

Arbor.js took a little getting used to as it uses a mixture jQuery, canvas and its own methods; but there’s a fairly extensive set of documentation and a set of usage examples. Once you get your head around adding nodes and edges to the system, arbor takes care of the rest. One thing I did notice is the site examples and my VT experiment run much smoother in Firefox than they do in Chrome, which is quite surprising considering how quick the V8 engine is in Chrome. Maybe this will be improved in future versions.

So to the demo; I’ve tried to keep it very simple to use. Enter the word you wish to visualise and click search. Once the API returns a result it’s plotted by arbor. You can drill down into the result by clicking on the sub-particles (and remove them by clicking again). The individual words can be clicked and you’re given the option to search again using the selected word. I still haven’t got the perfect system setup as some results can be a little jittery; usually when an even set of words are returned. I’ll keep playing with system settings to see if I can improve this.

Any suggestions, comments or feature improvements please leave a comment below!

Not good! I double checked the code on my local machine and it worked. Very odd! I noticed that it wasn’t working when you first hit the page but was on page reload. Then it struck me; it must be a caching issue. I was correct.

It turns out that the JavaScript was firing before all the images had fully loaded.

The above lines were trying to access ImageData that didn’t exist yet and the browser was falling over because of it. Doh! Luckily I’d used jQuery for a couple of functions in the experiment so I quickly wrapped the code in a load method, problem solved!

This method waits until the whole page has loaded (including images) before the code inside it is fired, guaranteeing the image data is there to be manipulated when needed. View the updated demo.

Mr Doob has created a superb JavaScript 3D Engine in three.js. Screenshots from my 'Bowl' demo.

I’ve been watching the development of three.js by Mr Doob for a couple of months and have been desperate to experiment with it. With Firefox 4 well into the beta stage I decided to bite the bullet and do a little Audio Data visualisation in 3D!

I’ve dabbled with audio visualisation and the HTML5 Audio Data API in the past, so I’m pleased I’ve had a chance to use it again and see what’s new. Note: My previous audio visualisations using canvas no longer work due to specification changes in the API. A pitfall of using an API that’s still in the draft stages I guess.

I’ve put together 5 simple demo’s all based around the same theme showing some of the options available in three.js. My favourite is “bowl”, pretty colours galore!

• Circle: Simple circle, zoom in / out using the mouse wheel.
• Cubes: Same as circle only using the cube primitive.
• Cylinder: Using the cylinder primitive with a floating camera.
• Sinewave: Rotated sinewave (looks a little like a chandelier).
• Bowl: A combination of the above demos to create an interesting 3D bowl effect.

Please note these demos will only work in Firefox 4. The Audio Data API is still a draft specification and Mozilla is the only browser vendor to have added it to date. I’m looking forward to it being added to Chrome (Webkit), with its superb V8 JavaScript engine. The demo’s really are just the tip of the iceberg for both three.js and the Audio Data API. It’s certainly an area of the HTML5 specification to keep your eye on.

The music track used in the visualisation is called “Sad Robot” by a group called “Pornophonique”. Very catchy tune that you can download from Jamendo.

Update: It looks like enabling the Google Page Speed Apache module seems to have broken the demos. I’ve disabled it now so it should hopefully fix it (fingers crossed!).

All this with 1024 bytes of JavaScript? That's crazy talk!

The author Marijn Haverbeke has created a very cool little platform game that’s actually very playable. As you jump from block to block and move through the level to collect the gold coins, the game gets progressively harder. How exactly did he do that I hear you ask; well using this code of course:

See, simple… urghh! That’s the minified source code so it won’t make much sense, but Marijn has been kind enough to post the unminified code for everyone to look at in a blog post about the entry. Very impressive! I’ll be taking a close look at the source when I get some spare time. Many congratulations to Marijn, superb work.

There are 10 winners in total listed on the JS1k page, all equally impressive, but here are my 5 personal favourites:

• 3D Snowman by romancortes
• Mandelbrot with Colours by Gabor Turi
• Colourful Visualisation by “Cowboy” Ben Alman
• Tiny Chess by Óscar Toledo
• Wobbling Tunnel by Marcin Ignac

Some excellent submissions there, I sure you’d agree. Take a look at all the submissions on the JS1k demo page.

I’d like to say a big thank you to Peter van der Zee for creating the JS1k competition, I’ve really enjoyed it. I’m already looking forward to next year. On a side note, just imagine what’s possible with 2048 bytes!