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.
Every so often I stop work and stick my head above the parapet and see what the rest of the Web Developer community is doing, and every time I do I’m amazed by some of the ideas and applications that are being built. They aren’t always useful but who cares; the technology is available so why not try it and push the boundaries a little.
Want to see what samples were used in the new Girl Talk album?
The first application I really like is Mashupbreakdown by developer Benjamin Rahn. Mashupbreakdown is a visual representation of the samples used in the latest album by Girl Talk called “All Day”. That in itself is very cool, but where does it get the sample information from? Well that’s the really clever part; it gets it from Wikipedia.
Wikipedia has a page for the “All Day” album that contains all the sample information used in each track. Mashupbreakdown scrapes this page and and visualises it. Since Wikipedia can be edited by anyone, if you spot a mistake / new sample you can easily update the page information and the application with change accordingly!
At the moment it only shows one album but there’s no reason the application can’t be adapted to handle more albums. Benjamin has a post on his blog appealing for more breakdowns so I’ll be checking back with the site now and then to see if any other breakdowns have appeared. Great work Benjamin.
When chemistry and HTML combine you get the periodic table of HTML elements!
The second application that really caught by eye is the Periodic Table of Elements by developer Josh Duck. When I find a site I like, I immediately do a “view source” (don’t all Web Develepers?) to see how it’s been built. The Periodic Table of Elements takes any URL you pass it and tells you what HTML elements were used on the page. It’s basically a prettified / simplified version of view source! The application may not be that useful but kudos to Josh for taking the time to build it. Definitely one of those ideas that I wish I’d thought of!
Last night I decided to revisit an experiment I wrote earlier in the year: Using Image Data Inside the HTML5 Canvas Element. It involved loading 2 – 3 images and swapping out the image data depending on the mouse position. I ran into a slight issue though, it wasn’t working:
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.
1 2
context.drawImage(lakeImage,0,0); var originalLakeImageData = context.getImageData(0,0, iWidth, iHeight);
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!
1 2 3
$(window).load(function(){ //Your code here });
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.
Last Friday I had the pleasure of attending Full Frontal 2010 which was held at the Duke of York’s cinema, Brighton. A super venue for an extremely informative and entertaining 1 day JavaScript conference. After attending in 2009 I didn’t want to miss out this year. If you’ve never been to the Duke of York’s cinema it’s well worth a visit; be warned though, the seats are very comfy and it’s quite hard to stay awake at times!
Slightly embarrassing moment for Remy via the Twitter board.
There were some truly excellent talks, ranging from IE6 and ChromeFrame to the latest developments in HTML5 and the mobile web. Big thank you to all the speakers they did a superb job:
Alex Russell: Excellent talk on ChromeFrame, an IE browser plug-in that replaces the IE render engine with that of Chrome (if enabled via a meta tag). He didn’t have many kind words to say about IE but then again who does.
Jan Lehnardt: Very informative talk on the mobile web, specifically some of the issues surrounding it. He then switched to CouchDB and how it could be used on a mobile device. CouchDB is a very powerful document-oriented database that can be accessed from anywhere that allows HTTP requests.
Paul Rouget: My favourite talk of the day. Paul is a development guru who works for Mozilla and his talk was on a few of the features we should look out for in Firefox 4. This included the Audio Data API, FileAPI and WebGL. WebGL looks, well, amazing!
Paul Bakaus: Who would have thought you could use JavaScript and the DOM to create a powerful gaming platform. Well Paul showed us you can by demoing his latest prototype using the Aves Engine to create a “Sims” like game… in JavaScript!
Dan Webb: Dan works or Twitter as a Front End Engineer. His talk was on how to get around the pesky same-origin problem when pulling in data from other sites. We have JSON-P sure, but there are other methods too; like postMessage, CORS and that old favourite the iframe.
Brian LeRoux: Brian is a developer on a product called PhoneGap which aims to plug the gaps for mobile developers and encourage handset creators into providing better API’s.
Seb Lee-Delisle: Seb is a very well known Flash developer but he also has many other skill sets up his sleeve. His talk ranged from 2D particles all the way to the Unity 3D Game Development tool. Incredibly inspirational talk with stunning demos. The future looks very exciting indeed!
The highlight for me was defiantly Paul Rougets talk on “Batshit crazy stuff you’ll be able to do in browsers”. He demonstrated a selection of custom builds of Firefox 4 and left everyone gob smacked with what HTML5 has in store. Using WebGL and the Audio Data API to create a 3D scene that reacts to the music as well as illustrating how useful the new Drag and Drop File API can be. As a bonus he even patched a version of Firefox to interface directly with his web-cam and take a photo and manipulated it via the browser; no plug-ins required! Just wow!
Big thank you to Remy and Julie for taking the time to organise this years event; hopefully I get to go again in 2011.
