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!
Reddit is a great place to look when you’re searching for inspiration. Occasionally a gem will emerge from the background noise that will blow you away; and I often find it’s the simplest ideas that have the most impact. For example: take 424,000 Wikipedia articles and cross-reference their date and location and you get “A History of the World in 100 Seconds”. A simple idea with inspiring results.
The visualisation starts off slowly but around 1400AD there’s an explosion of activity. It’s interesting to see that there’s one little island in the middle of it all where a high percentage of the activity occurs. You may be able to guess its name, but if not, it is of course the United Kingdom. By the end of the video you can clearly see a map of the world and it’s even possible to pinpoint many individual countries.
I’d love to see a version that only focuses on Europe; there are so many references to it in the data but the visualisation zoom level doesn’t do it justice. The authors Gareth Lloyd and Tom Martin have done a fantastic job of making a staggering amount of data into an interesting visual work of art.
Huzzah! The end of another busy week full of lots of (mostly) enjoyable work; mainly involving Facebook in some way or another. Lots of clients have really jumped on Facebook recently and the demand for their own “apps” has increased dramatically.
Setting up an app inside an iframe is easy, but one thing you don’t want is scroll bars as they look damn ugly! You can set an iframes height using the setSize() method but what about if the iframe varies in size between pages and user interactions (accordions, show / hides etc); you need some way of automating this. Luckily Facebook has already added this functionality to the JavaScript SDK, you just need to enable it. The API docs for this seemed a little flaky, with quite a few comments from people who couldn’t get it to work; so here’s a solution that worked for me:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<div id="fb-root"></div> <script type="text/javascript">
window.fbAsyncInit=function(){ //Your app details here
FB.init({appId:'your_app_id',status:true, cookie:true, xfbml:true}); //Resize the iframe when needed
FB.Canvas.setAutoResize(); };
//Load the SDK asynchronously (function(){ var e = document.createElement('script'); e.async=true;
e.src= document.location.protocol+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e); }()); </script>
Copy and paste this into the body of your iframe and you’re halfway there. The last thing to do is check your application settings, under one of the advanced settings pages you will find an auto resize check box that you will need to enable (sorry I can’t remember exactly which page!). Once enabled your iframe should resize automatically depending on the page content. There are a few parameters you can tweak with the setAutoResize() method, they are documented here. Fingers crossed it works for you too!
Important Update: One thing I just noticed with the code, it didn’t work in IE! Not great. Luckily there was a quick fix. Change script type=”application/javascript” to type=”text/javascript”. IE doesn’t like application/javascript!
I’ve been a fan of Google for quite a while now. What with their superb Chrome browser, Gmail service, extensive API’s and most importantly their motto, “Don’t be evil”; what’s not to like! Only time will tell on the last point so fingers crossed. While browsing the Google Research Blog I spotted a very interesting article: Julia Meets HTML5.
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.
Wow, I can’t believe we are at the end of January – one twelfth of the year gone already! I’ve been so busy this month I’ve barely had time to sit down and work on any personal projects. Thankfully I had a spare few hours over the weekend to work on a project I’ve been meaning to finish for a couple of weeks: a visual thesaurus using JavaScript.
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!
