.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.
This was a first version of what became bigclock.app.
Particles
Some simple particle animations using Canvas.
- Atoms — elastic collisions between particles
- Atoms 2 — interactive version: move mouse
- Gyre
- Fountain
- Swirl
- Rain
- Sine Waves
Binary Count
- Binary Count
- Binary Count 2 - animated
- Binary Count 3 - animated
- Binary Count 4 - uses Canvas instead of DOM - much quicker?
- Binary Count 5 - Canvas take 2
Blockout
A simple version of an old classic.
Connected Graph Animation
- Connected Graph
- Connected Graph 2
- Connected Graph 3 - interactive version: move mouse
- Connected Graph 4 - interactive version: move mouse
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 missiles! The rockets fly 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
