 I'm a visual person. I think we all are to some extent, and when I draw things out, I seem to understand them all. So if you're trying to understand the Scratch Trigonometry functions, then check out this tutorial that graphs, sine, cos and tan. Working along with me will go a long way to building your understanding of maths, so join me in just a sec. Hey what's up crew, it's The Surfing Scratcher here, teacher-surfer programmer, and I help curious people just like you along on their learning journeys through video tutorials. This tutorial builds on an existing one that showed you the input values that you put into the trigonometry functions and the inverse trig functions. There's a card in the top right hand corner for you right now to go check that out. And if you've already done it, then probably skip ahead about a minute and a half. Otherwise, let's get scratching. What I'd like you to do is open up Scratch, open a new project and head over to the backdrops. And I'd like you to add in here the background, the XY grid. We're going to create a new variable. Actually, we'll just rename this one. And we're going to call it angle. We're going to, when the green flag is clicked, going to set angle to zero degrees, then we're going to repeat for a full revolution of our circle. So a full revolution is 360. And then we want to change our angle by one. So you can see here, as I click the green flag, our angle is incrementing. Now we're going to make three lists. We're going to create sign values, cause values and tan value. So you can see here, we've got those three lists. And the thing I like to do before we start mutating those lists is just to delete all of those values. We're going to delete all the values of cause, all the values of sign and all the values of tan. Recall that the sign cause and tan functions, they all take an angle. So what we'll do is we're going to add to sign values, the sign of the current angle. We'll grab our angle variable. So remember, the angle is incrementing from zero to 360. We're going to have 360 values in here, which means we'll record all the values of the sign of this angle. We'll do the same thing for cause and tan. I just duplicated. But remember to change the list that you're inserting those values into. Lastly, we just need to click green flag and get all of our values here. Now the list item number could refer to the angle, but you can see here it's slightly off. Because remember for a zero degree angle, the y value should be zero and the colors should be one. To get around that, you can just set the starting angle to one. You can see at the beginning, when the angle is one, this is the value of sign, cause and tan. I strongly encourage you to look through these lists now and check out the range of their values. So when I scroll down here and I know when I get to 90 degrees, sign is going to be one and then it reverses. The opposite happens because it sort of starts at one and then it decreases all the way down when the angle is 90 to a value of zero. And tan does something even more funky that we'll see with the graph when it gets to 90. It ends up at this infinity value. See if you can figure out what the maximum value of sign is and the minimum value of sign is and do the same for cause and tan. So remember the sign, cause and tan functions take an angle and the sign and cost functions return values between negative one and one and tan returns values between negative infinity and infinity. They pass through negative one, zero and one. Before we start drawing, I just want to quickly talk about the inverse functions for the sake of being pedantic. The A here stands for arc, it's arc sign, arc cause and arc tan. But I'm just going to call them A sign, A cause and A tan. So if the sign, cause and tan functions take an angle and return a value between negative one and one for the large part, the sign and cause at least, then these inverse functions, they just do the opposite. So we click on this function here, we get 0.5 which is the return value of sign of 30. So if we input 0.5 into the A sign function, we should get an angle of 30 and we do. Try the same thing for cause and tan in the inverse functions, so A cause and A tan. The inverse functions just take that value between negative one and one for A sign and A cause and negative infinity to infinity for A tan. But you can't actually type infinity into the A tan block. These inverse trick functions, they're super useful to calculate the direction of any sprite. And you'll see that if you work through the game of this trick series. That's probably a nice place to park this tutorial. In part two, we're going to go ahead and graph these trick functions on the stage right here using some sprites. I was going to combine it with this one but it got a little long, so we're going to chop it up. But now you know which values to put into the trick functions and the inverse trick functions. I strongly encourage you to revisit the unit circle link below in the description. And also go check out the Khan Academy videos if you're a bit fuzzy on trigonometry. Remember, it's a journey but you've got this. Okay, we're going to get drawing and to do that, we're going to create a new event. We're going to call that event render. Then we're going to create a new sprite. Actually, we're going to paint it. I'm going to get the text tool and I'm actually going to insert an emoji here because I'm a surfer. We're going to get some surface here and we're going to be surfing these waves. Okay, so I'm just going to get this little character and I'm going to zoom right in. I'm going to reflect it and then I'm going to put the surfer right there in the center. I'm going to call this sprite sign and jump back over to the code tab. So when the green flag is clicked, I'm just going to set our sign server here to 00 and drag out when you receive render. I'm going to set the y to the item of sign values because this is our sign surfer and the value we want to set it to is the current angle. Just before we move on, it's surfing scratcher from the future here. And I just want to show you that you could use the sign function directly in here instead of the sign values. So here I am, I'm just going to put the sign function there. I'm going to duplicate this angle and if I click it, I get negative 0.438 and if I drag out this block and click it, I get the same value there. So these two blocks, they do the exact same thing and the reason I'm using this version is because we've already got all these values already here in this list. They do the exact same thing and this is how you would usually work. Recall in the code of the stage that we're adding all those values to the list and changing their angle. We just need to slightly modify this because we want our broadcast render after we've added the items to the lists. We also just want to add a very slight delay just so our sprites have a chance to catch up and read this angle before we change it. I'm going to click back on the sign surfer and if I click the green flag, nothing actually happens right now and the reason for that is that these values are absolutely tiny. To get around that, we need to multiply using a constant. What on earth does that mean? Well, the constant that I'm going to choose to use is 100 because 100 is nice and easy. What's going to happen is we're going to get the values, the sign values here, going to multiply that value by 100 and the result will be a percentage value of 100. So the value of 0.017, which is the first value in our sign values here, that's going to return around one. So our value is going to be 1.7. Conversely, when we're halfway up, we're going to be around halfway to 100 and when we're all the way to the top, of course, it'll be 100. So we're going to slot that value from our list into this little multiplication block here, multiplying by 100, click the green flag and you'll see our surfer is rising up and it's going to rise all the way up to 100 and then it's going to drop back down after we pass 90 degrees. A fun thing we can do is say, set the X value to negative 180 when we click the green flag and as we receive render, we can change the X value by one. Watch what happens to our surfer now and would you look at that? When we click the green flag, our surfer is actually surfing but it kind of looks like it's levitating in the air. We're going to get the pen tool and trace the path that the surfer is surfing. That's to make it a little bit more visible. To do that, go into the extensions and go grab the pen extension. We want to erase all when the green flag is clicked and I like setting the pen size to around about three. If you want to change the color, go ahead and do that too. I can see our surfer is kind of blue. So we'll not have a bit of a blue line happening there. Then you want to put the pen down just before you move it and after the surfer is moved, we're going to erase the pen. Click the green flag and now let's check out the path that our surfer is surfing. Okay, so that's pretty cool. You can see our surfer has just topped out at 100 there. It's sliced through the zero. I've just got rid of our tan values there. You can see it bottoms out at negative 100 and it lands back here at positive 180 X and Y is back at zero. Now I want you to do the same thing for the cos values. What? The cos values? Yeah, it's going to be super simple. All you need to do is duplicate that sprite. Let's just rename it and go back into the costumes. Going to change the surfing emoji to our female surfer here. Cool, that's gnarly. Head back over to the code. Going to change the color to represent that sort of pinky color there. The next thing we need to do is change the list that we're referring to. We're referring to the cos values now. Now cos kind of starts out at one, so initially it's going to set Y is one times 100. So we need to change the starting position of our Y value here and we'll change the X by one. Then click the green flag and watch our female surfer surf down the wave and our male surfer surf up the wave. And you can see here that they both take the exact same shape except that they kind of shifted along the X axis. Notice for these graphs that we're changing both sign and cos. The X value is just by one. Each time the angle changes. We're using the sign and cos values to change both the Y values on each sprite. But recall earlier when we said that cos is referring to the X and sign is referring to the Y where we can create a circle when we use these two values in tandem. To do that, I'm just going to duplicate the cos sprite. I'm going to rename it to circle. I'm just going to use a pencil emoji here. And what I'm going to do with this one is put the tip of the pencil to the center point of the sprite. Then back in the code, we're going to be setting the X value now instead of changing the X value. And what we're going to be setting it to is pretty much the exact same thing here. Well, it is, it's the exact same thing. The thing we do need to change is the Y value. Because remember, a sign is Y. X is cos because cos is crossing. I'm actually going to change the color of this sprite probably to a green color. The last thing we want to do is change the starting point of the sprite. Recall that the starting Y value is going to be zero. So we may as well enter in zero on the Y axis. And the starting X value is going to be the cos value here. So pretty much one, one times 100. So we may as well make the starting value 100. Let's go ahead and click the green flag and watch our circle draw. There we go. There you have it. There's our circle of sign and cos mapped to X and Y. What about tan, I hear you say. All right, all right. Let's go ahead and do tan. Go ahead and duplicate the circle sprite. Let's go tan. Whenever it's summertime and I'm tanning, I'm usually getting tan by the sun. So we're going to use a sun emoji here and I'm going to pop it back in the center. Jump back over to the code tab because the sun's a yellowy color. That's the color I'm going to go for. Cool, yellow sun. Now back down here in the render, I'm actually going to change the X value again. I'm going to change the X value by one. And the list we're going to change is tan values. The last thing we want to do is change where tan starts. So you see here, tan's got a value of around about zero. So we're going to have Y is zero and the X value at negative 180. The same spot where our sign server started. So negative 180. Then turn off that list. And the last thing we're going to do here is just change that constant value back to around 10 but you don't actually even need it. But I'm going to have it there just so you can see what's going on. Clicking the green flag, see what happens with our tan values. I'm just going to get our tan values back up on the screen. So starting really small and then does this really funky action. So what's happening here is this is the point where tan is actually approaching infinity. And it gets to infinity all the way somewhere up here and then it flips down to negative infinity and it starts counting up from here all the way back up to infinity again and back down to negative infinity. And this is how it repeats itself. And there you are. That's how you graph these sign, cos and tan functions in scratch and you can also make some circles. I strongly encourage you to play around with these functions. For instance, set X to this value as well instead of changing it to one. Head over to the sign and cos sprites and mix up these constant values. If you change one of these constants here, see what the result is. I strongly emphasize that you play around with this. The more you play around with it, the more that you pin them to the values in the list, the stronger your understanding is gonna get. Maybe I should have put this right at the beginning of this tutorial but why learn trigonometry in the first place? Well, trigonometry is huge in game design. And if you're using scratch, I'm suspecting you like making games. So learning trig is probably in your best interests. How's it used? Well, you use trig to rotate a spaceship handling the trajectory of projectiles like missiles or something like that calculating and determining collisions between two objects. You can also set the rotation of certain sprites. Now scratch does all this for you anyway, but it's really good to learn how to do this under the hood. If you persist with this trigonometry series, we're gonna be making a game similar to the one that you're seeing on the screen right now. Here we've got a spaceship and we're rotating its direction while it's moving around. Also got a turret in the center. When we crash into the turret, we are gonna lose a life. So all the movement that you're seeing in this game is gonna be done by using trigonometry. There's a car coming your way in the top right hand corner to go check that out now. Hey, just before you go, if you're an educator in the house, then I've got a free resource that accompanies this video that you can use with your group of learners in your learning context. Go check out the description for more information. I hope you found this tutorial useful that graphs the sine, cos and tan. Until next time, I'm off to go find a way. I'll catch in the next one.