Latest
Scott Schiller, author of the excellent Flash/JavaScript plugin SoundManager2, has created some funky 360 MP3 Player User Interface demos using canvas.
Scott says:
This is a version of the “360-degree player”, a demo packaged with SoundManager 2 (JS+Flash sound API) that uses Canvas to draw pretty waveform and spectrum EQ graphs around a circular UI that shows load and play progress.
The 360 UI works on the basis of decorating plain old HTML links to MP3 files, allowing play, seek, showing progress etc. using the canvas element.
Check out the 360 MP3 Player, and if you aren’t already familiar with SoundManager2, check out it’s official site.
Kevin Geer has submitted this beautiful demo of a living, breathing dragon which flaps it’s wings in to a heart shape. The dragon animation is composed of recursive functions., instead of loops.
Check out the demo!
This binary clock is a simple but clever demo of a binary clock using canvas.
Hope you know binary...
Not sure how it works? The circles each represent a binary count – when they are filled they represent 1 and when they are empty they represent 0. From the left to right and then downwards, the values represent 1, 2, 4, 8, 16, 32. To get the number 11, the circles 1, 2 and 8 would be filled (1 + 2 + 8 = 11).
Check out the Binary Clock
Turbomilk, specialists in creating icons, have developed Iconza – a canvas based Mootools application. Iconza provides a collection of free icons that can be dynamically coloured and resized to your own requirements.
Choose a predefined colour, or hit the colour box to make your own
Check out Iconza Iconza
AlteredQualia’s Image Evolution is a interesting canvas demo based on an idea by Roger Alsing who asked: “could you paint a replica of the Mona Lisa using only 50 semi transparent polygons?”
Image Evolution takes this one step further by allowing you to specify the target result image, the number of polygons, the mutation level and even apply a variety of effects.
Sit there long enough and you can paint your own Mona Lisa
The evolution happens as follows:
Firstly, setup a random DNA string to form the application start. Then:
- Copy the current DNA sequence and mutate it slightly
- Use the new DNA to render polygons onto a canvas
- Compare the canvas to the source image
- If the new painting looks more like the source image than the previous painting did, then overwrite the current DNA with the new DNA
- Repeat from step 1
Check out the Image Evolution demo
Pipes, built by Yahoo, is an interesting example of how using the canvas element can enhance the experience of a web based application without needing to resort to Flash. In a world where more and more applications are moving to the web, Pipes offers an insight in to how we can make applications more interesting.
Pipes is a powerful composition tool built by Yahoo designed to aggregate, manipulate, and mashup content from around the web. Simple commands can be combined together to create output that meets your needs. For this application, canvas is used as a simple visual tool to represent the pipes themselves.
Connecting the pipes to make a feed
Check out Pipes; watch the video to learn how to build your own Pipe or view our special canvas flavoured feed
