10 cutting edge javascript experiments.

September 2, 20093 Comments
Facebook Twitter Pinterest Plusone

The next major revision of HTML  is getting us web developers and designers all a bit giddy. Although its still a work in progress, some of the new additions to the spec, and additional API features have us wondering what the next version of the web could hold. Whilst the entire HTML 5 specification is a few years away from adoption, that hasn’t stopped some developers playing with the features.

Some of these experiments showcase what is possible with javascript, and indeed what we can sort of things we can expect to appear in a web browser near you soon, in part due to the new features within HTML 5.

P.S. If you are using a rubbish browser dont expect some of this stuff  to work.

Js Platformer

URL: http://webdemos.sourceforge.net/jsplatformer11/jsplatformer11.html

platformer

Canvas is a pivotal element within the HTML 5 specification which allows for scriptable bitmaps. This demo utilises it extensively to control sprites with it. Created by Aussie developer- Matthew Casperson, it shows that platform gaming of this quality is possible in the browser.

Twitter Browser

URL: http://tom.drastic.net/twitterbrowse/

twitter-browser

Another key technology playing a part in the web is the lightweight data interchange format JSON. It is used as the transport mechanism within PubsubHub which I mentioned previously. Within this javascript experiment JSON is used to talk directly to the API, and JQuery takes care of the animations between elements.

100 Tweets

URL: http://9elements.com/io/projects/html5/canvas/

9elements

Another in browser experiment which works on top of the Twitter platform, Platform 9 have lovingly created this demo showcasing some of the new features available in HTML 5. Tweets are parsed in real time for the phrase HTML5. Again this makes extensive use of the canvas tag.

Contributors

URL: http://www.mattryall.net/demo/atlassian-vis/contributors/

contributors

This experiment from Matt Ryall, uses javascript, and the processing.js javascript library. It encompasses a small collection of animated visualizations which analyze wiki data. There are also a couple of other javascript experiments worth taking a look at on Matt’s site.

Floating Cubes

URL: http://www.giuseppesicari.it/floating-cubes/index.php

floating-cubes

Floating cubes is a 3d representation of text in the browser. It spells out “Chrome Experiment” and works particularly well in the Chrome browser. From a speed point of view, Chrome runs javascript quite a bit faster than some of the other browsers in the market.

JS 909

URL: http://themaninblue.com/experiment/JS-909/

man-in-blue

The Man in Blue is the alter ego of Cameron Adams, this javascript experiment was showcased wayyy back in 2008, and utilises Quicktime. With HTML5, the audio tag will be pivotal in javascript applications like this making it to the browser.

Browser Ball

URL: http://experiments.instrum3nt.com/markmahoney/ball/#

browser-ball

Browser Ball makes no apologies for not being cross browser compatibility, but does allow you to aimlessly fling a beach ball between browser windows. Which brings endless pleasure to bored geeks like my good self.

Ball Droppings

http://balldroppings.com/js/

balldroppings

BallDroppings uses the Canvas tag again extensively, allowing end users to draw multiple lines within the browser on which the “balls” can be animated upon. Experiment also uses alternative sounds to illustrate bounce depth and rotation.

World of Solitaire

URL: http://worldofsolitaire.com/

world-of-solitaire

Another game which uses javascript for fun, World of Solitaire implements both gameplay and animation functionality inside the browser. No longer are you limited to getting your Solitaire fix from your desktop, and showcases just how far javascript has come.

Many Lines

URL: http://open.adaptedstudio.com/html5/many-lines/index.html

many-lines

As with “Contributors” mentioned earlier, many lines is another javascript experiment which utilises particlejs for its main engine. The multiple coloured lines follow the mouse movement in the browser using the canvas element.

Filed in: Web Design
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (3)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Poetry in Code. 7 unique artists of the digital age. | June 13, 2010
  1. WoW awesome collection of experiments.

  2. Alpha says:

    Awesome! I love such experiments. Especially chrome experiments.

Leave a Reply

Back to Top