Latest
Image resizing has been around since the early days of paint programs, but the ability to be able to resize parts of a given image based whether it’s content is considered important is a relatively new technology. Stéphane Roucheray’s Content Aware Image Resizing demo uses the canvas API to display the dynamically resized bitmaps, showing updates as the algorithm calculates which parts of the image should and should not be resized.
The spaceman isn't squished using this technique
How does it work?
First, the algorithm generates a grayscale image from the source. From the grayscale image it generates an edge detection and energy map. The algorithm then runs from the bottom to the top of the energy matrix looking for the pixel with the lowest energy, creating what is known as a seam of least energy. This seam is then removed from the original image and the result is becomes the source image to repeat this process again until the image is of the desired size.
Try the demo!
Bert’s Breakdown, created by Paul Brunt, is a beautiful looking platform game where you have to go around the level collecting Euro coins while avoiding deadly spiders. While some of the coins are straightforward to collect on your route through the level, others can be found hidden in the clouds; and some require to use mushrooms as springs to reach higher areas.
Bert stands by some flowers, contemplating how much money he will make today
This was Paul’s first venture using the HTML 5 canvas element, and although he had a few minor issues, he found that he could build what he needed “surprisingly quickly”. Paul claims, “the whole game, graphics and all, only took about 100 hours” – it sounds a lot, but when you check out the quality of the game, you can see where that time has been spent.
Works best in Chrome; and supports the Chrome Frame plug in for Internet Explorer.
To play the game, use the cursor keys to move left and right; and the space bar to jump.
Thomas Saunders has been making waves with the canvas element with his Wave Form canvas demo.
It, er, looks better in action..
Adjust the sliders along the top to change the wave form. It’s possible to make your wave dance in an almost seductive way. Give it a go!
Check out the Wave Form demo!
This sweet canvas-audio visualisation nicknamed “HTML5 Love” is courtesy of IO from 9Elements. HTML5 Love combines both the HTML5 canvas and audio elements with updates from social networking site Twitter.
Love HTML5? Love Canvas!
IO blogger Sebastian Deutsch says:
The music will only be played if the browser supports the audio tag. To detect if the audio or canvas feature is present we use the awesome modernizr library. We could have used a fallback solution like playing the sound via Flash. But this experiment is about HTML5 – and who needs Flash anyway?
Works best in Firefox 3.5.
Check out the HTML5 Love demo!
Paul Hamill has created this lemonade-esque demo with the canvas element. Just like lemonade, the blobs float from bottom to top. Click the canvas area to add more blobs, and change the colour of the blobs using the palette below.
Fizzilicious!
Check out the Floating Blobs demo!
Sandy is a 3D engine that prodominently works in Flash, but for a recent release have starting supporting haXe, a multiplatform language. As a result with support from some additional libraries, it is now possible to get Sandy 3D working with JavaScript and canvas.
Matthew Casperson has created some handy tutorials demonstrating how to take this approach to 3D, along with some impressive demos.
View the Sandy haXe demos, and also the tutorials.
For more information on Sandy, visit their website at www.flashsandy.org
