Animating bitmaps with math
- Next steps
Viewers: in countries Watching now:
- Installing EaselJS
- Understanding how Canvas draws and animates
- Drawing lines and strokes
- Drawing with graphic primitives
- Using the chaining and compacting commands
- Animating shapes
- Working with text
- Importing bitmaps and vector graphics
- Working with sprite sheets
- Handling mouse events
Animating bitmaps with math
If we want to make our shaking be more violent, we can multiply this by a number. I am going to save and refresh and you can see that it's shaking more violently. Now you can't really tell but the random number is making our ship shake only to the right and down, because the increments are always going to be positive. I'll show that by making our increments huge. If we want to make sure that this is going to be centered we need to just subtract -.5 from our random number before we multiply it. So I'll cover it with parentheses and subtract .5 from our random number.
If you feed this sine or a cosine function an increment over time, the functions are going to generate a number between -1 and 1, and the numbers are going to increment in a fluid like motion, which is exactly what we want for a lot of animation problems. So if I just do this--I am going to save this and refresh--my animation is going to reset right here. Now that's happening because I haven't fed a number into the sine function. So I am just going to put in a number, just any number and you'll see that it will reset back to the center. So the sine function by itself, it's not going to do anything.
To make it work, it needs to be fed a constantly increasing number. Now most people usually generate a counter for this, but our ticker function creates one automatically for us. Let's go ahead and use the getTicks method of the Ticker class. I am going to save that and refresh, and you can sort of see what's happening here. It's shaking the ship but in a more smooth like method than what randomness was doing. Not shaking a great bit, it's only going from -1 to 1. We can improve on that by adding some divisions or multiplications that is going to control how the ship moves from side to side.
Let's go ahead and modify our function here, and what I'll do is divide our Ticks by 7 and then multiply that number times 50. So I am going to save this and refresh, you can see that ship moving from side to side in a more smooth motion. So these numbers are going to be controlling our motion. So let's go ahead and change this number to 100 and see what happens. So now you can see that the ship moves a little bit farther. So this number is going to control how far away the ship is moving, set it back to 50. The other number is going to control how fast it's moving.
So you can see here dividing it by 2 makes it move a lot faster. You just have to find a number that works for you. So the divisor is going to give you the speed of the motion, and the multiplication is going to give you the size of the wave. So let's take a look at what it would take to make it move vertically. So I am going to go ahead and comment this out, and I'll make a copy of it and just modify the Y direction of the ship. So I'll save this, and I'll refresh and now this is moving up and down. So let's see what happens if I move them both up and down and right and left.
I am going to save and refresh and you can see that it's now moving diagonally. So that's okay, but we can actually do circular motion really easily. We could do that by using both a sine and a cosine function. Cosine is pretty similar to sine. Without getting into trig, it's essentially a sine wave moved over so that the oscillation is the same but happens at a different time than in a sine wave, perfect for what we need. So instead of sine for one of these motions, I am going to use the cosine function. Save it and refresh and now we have beautiful circular motion.
There are currently no FAQs about EaselJS First Look.