So, I've got the Sleuth app opened already. You can find that at the top of your Coursera page as well. Once you've got it open, you're going to see three options. You're going to see "How am I doing." If you click on that, you can see what your current score is and how many cases you've attempted and so on. You'll also see about Sleuth which gives you just some general information about the game. But the one we're going to look at now is, "Let's solve some crimes." So, when I click on that, I can see all the cases that are available for me to solve. At the moment, the only case that's available here is case 101, the case of Lina Lovelace. When you do this, you'll actually see more cases available than that. But we're just going to start with this one. We're going to start with the first stage Central Station. You can see there's actually four stages here but we can't yet attempt the later stages because we haven't solved Central Station. So, I'm going to click on this, and now we can see that we've got a button in order to download our crime. So, I'm going to download it, and you should get a zip file probably either on your desktop or in your download folder. So, I think mine has appeared in the downloads folder. The next thing I'm going to do is, I'm going to unzip that file. If you're on Mac, you should just need to double-click this file, but if you're on Windows, it should be pretty simple to extract the file. You shouldn't need to add in any kind of proprietary software in order to do this. Once I've got that folder unzipped, you'll notice that it's actually just a regular p5.js sketch, like the other sketches you've been working with. The next thing we need to do is to open the sketch in the brackets editor. Now remember to drag the whole folder in. Don't try and open just the sketch.js file. You won't be able to run the code. Once I've got that loaded and I'm looking at the sketch.js file, the first thing you might notice is that there is an officer written here. Mine has this name but you'll have something else written there and a case number. It's really important that you don't delete this text or modify it in any way. This is the text that Sleuth uses in order to grade your code. The next thing you get are some instructions. So, these instructions tell us a little bit of story but they also tell us what we need to do. In this case, we need to draw a rectangle around the image of Lina Lovelace. If I look at the image that's part of this package, so we've got image.jpeg, I can see there's Lina Lovelace standing in the middle of the scene, and I'm going to need to draw a rectangle around her. If I look back at the instructions as well, it says that, "The rectangle should surround Lina as accurately as possible without including anything else." So, I'm going to need to get this rectangle really close to the edges of the drawing. It also tells me what commands I need to use. So, in this case, I need to use the rect() command. So, I'm going to run the sketch and see what we've got so far. So far, I can just see the image. The next thing I'm going to do is try and draw the rectangle around Lina Lovelace. So now, there's a really useful tool in the brackets editor, where if I click on just the image and I move my mouse over, you can see but you get the x and y coordinates of where the mouse is. This is going to allow me to get my rectangle accurate really quickly. I'm going to be very carefully choose this point. So, x here is 432 and y is 163. I'll say again, when you do this puzzle, it will be different. It won't be the same coordinates. So, just get these coordinates in my head again 432,163. I'm going to use the rect() command that you've just learned. In the x parameter, I'm going to put 432, and in the y parameter, I'm going to put 163. So that will put the top left-hand corner of a rectangle in the right place. But I don't yet know what size it should be. Nevertheless, I'll just take a guess and I'll say, if it's a 100 wide, and I know that it's going to be a bit taller than that, so I'm going to put 200 for the heights. I save my sketch and I see how it's updated. So now, I can see a rectangle there but I can see that firstly, it's definitely not wide enough. So, I think I could make the width probably 150 and that might work. Let's try that, 150. That's wide enough but now it's not tall enough. So, I reckon that could be 300. Let's see how that works. Now, I've surrounded Lina Lovelace. I'm not sure whether it's accurate enough yet or not but I'm going to give it a go. I'm going to upload my sketch and see whether it gets accepted or not. To do this, I go here to the select the sketch.js file, and I hit Browse, and I navigate to my projects and I select the sketch.js. If that's worked, you should see the case number appear in this window here. Then I just hit the submit solution and my code is going to be graded. It tells me that I correctly identify Lina Lovelace. That was accurate enough and I got 100 percent. That's great. Now I can continue and I get a message from the chief. So, I pass the first stage and now I'm told not to let her out of my sight. Let's see where she heads next. Now, I can see that the Central Station stage has been solved, I could go back and try that again if I just want to for fun but now I move to the next stage, Smalltalk Speakeasy. So, I'm just going to show you a little bit of this and then we'll stop and I'll leave you to it. I'm going to download the crime. So, I've downloaded the sketch. I'm going to now unzip it again. When I look in here, I can see just as before, it's a basic p5.js sketch. So, all the puzzles are going to be like this. I go to the brackets editor and I carefully drag the whole folder in there and open up the sketch. I can see now I'm on Stage 2, the Smalltalk Speakeasy. I can read the story, and now I find that I have some more instructions. I've got to do more than one thing. It says, first I have to identify Lina by drawing a rectangle with a blue outline around her. This is a little bit harder. Then I have to identify the woman with the cigarette and the feathered hat. I have to draw a rectangle with a green outline around her. Now, I'll say this again. This puzzle will not be exactly the same as the puzzle that you get to solve. It will be very similar but you might find that the positions are different and the colors of the outlines are different in this case. So, I've got two commands. I can use rect() and stroke(). I'm going to get started but I'm not going to get the whole way through this one. So, let's have a look. I can see the woman with the cigarette and I can see Lina Lovelace. I think I'm going to start with the woman with the cigarette. I tried to get all of her in here. So, that's x is 143 and Y is 518. So, I'm going to go rect 413 and y 518, and let's just make it 100 by 100 because I'm not quite sure what the size of the rectangle should be. So, we'll have a look at this. I've done something wrong because my rectangle is quite in the wrong place. So, let's just go back and measure the image again. It should be x, 135. That's much better number. I'll go back and change that, and we'll have a look. You can see I've only just captured the cigarettes. I'm just going to do one more bit, then I'm going to show you some marking. Let's change the stroke color. The sketch asked for a green outline. So, let's try and do that. I'm going to go stroke, you want no red value, 255 for green and zero for blue. So, then if I look, I now have a green rectangle. That's correct. Now, I know this is wrong. But just to show you how things work, I'm going to try and upload this and see what happens in the Sleuth app. So, I go back here, I browse and I make sure I select the right sketch.js file. It won't work unless you do that. I submit the solution and we see what Sleuth does. This time it tells us that we partially identified the woman with the hat and the cigarette. We haven't identified Lina Lovelace, and the rectangle identifying the woman with the hat and the cigarette is too small, which you can see here it's definitely too small. We've got some improvements to do. You can see that it gives us a percentage for how complete we are on the crime. So far, it thinks we've done about 40 percent of solving this crime. So now it's up to me. I can continue and try and improve this, but I'm going to let you do that yourselves. One other thing to point out is, you can see that I have only four attempts remaining. So, if you get through all of your attempts before solving the crime, the chief will tell you that you're getting obsessed with the case, and will stop you from solving it for a little while just to let you get on with some other stuff. Then if you come back to it, say a day later, you'll find that you're able to have another go at solving the case. So, one more thing is now if I look at how I'm doing, you can see that my score has gone up and there are some information here in the other statistics. Now, it's your turn. I hope you enjoy it.
