Another day, another website that makes my jaw drop to my desk. This time it’s the results from the latest Mozilla Labs DemoJS party. Hosted in Paris, France over the weekend, it had many coders and artists attending hoping to win big prizes by creating interesting demo’s using the latest web technologies. I may not understand French but I’d have still attended just to see all the demos on show; some extremely inspiring coding going on.
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.
Back when I was a young wippersnapper (many moons ago) one of my good friends had a Sega Mega Drive. As with any new console it was on every kids Christmas list but compared to the current generation of games consoles it looks very primitive. The games were immense fun and you didn’t need an instruction manual to play them. Two of my favourite games were Golden Axe and Sonic the Hedgehog. Sonic the Hedgehog used a technique called Parallax scrolling; this is where background images move slower than “closer” foreground images giving the illusion of depth in a 2D plane.
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.
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 :)
I’ve been so busy recently I haven’t had chance to work on any personal projects (bar a small amount of node.js, but that’s a future blog post); so I thought I do a quick post on a very impressive project that caught my eye last week: Fractal Lab.
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.
One of my key memories from playing a friends Amiga oh so many years ago (apart from Cannon Fodder) is the cool intro demos created by the demoscene. These were usually found on, cough, slightly dodgy versions of games that were “acquired” from various sources :)
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!
