Hernan Amiune has created this simple raindrop canvas demo which he has nicknamed “Javascript Particle System Hello World”.
Raindrops keep falling on my head
Comments from the author:
This is a very simple example to demonstrate how to create a basic object oriented particle system using javascript and the html canvas element… Each particle has the following properties:
position: the postion in the space, (x,y) coordinates
velocity: the velocity of the particle, (vx,vy) vector
life: the amount of time the particle is going to live
time: the time elapsed since the particle was created
Jacob Seidelin has created a second canvas related cheatsheet, this time for WebGL. WebGL is the 3D extension of the canvas element, based on OpenGL ES 2.0.
An excellent resource
It’s an exciting time for canvas with the event of WebGL meaning we should start seeing 3D demos appearing on these pages shortly!
Twinkler is a dynamic visualisation of your Twitter contacts. Entering your username, Twinkler will present a view of who your contacts are and who’s connected to who. There are also suggestions offered about new contacts which your friends are following who might be of interest to you.
All your Twitter contacts in one place
The canvas element is used to present your floating contacts, and each contact is clickable for more information which appears on the right.
Heather Arthur has been busy finding a creative new use for canvas with Rainbow, a browser extension for Firefox.
I wanted to grab the color scheme of whatever website the user is viewing… The problem with getting the colors from the DOM is that websites use images and gradients so sometimes you can’t get the overall color scheme just from looking at the CSS colors. Luckily, you can capture the color of every pixel on a webpage from an extension using the HTML 5 standard canvas.
Twitter's colour palette
Browser extension Rainbow draws the entire webpage on to a canvas using the drawWindow function. It gets an array of pixel values used with the getImageData function and then loops through each pixel value in the array counting each colour’s frequency. Hierarchical clustering is then used to merge similiar colours before returning the final palette.
Kenneth Jorgensen has created this interesting growing canvas tree demo.
Each tree is different
Starting from the trunk, the demo uses a series of ’snake’ objects which draw themselves as circles on the canvas. After each frame they randomly alter their angle, which causes them to (eventually) split apart in to final the tree shape.
Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.
