 Hey guys, I'm going to be going over the Functions Lab 1, question 6 right now. This is the bus under the rainbow question, so we should get an output that looks something like this. It doesn't have to be exact, but we'll try to get as close as we can. And as you see the bus just kind of runs through the screen, and once it hits the ending it's completely out of the screen, it comes up on the other end. So let's get started with this one. So we'll start with our void setup and our void draw. We will make the size, I'll make the size a bit bigger, because I kind of like to have a big picture when I'm drawing, and then we'll come into here, and we'll make our background color 255. So the first thing that I think we should do is look at drawing the rainbow, since that's just a static part of the image, so that will probably be the easiest thing to start out with. So I'm going to create a new function to draw the rainbow. Again, there are a couple different ways that you can code this question, heaps of different algorithms that you could be using. This is just the one that I think is easiest, and that kind of makes the most sense to me, but if your code works it's totally fine. So for this one, when I saw the output, I kind of saw parts of a circle. So when I first did this, I kind of just drew different size circles, and each circle had a different stroke, and just had a really, really thick stroke, and then the center of it was white. So that's kind of how I saw the first circle was here, and it went to the edge of the screen, and then we did do the orange circle, and then the yellow circle, and they all just kind of overlap onto each other until we get this purple circle, and the center of it is white, so that's how we get the same, or we get back to our original background color. So we'll start with doing that. So I think the first thing we need to do is determine the colors, and there's actually this really great variable type that's called color that we can try using. So I'm just going to go ahead and start creating the color variables. So a color variable takes, it starts with this color, so same as like an integer Boolean, float anything like that. You start with the type, which is a color, and then you give it the name. So we'll give the first one the name C1, and this will be our outer red, and then you just put in your RGB values into it. So we'll specify that this is our red, and then we'll make another color that'll be our orange, and I don't exactly know the code for orange, so we will just come into here and we'll select a nice orange color. We'll do a nice bright one, so we've got 3255, 207, and 33, and we'll just do this for all of our colors. So we'll come into here and get a nice yellow. So some of these we already know just because of RGB values, some of them we need to actually go in and figure out, so we'll get a nice purple color, and we'll do the last one like a pink. So now we can create one more color variable C, which is going to represent what we'll insert into the fill function for when we actually draw the circle, so we can get rid of that now. So now I think the easiest way to go through and draw our ellipses is just with a for-loop. So that's going to allow us to just run through the for-loop, so that way we don't have to actually sit here and write out ellipses every single time. So we'll create our new variable I started at zero, so once I is less than seven because we're going to have seven different colors, and then I plus plus. So now in here, first we have to determine what color we're on. So this is just going to be, let's say determining the colors here, so this is just going to be a bunch of if statements really. We'll say if is equal equal to zero, then C is going to equal C1. We'll say else if is equal equal to one, then C is going to equal C2. We'll just copy and paste this to kind of speed things up a bit, so we'll have one, two, three, four, five, six, seven. So we'll say we've got zero, one, two. For this last one, it will just be an else statement, so if i is in zero through six, it must be seven. So we'll just put in our last six, seven, I see here. So this is our last else statement. So now determining what part of the for-loop we're on, we'll just make that stroke. We're going to take our variable C, we're going to put in whatever color we want it to be, and then we'll make C our stroke, for our stroke weight, I'm actually going to create a new variable depending on the width of our screen, so we'll just call it stroke w, get an integer, we're going to equal it to, we'll say, width over 10. So this is allowing it, so if we change the width of the screen, then it'll still work. So now we're going to come back down here, we're going to say the stroke weight is stroke w, and stroke w can be a local variable because we don't really need it anywhere else in the code, so we can just keep it within, we can keep it within this function. So now we'll say no fill, because we want the background color to show through once we get to the purple, and then we're going to draw our lips, and we want the center of the lips to be in the bottom right corner. So we're going to put the x and the y values at width and height, and then here I'm also going to create another variable for the diameter, I'm going to get an integer, and I'm going to equal it to the width times 2, because we know that we want the radius of it to be the length of the screen, so to get that full diameter we need to multiply that by 2, and again that can be a local variable because we don't need it anywhere else in the code. And once we draw that ellipse, so we'll go through, we'll draw the red, we'll put that in, and then we have to decrease our diameter. So we're going to subtract the diameter, the stroke times 2, so that's going to get it so the diameter is decreasing enough so that the entire stroke for each circle can be seen when we draw our new circle. So we've created this rainbow function, we can test it and make sure everything looks okay up here in our draw, so we know that for every frame we're going to need the rainbow to be redrawn, so we'll just call rainbow. And rainbow doesn't need any inputs, because it's just going to stay the same every single time. So we can run this and we get our rainbow. So you can go through and now you know, you can clearly see in your function if you want any of the colors changed, it's really easy to see what color is going where, it's really easy in here to see where the color of the ellipse is actually being set, and then you can clearly see each circle being drawn. So you could actually shorten this up a bit if you wanted to go off on your own, and you could probably use compound data for this and make an array with each color and then setting each color. So in here you can take away this massive if else statement and you can just say the array at i and then it'll access that specific color. So you'll still have to go through and declare what each position of the array is, but you can at least get rid of this if statement. So that's something that you can try on your own time. All right, so now that we've got our rainbow drawn, the next thing we'll need is to draw the bus. So just come down here and it's not going to return anything. So we're just going to say void for the time being we won't give it any inputs. So for this one, we will start by just simply drawing the bus. So we won't worry about the movement for the time being. So we know that first we're going to need a rectangle and I'm going to put the right mode in the center and then we'll draw our right. And I'm going to specify a specific X position for our right because we know that later that exposition is going to need to move. So we do need to create a variable for it. So I'm going to make this input bus X and then we're going to come into here and we know that the X is going to be at bus X, the Y position. We want the bus down at the bottom. So we're going to go all the way down to the height and then we're going to subtract whatever our bus height is. So I'm going to come up here and create a new variable for the bus height and we'll call it like height over 10. So now for that Y position, I'm down at the bottom of the screen at the moment and then I got to bump it up a little bit. So I know I got to bump it up the bus height over two. And we're saying over two because we specified that that point is going to be drawn at the center. I'm going to create a new for the width. I'll create a new integer bus width and we'll call it how long did I make the bus before? Let me just double check my numbers. We'll call it with the number five. And some of this I just kind of figured out and calculated before. So we don't have to waste time guessing and checking. But when you guys do this, you can just go through and kind of guess it and check and see how it goes. Once we can actually come in here and just say bus width and then we already have a height. So we'll just say bus height. So now we can we'll go in and we'll just put in some simple filling it with zero. And now we can check this. So we used to come back up to the drone. We've to actually call it. We call it bus. We need an X position. So we'll just put it at the middle of the screen for the moment to see what it looks like. So we've got the body of the bus. So now we'll draw the wheels. We know that we're going to have to bump up the body of the bus a bit so we can actually see the wheels, but we'll do that in a minute. So we know that we're going to need two ellipse functions for the X position and the Y position. We know it's going to be the bus X that we're giving because the wheels need to move. The wheels need to move with the bus. So we're going to use this bus X. But then we know we need to push it back a little bit and push it up a little bit so that the wheels are actually separated and not in the middle of the bus. So subtracted by the bus width over four. We'll just do that for the second wheel as well. But we'll add that one. And then we know the Y position. We have to do the same as what we did with the bus body. We need to go down to the bottom of the screen and then bump it up from there because we want the bus to be along the bottom. So we'll call our height for both of these. And then we're going to subtract some number from it to bump it up a bit. So now I'm going to come in here and I'm going to create a new variable for the wheel radius. And we'll say that the radius of the wheel is like the bus width divided by six because we want the diameter of the wheel to be about a third of the bus. So we want that radius to be divided by six. So now we can come in here and we know that we're going to have to subtract the wheel radius from the height to get it up above the bottom of the screen. And then we'll come up here and then we know that the length and the height of the ellipse is going to just be the wheel radius times two. We have to do this twice so we can just copy and paste this. Now we can check how we've done. Now we see we don't even see the wheels because we only have the body of the bus bumped up just enough so you can see it on the screen. So now we've got to bump it up a little more. So here we need to look at the Y position. And along with the height of the bus, we need to also add the wheel radius. Now when we run this, we can see the two wheels and we can see the body of the bus. So this is good enough of a bus for me. If you want to go through and add some more stuff, absolutely go for it. But just recapping what we have so far. So we created these local variables, the bus height, the bus width and the wheel radius within our function. And this allows us to use these within our function. So if I were to want to change the size of the bus, I can easily do so right in here. And instead of having in here to say like height over 10, width over 10, having hard coded numbers, anything like that, we can clearly see that, OK, this is the bus height. And we can clearly see this is the bus width. So we've got those local variables there for us to use. And then we've also got this input here, bus X, that is later going to be a global variable because we know we're going to have to control the movement of the bus as we keep drawing the code. So we're going to, when we call bus, we need to put in our bus X position so that we can later control that movement. So now let's go in and we will work on actually controlling that movement. So we know that if we want to animate anything, we need to do it up here and draw. So we will just create a new global integer and we'll call it the X POS. And we're going to set it equal to the width because we want the bus to start over at the right side of the screen. And then we want it to move through the screen going left. So we'll set it equal to width. And we should actually probably do that in set up. So we'll do that down here and set up. All right, and then we can come in here and we can put our X POS into here. So now it's no longer hard coded. And then we can just update our X POS. Oh, I'm sorry. We'll have to subtract it because we're going through the screen left. If we were going right, then we could add one. But since we're going left, we'll have to subtract one. Now we can try this out, make sure it works and it does. So the last thing that we'll need to do is just make sure that once it hits this edge of the screen, it's going to come back up on the other side of the screen and restart the animation. So now for this, we'll just have a statement. We'll just say if the X POS is less than or equal to the, we'll say zero, because once it gets to the left of the screen, then we want it to restart. We'll say then the X POS is equal to the width again. So we can run this and try it out. So you'll see that the one issue that we get with this is because our X POS is at the center of the bus, it's going to jump and once it hits the center of the bus, it'll pop back over instead of cleanly going through the animation. So for this, I'm going to create another local variable because we need to keep track of the length of the bus so that we know once the entire length of the bus is off the screen, then we can start it over. So I create a new local variable. So that's the bus length and we can come back down here. And before we made this bus length or the bus width a local variable, but now that we need to use it in other parts of our code, we're going to make it a global variable. So before we know, we set it to width over five. So we'll just put that into here and then we can come down here and we're going to take this out as a local variable and now we need to use it as a global variable. So instead of having it in here, we're going to put it in here as an input. So now we need to come up and adjust where we call bus. So we've got the X-Pause in here, but now we also need to add the bus length. So now we can change the length of our bus if we wanted to. And when we run our code, we'll still be able to know, okay, once it goes fully out of the screen, then restart. So now we just have to come into here and adjust our X-Pause. So instead of being at zero, we're going to say at the bus length and we're going to make it over two because our rect mode, the position we were keeping track of for the bus was at the center of the bus. So we don't need the entire bus length, we just need half the bus length and we need this to be the negative value. All right, and then we don't want it to start again at the width. We want it to start at the width and then we want to scooch it over enough so it doesn't come into the screen when the animation restarts. So we're going to add that bus length over two. So I think we fixed everything. We'll just run this now and make sure this works. So our bus still looks good. The length of it still looks like how it should. And we'll just check that it restarts and it does. So now, because we've added in that global variable of the length of the bus, we know that it's not going to restart until it completely gets out of the screen. So if we were to keep that variable as a local variable here in our bus function, then we wouldn't be able to access it anywhere else to be able to see how long is our bus. So that's why we moved that into a local variable. So just keep recapping what we've done is we've created a couple of different functions here. We've created this rainbow function that keeps track of or just draws the static rainbow force in the background. And you can get creative with this. You can take it a step further and put, as we talked about before, all of these color variables in an array and then you can access them in this for loop so that we could take away this if statement or these multiple if statements. And then we drew the rainbow down here. And then we were able to call the rainbow every time we run the draw function. And then we also have our bus function. And this includes these global variables of the X position so we can control the movement of the bus across the screen as well as the length of the bus. So we know once the bus gets out of the screen we can restart it. And we know that it's gonna be accurate and that it's gonna work because we've used this global variable and we've written this if statement here and put it back into the right position when we want it to restart. And then we've got our bus function down here that just draws our bus and we were able to kind of calculate where everything was. If you had any issues with any of the rectangle or the ellipse functions or like if you had issues understanding where we put the wheels and where we put the body of the bus just draw it out on a piece of paper and kind of go off of this code and write down how many pixels it is and what's happening and do these calculations so you fully understand what's going on. And then in here we've introduced some local variables to help kind of just make the code a bit more organized and so that we can understand it a bit better as well as we've got these inputs that were coming from our global variables. So hopefully this helped guys, trying it more creative with it, see how you can maybe make it a bit more understandable or how you maybe can improve the algorithm for it, maybe add in some fun features. But the best practice that you're ever gonna get is just going off and doing some fun things on your own. So hopefully this helped.