Fun With Canvas

I've been learning to use Canvas these past couple of days. It's a tool that "allows for dynamic, scriptable rendering of 2D shapes and bitmap images" according to Wikipedia. At the bottom of this post are some good resources for anyone who is interested.

It's amazing how the most difficult things to program often look very simple.

First: Chase the Circle
This looks much simpler than it is. In order to get a natural movement from the circle I had to subtract the coordinates of the mouse from the coordinates of the circle's centre. AKA: Vectors! (Thanks Mrs. Hill!) Then I had to normalize the vector and add the normalized result to the original coordinates of the centre. Craaayzaay.

If you'd like to know how to catch the circle (by cheating), you can highlighting the next line. There are a few ways to do it.
Right click, then move your mouse to the circle.



This one is my favourite of the three: Circle Drawing
It started off with a funny glitch while trying to make "Chase the Circle", but I liked it and decided to make it its own project. Shea mentioned that it looks like Windows when stuck. I wasted a lot of time playing around with it. Refresh the page if you want to start over.












Last one: Sweep
I intend to turn this one into an actual game. I was thinking the objective would be getting the circles into their proper "goal posts" by colour. I welcome suggestions/ideas!
The challenging aspect with this project was applying the functions previously used on one circle to an array. Working on this one made me feel much more comfortable with Javascript EventListeners, functions, naming conventions, and the organization of code.

Oh what fun :)


Resources:
http://www.w3schools.com/html/html5_canvas.asp
http://www.html5canvastutorials.com/tutorials/html5-canvas-element/