Creating Motion Trails

Have you ever seen a comet or a meteor streaking across the sky? It looks something like this:

From looking at this picture (of the Hyakutake Comet) can you tell what direction the comet is moving in? You can! The comet’s tail holds the answer. The trail of gas and dust just behind the comet seems to indicate that the comet is moving in a left-to-right direction. Ignoring for a moment that we are looking at a real thing, this idea of indicating motion by leaving behind a trail is a very common animation technique. There are many names for this, but all the cool kids call it motion trails.

Comets are cool and all, but let’s look at something closer to home. Move your mouse around in the following example:

The first thing to notice is that we have a circle that follows the mouse cursor. That is something you already know all about, so that isn’t particularly interesting. The interesting thing is the motion trail our circle leaves behind as it is moving around. It gives your circle an added sense of realism as it is moving around our canvas.

In the following sections, we’ll learn all about how motion trails work and the handful of lines of JavaScript you need to bring them to life.

Onwards!