15.2 Mouse Trail (Eloquent JavaScript Solutions)

15-2 Eloquent Javascript Solutions.js

<style>
  .trail { /* className for the trail elements */
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: teal;
  }
  body {
    height: 300px;
  }
</style>

<script>
  let dots = [];
  let radius = 3;
  function addToTrail(x, y) {
    let dot = document.createElement('div');
    dot.className = 'trail';
    dot.style.left = x - radius + 'px';
    dot.style.top = y - radius + 'px';
    document.body.appendChild(dot);
    dots.push(dot);
    setTimeout(removeFromTrail, 500);
  };
  function removeFromTrail() {
    document.body.removeChild(dots.shift());
  };
  function mouseTrail(e) {
    addToTrail(e.pageX, e.pageY);
  };
  document.addEventListener('mousemove', mouseTrail);
</script>

15.2 Mouse Trail

In JavaScript’s early days, which was the high time of gaudy home pages with lots of animated images, people came up with some truly inspiring ways to use the language.

One of these was the mouse trail—a series of elements that would follow the mouse pointer as you moved it across the page.

In this exercise, I want you to implement a mouse trail. Use absolutely positioned <div> elements with a fixed size and background colour (refer to the code in the “Mouse Clicks” section for an example). Create a bunch of such elements and, when the mouse moves, display them in the wake of the mouse pointer.

There are various possible approaches here. You can make your solution as simple or as complex as you want. A simple solution to start with is to keep a fixed number of trail elements and cycle through them, moving the next one to the mouse’s current position every time a "mousemove" event occurs.

Hints

Creating the elements is best done with a loop. Append them to the document to make them show up. To be able to access them later in order to change their position, you’ll want to store the elements in an array.

Cycling through them can be done by keeping a counter variable and adding 1 to it every time the "mousemove" event fires. The remainder operator (% elements.length) can then be used to get a valid array index to pick the element you want to position during a given event.

Another interesting effect can be achieved by modelling a simple physics system. Use the "mousemove" event only to update a pair of bindings that track the mouse position. Then use requestAnimationFrame to simulate the trailing elements being attracted to the position of the mouse pointer. At every animation step, update their position based on their position relative to the pointer (and, optionally, a speed that is stored for each element). Figuring out a good way to do this is up to you.