Canvas Gallery

Animations using HTML5 Canvas and JavaScript


1. Circle In A Circle

Playing around with circles. This is an old logo that I used to have on my blog. Now it spins.



2. Follow The Leader

Bow down yellow blobs to the power of my mouse cursor! These yellow blobs follow the mouse. (Not so great on mobile)



3. Bounce

Bouncy balls - enough said.



4. Bonfire Night

Fireworks! I wrote this on the train to Cambridge for Bonfire Night. I had no Internet on the train and couldn't remember how to generate random numbers in JavaScript, so I hacked together a way to semi-randomise the fireworks.



5. Chasmani Pops

Each pop up has a random size, font and colour. Once a pop up is fully drawn it is deleted from JavaScript memory so this can run forever without slowing down.



6. Ants!

Ants that crawl around the screen. This one is a little bit unsettling.



7. Worker Ants

These ants now do your bidding! If an ant encounters some food (purple blobs) it will take it to the nest (white blob). You can drop more bits of food by clicking the screen.



8. Fractal Tree

Fractals are mathematically generated patterns that are often beautiful. This fractal tree was built using a recursive loop, which is often a useful way to make fractal patterns.



9. Orchestral Manoeuvers

This canvas is inspired by Factory Records and Peter Saville's iconic album sleeve design for Orchestral Manoeuvres in The Dark. Click on it to switch the colour scheme.



10. Butterflies

Some butterflies at night, or should that be moths? Whatever - they are things that fly about and it is easier to see them against a dark background.



11. Smart Rockets

Ok this is cool. These rockets learn the path to the target using an evolutionary algorithm - this is machine learning baby! The rockets that get closer to the target are given a higher fitness value and so are more likely to pass on their genes to the next generation.



12. Smarter Rockets

The smart rockets return, this time with an improved animation and a wall in the way of the target. Will they find a way around the wall?



13. Boxes

An isometric box. Click on it to see what happens.