WEBVTT 00:00.000 --> 00:21.880 All right, we are back to paint, and by now we've spent quite a bit of time setting up 00:21.880 --> 00:26.520 this paint application, and right now we are ready to program it. 00:26.520 --> 00:30.840 So here's what I'm going to do. I'm going to start with the pencil sprite, and I'm going 00:30.840 --> 00:35.400 to program it first. So go ahead and click on the pencil sprite, and select it if you 00:35.400 --> 00:39.760 don't have so already. Then I'm going to go to the events section, and I'm going to 00:39.760 --> 00:44.720 drag this very familiar wind flag. Click block. I'm going to zoom this in so that the 00:44.720 --> 00:49.320 code is extra clear. The first thing that I'm going to do is I'm going to make this pencil 00:49.320 --> 00:54.560 forever. Follow my mouse on the stage. So here's how I'm going to do it. I'm going to 00:54.560 --> 00:59.680 go to the control section, the orange one, and I'm going to bring this forever block. 00:59.680 --> 01:04.200 And I'm going to go to motion the blue section, and I'm going to bring this go to. Block 01:04.200 --> 01:08.480 and I'm going to select the mouse pointer. So this is the entire code that we need to 01:08.480 --> 01:13.320 make the sprite forever, follow our mouse. So when I click the green flag, you see that 01:13.320 --> 01:18.600 the pencil always follows my mouse, which is pretty cool. Now, if you notice, this pencil 01:18.600 --> 01:24.240 always follows wherever my mouse is, but we would not like the pencil to follow my mouse. 01:24.240 --> 01:28.240 If the mouse pointer is in the menu section right over here, because it interferes with 01:28.240 --> 01:33.440 our buttons. So we need to add a condition so that the pencil would not follow my mouse. 01:33.440 --> 01:38.040 If the mouse is down in this blue section over here, so what we need to do is add an if 01:38.040 --> 01:43.000 statement. So I'm going to go to control again, and I'm going to add an F block. I'm going 01:43.000 --> 01:47.960 to wrap the go to mouse pointer like so. And inside the condition, I'm going to go to 01:47.960 --> 01:52.720 operators, the green section, and I'm going to bring in the greater than operator. And 01:52.760 --> 01:56.760 in the first space, I'm going to go to sinking the light blue one, and I'm going to bring 01:56.760 --> 02:02.680 in this rounded mouse Y. So you know about coordinates, right? The Y coordinate is the 02:02.680 --> 02:07.360 vertical coordinate of the mouse in this case. So the mouse vertical coordinate needs to 02:07.360 --> 02:13.280 be greater than probably this coordinate right over here. So 100 or something like that. 02:13.280 --> 02:17.640 So if mouse Y is greater than or it's upper, then 100, which is the boundary of this 02:17.640 --> 02:22.440 blue section over here, then the pencil will follow my mouse. Otherwise, it will not 02:22.440 --> 02:27.640 follow my mouse. It won't do anything. So if I hit the flag again, see, the pencil 02:27.640 --> 02:32.160 follows my mouse. But if I bring the mouse down towards the blue section, notice that the 02:32.160 --> 02:36.280 pencil stopped following me. And if I bring the mouse back up, the pencil follows me 02:36.280 --> 02:41.400 again. All right. So this is pretty cool with just a little bit of code. We've programmed 02:41.400 --> 02:45.560 the pencil sprites to either follow us or stop following us if we're in the right area 02:45.560 --> 02:50.600 of the stage. All right. The next thing that I'm going to do is make this pencil act 02:50.600 --> 02:55.640 like a pencil. So I'm going to add pen features to scratch. So go here on the bottom left 02:55.640 --> 02:59.960 part of the screen to add the pen extension for scratch. So click on that button and 02:59.960 --> 03:04.520 click on the pen. So notice that we suddenly have a new section here with new green blocks 03:04.520 --> 03:08.920 that we can add to our code. So here's what I'm going to do. I'm going to bring this last 03:08.920 --> 03:13.920 set pen size right below when the flag is clicked. I'm going to set the pen size to three 03:13.920 --> 03:18.080 so that we can notice something on the stage. And then I'm going to bring in this set pen 03:18.080 --> 03:22.320 color to a given color. And then I'm going to click the circle inside of it. And I'm going 03:22.320 --> 03:28.240 to drag the third slider to the left to make the color black. All right. So I'm setting the color 03:28.240 --> 03:33.840 to black and the pen size to three. Now in order to actually make the sprite draw something on the 03:33.840 --> 03:40.000 screen, we need this block pen down to stop the sprite from drawing. We need this block pen up. 03:40.000 --> 03:45.040 We need this pen down block to be active when we click the mouse button and pen up to be active 03:45.040 --> 03:51.120 in any other case. So we need an f else block from the control section. So I'm going to click on 03:51.120 --> 03:56.560 control and then bring in the if else block. So if the mouse button is down, which we will get from 03:56.560 --> 04:02.000 the sensing section, the light blue one, and bring this diamond shaped mouse down. So if the mouse 04:02.000 --> 04:06.480 is down, then we also need the pen of the sprite to be down, which will leave some marks on the 04:06.480 --> 04:12.960 stage. Otherwise, the sprite will not draw anything. So bring this if else block inside the other 04:12.960 --> 04:19.760 if the block below go to the moose pointer. All right. So something like this, then feel free to 04:19.760 --> 04:25.600 hit on the green flag to see what we've done. So the pencil follows me, but if I hit and drag 04:25.600 --> 04:30.800 the mouse button, notice that the pen actually leaves a mark on the stage. So we've made the pen 04:30.800 --> 04:36.800 already draw something on the screen. This is awesome, but notice something if I stop the application 04:36.800 --> 04:42.240 and start again. Notice that this mark is clearly still visible on the stage. We'd like the stage 04:42.240 --> 04:48.000 or the canvas, the white canvas, which occupies most of the stage to reset to white. So we need all 04:48.000 --> 04:52.960 the marks to be erased. This means that I'm going to go to the pen section and I'm going to bring 04:52.960 --> 04:58.880 this very first erase all right below when flag clicked so that when we start the application again, 04:58.880 --> 05:04.560 all the marks that we left in the previous drawing will be deleted. All right. So like this. 05:05.440 --> 05:11.520 All right. So we have a drawing pencil. Now the next step is going to be making the pen change 05:11.680 --> 05:16.960 its color. When we click on one of these colored buttons. So I'm going to click on this red button. 05:17.520 --> 05:21.840 I'm going to zoom in on the code a little bit and I'm going to go to the event section and I'm 05:21.840 --> 05:27.680 going to drag this when this sprite click block. So when this sprite is clicked, we want the pencil 05:27.680 --> 05:33.120 to change its color to red. So I'm going to go to the pen section and I'm going to drag this set 05:33.120 --> 05:38.400 of pen color to. And now I'm going to click inside this color space and I'm going to pick this 05:38.400 --> 05:44.560 eyedropper icon which will let me select a color from the stage that I want. So I'm going to click on 05:44.560 --> 05:49.600 the red zone of the red button which will automatically select the right red color to choose. 05:50.240 --> 05:55.440 So let's see the effect of that. So I'm going to hit the green flag. I'm going to draw something 05:55.440 --> 06:00.640 on the screen. And now I'm going to click on this red button and I'm expecting the pencil to draw 06:00.640 --> 06:06.560 a red. But unfortunately the pen still draws black. Let's understand why I'm going to drag some 06:06.560 --> 06:11.760 additional blocks. I'm going to set the pencil size to 10 and I'm going to do a pen down and a 06:11.760 --> 06:18.880 pen up. So leave a single mark on the screen. Now if I hit the flag again, the pencil draws black. 06:19.520 --> 06:24.560 After I click on the red button, the pencil still draws black. But notice what's happening. 06:25.200 --> 06:28.960 If I drag the red button away, notice that it left a mark here on the stage. 06:29.600 --> 06:34.720 The reason is that every sprite has its own pen, so the pencil has its own pen which draws black. 06:35.360 --> 06:40.640 And in particular, this red button has its own pen, which has just left a red mark on the screen 06:40.640 --> 06:46.880 because we programmed it to do that. So we've set the pen color to red. We've said pen size to 10, 06:46.880 --> 06:52.080 which means a pretty thick mark. And then we've left a single mark with pen down and pen up. 06:52.080 --> 06:57.360 But this is not exactly what we want. We want to tell the pencil to set its pen to the red color. 06:57.360 --> 07:02.320 So we're going to learn something new in this video. And that is broadcasting and receiving messages 07:02.320 --> 07:07.120 in between sprites. So let's fix the layout of this red button by setting its x-coordinate 07:07.120 --> 07:14.000 back to 150 and 120. Okay? And let's remove all this green code and let's discuss broadcasting 07:14.000 --> 07:19.840 and receiving messages. So sprites have the capability of broadcasting and shouting messages 07:19.840 --> 07:25.280 to all the other sprites. When a sprite shouts a message, all the other sprites can be programmed 07:25.280 --> 07:31.520 to listen and react to that message. Let me show you. So if I go to the event section, 07:31.520 --> 07:36.400 the yellow one, and if I bring this broadcast message one block right below when the sprite 07:36.400 --> 07:41.600 clicks, and if I click the drop down and select the new message, I can create a new message 07:41.600 --> 07:47.680 that the pencil may receive and react to. I'm going to name this message red. So when the red 07:47.680 --> 07:52.480 button is clicked, this message that we called red will be sent to all the other sprites, 07:52.480 --> 07:56.560 and we can program each and every one of them to react when they receive this message. 07:57.520 --> 08:01.440 So I'm going to go to the pencil sprite and I'm going to drag the starter. 08:02.320 --> 08:07.040 When I receive the red message, so let me go to the look section first, and I'm just going to 08:07.040 --> 08:12.640 bring this same block and I'm going to insert. I received red just for you guys to notice how the 08:12.640 --> 08:18.160 pencil sprite reacts. So I'm going to stop and start the application again. And if I click on the 08:18.160 --> 08:24.800 red button, notice what's happening. Click. So notice the sprite has received red and it's seeing 08:24.800 --> 08:30.400 this message on the stage. Now, instead of saying I received red on the stage, I'm going to drag 08:30.400 --> 08:35.840 this back and I'm going to insert a block from the pen section that says pink color too. And I'm 08:35.840 --> 08:40.240 going to click on the circle inside and I'm going to click the eyedropper and select the color red. 08:40.880 --> 08:46.000 If I stop and start the application again, notice I'm drawing black on the screen. And if I 08:46.000 --> 08:52.640 click on the red button, the pencil starts drawing red. All right. So this was a cool lesson you 08:52.640 --> 08:56.960 learned about following the mouse and you learned about the messages the sprites can send and 08:56.960 --> 09:02.480 receive. Until the next video, I invite you as an exercise to do what I did for the red button 09:02.480 --> 09:08.160 to all the other colored buttons on the stage. So as a recap, what I did for the red button was that 09:08.160 --> 09:13.200 when the sprite was clicked, I broadcast a new message and the pencil sprite reacted to that 09:13.200 --> 09:18.560 message by saying, when I received that particular message, it set the pink color to the appropriate 09:18.560 --> 09:23.920 color of the button. So as an exercise, I'm going to invite you to do the same for orange, 09:23.920 --> 09:30.000 yellow, green, blue, indigo and violet. Of course, I'm going to do them in the next video, 09:30.000 --> 09:36.400 but I'm going to challenge you to do them as an exercise. All right. So I'll see you in the next video.