HTML5

In order to learn this amazing new technology, I started some little projects to explore elements of HTML5, focusing on Canvas. Here are some stand-alone examples, if you're interested in learning HTML5, the source code of these pages may be a good place to start.

Ball Pit

With a basic JavaScript physics implementation, this project has a randomly generated set of balls that bounce around within the canvas. You can increase the number of balls to as many as you would like - get up into the thousands and it becomes a great JavaScript engine speed test for your browser.


Bezier Curves

HTML5 Canvas has support for drawing both Cubic and Quadratic Bezier Curves. What's the difference? This is an interactive canvas with one of each type of curve. Hopefully interacting with each will help you decide which to use.


Orbit

Thanks to Newton, it’s pretty easy to model the effect gravity has on a group of ‘planets’ in a system. Each planet has a mass, direction & speed... watch as they orbit & smash into each other.


Fraktal

Click to generate a random fractal that grows lighter blue and thinner as it reaches across the screen.


Wolfram Cellular Automata Explorer

Stephan Wolfram wrote an interesting book about some abstract math stuff. One of his main points, though, was that complete randomness can arise out of very simple rules... and he demonstrated this with cellular automata. This is a HTML5 implementation of the rule-based system, making the automata rules easy to play with.


PXLLTTR

This interactive tool takes some text, and pixelates it. Type your text, choose your font, and adjust sliders for text size and pixel size. It's a fun, interactive text / art mashup.


Parallax

Scroll left and right through an amazing forest of gray rectangles. This is another interactive canvas that explores the 3D concept of parallax (where objects that are "closer" to you seem to move faster than objects which are farther away).


Squig

I don't know, they're squares attached to rubber-bands... or something... You can grab them and launch them around.


Zoom & Fade Effect

The tiles on the main page of mattlag.com are individual canvas elements. They each use this effect of simultaneously zooming and fading in a .png image. I used this project to find good zooming and fading timings for the effect.