[ NOTE: This post was written using the Visual Studio 11 beta and Windows 8 Consumer Preview…as with any pre-release software, the code and concepts are subject to change in future versions ]
One of the nice features of the new JavaScript Windows Metro style app templates in the Visual Studio 11 beta is that they provide built-in support for databinding, using sample data in a JSON array. Folks who have experience in the XAML world may not see this as a particularly big deal, since Silverlight and WPF have supported databinding for a long time.
[This is part 5 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas. In Part 4, I showed how to transform the drawing context and scale, rotate, and skew your drawings.]
Get Moving
Simply defined, animation is a technique that provides the illusion of movement by changing the position, size, shape, or other properties of a drawn object over time. In traditional animation, artists draw a scene one frame (or cel) at a time, by hand, changing each scene just slightly with each new frame. Thankfully, we don’t have to go through such a laborious process to create animations with HTML5 Canvas.
So far in this series, we have only drawn shapes on our canvas once. In order to start using animation, we need a way to draw multiple frames, and at a rate that provides the necessary illusion of smooth movement. But first, let’s draw a single frame of content, and we’ll keep it nice and simple…we’ll use the same reference grid as in previous examples, and we’ll add a small white box to our canvas, using the following code (if you’re new to the series, see Part 1 for the page template we’re plugging this code into, or the jsFiddle below for the complete finished example):
1: $(document).ready(function() {
2: var canvas = $("#myCanvas").get(0);
3: var context = canvas.getContext("2d");
4: var posX = 0;
5: var posY = 75;
6:
7: function renderGrid(gridPixelSize, color)
8: {
9: // grid code omitted for brevity
10: }
11:
12: function renderContent()
13: {
14: context.save();
15: renderGrid(20, "red")
16: context.beginPath();
17: context.fillStyle = "White";
18: context.strokeStyle = "White";
19: context.fillRect(posX, posY, 10, 10);
20: context.restore();
21: }
22:
23: renderContent();
24: });
In the code above, we’re using jQuery‘s ready event to draw our reference grid and a small white rectangle on the canvas. I’ve also added a couple of variables (in bold) to hold the current position of the rectangle. Here’s what our example looks like so far:
OK, so it’s a bit plain perhaps, but we can make it better with animation. To get started, as noted earlier, we need a way to draw multiple frames at a specific rate, and for that purpose, most folks use what’s called an animation or game loop, which looks something like this:
1: function animationLoop()
2: {
3: canvas.width = canvas.width;
4: renderContent();
5: posX += 5;
6: if (posX > 500)
7: posX = 0;
8: setTimeout(animationLoop, 33);
9: }
In the code above, I’ve created a function that will take care of drawing a frame of our animation each time its called. Recall from earlier parts of the series that setting canvas.width will reset the canvas. The rest of the code simply draws our content, then adds 5 to the posX variable which determines where our box is drawn, and if posX is larger than 500, resets it to 0. The last line is key…we use JavaScript’s setTimeout function to automatically call animationLoop every 33 milliseconds, which gives us a frame rate of approximately 30 frames per second (to get FPS, just take 1000ms and divide by the target frame rate – 1000 / 30 = 33.3333333333333). Here’s what it looks like:
Note: If you can’t play the video, you can also see the code in action by clicking the Result button below…
Here’s a jsFiddle for the above example:
As you can see, it’s pretty easy to get things moving in JavaScript and Canvas. Of course, moving a little white box is just the start. Let’s go back to our pal from the previous entry in this series, and have a little more fun. We’ll add a few fields to keep track of some additional properties of the object we’re drawing (note that for more complex cases, it probably makes sense to look at creating objects to encapsulate all of the relevant properties for a given shape that you’re drawing), as well as a new function to aid in drawing our shape (new/modified code is in bold):
If everything’s working as expected, here’s what it should look like:
Note: If you can’t play the video, you can also see the code in action by clicking the Result button below…
Here’s a JsFiddle with the final code from this post, if you want to play with the APIs:
Summary
Animation in HTML5 Canvas is pretty easy and straightforward to accomplish. Of course, there’s much more you can do, including abstracting some of the animation tasks so you’re not doing quite so much low-level drawing, or even taking advantage of 3rd party libraries to simplify your life.
At the end of what’s been a kind of tough week, with a spring cold making its way through my entire family (one of the perils of having young kids at home), I got a nifty package in the mail. Inside was an anti-static foil bag containing the parts for a nifty addition to my Gadgeteer hardware collection, the new MIDI Module created by my friend and fellow Microsoftie Pete Brown. I should have thought to snap a photo of the kit before assembling it, but I was sufficiently excited I could hardly wait to heat up the soldering iron. Here’s what the finished module looks like:
So, OK, you might ask. Looks neat, and all, but what does it DO?
Well, for the uninitiated, MIDI stands for Musical Instrument Digital Interface, and the short definition is that it’s a serial protocol specification that lets musical instruments “talk” to one another. MIDI allows devices to communicate musical information (which note to play, how loudly to play it, etc.) digitally in a highly efficient format. Instead of creating a waveform and pushing it through limited bandwidth pipes, MIDI allows a controller device to simply provide instructions on what note should be played, which channel it should be played on (MIDI supports up to 16 channels per interface), along with any information on the specific sound (referred to in MIDI parlance as a patch) and parameters (referred to as control change) for the target device. Then the controller leaves the actual generation of the sound up to the receiving device.
So what Pete’s module does is allow a .NET Gadgeteer program to act as a sender or receiver of MIDI data. Which can be pretty fun stuff, with just a little work.
![ECBasicAnimation1_thumb[4]_2](http://dhcontent.blob.core.windows.net/images/2015/06/ECBasicAnimation1_thumb4_2.png "ECBasicAnimation1_thumb[4]_2")
