.demos
Just some animation and other demos. Not very useful.
- Animation of the phases of the Moon
- Big clock — sometimes you just need a big clock
- Binary count
Particles
Some simple particle animations using canvas
Blockout
A simple version of an old classic
Connected Graph Animation
- Connected Graph
- Connected Graph 2
- Connected Graph 3 (move mouse to interact)
- Connected Graph 4 (move mouse to interact)
Recursive Nested HTML divs
CSS 3D Demos
Some CSS-3D animations. The HTML is generated by JS, but the animation is pure CSS.
- Color Cube - RGB color cube
- Color Cube - showing the named CSS colors
- Color Cylinder - HSL color cylinder
- Color Line - a long line of colored boxes
- Circles 1
- Circles 2
- Circles 3
- Swirly
- Dizzy - nested 2D rotations
- Dizzy 2 - a simpler version
- Dizzy 3 - nested 3D rotations
- Boxes - a simple hover effect
- Boxes 2 - 3D rotation
3D Point clouds
These scripts predate CSS-3D and Canvas3D - they just use plain HTML, CSS and JS.
- Lissajous Knots - some ABC Logo lissajous knots, plus a few others
- Spherical Helix
- Helical Helix
- Toroidal Helix
- Helix
- Torus
- Sphere
- Random Points on a Sphere
- Surface Wave
- Cubic Lattice
- Random Points
Lunar Lander
Never finished. Needed terrain and collision detection. The lander flies though.
Rockets
Also unfinished. Need to add a second rocket and missiles! The rocket flies though.
Pong
A simple version of an old classic, written in plain HTML + JS.
Canvas vs SVG Comparison
Create random moving dots until the animation starts to crawl: Canvas is much faster than SVG, but SVG still gives pretty good performance up to thousands of dots, and gives you interaction via DOM events for free.
Random boxes and circles
thrilling...
- Falling
- Bouncing
- Random Boxes
- Random Boxes 2
- Random Circles
- Random Boxes - SVG version
- Random Circles - SVG
- Boxes: HSL Colors
