Main content
Computer programming
What are animations?
Congrats on learning how to make drawings with your programming skills! Now you'll learn how to turn those drawings into animations, with only a few more lines of code.
First, though, let's talk about what an animation is. How could you make an animation without programming?
You could make a bunch of drawings on pieces of paper, then flip those pieces of paper so the drawings go by in a sequence, and it would look like an animation. Well, it'd look like an animation if those drawings were each just a little bit different from each other. For example, check out this pencil-and-paper animation of a car driving down the street:
It probably took a while to make that animation, though, and well, it's not that great. It's pretty shaky and it has no color at all.
But now we live in the future! We can make a better animation programmatically in a few minutes with only a dozen lines of code, like this one:
Want to learn how to program that? Keep going!
Want to join the conversation?
What's the difference between JavaScript and ProcessingJS ?(241 votes)
JavaScript is the programming language we use to make webpages interactive and processing.js is a JavaScript library that makes it easier to create graphics with the canvas.
A library is just a collection of ready made functions that you can use.(369 votes)
how do you animate things such as vehicles(55 votes)- You will learn that later in the lesson; watch the next video. :)(157 votes)
Is there any way to make the wheels appear to be spinning? I want to add that to an animation of my own.(41 votes)
pushMatrix();
translate(200, 200);
rotate(100);
ellipse(0, 0, 30, 30);
popMatrix();
Will rotate a circle in the center of the screen by 100 degrees. But because it’s a perfect circle, you won’t see any movement. Fix this by adding in
rect(-15, -2, 30, 4);
rect(-2, -15, 4, 30);
After the ellipse. How does the code work?
pushMatrix(); and popMatrix() encase the code. They make it so any shapes out side of them aren’t rotated or translated.
translate(); moves the shapes after it by the input value. They are now in the center of the screen.
rotate(); was rotates shapes after it by the input.
And I think you know what the shapes do.
You won’t understand this for a while yet. Just keep learning and eventually you’ll get it.(139 votes)
how do you make a moving animation then stop it if the function is out of order?(30 votes)
You just erase the code or press "stop" depending on what program you use(1 vote)
If I want to work on my computer what software should i use?(14 votes)- In the top picture above how exactly did they turn paper and pencil into animation?(12 votes)
MAX an easy way to animate on paper would just to get a notepad draw many drawings in a order and then color them if you would like and flip the pages and woohoo you did it. :)(8 votes)
- Creating drawing out of program is easy. But I totally don't get how to move an animation. I watched the video, but that didn't help. Can any of you guys help me with the "Challenge: Exploding Sun"? How did you guys figure it out?(11 votes)
One of your variables controls the animated part. For instance, you might want to change thexposition. Therefore, you animate by changing anxvariable. Perhaps you want to change a circle's size. If so, you'll be working with a variable controlling that size.
Thedrawfunction runs 60 times per second. That means if you can make a variable change based on its previous amount inside thedrawfunction, it'll do that change 60 times per second. For instance,x = x + 1;changesxto one larger than its previous value.
In Challenge: Exploding Sun, you want to change the sun's size. Awesomely, they already provide you with asunSizevariable. Now, you just need to change it in thedrawfunction.(9 votes)
What are the variables used to create these animation?(8 votes)- In the next video, you will see code for the car animation. The variable used is
x.
You can use any variable name that you want for your own animations.(9 votes)
How do you animate(3 votes)- Yes, watch the videos and do the challenges and you'll be fine!(4 votes)
how do you make those cars move(1 vote)- That's what you're about to learn! But I'll sum it up for you:
You'll be using thedrawfunction, which is called many (usually about 60) times per second. In thedrawfunction, you'll make the car's position change a little bit. If that position change is done 60 times per second, it'll look like the car is moving and voilà! you've made a "moving" car.(21 votes)