Subimago
i

Trails with html5 canvas

Here you can see little entities with trails which follow the mousepointer. Press the left mouse button to spawn additional entities. Start and stop the animation by pressing Enter. To delete all entities press Delete. Press Space to start over with a new set of entities. Inspired by Steering Behaviors For Autonomous Characters by Craig W. Reynolds.

I use the html 5 canvas element for 2D rendering. To compute a trail I buffer the positions of a moving entity over time and draw a polygon on top of those positions. The polygon becomes gradually thinner so that it gets the desired trail look. To draw a polygon i use the canvas procedures beginPath() and lineTo().

Hit Space to generate new random entities and hit Enter to stop the animation.