Main content
Animated scenes
We've seen how to make multiple simple scenes - but our scenes were what we call "static" - they weren't animated, nor did they have any response to user interaction. As we'll see, it requires a bit more finesse to handle fancier scenes. But hey, let's get fancy!
Let's talk about animation first. What if we wanted to show Winston in his rock star phase, drumming hard to the beat? We'd normally do that by defining the
draw
function to contain code that draws shapes that move position slightly each frame. Here's an example, where the position of the drumming hands is based on the current millis()
value, the number of ellapsed milliseconds:What if we add that as scene 4 to our previous example? We'll move the code into a
drawScene4()
function, and modify our mouseClicked
logic.var drawScene4 = function() {
currentScene = 4;
background(194, 255, 222);
var x = cos(millis()*1);
var y = cos(millis()+98);
...
};
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene1();
}
};
Try it out below - click through a few times:
Notice something? It worked, but only kind of. We could see Winston with his drum set, but his drum sticks weren't moving. How sad! It's hard to make music when you're frozen in time. Perhaps you've already caught onto the issue: we're no longer calling the drumsticks-drawing code from within
draw()
, so it's only getting called once--not repeatedly--and thus only rendering the sticks at the moment in time at which it's first called. Perhaps you've also already guessed the solution: define a draw()
function, and call drawScene4()
when appropriate.draw = function() {
if (currentScene === 4) {
drawScene4();
}
};
Let's just think through that for a bit: whenever we define a
draw()
function in our code, it will then get called repeatedly (defaulting to 60 FPS), and whenever it's called, when the current scene has already been set to 4, then it'll call the function to draw scene 4. When it's any other value, it won't attempt to draw anything at all-- keeping whatever was already on the screen. We still need to do the initial scene drawing in mouseClicked
, this logic just takes care of animating every frame after.Some of you might be thinking: why don't we just have logic that calls every scene drawing function inside
draw()
? Well, you certainly could, and that'd mean that if you added animation to the other scenes, then they would just work immediately. But assuming you don't animate your other scenes, that means you're making the computer re-draw those scenes repeatedly for no reason. From a performance perspective, that's not good. If we know we can easily save the computer unnecessary work, we should. It will make our programs faster and users happier.Alright, now that we've discussed all that, here's the story in its clickable, animated glory. You can almost hear the beats coming out of scene 4!
Want to join the conversation?
- if i were to write my own program, how to figure out this logic ( here it is cos(millis() + 98) ). is it by "trial and error " method or something else ?(133 votes)
- When you want to make an animation, you gotta think of what mathematical function gets close to what you want. In this case, Winston moves his hands up and down.
What function moves up and down as well? Cosine is one of them, as well as sine.
This part is about knowing your math functions.
Once you get your basic idea working, you can start tweaking it to get it perfect.
For this drumming Winston, both his hands might be moving the same way. If you want one of his hands to move after the other, you might add something. (+ 98).
This part is trial and error, but some basic understanding of how changes affect your math functions will help.(232 votes)
- Can anyone explain how to use the millis () function? How did the creator know to use cos to reach a value?(60 votes)
- You will learn basic trigonometry later in the tutorials.
millis()
returns the number of milliseconds you have been on the program. She is using oscillations (again you will learn this later) to make the drumsticks move.(63 votes)
- Is it possible to mirror pictures somehow? Writing "-x + (width of image "Winston")" for the width parameter of the image function didn't flip the image, so Winston didn't look in the opposite direction than he does above.
I thought it would mirror the image on an invisible x-axis if I used -x, but I have the feeling it flipped the width itself.(15 votes)- Here's another option using imageMode and scale:
imageMode(CENTER);
var hopper = getImage("creatures/Hopper-Jumping");
var controlImage = function(img, x, y, w, h, rotation, xScale, yScale) {
pushMatrix();
translate(x, y);
rotate(rotation);
scale(xScale, yScale);
image(img, 0, 0, w, h);
popMatrix();
};
controlImage(hopper, 50, 50, 50, 50, 0, 1, 1);
controlImage(hopper, 125, 50, 50, 50, 90, 1, 1);
controlImage(hopper, 200, 50, 50, 50, 0, -1, 1);
controlImage(hopper, 275, 50, 40, 40, 0, 1, -1);(26 votes)
- Now after seeing this tutorial, How would you make a program of a boy running in place?(11 votes)
- Check out this program by DY.
https://www.khanacademy.org/computer-programming/light-runner-logo/4754397843423232
It is a tough concept, but it may give you an idea of how exactly it can be done. If you use it, make sure to give credit though.(21 votes)
- Okay, so i'm making a comic strip/story book program with over twenty scenes. it's basically just like the example above but longer. But my question is: What do i do if i want to animate two scenes? all i want is for an image to move across the screen. i tried doing what the 'Animated Scenes' tutorial said to do, and it worked for one scene, but when i tried it on the other scene both stopped working. why?(11 votes)
- Great help, Bob Lyon. Not completely sure why it should be "cleared" like this, but I found it of the greatest help. I was guessing in my mind that something, in the lines of our friend Miciah, would happen if I tried adding new animated scenes. And you came with some perfect way to make us understand the solution with an output correlation.(1 vote)
- What is cos(); and millis();(4 votes)
millis();
returns the number of milliseconds (thousandths of a second) since starting the program.cos();
Returns the cosine of an angle.
Hope this helps!(15 votes)
- is there another way to make a animated scene without the cos(millis)(5 votes)
- Of course!
You could use any trigonometric function. Play around on a free online graphing calculator such as desmos and explore.
Thanks!
Ze Red Barron(8 votes)
- What does cos mean in cos(milliseconds)(5 votes)
- The
cos()
function is for the cosinus (trigonometry). This kind of function is useful in animations as the result oscillates between two values.(5 votes)
- I think you went a bit fast on the animation part. Do you think you could make videos for this section?(6 votes)
- how would you do this with a circle going around on a line like a orbit(2 votes)
- Once you consult Wikipedia for the parametric equations of a circle, you can write something like
var cx = 190; // center of circle, X coordinate
var cy = 211; // center of circle, Y coordinate
var cr = 123; // RADIUS of the circle
var t = 0; // parametrtic & animation value
var dt = -2.345; //change in t per frame
draw = function() {
var x = cx + cr*cos(t);
var y = cy + cr*sin(t);
ellipse(x, y, 9, 9);
t = t + dt; // animate!
};(3 votes)