 Hey guys, today I'm going to be showing you a fun little example using functions and drawing a picture and making an animation using what we've learned with functions. So I'll show you the output of what we're going to be doing. So it's just a little picture with some flowers in the background and then a little bee and the bee just follows our mouse. So before we dive in we'll kind of talk about some of the things that we know needs to be done and how we're gonna do those things. So first we know that flowers are going to need to be drawn and those are just static pictures. We also know that we're going to need our bee and we're going to need a function to keep track of our bee movement. So that's two functions right there, one for actually just drawing the bee and then the other for moving the bee. So we'll go ahead and get started with this. So we'll do the two things that we know how to do pretty easily, which is our void setup and our void draw. Alright so in our void setup we'll put the size of our screen and I made this one nice and big so we had lots of room for the flowers and for the bees and then in our draw we will set a background and we'll just pick a nice light color. I've got a blue right here already so we'll just copy this and put this in. So now when we run this we'll get just a screen with a blue background. So we'll start first with drawing the flowers. So we could put all of our draw function for actually drawing our flowers here in draw, but that just gets really jumbled, it gets really messy. We would have to do it every single time we want to draw flowers. So if we wanted to draw three flowers we would have three of the exact same code. Here in our draw function. So that's just really unorganized and really messy. So come down here and we can create a new function to just draw our flowers for us. Then that way we only have to write the algorithm for it once. So first we know that nothing's going to be returned to us. This is just going to draw a flower on the screen. So this function is only going to have effects. If you remember from algorithms we can have effects and we can have outputs. But this function that we're creating is only going to have effects and because of this we're going to start with void. And void essentially says nothing's going to be returned. And we'll call it draw flower. And then we'll decide what inputs we want to give it. So we definitely want some variables to keep track of the position of the flower. So an x and a y variable. And then as you saw each flower had different colors then we'll need an r, a g, and a b to keep track of the fill function. So we can actually change whatever color we want it to be. So start with our x and our y. So we'll declare an int x and int y. And then an r, a g, and a b. And then we'll give it some curly brackets. So what we just created here are some instances of local variables. So these variables can only be used in this draw flower function. It can't be seen and it can't be used anywhere else in the function. So I'll just copy and paste the code I've already written just to kind of speed things up a bit. So I've got a for loop to draw all the petals. And then this is our fill function to put in our r, g, and b. And then I've got an ellipse just for the center of the flower and I created it to be just like an orange color. So now we can run this but nothing actually happens because we've written the code but processing never uses it unless we call it. So we actually to call draw flower and say I need you to draw a flower and then processing will do that for us. So if we come down here and we call our draw flower so we can call them here and we can say I want a flower drawn and then processing jumps down to our draw flower function and says great I can draw a flower for you but I need five inputs and that's where we're getting our complaint down here is we haven't specified our five inputs that we're going to give it. So let's say we want a pink flower at the top middle of the screen so we can give it our x position will be width over two our y position will be height over three and then this is just a color I picked up beforehand. So it's just like a nice pink color. So now we've actually called it and we said okay I've got these inputs for you and then the function says great I'll take your inputs so now x is going to equal width over two y is going to equal height over three r 255 g 150 and b 200 and then it goes through this code that we've written and uses these variables to draw our flower. So now we can run this and we got it get a nice pink flower. So that's great but now we need more flowers drawn. So after it completes this piece of code it finishes it's done we hop back up to our draw function but now we're going to call it again but this time with new inputs. So I'll just copy and paste the inputs I had in before speed things up. So now we call it again we give it new inputs so now it replaces all of those variables it had before gives it the new variables that we just told it to give and then it draws us another flower. So now we get this orange flower. So we can call this function as many times as we want with as many different inputs as long as our inputs as long as our inputs work with how we wrote the function. So obviously if we would we we could put booleans and characters and strings and whatever we want in here but as long as we've given it the right inputs then it'll run and it'll it'll do what we want it to do. So now we've drawn our three flowers and I'll just turn on the debugger as well to show you guys kind of what's happening. So you can come down here and we'll put a breakpoint on our three or the the three times we've called it and then we'll just put breakpoints on now we probably don't need that many. We'll just put it on these bottom parts. Great. So now we can run this. So we'll run it we get our screen but nothing's actually been drawn yet. So now we can come in here and we'll step into the next part. So processing comes down here and then it says okay we're calling draw flower. So now we step and then we jump into our draw flower function. So when we jump into here the debugger keeps track of what our new variables are. So we can see what our variables are when we're in this function. So we we know that our width over two is 400 so it's our x right here our y is height over three so 266 and then our RGB variables so 255, 150, and 200. So then it runs through here does this code all that good stuff and then it finishes. So now we're finished with this function step back up and now we come to this next draw flower function or this draw flower call. So we can step into that we can see that it jumps back into this function it's going to run all of this code and this time with the new variable. So our new x our new y and then our new RGB. So it goes through this it it writes the code with the new variable draws the code with the new variables we've given it and then jumps back up does that all over again and then once it's finished it comes to the end and it just keeps going with the rest of its code. So then we get our flowers. So now let's draw our b. So now we'll come down here and we're going to do basically the same thing we did for draw flower we'll say void because it's only going to have effects nothing's going to be returned to us and we'll call it draw b and we'll give it two inputs our x and our y because we know that we're going to need to keep track of the x and the y position and then again just to kind of speed things up a bit I'll just copy and paste the code that I created earlier and this is all stuff that you guys know how to do so just lines ellipses filling it with colors all that good stuff so I've got like the wings up here I've got the eyes the antennas the stripes and again we can run this but nothing's actually going to be drawn because we've never called it we've never given it inputs so come down here and we'll call it and we haven't created variables to animate the b yet so we'll just give it some hard coded variables at the moment just to see what our b looks like so we can run this and then we get a b in the middle of the screen so now we actually need a function to keep track of the movement of the b so come down here and this one's a bit different than the two functions that we just wrote because this one isn't going to draw anything this one's only going to calculate the position of the b for us so because it's it has no effects on the screen instead of writing void we're going to write int and this int tells us I'm going to return something to you I'm going to have an output and it's going to be an integer so that's where we specify what our return type is and then we'll call it get a bit closer because we know that we want the b when it's really far away to move really quickly towards the mouse and then as it gets a bit closer we're going to slow it down a little bit so we're going to need to write some sort of calculation for that so we're going to need two inputs we're going to need where the b is and where the b needs to go so I've got these two integer values and then I'll write in the calculation I need to actually do this so we'll say towards minus from and I like the b to move fast so we'll say divided by 20 plus from but I'm getting errors for it um and the reason I'm getting an error for it is because we have this calculation but it's not actually doing anything with it um and we're getting another variable or another error because we haven't actually told the function what's going to be returned to us so this int tells the function I know I'm going to return something to you but we even specified what it's returning to us so if we just write return before this that's telling this function this is the counter this is the integer I'll return to you so the function will calculate this and then whatever integer it gets that's what it's going to give back to us so now I need to create two variables to actually um hold this integer that's going to be given to us so to create two new variables we'll say x pos and then we'll say y pos so I've created these global variables um I've initialized them as zero so now we can come down into our draw function and every time the draw is run we're going to have to update these variables so I'll say x pos is going to be equal to and then I want this x position to be equal to whatever this um equation is or whatever the result of this calculation is so first I have to call it I have to say I need you to calculate this for me we have to specify what our inputs are going to be so we know that um we're going to need the old x position and then we're going to need what we want the b to move towards which will be our mouse and then processing we'll take these put them into our function do our calculation return an integer to us and then that's what our new x pos will be so we'll do the same with the y pos so now it um does this calculation for the x pos and the y pos it'll update these variables um and then we have to put these two variables into our draw b because this is going to be the location for our b so now we'll replace these hard coded variables as x pos and y pos so let's test this out and we get a working function so we look back at what we've done um so we're able to draw our flowers and we did that down here and we specified what variables we want so when you write your functions you can create as many inputs as you want um and then you can use all of those inputs and as variables anywhere in your function um it's just dependent on what you want changed every time you call that function and then we're also able to do the get a bit closer calculation and instead of having to write out this calculation every time we update x pos we can just call the function once um and then that'll update it returns an integer to us of whatever the result of the calculation was updates our x pos updates our y pos and then uses these two updated variables to draw our b um so i hope this was helpful for you guys um go the best thing to do is just to practice on your own either find examples online or just get creative and see what you can do with processing there's so so many things that you can do so just get creative with it and have a bit of fun with it so i hope this was helpful