Latest
Berry de Vos has created a demo of how animated backgrounds (built with canvas) would work. The animated background consists of scrolling bars which slowly change angle and colour over time.
Still probably faster to use a GIF at the moment..
Berry has these hints on using a large canvas:
When I created the first setup for this demo I started by setting the height and width of the Canvas to the height and width of the page. This soon turned out to be quite heavy on the CPU usage at higher resolutions. So I made the Canvas a static size and let the browser resize the area to 100%. This works and performs way better.
Works best in Chrome.
View the Animated Backgrounds demo. You can also read about how he did it here.
Mark Stewart has created this fantastic canvas demo which takes a photo and turns it in to an impressionist-style painting.
Choose a photo from the list, or upload your own
You begin your journey in to impressionism by either choosing one of the available photos, or uploading your own. The source image is then used to determine the colours that are painted on the canvas element as you draw. Or you can let the application paint for you by pushing the start button.
There are different options to tweak from brush size and shape to opacity. Once you are done, you can save out your piece of art to share with others!
View the Impressionist demo
Michael Nutt has created this excellent tutorial on how to create a wave effect using canvas. By the nature of a wave effect, this means the tutorial covers drawing lines, curves, animation and transparencies.
Now you can also make waves!
Each of the 15 steps contains a comment about what has been changed, the source code, a preview of what has been created so far, and the differences in code.
Read the tutorial
Jacob Siedelin has once again been using his powers for good, with the release of this mathematics orientated canvas demo.
Fractals like the well-known Mandelbrot set (and many others) have that ability as do another category of mathematical creatures known as strange attractors… Among other things, that involves being very sensitive to initial conditions (butterfly -> wing-flapping -> tornado, etc).
Pretty...
The Strange Attractor demo offers the user a variety of different options, which can influence the demo’s output. First, there are a selection of formulas to choose from; then you can use the “Compositing” option to add a glow to the image and the “Stretch” option stretches the image to fill both the x and y axes. Click the image after rendering to bring up these controls. Leave “Seed” blank to automatically find a new attractor, or enter previously found seeds (listed in the Gallery) to recreate that particular attractor.
Use the Strange Attractor application
Woo, it’s time to party like it’s two thousand and nine… hold up it is! Michael Nutt had a party and it left a mess all over the canvas with it’s bright lights and loud music.
Ain't no party like a canvas party
Works best in Google Chrome.
View the Canvas Party
Mike Pinkowish has created this canvas simulation of the Game of Life, a cellular automaton example originally devised by John Conway in 1970.
The game of life: do not pass GO, do not collect 200
Mike has added a host of extra options to keep your game of life interesting such as render speed, block size, and premade patterns. And it is also possible to spawn new life forms by clicking and dragging the mouse around the canvas.
View Life on a Canvas
