 Out of the box, Scratch has some pretty neat built-in collision detection blocks like Touching, but just how does it work under the hood? Well, in this tutorial, I'm going to show you how you can use circles along with Pythagoras' theorem so you can detect collisions between two sprites. Knowing how to do it this way is going to majorly help you down the track when you eventually move out of Scratch onto another programming method. So let's go check it out! Hey, what's up, crew? It's the Serping Scratcher here, teacher-serfer programmer, and I help curious people just like you along on their learning journeys through video tutorials. Welcome to the collision detection tutorial. In this tutorial, we're going to be detecting collisions between our rocket ship and our turret here. There is an easy way in Scratch to do this, but we're going to be using trigonometry because that's what you're here for. As always, there's a starter project down in the description for you to use if you're just jumping into this tutorial as well. All right, let's get stuck into it. I'm just in the rocket ship sprite, and the first thing we want to do is create a custom block and call it detect collision. Just going to give ourselves some space over here. Then we want to detect a collision after we set the ship rotation in our when the green flag is clicked block. Now, the real easy way to do this in Scratch is just to get into your sensing blocks and grab out a touching block, so touching the turret, and we can put that inside any block and just to test it, I've got crash here. So now when our ship moves around the screen and we collide into our turret, it says crash. So the idea is we're going to be replacing this touching block with a trigonometry solution. So let's jump over to Sketchbook so I can talk you through it. Okay, over here in Sketchbook, we've got our turret, we have also got our ship, got our X going across, and we've got our Y going up and down. We're going to be using circles to help us detect collisions. Let's get up the turret circle. Let's get up the ship circle. There we go. We've got both of our circles around our objects. The reason we're going to be using a circle is because every circle has a radius. So that's represented here by this yellow line for the turret, and the ship's radius is represented here by this green line. So there's a distance between the center point of the turret and the center point of the ship. If we get the ship here and we overlap it with the turret, we can see that the distance between them is less than the sum of those two radiuses. I don't know what the plural is, a radius is a radii. Let's just say radiuses. There we go. Whoa, whoa, whoa, what's going on there? Well, let's just break it down. So let's get the radius of the turret. We're just going to say that's around about eight. You see here, one for width is 10. Let's get the radius of the ship. Something that's about 10 because the difference between 50 and 60 is 10. So if we add those two together, we're just going to add eight to 10, and that's going to give us our collision distance. And that's just 18. Now that's handy because we know if the distance between our two objects is less than 18, we have a crash. So the current distance between our two objects can be represented roughly by this line here. The turret is at zero x and the ship is at x is equal to 60. So the current distance between is 60. So we said any distance less than 18 will signify our collision. Well, here's 20. So 18 is going to be around about here. Do now is move the ship and let's see if our radiuses overlap. Okay, so I'm just going to move the center point of that ship. So it's kind of just inside of it. And you can see there that the two radiuses, they do indeed overlap. So we have a collision. But when we put it back to 20, they're not quite colliding it. And that's exactly what we're looking for. So we can say then that when the distance between these two objects is less than the collision distance, which is just 18, then we're going to lose a lie. So that's fine when our ships are along the x-axis. But what about when it's like this? Well, we can use a triangle to our advantage. I'm just going to lower the transparency of these guys so we can see what's going on. So we'll just draw a line from the center point down to the intersection point of the x-axis of the turret. Then I'm going to draw another line to that center point. You can see we've got a nice little right angle triangle here. And the distance between is our hypotenuse. I'm going to say that this turret point, I'm going to name this our origin and the center point of our ship. I'm going to call that our target. The length of this green line, this is just the change in the x-position from the origin to the target. And the pink line? Well, that's just the change in the y-position from the origin to the target. We can just say that the change amount, just the change in the y and the change in the x, is the target y or the target x minus its origin point. Okay, so let's work out our y-position first or the change in y. We need to take our target. We said our target was the ship's y. So the ship's y here. Let's just say it's 15. We need to take away the origin value. So the origin y and the origin y, well, that's just zero. So our distance y or the change in the y value is just 15. We can do the same thing for our x. So again, using our target here, our ship x target is around about here. We'll say that is also about 15. I think you know where this is going. Take away the origin x, which is zero. So our change in x or our x distance is also 15. So when we know two sidelinks, we can compute the other one using Pythagoras' theorem. Recall for Pythagoras' theorem, we can just take the square root of y squared and x squared. There's a card in the top right hand corner right now for you to check out if that's a bit fuzzy. So the distance between, which is just our yellow line, our yellow hypotenuse line here, is equal to the square root of y squared. So that's just 15 squared plus 15 squared. And the Google calculator has just told me that that is equal to 21.213. So let's now jump over to scratch to create this distance y and distance x variable and use them to compute our distance between our two objects to detect a collision. Let's first create those two variables. There's distance x and there's distance y. I'm just going to grab out a set variable block. We will first set the distance x. Now recall that distance is equal to the target position minus the origin position. So let's get out a takeaway operator. A target is just the x position of the ship. Then jump over to the sensing category. We need to sense the x position of the turret. Then we can just grab this reporter block and slot it in. And now we have the distance x. And see here it's computed on the screen. I've just duplicated here and I'm going to change all the values to y. So instead of x position, we want y position and the y position of the turret. And there we go. We've got the distance y. Now we can use these two values to compute the hypotenuse of that triangle. So grab out the operator block with the drop down menu and find the square root. Grab out an addition operator and we'll need two multiplication operators. Head over to your variables and go grab the distance and we need that twice and do the same thing for y. Once we have these two we just put them in the square root block. Just to show you there's no funny business going on. I've got the distance to tie it here. If I click that we get 131.120 and I click this and we also get 131.120. So they do the exact same thing. Pretty neat how Scratch does this for us. But our work isn't done yet. We need to replace this touching turret block. And we can work that out if the distance, just that hypotenuse link, is less than the ship radius plus the turret radius. So how do we work out what these two things are? Well to work out the turret radius, I've just set it here to the 00 point. And I'm just going to move it across the x-axis until the tip of the cannon there is in line with the y-axis. And here it says negative 22. So the radius is about 25. I can do the same thing for the rocket ship. Here I've set it to 00. And I'm just going to move it so it's in line with the y-axis. Its radius is about 20. I'm just going to check the other side to see if it's a little bit bigger because I reckon it looks slightly bigger. No, it's about 20. So we're going to go 25 plus 20 and that's equal to 45. And I'm going to whack that value inside a constant variable. I just signify a constant by capital letters and call it collision distance. And then I'm going to set collision distance. I could just write 45 in here because I know it is. But I'm just going to put the addition sign in there in case I change the widths or the sizes of these two objects. So we said 25 plus 20. And I could add a comment here to let anyone else know what these values actually mean. So now we can get rid of that Boolean block. And we can check to see if the distance between our two objects is less than that collision distance. And then we're going to say crash. Let's test it out. So we're going around the screen. And then we collide into the cannon. And there we have it. There is a crash. Cool. So that works. So once we've detected a crash, let's broadcast a message. And we're going to call this message lose life. Then we're going to switch over to the health bar. And when we receive lose life, let's change our ship lives by negative one. Now you'll see that when we collide with our turret, our indicator will go down and also our ship lives will go down. There's also going to be a little bit of an issue. But let's check it out. There we go. Crash. And our health bar indicator went down. But our ship lives are negative six. The reason for that is every time we collide with the turret, we're broadcasting that message and we just keep changing it. So we definitely don't want our rocket ship over the turret like this. We're going to expel it out a distance away when it crashes. That's what we're going to do in the next tutorial. And we're going to explore the sign and cause trig functions and do a little bit of revision with ATAN. But hey, you're doing awesome. And this is all very useful when you move out of scratch and you move into other programming languages like JavaScript or Python. So keep at it, post your questions if you've got some confusions, and I'll see you in the next one.