Latest
Gil Megidish has a bit of an obsession with Another World, the famous platform puzzle game from 1991 also known as Out of this World in North America.
Over the years, he’s ported the game to PSP, PS2, GBA and PC.. and now he’s ported it over to canvas!
Retro gaming goodness
There are a few graphical glitches within the game due to the nature of the port, but the version is playable with patience and a great example of what canvas can do!
For those of you who are stuck from the start, you’ll need to swing the cage to escape and find a gun to stand a chance of survival! If you’re looking for further guidance, there are many walkthroughs available. Start at Part 2.
Check out the Another World canvas game
After being inspired by 9elements HTML5 Love demo, Kent Brewster decided to have a go at creating his own canvas demo, called Collide-O-Scope, which displays an effect similar to that found in a kaleidoscope.
The demo uses several sets of randomly-generated circles, which are projected seven times using translations and reflections to create the kaleidoscope effect. Each set has an X and Y vector and before each move the demo runs collision detection, altering those vectors if they make contact. By clicking on an area within the canvas, you can alter the effect.
No, you're not intoxicated.
Kent explains how he produces the blurry circle effect:
The fuzzy/translucent effect comes from building up a number of very faint circles, on on top of the other. Depending on the colors, you’ll see fuzzy blobs, sharp stained-glass sections, and other interesting stuff when two sets of circles overlap.
Nice work Kent!
View the Collide-O-Scope demo
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
