Logan Franken

I’ve been playing around with the canvas element lately, and I came up with a few fun ideas that would require capturing the speed of the User’s cursor movements. I looked around a little and only found a few bare scripts here and there, so I decided to package the logic into a jQuery plug-in called Cursometer.

How to Use

Using Cursometer is easy. Simply include the core jQuery library (1.6.2+) and the Cursometer plug-in script (minified):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="script/jquery.cursometer.1.0.0.js"></script>

And then hook up Cursometer to an element:

$('canvas').cursometer();

Now Cursometer will start tracking the speed of the User’s cursor movements whenever they move their mouse over the canvas elements on the page. You can retrieve the User’s cursor speed at any time with the getCurrentSpeed function:

var currSpeed = $('canvas').cursometer('getCurrentSpeed');

The speed is measured in pixels per milliseconds.

Options

Cursometer provides a few options to let you customize the behavior of the plug-in:

$('canvas').cursometer({
	onUpdateSpeed: function(speed) { },
	updateSpeedRate: 20
);

The onUpdateSpeed is a callback function that is called whenever the plug-in polls the User’s cursor movements for calculating speed. The User’s current cursor speed is passed as the first parameter. Thus, if you have something that is dynamically controlled by the speed of the User’s cursor movements, you would want to put the logic for updating that dynamic piece within this function. Check out this example, in which the speed of your cursor determines how fast Mario runs.

On a related note, the updateSpeedRate controls how often (in milliseconds) the plug-in polls (or checks) the User’s cursor movements. The higher the number, the more accurate the measurement but the lower the performance. The default value is 20 milliseconds.

Behind the Scenes

This plug-in was a little trickier to write than I originally anticipated because I ended up needing two polling loops: one for continuously checking the User’s cursor speed (controlled by the updateSpeedRate described above) and another for checking the the current position of the User’s mouse (controlled by a secret option called captureMouseMoveRate). The reason for this second loop was to create an adhoc event that would capture the User’s cursor position, without pounding the DOM with an unnecessary and relentless series of mousemove events (I got the idea from this Stackoverflow article).

I was messing around with the HTML5 canvas element this morning, and I came up with something kind of fun. It’s basically a puzzle built with a series of rotating concentric circles that you can drag. Here’s a screenshot:

Check it out. Keep in mind that I didn’t add any logic to confirm that you’ve won, however, so don’t knock yourself out. Feel free to download the script and fiddle with it. It’s pretty simple to switch out the image and add more circles:

var puzzleImage = new Image();
puzzleImage.onload = function() {
	var canvas = document.getElementById('puzzle-canvas');
	var puzzleCanvas = new PUZZLE.PuzzleCanvas(canvas);
	var puzzle = new PUZZLE.PuzzleController(puzzleCanvas, puzzleImage, 5);
};
puzzleImage.src = 'image.jpg';

I didn’t realize that it would be so wonderfully easy and straightforward to work with the canvas element. Check out this ridiculously simple code for displaying the circle with the image displayed inside:

// Start composition
context.save();

context.globalCompositeOperation = 'source-over';

// Move canvas to center of Circle to simplify rotation
context.translate(puzzleCircle.x, puzzleCircle.y);
context.rotate(puzzleCircle.rotation);

// Draw the circle
context.beginPath();
context.arc(0, 0, puzzleCircle.radius, 0, Math.PI * 2, false);
context.clip();

// Draw the image
context.drawImage(puzzleCircle.image,
	-(puzzleCircle.image.width/2),
	-(puzzleCircle.image.height/2));

// End composition
context.restore();

First, we save the state of the canvas so that we can restore the state after we’re finished drawing, allowing us to start with a clean slate before rendering each circle.

Second, we set the globalCompositeOperation to “source-over” so that the newest circle will appear on top of the previously displayed circles.

Next, we shift the canvas using the translate method to get the origin (0, 0) point of the canvas in the middle of the circle. This makes rotating the circle a cinch because the rotate method rotates the canvas elements around the origin point. If the canvas origin and the circle’s middle are the same point, then the rotate method ends up rotating the circle itself.

We call clip to mark the circle shape as a mask for the image. Finally, we just throw in the image with drawImage and we’re finished!

I’m pretty pumped for the upcoming The Legend of Zelda: Skyward Sword, so I decided to try and recreate Navi with only CSS. Here’s the final result (in Firefox 4.0):

To get the glowing effect, I layered multiple box shadows on top of each other:

box-shadow: 0 0 20px #97B2DF,
			0 0 20px #97B2DF,
			0 0 20px #97B2DF,
			0 0 20px #97B2DF,
			0 0 20px #97B2DF,
			0 0 20px #97B2DF,
			0 0 20px #97B2DF,
			0 0 20px #97B2DF,
			0 0 20px #97B2DF;

For the wings, I applied a heavy border radius and then rotated them with transform:

border-radius: 0 20px 200px 200px;
transform: rotate(-40deg);

View the live demo!

Of course, here’s the obligatory (and unfair) IE6 comparison: