Fat Mouse UI Experiment

Occasionally, I like to give myself a strange problem and see what comes of it.

This problem started out as, what if the mouse pointer was fat? Strange right, but think about it, interactions as we know it would be vastly different. So, it was an interesting idea to consider while raking the yard. As well, since following Mozilla Labs lately, I’ve been inspired a bit to think differently… The things they are doing will definitely get the creative juices flowing if you’re in a rut.

An idea that started me thinking it would be doable is “painting” to select units in RTS games (see Halo Wars). The selection tool is generally a circle that you move over units and they become ‘selected’. A fat mouse.

As a quick study of the problem, I decided to do this:

  • Use a simple web page as the medium (well, because I’m a web developer).
  • Make the mouse pointer 75×75 pixels, circular.
  • As the mouse area moves over links, you should be presented with a way to interact with them.
  • Only worry about it in FF3
  • Do it all in Javascript

Ok, simple goals, but this is just a quick case study. Here are my initial results:

Fat Mouse Experiment from Daniel Goodwin on Vimeo.

The biggest problem, for me at least, was the geometry involved. I wish I paid more attention in geometry class, but I am happy to say I have a renewed interest in the subject. I’m definitely going to pick up an old geometry textbook for future reference. But to get to the core of the solution, I basically needed to detect collisions between the circle and the anchor tag rects. Here are some of the steps I took to determine collisions:

  • Determine the location of the 4 corners of a link: This was fairly simple, I create and store points for the top/left of the anchor to the top/left of the browser. Then to get the other corners, just take into account the width and height from the top/left point of the anchor.
  • Determine when a circle collides with a corner of the anchor rect: I have to constantly monitor the distance from the center point of the circle (the mouse x/y) to the corners of every link on the page as the mouse moves. There are TONS of calculations going on here…. I really should fire this up in Chrome to see how it performs. But back on task, if that distance is less than the radius of the circle, we’ve hit a link corner. However, this does introduce problems where if the link’s width is more than two times the radius, and the mouse x/y is inside this “blind spot”, the code does not think the mouse is over the link.
  • Speed: For the many distance calculations, a javascript memoize helper spread this up greatly, though I think with prolonged use (as it stores every possible mouse position on the page to nth anchor corner) something’s gotta leak…
  • Present a way to interact with the link: Now that we know we are over a link, we need to identify it with a marker. The marker had to gravitate towards the link, but stay constricted to the bounds of the fat mouse. More geometry…

I hope you found this at least a bit entertaining. Are you experimenting with something? I’d love to know… please share in the comments!



  1. Woh, that’s pretty interesting stuff! Is it all using jQuery, with a touch of Canvas for the circle creation? I wonder if maybe something like this could be useful on mobile devices to increase the perceived click area on a link without actually increasing the link size. Either way, cool stuff.

Comments are closed.