 Hi everyone, in today's tutorial I'm going to be showing you how I can go from a static program such as this one to an animated processing program using just integer division and modulo. So I've already laid the groundwork here where I've put in all the primitive shapes. If you want to pause the video and have a look for yourself, feel free but it's not something I'm going to be covering with how I drew this ninja person here. The background is sky blue, I'm drawing some rectangles for the face, the body, the legs, and then I've got this banner here which is made up of one long rectangle here and then the first part of the banner and then the banner end and that's what we're going to be animating as you may have seen before. I've also set the size it's 400 by 400 so we're just going to start with the foundation like that. Okay so the first thing we're going to do is we're going to think about how can we animate this program. Well the first thing we're going to do is we're going to have to count how many frames we're up to so if you didn't know processing works at 24 frames per second as a default and we're going to be working with that so if I just say I'm going to call it counter, count int counter equals zero and so every single frame I want update counter to be one higher so I'm going to say counter plus plus up down here so every single frame we're going to have counter is zero then one then two then three and we're going to be using this to figure out at what stage of the animation we want our program to look like. We also want it to cycle through this animation so we don't want it to infinitely grow on forever so if we were to you know start at zero and only add we're going to end up with some very big number after just a few seconds so what we're going to do is we're going to cycle this by using counter equals counter mod and then how many frames so I'm going to go 96 for now so 96 is four seconds so 24 frames per second 96 divided by 24 is four so every four seconds we're going to repeat our animation this means that we're going to have frames zero all the way to 95 because when it hits 96 it's going to be zero again the next stage here is to figure out how what sections do we need so I'm aiming for like a three step animation where first the head and the body moves down so here's my little figure here just so you can visualize what I'm doing so first I want this head part to move down the screen along with the body and then I want you know the first part of the banner to move down and then third part of the banner to move down so it kind of has this swishy wave effect okay so to do that I'm just undo my little scribbles to demonstrate I'm going to need to set up some other variables and these are just going to track how much of a bounce should each of these sections have so for that I'm going to have an int called bounce and this is just going to control the main bounce of the body and I'm going to set that as default for zero I'm also going to have another bounce it's going to be slightly more delayed than this bounce just to control that middle section of the the swishy banner so I'm going to say int I know it's messy naming scheme but it does help me understand what I'm doing so I'm going to say first delay bounce um you can't have longer variables like this if it does help you understand it um just the seg tutorials so I can talk about it might be a bit more helpful I'll also make that zero and I'm going to need a last um variable to control just the end of that banner so if I just draw this banner again if you imagine our little character wearing the banner um I'm going to have a second section and then the third section here so this is also a second section and that's also third section so this is the original bounce I'll just put bounce this is the second uh the first bounce and this section up here is the second bounce sorry for the messy handwriting okay so let me just add another variable second delay bounce okay so we've got a system where we have a counter that goes from zero to ninety six now what we want to do is transform that so that each frame will trigger a different section of this animation and that might sound a bit confusing but let me explain so if I have the regular bounce so remember this is zero by default um we're just going to override it so uh bounce equals counter divided by 32 all right so let's think about this counter starts at zero and when you say zero divided by 32 an integer arithmetic it's just going to equal zero in fact even if we have counter at one counter at two all the way up to 31 30 divided by 32 it's still going to equal zero so we can think about frame one uh frames one through 31 including 31 um are going to leave us with zero as our answer here for bounce then if we increase to 32 it's going to actually equal one so 32 divided by 32 will give us one and then 33 divided by 32 is going to equal one as well so all the way from frame 32 onwards to 63 we're going to end up with a um an answer here of one then we can do it again and we're going to realize that if we go all the way up to 95 which is the last thing that counter can be before it hits 96 and turns into a zero again the last thing we're going to get is two so the three things that our frames can give us as a result for bounce is zero one and two now this is excellent for us because that's three frames counting from zero we got you know um a static frame where it's the original image we got one movement that's slightly lower and then one movement that's slightly lower again so we're actually going to do this for all three of the bounces so um not bounce but first delay bounce is going to equal also counter divided by 32 and the second delay bounce is going to do the same okay now this is fine all this is going to do is just make these variables equal zero one and two depending on what counter is and what we want to do with these variables is we want to increase the y value so it dips down it's at um different times of the program so I'm going to add in when I want each part to move so the head I want to move with the bounce variable so I'm going to say rect um in the the head so um we've got the x coordinate here we've got the y coordinate here so I'm going to say the y coordinate plus bounce so what I what else do I want to move with the head I also want to move the body so take the y coordinate and I add bounce to it um I want the legs to say the same the eye is going to move with the head I don't want that staying static that might look a bit weird so bounce um and then the last thing I want to move with the head is the top of the banner just this this rectangle part here probably a bit hard to see with my drawing software without the color but bear with me it will make sense so if we add the bounce here let's just have a have a quick look to see what happens to that program it's very difficult to see but we're seeing like one frame drop at a time just that body section and it's dropping zero frames then one sorry not frames it's dropping one pixel then two pixels and then back to zero pixels again so it's kind of rotating between um you know bouncing down twice and then back up to its original stage and we want all of those to look like that so um let's do that for our first delay bounce and second delay bounce as well and I'm just going to copy this to save some time so things I want to move with that first delay bounce is just the um upper middle part of the tail here and this lower middle part of the tail which I've labeled here so I'm just going to add that to the whack coordinate and press play and test it out yep so now this part is now moving and then let's add in our second delay bounce and I'm just going to copy that and I'm only going to change the tail part because I want to switch together okay so our variables are all contributing to making this animation move however we are not moving in the way that we want it to and to do that we want things to move um at different paces actually before I do that I just might make it a bit more noticeable so it's easier for the camera to pick up um what I'm going to do is I'm going to amplify these these variables to be something bigger so it's more noticeable um that's just going to be as simple as um the variable name so I'll make this the first one so first delay bounce I'm going to multiply that by five so that when the when the result of counter divided by 32 is zero we still get zero which is fine when it's one we get five and when it's two we get 10 so instead of zero one two we're going to get zero five ten and that's going to be a bit more noticeable so I'm going to do that down here as well and I'll show you what that looks like in a second see these um these movements are much bigger chunks here now and that's what we that's the kind of effect we want okay so now we want it to move at different times and the way that I think we can achieve that is by taking our counter and just offsetting it slightly um different from our original bounce so if this counter equals um 38 and we say 38 divided by 32 um then the answer we're going to get is one but if I want to say um minus eight so offset it by just eight frames then 38 minus eight so 30 divided by two is going to be zero so it's going to be on a different frame to the rest of them and I will do the same for this one as well um I just want to offset it slightly so that it's going to look like it's on a different um animation step and there we go it looks like it's uh waving in the wind and hopefully that tutorial was uh informative it's just a very different way of applying um animation using integer division um and learning how we can loop things using mod um but hopefully it was enjoyable and gave you a different interesting perspective on how you can use maths and processing thanks