Super Duper Simple Animation Using HTML5 canvas element and JavaScript Tutorial

Ok so I have been using codecademy, which is great to get people started on coding but I feel that codecademy needs to stress more going beyond codecademy  to advance coding skills.

Anyways, I still think codecademy is pretty cool and this post is based on a codecademy lesson called "Project: Draw with JavaScript".

The lesson is pretty well described by the title and it teaches people how to use HTML5 and javascript to draw on the screen which is pretty sweet.  So I took the lesson one step further and decided to learn how to do some really simple animations using this mozilla tutorial.

Main Code and Results

Here is what I got:




I am going to go over the animation portions of the code, if you want to learn the other parts I suggest checking out codecademy because it gives a great rundown.  If you are using the right browser you should be able to see that the code is just rotating a square and text on a screen (HTML5 canvas tag is not supported by certain IE browsers).

HTML code

Here is the html code is used by the function:

init() function and JavaScript code

The first part of setting up a animation involves setting up your init() function:


In the init() function it will run whatever functions you put inside and it is also where you want to load any images that you will use in your animation.  It is also where you want to call the function which will be handling the actual animation, in this case  it is setInterval(animationFunction,time in milliseconds).  Also it is important to remember to declare the init() function elsewhere in your script!

JavaScript code for beware() function

Next up is the beware() function, which is used to run the animation.
Many parts of the drawing parts of this function are covered in the codecademy JavaScript drawing lesson so I will not cover them here.

Line by line overview of animation function beware()

The parts which I added to get the animation going are on lines 05, 11, 12, 14, 16 and 25.  This function will be ran through again and again every 120 milliseconds as specified in the setInterval function.

When animating the first step is to clear the screen of everything that is not a static background.  On line 05 this is accomplished by calling the clearRect function which clears the size of the canvas specified in this example in the html code above in the JSfiddle.

Next the save() function is called on line 11 which saves the last drawn state onto a stack.  So in this case it is saving a cleared screen with just the circle drawn onto the stack.

Usually when using javascript drawing function on a 2D canvas the origin (0,0) is the upper left corner of your canvas.  On line 12 this is changed by using the translate(x,y) function and the center of the canvas is made the origin for this example.

In this example the new animations are based on the computer time which is grabbed by making a Date() object.   Date() methods are used in line 16 in the rotate(angle) function to specify a new angle every 120 milliseconds.

On line 25 the restore() function is called which pulls the last saved state off the stack and displays it.

So none of this is done using ActionScript, which for more complicated interactive features might run faster, at least for the time being.  But for simple and quick animations it is a cool feature to include.  Another use might be to make some very simple games if interactivity is integrated.

First Post

Starting a minor code journal. I started out coding through a school summer internship for computational biology where I was introduced to perl and worked on a linux cluster, basically using perl to parse data and R to analyze data.  I worked on a  project analyzing molecular dynamics simulations involving a lectin from a blue-green algae.

The computational intensity of the project sparked my interests in computer science so I decided to switch to computer science. For the past year or so I have taken classes in C++ and have learned the OOP paradigm.

Projects (all in c++) I have worked on so far include:

•  a RPN-calculator with the Qt framework for a gui
•  poker graphically displayed using opengl
•  a multi-threaded chat server and client using the Qt framework and gui 
•  An algebraic expression calculator that graphs using the Qt framework
•  Various other minor projects such as a BigNum calculator (to get beyond   overflow problems) and a project involving Bitwise Multiplication 

While I am supportive of open source and free software (I do all of my coding using Arch Linux), I do not post or give out code from classwork because I do not like the idea of people using my code to help them finish CS homework/tests.  The less competition in the job market the better.

What I do plan posting about is my own private projects outside of class.

Currently, for fun I am using Code Academy.  However, after a year or so of learning C++ I find it a little disappointing because it sort of confines users to a box.  I feel the same way about blogger so hopefully soon I can get a domain name registered and set up my own custom blog for didactic purposes.

Over the summer I also plan on getting familiar with opengl using this free online book Learning Modern 3D Graphics Programming. I am planning on starting a project using opengl for the graphics and with Qt for windows management.

My plans for the blog are basically to discuss my meager programming experiences and some code alongside my opinions on learning programming.