The aim is to create an app that allows the user to draw lines on the screen by dragging a mouse pointer or using an equivalent action on the touch pad. It should also allow the user to change the color and line thickness at any point and to be able to save the screen image. Like a paper drawing the picture will not be editable except by re-drawing. The overall Scratch environment is as illustrated in Figure 1..
This is a short video recording to illustrate the use of Drawer. It is not a program so it will not allow you to draw with the app.
As usual we start the development by designing our own sprites. We will not be using the default cat sprite, Sprite1, so right click on that sprite icon and delete it. What we do need is a pen icon of some sort that the user can drag around the screen to produce a drawing. So in the New sprite toolbar of the Sprites pane, use the brush "paint new sprite" icon to open a new sprite. This is called Sprite1 (unless you have not deleted the original) but we would prefer a more informative name so click on the Info link and edit the name from Sprite1 to Pencil. Then click on the left pointing arrow to exit the Info panel.
Now we have a Pencil sprite icon in the Sprites pane and a new Pencil sprite open in the editing pane on the right. This should have the costume tab selected to show the default costume, called costume1. Also the Paint application should be opened ready to let you draw costume 1. However, we do not want a costume for the Pencil. We will just draw with the mouse pointer. So the costume can be left blank.
Then we click on the Scripts tab to start programming the sprite. But first we need to set up two variables and add a starting script to the Stage sprite. So we select the Stage and do both tasks from there.
We can set up the variables from the Data palette. We use the Make a variable button to create two variables called color and width. Both are "For all sprites". The color variable will hold the current value of the line color and width will hold the current value of the line width. Both can be changed at any time during the drawing process so their values need to be stored in variables.
There is a point to note about the color value. These have to be numbers in the range 0 to 200. The color cycles from red at 0, though yellow, green, blue and magenta and back to red at 200. So the starting value used in this example will start the drawing with a red line.
Now we can write the script for the Stage. We start as usual with a Green flag block by dragging that from the Events palette onto the scripting pane. Then we add a clear block from the Pen palette and two blocks to set the starting values for color and width form the Data palette and finally a broadcast block from Events. This sends a new message, draw, to the rest of the program. It will be picked up by Pencil to initiate its drawing script.
So the complete Stage script is as shown in figure 2.
We now have to code the main action of our app, to do the drawing. In the Pencil sprite we open the Scripts tab and start our script with a "When I receive draw" block. The draw message has already been named so it should be presented as an option in the drop down list. Now our sprite will start drawing.
The simple way to do this is in a forever loop in which the pen will constantly keep going to the mouse x and y positions in each iteration of the loop. In other words it will follow the mouse pointer. During this process we have two options. If the mouse left button is being pressed, the mouse is "down" and its movement should be traced with the drawing action. If, on the other hand, the mouse button is not being pressed it should just follow the pointer without drawing. So in our loop we go to the mouse x and y positions then use an "if else" block to decide if we draw or not. If the mouse is "down" we have to set the pen color and width then put the "pen down" to make it draw. Otherwise we just keep the "pen up" and it does not draw allowing the user to move to a new position before starting to draw.
Note that an easier code choice is to use "go to mouse pointer" instead of "go to x: mouse:x y:mouse y" but the latter leaves you some options for further development such as limiting the x and y coordinates of the picture, so it is used here.
However,there is on slight complication here. When we run the program by clicking on the start flag, the script will interpret that as a "mouse down" action and start drawing. To avoid this we add a single block before the loop starts. This is a "wait" block from the Control palette and it waits until the mouse is not down. We don't have a mouse up action in the Sensing palette so we use "NOT mouse down" instead.
The complete script is illustrated in Figure 3.
Now we can run the app and use the mouse pointer to test the scripts we have written so far. This should draw lines on the screen in whatever color and width you have set up in the start script.
What we have is a mildly interesting app that draws red lines on the Scratch screen. However, we would also like to let the user change the line color and its width during the drawing process. There are several ways we can do this but they are severely limited by the fact that we also intend to allow the user to save the screen drawing. This means it will be difficult to add screen controls which would have to be removed before the screen capture process.
The strategy here is to draw a single dot in the top left corner of the screen and use this to indicate the current color and width then the user can remove it by reducing the width to zero before capturing the screen. It sounds complicated but is in fact a simpler approach than many of the alternatives.
Then we can change the color and width by using the keyboard arrow keys for up, down, right and left. We can do this quite simply by adding blocks such as "When up arrow key pressed" to respond to the arrow keys. So there are four of these to increase and decrease the color and width. In each case we change the value by 1. We can let the Line sprite change the color and width variable values which will be automatically used by Pencil in drawing new lines. We create new messages, called edit, in the usual way and the result is a a set of new Stage scripts as shown in Figure 4.
Now we have to write the Line script that responds to the edit message. It is started, of course, with a "When I receive edit" message then it raises the pen to move to some position in the top left corner of the screen where we will draw the line indicator. We will make this x=-220 and y=160 but you can change it, of course. We can set the pen color to the value of the color variable and its width to the value of width, either of which was incremented or decremented when the edit message was sent. Then we put the pen down and draw a line of length 1 step which roughly creates a circle. Then we lift the pen up to let the user move it away from the line indicator.
That should be enough to keep the indicator constantly updated but it isn't, of course. If you think about it - or try it - you will see that there is a problem. When the indicator size is increased, the circle increases just fine, but when it is decreased (by pressing the left key) it does not appear to shrink as it should. The reason is that the existing larger circle is still showing and concealing the new smaller circle. We need to delete the existing circle every time it is supposed to get smaller then redraw it. Deleting is not an option unless we record every step of the drawing process and repeat it without the last action. This can be done but a much easier way is to just redraw the indicator in the screen background color, which is white in our example, to cover up the old indicator.
So before we draw the new indicator we set the color to white and draw a slightly larger indicator to endure there are no edge effects. The white color is obtained from a "set pen color to box" block from the Pen palette. When you click on the box it is supposed to open a color chooser window but in Scratch 2 it does not. So you have to click on the box then move the selection pointer to the screen and click on that to select its color.
With that addition, the Line script is now as shown in Figure 5.
The app is now finished. You can run it and try all the operations to make sure it does what it is designed to do. The only thing we have not programmed is some sort of action to save the screen image as a separate file. Most users would like to save their work. There is no way to do this from inside Scratch but the user can at any time right click on the screen and accept the option to save it as a png file. First the user has to hide the line indicator, which is not part of the picture. This can be done by simply reducing its width to zero. So you might like to add some instructions to inform the user of this process.
You can provide separate instruction or build them into the app. In the latter case, you need to create a new sprite with the text instructions and display this, perhaps, for a few seconds when the app is started. In that case, you should create a new sprite called Instructions and edit its costume to contain some text. You can select a font and resize it by using the selection tool and dragging on the corner of the selected area. Then you can drag it to some suitable position. The Instruction script is very simple. When the green flag is clicked you show it for a few seconds then hide it as shown in Figure 6 along with the displayed message.
That is the complete app. You can extend it in any way you like and publish it.