Here's a whole bunch of demos that I've made at some point fairly recently in my lifetime. Note that a lot of these are just quick and dirty experiments and likely have poorly documented and ugly code, but you might find a few pretty examples in there. Also note that I use Google Chrome and, as such, only test in Google Chrome. These are my personal experiments and not my professional endeavors, afterall. If the demo doesn't work in other browsers, email me and I might try and fix it.
The demos are automatically pulled from an svn repository every six hours so they are susceptible to change without warning, although I try to make a new demo whenever I want to change something radically. No, they aren't. I haven't worked with any demos in ages, so these are all stagnant.
heart ‒ link
heart+ ‒ link
Second edition of the heart demo. Particles swim through the hues of the rainbow and leave a pretty trail behind them. Clicking toggles a follow-the-mouse-mode.
heart++ ‒ link
jack ‒ link
Halloween special. A particle Jack-o-Lantern. Slightly modified the engine from the Triforce by forcing particles to only move in the dominant direction of their velocity vector. Exciting stuff, really.
triforce ‒ link
Another particle demo that forms a static image of a Royal Crest. Clicking will scatter the particles.
yinyang ‒ link
My first attempt at completely separating surface.js from the demo at hand. Reproduces the heart++ demo using two contrasting canvas elements. Note that the particles do not actually transfer between canvases - there are simply two canvases running the same code.
image ‒ link
Draws any image you want complete with cursor warping and clicksplosions. I used an improved version of the PHP script used in the cursive++ demo to break down an image file using different levels of pixelification. Large images need to be highly pixelified in order to have any sort of interaction due to the ridiculous number of particles needed to create a full image.
anatomical-heart ‒ link
An anatomical heart demo. I used the image processing PHP script from the image demo to break down a drawing of a real heart. By modifying the particle engine to draw particles relative to the center of the canvas, I'm able to simply multiply their destination positions by a constant and then divide by the same constant shortly after to create the illusion of a beating heart.
fireworks ‒ link
A firework demo. Fireworks automatically shoot up from the ground and make a colorful explosion that slowly falls and fades. Clicking launches additional fireworks, but the explosions are pretty CPU-intensive and can quickly overwhelm your computer.
vortex ‒ link
Oh, you know. A rainbow vortex thing. Moving the mouse moves the vortex's center, clicking reverses the direction of the spiral.
spiral ‒ link
The original purpose of this demo has escaped me as well, but I think it had something to do with gravity and orbiting... It's kind of pretty at least.
clock ‒ link
A basic, glowy analog clock that does nothing special. Loosely based on the glow demo.
glow ‒ link
Softly colored rainbow particles explode from the center of the screen and float to the edges. Moving the cursor up and down rotates the whole plane. I was way too lazy to implement a real method for depth-sorting, so... yeah. There isn't really any of that.
sparkle ‒ link
A pretty canvas with some sparkly particles.
fountains ‒ link
The original plan for this one has gone missing. Clicking produces a fountain of pretty particles that will float to random locations on the canvas. Particles are warped near the cursor.
blok ‒ link
bunnies ‒ link
Some sort of bunny-like AI. Each bunny has a number of various genes that affect its life, such as vision, speed, and turning speed. Initially, the bunnies are microscopic and invisible, but they eventually grow up and start eating stuff. The food (small, immobile yellow dots) quickly becomes scarce and many bunnies starve and die, yet a few survive and continue to reproduce. Large ears indicate excellent vision (these bunnies see with their ears, man) and male bunnies have a single horn on their forehead (much like unicorns). Large bunnies eat small bunnies (bunny life is vicious) and eventually they just engulf the entire screen as the larger bunnies grow and eat the smaller bunnies. Widespread ears indicate that a bunny is ready for mating, while closed ears indicate the bunny is currently pursuing its intended mate. The average genes of all bunnies is visible in the top left corner. Clicking allows you to focus on an individual bunny and view its genes in the bottom left corner.
platform ‒ link
A quick platforming engine I made. The goal is to grab the golden circle and then jump through the green escape portal before the box collapses or something. WASD and arrow keys move. Jumping at a wall and moving into it clings to the wall; holding both directions while clinging does a walljump.
sound ‒ link
story ‒ link
A small interactive story demo that uses jQuery animations to slide between pages.
story2 ‒ link
A much longer and darker story demo. It actually has a story.
cursive++ ‒ link
This could also go under the "Particle" heading
text-fade ‒ link
Paragraphs of text that fade in and out as you scroll.
text-glow ‒ link
Paragraphs that change color as you scroll down. Specific words and phrases will glow as the cursor gets closer.
type ‒ link
A small animated demo of a neat typographic effects inspired by an HTML5 Rocks post. I did all of the actual drawing off-screen and just used canvas shadow offsets to put the shadows on-screen. Additionally, I used a sine wave with a shrinking amplitude, shadow blur, and font size to create the wavy effect.