Hello and welcome to week four of draw and animate, where we're going to look at a new application area, and that's going to be animation. When we look at a new application area, we're interested to draw out the key characteristics of the area, so that we can begin to think about how we could map those characteristics across to the building blocks. So that we can start building our programs and models and such like. So in this session, we're going to do a first look at animation, we're going to pick apart what some of those characteristics are. And then, we're going to look at some new building blocks to help match to those characteristics. So there's going to be some new turtle functions, and we're also going to look at a new statement is a standard programming language statement. You find in almost any programming language, called a selection statement sometimes called an f statement, that lets us choose between different possible courses of action. Okay, well let's get started with that. So, exploring an animation, best way to think about it, think of moving pictures. We've got lots and lots of pictures and they're just slightly different from each other. So that when we look at them quickly, one after another, then it looks like things are moving and after all, that's what an animation is, the idea of a moving picture. So, let's take a look at that with this very simple example of a face with some bright yellow hair. And in this case the thing that's changing a little bit between each one of these pictures, is the hair and so you might imagine that this is the person kind of in a bit of wind. And the hair is moving about those that change between the five pictures. If we put all of those in just one place, then that begins to look a bit more like what we're kind of thinking about. And if I speed up the rate at which I'm making them move, you can kind of see whoops that it does look, it's beginning to look a bit like that, okay. So, the key characteristics of an animation and these are the parts that we're going to be looking to model. Well we might have a fixed part of the animation, we call that the background and in the case of the example we had just there, that was the simple face. And then we've got the parts that change in our example there that was like the hair, we might have different versions of the hair, you can see it's all kind of similar, it's all strands of hair, but they're just being drawn at slightly different angles. Perhaps in some animations, things might disappear and then reappear again, there's different ways of making that movement kind of look real. If you think back to cartoons, this is all rather like what you might know already about there, but if you don't then this is a lovely video of how the famous 1950s Walt Disney Cartoon was made snow white and the seven dwarves. That was the first feature length cartoon. And what you'll see in that video is the way they make backgrounds, they're very carefully painted water colors. And then, the moving parts are drawn or painted onto a clear acetate or celluloid sheets to lay on top of the backgrounds. And then they made hundreds of thousands of those drawings and then each one is photographed on top of it, but relevant background in sequence. And then you put all of that together, and you end up with your movie. So how does this relate to the building blocks that we know about? The way Walt Disney did it was with bits of acetate and background paints and lots and lots of people drawing lots and lots of pictures. What we're going to try and do is do animation, but using the building blocks we know about, but we can already draw pictures. So, we've got a good start there, but we certainly don't want to have to draw hundreds of thousands of different pictures and store them all, somehow we don't know how to do that even. And we we don't want to write a separate program for every one of the frames because that would be very tedious. But there are some things that may help us out a little bit here, we're learning how to break our programs up into chunks. And so, perhaps we could break our drawing into that, we can separate the background out from the kind of moving parts. We know how to do things repetitively and so we're beginning to understand the way you can have one piece of code but it can maybe work against some variables. And as the variables change, what the code does changes as well and that might suit us rather nicely here. Turtle has a clear function which erases everything on the screen, so we can make use of that. So we might end up with a with a kind of plan coming together, we'll decide on a particular background, put that to one function. Will decide on the moving part, which needs to get redrawn regularly and we'll put that into a separate function. And so each time that moving part function is called, it will draw the item in a slightly different way. And so if we do that many times, then we'll see that kind of cartoon like change which looks like motion happening. So the plan here, is repetitively somehow in a repetitive way, we're going to clear the screen, we're going to draw the background. And then we're going to draw the moving part, just one instance of it, but every time we repeat these three things will draw that moving part a little bit differently each time. We've got some new turtle functions to do this, you'll see me using these in just a moment, but just so you're ready for what you'll see. We've got two new turtle functions animate and stop animate. The animate ones the most interesting it's uses a technique you've not seen before, where we pass a function as a value into another function. So we pass the value of a function as a parameter value into another function. And in this case, the function we're going to pass to animate is basically the moving part drawing function. So it's going to draw one instance of the animation, and then there'll be a delay and then in the function will get called again and they will draw another part. And then there'll be a delay and then another part and so on and so forth. So what animate does is, it takes this drawing function as a parameter and it kind of sets up the turtle system, so that the drawing function is regularly called. And by calling the function regularly, we end up seeing the animation. We'll also see this idea of a selection statement or an if statement to choose between different options. And we're going to work with a pretty simple animation and I'll just let you see what that's going to look like. It's going to be something just like that, whoops, I'm not drawn up very straight, it's going to be a rectangle, a kind of long, low rectangle. And we're going to have a little line at the beginning of it and with that line we're going to animate the line. We're going to make the line basically move across the screen like this, over a period of time. Okay, well let's go ahead and start doing that. I'll shift to the programming screen and let's have a look what do we have so far? We've only got the rectangle function of just simply copied that over from one of our earlier programs and that will help us with the background. But as far as actually constructing this program, I think I'll start off at the end of the program at a point where we actually set up the animation. And so as I said to you, we do that by calling the animate function and we pass it a function which we haven't drawn yet, but we will in a minute called my draw, could have any name but let's call it that. It's kind of like my drawing function. And then, let's go ahead and draw, and construct sorry, the my draw function. So what does my draw having it? Well, remember the pattern that I was talking about. First off, we clear the screen, and then we draw the background, and then we draw the moving part. Now, I've just structured it this way, so it's very clear on what to do. I mean, the clear is a turtle function, so it has to be clear. But background and moving part can be any name because we're going to write those functions, and so let's go ahead and do that. Remember what's going to happen here when we execute line 18, and my draw is passed to animate. Then animate will set up the turtle system to actually regularly call this my draw function. Which is going to clear the screen, draw the background, and draw the moving parts every 10th of a second because this is 100 here is in milliseconds. So it's 1000 of those in a second, so every 10th of a second, they should get called. Okay, well, let us write the background function. That's a nice easy one because it's just going to draw a rectangle, and we've got a rectangle function there, so this won't be too tricky rectangle. And let us put that, we'll start a rectangle over on the left hand side of the screen, something like -125 around about Y equals zero, and then this takes width and height. So we'll make that low rectangle go right across to the other side of the screen, and we'll make it about 20 high. No, we didn't used to be that high, do we? It doesn't really matter, 15 or 20 is fine. We'll make a little vertical piece about 10 high, and then it will sit nicely in between those two. Okay, so what we haven't written yet is the moving part function, and that's going to be the most interesting one. Now, the thing about the moving part function is it's going to need to draw slightly differently every time. And so the way we can achieve that is by having a variable that changes every time this function is called so that next time the drawing will be a little bit different. And somehow that variable will capture how to make the drawing different. So if we think about what we're trying to do here, making this line move across the screen, then we're trying to make this. Wait a minute. We're trying to make this little line move across the screen. Whoops, that's not very good circle, but there we go. What is it that defines where that line is? What's going to change each time it moves? It's not going to be the y value of the line because that's starting and finishing at the same wire position, but the x value changes, doesn't it? That's what defines where that line is, right now it's on the left hand side. But we're going to want it to be on the right hand side later on, so it's the x Value that changes. So let me switch back to our programming window, and what we'll do is declare a little variable x, and it'll start off. So this is going to represent where to draw the line, it's going to start off over on the left hand side, whoops. We do need to extend our time, I'm not quite sure why it's doing that to me, it seems to be okay. x is 120, right, so that's our x variable set up, and now we can go ahead and draw the moving part. So first off, we want to go to the right place to draw it, so let's just jump to that go to. And it's x, that's fairly clear, and let's just have it at zero. Remember at the bottom of the rectangles at -5, and that was up here. So if we do the bottom of this little line, just a bit above that at Y equals zero. That will be a good position for that, so go to x zero. And then to draw the line, we'll simply go forward about 10. We'll have to sort out whether depends up or down in a minute, but we'll come back to that. Okay, so that's us drawing our piece, that's us drawn are moving part or at least one part of it. We've gone to the start of it, we've gone forward 10. Remember that the angle by default goes straight upwards, so that should be okay too. Okay, so there's that part. And then before we finish in this function, we've got to change the sort of state of the animation so that the next time we call moving part, that thing, what the piece will get drawn somewhere else. And everything is being driven by x here, so let's just update x. So we're going to do a variable update x = x +, we could have just type a number here. I'm going to create a little name, just so it's clear what's going on. We'll make that I don't know, it could be 12 or three, something like that, we'll try three. Should we just now, and we'll see what that looks like. So every time that moving part gets called, we're going to increase x by 3. And that will be what makes us see this thing move across the screen. And then the other thing that we're going to try is that selection to select whether to stop or not. So these are often called if statements because they start with their words if very often, and the structure of an if statement is like this. It's got this round bracketed piece here, and inside there, we put the condition or the test whether to execute the piece that comes between the curly brackets and that's the body, so this is the body of the statement. Sometimes it's called the then branch because you can read this as if this thing is true, then do this thing in the curly brackets. So sometimes called the then branch, and so we need to test. Okay, well, so the test here is going to be whether it's the test stop, so we want to test whether we need to stop. And the decision on whether to stop is whether this line has got all the way over to, that's not doing what I expected, whether this line has gone all the way over to here yet. And so we know it was x equals -120 over here, that's where we started. But our test is to see whether this x has become 120 over here, whether it's got to the other end, so let's put that test in. Okay, so the test is on x, and we can write it as a little bit like a sort of a bit of masses x is x greater than or equal to 120. So you could read this as, is x greater than 120? If it is, then we go ahead and do the body of the statement that then branches called. Okay, and if it is greater than 120, we want to stop. And so we simply say stop animate, which is another, as I say, another turtle function. Okay, well, I think we've got pretty much everything in there now. We've got the animate down here, we've got the drawing function, which says to clear, then do the background and do the moving part. We've got the background We've got a moving part which draws the part, updates the variable that determines where that's drawn and then tests to finish. So, I think we've done everything. Okay, well let's try that then. Okay, with these animations always set the slower faster bar here to the faster position. I'll explain that another time. Okay let's run it. Well it's not bad, it's quite close to what we want. Not quite it's quite flickering isn't it? And that's one thing and we've also got a turtle visible all the time. We don't really want the turtle to be visible so, let's let's start off by simply hiding the turtle. Now that's another turtle function and so, let's hide the turtle. Let's see what that looks like when we actually hide the turtle so, we can reset and then run again. Well that's a bit better. I don't really like the way the line is going right up to the top there so, let's change that. That's a mistake I made, It's not 15 there 15 Is the size. We want the size to be 20. Okay, size to be 20. Right, so it's 250 by 20. There's a gap of five below the line. The line is 10 long and then there's a Gap of five above the line. That's why we need that to be 20 so, that's fixed that but it's quite flickering. We just do that again and we'll see it's quite flickering isn't it? You still see that kind of flickering that's going on and there is a reason for that. The reason is that that rectangle is made up of four different lines. Okay, so for every time around the kind of animate loops, like every every time we update and draw the background and the moving part again, we're actually drawing five different lines. And the way the system is currently set up is every time each line is drawn, there's an automatic update to the browser window here that you're viewing this in and that actually takes an annoyingly long time, long enough that you kind of see the thing being drawn, which is why you're seeing that flickering. But the turtle library does provide a way of actually speeding all of that up. And the way it does that is it allows us to actually stop these automatic updates and it does that with a function called redraw. Sorry, redraw on move and we can pass it either false or true, and if we pass it false then it doesn't redraw on every move. But if we pass it true, then it does redrawn every move and in fact there will be an automatic redraw as a result of calling it with true right here right now, what does that mean? It means that all of this drawing happens but we don't see the result and it happens much faster that way and then we just see the final result in one go. And if you think about it, that's kind of like the way Walt Disney is doing his cartoons. He's got all of his artist's drawing all those cartoons in advance all the different frames and then you just see them one after the other done. It's like you don't see them being drawn during the movie but what we're seeing is we're seeing them being drawn as the animation progresses and even though it's doing it pretty fast it's not quite fast enough. So, let's try that again. Actually look instead of resetting the turtle button there, one of the functions in turtle again is just reset. So, let's just reset that there and I don't have to worry about pressing the reset button every time. Okay so, let's try running again. What have I done there? Sometimes one makes a mistake, One can't always immediately tell why what did I change? Look I've done redraw move rather than redraw on move. That was the problem there. Okay, redraw on move. Okay, let's try that again, that's better. And now look that's much smoother isn't it? You don't see the rectangle flickering at all and the the line if you just look at that again, the line it's a little bit jumpy isn't it? It's not quite smooth and so one way of addressing that might be to change and that's because it's jumping three every time, remember. So, I don't know why don't we just change it and see what it looks like with just being two might just make it that I can make it one as well. It would be quite slow then but we could try, let's try that, that's a bit smoother. And it would be even smoother again if we just made it one each time it would just take quite a long time to go across. Okay, well that's going to started. I hope you can see the basics of animation there. What I'm going to do is back in the slide deck. I'm just going to go through some of what we've just seen. Just to review some of that. So, let's first and there's the program, it's more or less the same as I've just written over on the in the programming environment. Let's just have a look at this and just make sure everything's clear about what's what's going on here. So, we've got the kind of main program sections first, these are the bits that are outside the any functions we might have created. I'm not included direct angle function in here because you kind of know about that one. So, we've got these two variables, we've got the kind of driving variable is actually making the animation happen. That's X, because X changes that's why we see something different happening each time and we've got this Justice step value just increase X. Each time around the loop and then we've got down at the bottom reset hide turtle. And we've I've put the pen down in this example. I didn't actually need to as it turned out. But that's just a sort of fail safe to put it there. So, we've got that but the but the animate is really the most interesting one because we have our draw function, my draw and the key thing about that is the way my draw is getting as it were passed as a parameter value into animate. That's the key thing that's going on here. That's a bit unusual. And then that is as I say that is telling the turtle system to regularly draw a call this my draw function with 100 millisecond gap in between each time. So, that that's kind of the key piece there. The my draw function itself fairly straightforward as that pattern. We talked about clear background and then moving part to those three in that order. And the fact that we're doing the redraw or move is just to make sure that we're really seeing a whole picture one after the other. We're not actually seeing the drawing as the drawing takes place. So, that that's why we've got that in there. If you want to take longer to read the slide or look at any of these just just pause the video. Background function very straightforward, that's a bit that's not going to change. As I say, we didn't have to structure it this way you could have put everything from background and moving parts inside the my draw function, but it just makes it clearer what's going on and it helps you break down your particular animation and then work out which bit should go where. The moving part function is where everything is really happening and the idea here in any of these kind of. Yeah, they had to do the moving part is that you'll have one or more variables that are driving the actual animation. They're driving the change each time. And so I said you might have one or more, in this case we've just got the one to start with. And so that determines where that little line gets drawn. Now note the way that the variable is created outside the function. It's got to be created outside the function. You can imagine that when you get to this point in the program, when the program executes it, so it starts off at the top here. Whenever it sees a function, it just jumps past it because it doesn't execute a function straight away. But when it gets to this, it'll create this variable with -120 in it. So you've got a bit like a sort of little box here with 120 and what's very hard to draw numbers with with a mouse pad. And it's going to jump past moving parts blah blah blah. And eventually down here things are set up such that this moving part function gets cold. Now when the moving part function gets cold, then go to x, 0. It's going to reach out to the computer memory to access this box here which is associated with x. And it'll look for whatever values inside it. And then there'll be times when it both looks for it and updates the value. So here it'll change, it'll be x plus 3, so that will become 117 and then again look, it's being accessed here. So the point is there's only ever one variable x. It's created before this moving part function is ever even executed but it's accessed and updated many times as the animation takes place. So that's kind of, it can be a bit hard to appreciate exactly how these variables work, especially in relation to two functions like this, but I hope that makes sense. Okay, the other thing to notice is the way that the moving part function has been structured into these three pieces. So if we just, you'll see I did something rather similar back over here in the code editor. I didn't put comments in but I separated it into three parts. Here, you've got three parts just here. And the importance of those three parts or why it's structured that way, it's just to think that inside the moving part function, you have to think about drawing one instance of the part. You've got to think so obviously that's, don't worry about that, then you've got to update the driving variables. And then you've got to check whether to stop. So there's three different activities that are going on inside as far as the if statement is kind of new, as I say, remember that what we've got, there is a test. Here this is the test and then we've got the then branch inside the curly brackets. That's what to do if the test comes back true, that is x greater than or equal to 120. If x is greater than or equal to 120, then we execute the then branch the in this case it's just gotta stop animating it. Okay, so just a quick note on animate versus the slow fast slider because, of course, we've got that slow fast slider in the programming environment. Why do we do this stuff with animate and special functions and redraw and move and all that kind of stuff? Why do we do that when we can regulate the speed of a program with the slower faster slider? Well the thing is that that slider we just put that into the programming environment in coursera to help you be able to see programs running. because sometimes programs run so fast you can't really see what's happening and you can't form your own mental understanding of what's going on. So that's why it's quite useful to have that speed slider. But remember that what the slider does is it puts a delay in between every single instruction, every single drawing instruction just to slow everything down. But we don't want to slow down every single instruction because then we get that really bad flickering that we were beginning to see in our example, we just want a delay between each full picture. So we want each picture to be drawn as fast as possible and then to have a delay and then the next picture to be shown on a delay and so on, speed slider can't do that. So that's why we have this quite different mechanism. Okay, so there are some key points about the animation generally. And those are, this is obviously closely related to stop motion video and cartoons and flip books. As a kid, if you had those kind of flip books where you draw a slightly different picture on every page and then just flick it through and you see that little kind of animation, this is obviously very much related to those. We've introduced some patterns for it. The idea that repeatedly we're going to clear the screen, draw the background, draw that moving part and then inside the kind of moving part, we've got the three pieces of drawing the part itself, updating the driving variables. So the next time we'll see it in a slightly different position and then we'll check whether to stop and so that's the kind of pattern we're going to follow. Okay, so next there's going to be a tutorial kind of lab section and in that lab we'll be playing with this program a bit and extending it to do a bit more. And then there'll be some other activities to take forward from there just to embed the idea of animation and let you explore with it a bit further.
