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 :)
Well 2011 is nearly upon us; which leaves me thinking… where did 2010 go! I hope I’m not the only one who thinks this year has gone quick! One big web application that died in 2010 was digg.com. I used to use it every day for the latest technology and funny videos, but then they changed it. The design became very blue and digg seemed to change from a simple community driven link aggregator to a, well, I’m not sure what it changed to in all honesty. So it was time to find an alternative.
Luckily for me (and all digg users) there’s already a well established alternative: reddit.com. It may not look as flashy as digg, but it makes up for it with ease of use and functionality. Need to set up a community for your web application, current technology, interest or well, just about anything really; then reddit is the place for you.
So that’s exactly what I’ve done for Mr. doobs three.js JavaScript library. I created a Threejs community that anyone can submit links to relating to three.js. Over the past few weeks I’ve been adding a couple of links a day, there really are a great selection of examples out there if you take the time to hunt then down.
So if you’ve created a cool new example using three.js or any other link relating to this excellent JavaScript library submit it here. Digg is dead. Long live reddit.com!
Anyone who’s read my latest blog posts will know that I’m a big fan of Mr doobs Three.js JavaScript 3D engine, so I won’t bang on about it any more than I have to. For my latest experiment I decided to mix the HTML5 File API, Three.js and a few images (demo here).
Mr Doob and a little kitten sitting in a 3D tree.
The File API allows a user to upload a file (an image in this experiment) to a web application simply by dragging it onto a designated “droparea”. Once dropped, you can manipulate the data any way you like. The API is able to handle multiple files natively, so just select all the files and drop them onto the area. No need for Flash uploaders or multiple browse boxes. Of course not all browsers support it (IE) and there are a few inconsistencies in the specification; but they will work themselves out over time.
So what does the experiment actually do? Well it allows a user to drag an image onto their browser window which is then “uploaded”; the data is then passed to a canvas element and then this data is passed to Three.js to be plotted in 3D space. The X and Z-axis is plotted in the usual manner to represent the default 2D image using particles; the fun bit comes when you add the Y-axis. This is calculated by taking an average of the RGB values (greyscale) and plotting it accordingly. When using an image of a human face it’s amazing how accurate the 3D plot looks.
Due to the amount of data involved it is recommended that you use small thumbnail images when you try the demo, as larger images equal a larger number of particles. This is an initial version so I’m going to work on a way of dealing with larger images. This will probably mean ignoring a certain number of pixels when looping through the image data. Looking forward, since it can be done with a static image I see no reason why it can’t be done with a video, but that’s a project for another day!
Update: I’ve updated the demo slightly; as Mr.doob pointed out people may have tried to drag directly onto the render area which didn’t work. So now it does :)
Anyone who’s been following the progress of the Three.js 3D JavaScript engine will know of alteredq, as he’s been helping with its development along-side Mr. doob. His latest demo using Three.js really impressed me:
A WebGL ninja! People, I think we may have just found the end of the internet.
The demo uses Three.js, WebGL and Web Workers; so that pretty much ticks every box for me. The model is from AMD’s MeshMapper which is no longer supported. I can’t say I’ve ever heard / used it before but it’s certainly on my to-do list to try out.
To view the demo see here; be warned though you will need an up to date browser that supports WebGL and Web Workers. Grab a recent version of Chrome and enable WebGL and it should work.
If you really want to push the boundaries you could try the latest Canary Build of Chrome (10.0.605.0 at time of writing) which now has an optimised version of V8, called “Crankshaft”. It uses runtime information to see which code will benefit from the most optimisation and is 2 times quicker in some tests! The Canary Build release channel of Chrome is meant for developers / early adopters who want to try out the latest features. Unlike the dev and beta release channels the Canary Build is installed independently, so it won’t overwrite your current chrome settings.
Bring on the revolution; to paraphrase a well known mobile company: The future’s bright, the future’s WebGL.
Earlier this week I came across a very interesting site by Mike Kamermans which had a demonstration of the Euler spiral (also known as the Cornu or Fresnel spiral) using processing.js. Very interesting! After a quick read of the wikipedia article (and discovering my Maths is rusty) I decided to create a version of my own using my current favourite toy: Three.js by Mr doob.
There are a few settings available to change so have a play around.
I’ve put together a few user controls using jQuery UI that you can use to change certain aspects of the animation:
- Scaling: Scale along the X and Z-axis.
- Y axis increment: Add some depth along the Y-axis.
- Selective particle freeze: Exclude certain particles from the animation.
- Y-Axis target: Adjust the camera target in the Y direction.
- Freeze all particles: Exclude all particles from the animation.
It’s amazing what a simple set of mathematical equations can achieve. In terms of web technology, my next step is to add a version using the HTML5 Web Worker API (see update below) that will take the calculations off the UI thread allowing for a more responsive browser UI when animating a large number of particles.
Note: Try the demo using both Firefox and Chrome; you can really see the difference between the Tracemonkey (FF) and V8 (Chrome) JavaScript engines.
Why not have a play with the demo and let me know what you think!.
Update: I’ve now added a version using Web Workers located here. A couple of things to note from this demo:
- Web Worker threads run asynchronously below the main JavaScript thread, so be careful when trying to use the returned data. Be sure that the data exists by using the ‘worker.onmessage’ callback before you fire any dependencies. If you don’t then expect quite a few “Undefined” error messages!
- While using the Workers for the animation data I’ve had to limit the animation to 10fps (down from 60fps). Surprisingly enough browsers don’t like it when you spawn 60 worker threads per second :)
I’ll be sticking to using the main thread for calculation in the future as there’s no advantage to using Web Workers, but it was interesting proof of concept.
