Moving Graphics

Graphics are great but moving graphics are better. These are similar to a mini cartoon. They can either be autonomous or interactive. This week we will focus on programs that rely on math. Over the next 2 weeks, we will look at how to make your graphic interactive.

So far, all of our graphics have been stationary. Now, we will incorporate in a function that repeats our code constantly. This function is the draw function. The draw function looks like this:

draw = function(){

repeated code

};

There are no parameters to put in the parathesis so don’t worry about putting anything in there. Any code you put in the curry brackets will be repeated. This is also where you will tell the computer to move a section of the picture or change an aspect of the picture at a certain increment.

You can make things move across the screen, make things bigger or smaller, and change an object’s color. Whatever you choose to change, it needs to have a variable. These variables will not go in the draw function.  To make these changes, you will need to use the math skills we learned earlier. You can use addition, subtraction, multiplication, and division when animating things. This code will be placed at the end.

Let’s say you want to add 10 to the y-coordinate ,that has the variable name of y1, of a line each time the code is repeated.

Your code will look like this: y1 = y1 +10;

No matter what math operator you want to you, the general format for the animation code is the same.  You need to tell the computer what you are changing and how you are changing it. You can also use a variable as your increment of change.

For example, if you want to increase the size of a rectangle exponentially (ie repeatedly multiplying the size of the rectangle by itself). You can use the variable assigned to the rectangle’s width or height.

Your code would look like this: rectW = rectW*rectW;

Like any other part of your code, don’t forget your semicolon.

Leave a Reply

Your email address will not be published. Required fields are marked *