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!
It’s been a few weeks now since I attended a Web Gaming event hosted by Mozilla and I’ve not yet had chance to write about one of the coolest features that was demonstrated: Speech input in forms. Now I must admit, I had no idea this was even possible; so it was quite a surprise when I saw the demonstration. With a few extra attributes added to a standard input box you can enable speech input:
1
| <input name="speech" id="speech" type="text" x-webkit-speech speech error onwebkitspeechchange="dosomething.coolhere(true);" /> |
It really is that simple! You may notice the “x-webkit-speech” attribute so will have guessed it currently only works in Webkit; and as far as I’m aware only in very recent versions of Google Chrome (note: “The Input Speech API will now be available by default on Chrome’s dev-channel”). The Speech API seems very new and is still a draft, so it will be a while before it’s fully adopted by other browser vendors.
A quick demonstration of the Speech API in action.
To demonstrate the speech input I’ve put together a very simple festive demo that queries the Flickr API looking for images related to a value entered. So if you have a microphone and the dev channel of Chrome, why not give it a try. Chrome records the input of the microphone before sending it off to an external server to be processed, where a value is then sent back to the browser. At first I thought it was all processed inside the browser but I guess that’s a little to much to expect! It isn’t 100% accurate and the demo accepts Googles first guess so you may get a few strange results. The server returns multiple guesses which a user can select from, but this hasn’t been added (to my demo at least).
Since the API is very new it took a little trial and error to work out how to detect if the Speech API was available in the browser; but with a little help from Paul Irish I managed to crack it:
1
2
3
4
5
| function speechcapable(){
var elem = document.createElement('input');
var support = 'onwebkitspeechchange' in elem || 'speech' in elem;
return support;
} |
This function will return true if the API is available. It’s worth noting that since it’s very new this function is likely to break in the future as the properties always seem to be changing. It works at the moment, so get thinking about what this brilliant new API can be used for! It’s a big plus for accessibility if used correctly and I can also see some cool applications in web gaming too. View the demo.
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 :)
Yesterday evening I had the pleasure of attending the Open Web Gaming event #gameon10 hosted by Mozilla Labs and Six to Start. The evening involved five short main talks and numerous lightning talks by various attendees.
Christian Heilmann getting ready for his talk at #gameon10.
There were an interesting mix of speakers, from the big name companies like Google and Mozilla, down to start-ups and independents:
- Christian Heilmann: Very interesting talk on why developers should be developing using new open web technologies. He had some very interesting ideas for Angry Birds too (see below).
- Ernesto Jimenez: A hands on talk on the “Do’s and Don’ts when developing with the HTML5 canvas element. Mainly about things he’d learnt the hard way.
- Rob Hawkes: Rawkets is a simple shooter game Rob developed for a University project that’s really taken off. It uses various open technologies including node.js and Web Sockets on the server side.
- Rik Lomas: Is the line between TV and computer entertainment bluring? With the help of Picklive it certainly is. A fantasy football game played in real time, built on Javascript, jQuery, Strophe and XMPP.
- Paul Truong: Paul’s talk didn’t quite go to plan with a couple of teething problems with the demonstrations, but it was still very informative. I had no idea MacBook Pro’s had a built in accelerometer, and using it for gaming is a stroke of genius (although I can’t see many people tipping their MacBook Pro, it’s a tad heavy for a controller). With the iPad you’re on to a winner.
Paul Truong talking about Processing.js.
I particularly liked Christian Heilmann’s talk as he had some great ideas for Angry Birds if it was built on open web technology. You could very easily allow people to build their own levels, add multi-player support, add a frustration rating for levels and user comments. Adding the social level building aspect to the game takes a bulk of the development time off the game developers; this is exactly what Media Molecule have done with Little Big Planet and they now have 1 million+ levels! As an extra you could setup level building competitions and bring out a version of the Angry Birds based purely on the best custom built levels. Everyone’s a winner!
The evening was great fun and all the speakers were brilliant. My only criticism would be that the talks seemed very rushed. Making the talks fifteen minutes instead of ten would have allowed for a slightly slower pace with a few more demos. Big thank you to Mozilla Labs, Six to Start and all the speakers.
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.
