1-7 Drawing

Basic ideas

As you saw in the introductory video, the basic idea is to create some objects or characters (all called 'sprites' in Scratch) and then, for each sprite separately, to drag blocks from the left panel (the 'blocks palette') to the center panel (the 'scripts area'), joining them together to create 'stacks' (also called 'scripts'). A block or stack of blocks can be activated by single-clicking it. If you want to run several stacks at the same time then put a 'green flag hat' on top of the stacks, then when you click the green flag above the stage all those stacks will run at the same time. But don't think of the green flag as the 'run' button for in a sense your program is running all the time. If you have a stack that responds to the pressing of a key, for example, then that key will run the stack whether or not the green flag has been clicked.

Some other points:

To view the stacks belonging to a certain sprite then single-click that sprite UNDER the stage or double-click the sprite ON the stage.
If you want to move a complete stack within the scripts area then drag the TOP block in the stack.
Stacks can be broken apart just by pulling any block except for the top block - all the blocks below will follow. That means if you want to remove one block from the middle of a stack then you need to pull that block out and then pull back into the original stack all the other blocks underneath which followed the unwanted block. To delete a block or a stack from the scripts area just pull it from the scripts area to the left panel or right-click it and choose 'delete'. Similarly you can delete sprites by right-clicking and choosing delete. You can also use the delete tool (the scissors). To duplicate a stack or a sprite just drag it with the 'stamp' tool above the stage. You can also right-click on the stack and choose 'duplicate'. To copy a stack belonging to one sprite to a different sprite just drag the stack onto the target sprite below the stage.
To copy a stack belonging to one sprite to a different sprite just drag the stack onto the target sprite below the stage.
The undelete button gives you back the last thing you deleted. There is no 'undo' button so the only action you can undo is a deletion.
The size of the stage is 480 pixels wide by 360 pixels tall. The center of the stage has coordinates (0,0). The x position is the horizontal position relative to the center of the stage (right of center is positive). The y position is the vertical position relative to the center of the stage (above the center is positive). For the record, the exact coordinates of the corners are (-240,-180), (239,180), (-240,-179), (239,-179).

Exercise 1: Make the cat dance!

Open Scratch. First, in the sprites area under the stage, make sure the cat sprite is selected and not the stage. Then drag blocks from the left panel into the center panel (the scripts area) to form this script. To make sounds available to your script, click the Sounds tab, then Choose a Sound > Choose a Sound at the bottom left of the Sounds panel. Please don't get distracted by all the fun sounds that are available, don't waste time exploring them all, and keep the volume of your computer set low!

Exercise 2: Logo-like programs for simple shapes

We're going to use the pen, so you will need to add the 'pen' extension by clicking the 'Add extension' icon, bottom left. Note that what used to be called 'clear' in earlier versions of Scratch is now called 'erase all'.

Create and test this stack, then add two new stacks to create a triangle by pressing the letter 't' and a pentagon by pressing the letter 'p'. Remember you can duplicate an existing stack by right-clicking it and choosing 'Duplicate'.

To make this program we need to be able to calculate how many degrees to turn between drawing the lines of a polygon. For a square we turned 90°. For a triangle we must turn 120°. Can you see that the angle can always be found by dividing 360° by the number of sides?

Save your project with the name 'shapes'.

Exercise 3: Asking a question

Make a similar program to draw regular polygons but this time use an 'ask' block (in the sensors set) to allow the user to specify how many sides the polygon is to have. The answer typed in by the user is stored in a special variable called 'answer' which can then be used in later blocks. For example, the repeat loop can be set up so that it repeats for a number of times equal to the number stored in 'answer'.

The following script works well for polygons up to about 6 sides but much larger polygons will hit the edge of the stage and become distorted. Can you find a solution for this? Can you also modify the script so that each time a shape is drawn the program automatically re-poses the question? Note that the cat has been shrunk and placed in the top left corner of the stage.

Exercise 4: Broadcasting a message

Next we will try making scripts (stacks) that use or 'call' other scripts. In Scratch jargon we say that the first script 'broadcasts a message' and the other script receives the message and runs its scripts.

In our script we will make a script to draw a house which simply 'calls' our square-drawing script and then 'calls' our triangle-drawing script to place a roof on top of the square to make a simple house shape. We'll just have to be careful to make sure that the triangle is drawn in the right place so that it does indeed sit on top of the square.

Look at the following scripts. They are the same as the script that you saw in a previous exercise except that this time the 'green flag' script simply broadcasts the message 'square' and the other script receives the message and draws the square. Create the scripts and check that they behave as expected (shrink the cat and put it in the top left corner before you run the script).

The advantage is that now we have a script that can be called from inside other scripts, such as this 'house-drawing script':

I've left it up to you to make the script for drawing a triangle with sides of 150 pixels. You are probably expecting to get a square and a triangle when you click the green flag, not necessarily with the triangle correctly placed on top of the square. But I think you will get something much worse, perhaps a mess like I got:

This shape contains neither the square nor the equilateral triangle we expected. What went wrong? What happened is that the drawing of the square takes a little time but Scratch does not wait for the square drawing to finish before beginning to draw the triangle, so the two shapes get mixed into one. The solution then is to force Scratch to wait for the square to be completed before allowing the triangle to be drawn. Scratch has a special 'broadcast and wait' block that broadcasts a message and then waits for the other script(s) triggered by that message to finish before allowing the next block to run. So modify the green flag script so the it looks like this (note that I have also added a block to erase any existing drawing):

If you run the new scripts you should get a shape as above, with the square and triangle visible but with the triangle in the wrong place. To make the triangle appear in the right place we can set the direction to 30° (direction is measured clockwise from the vertical) just before the triangle is drawn so modify your 'triangle' script accordingly (use the blue 'point in direction' block) and then test and save your project ('house' would be a good name').

You might be wondering whether it wouldn't be easier to draw the house shape WITHOUT using broadcast messages. The answer is yes, but the above exercise is mainly designed to introduce broadcast messages which you will certainly find useful later, such as in the next exercise. One reason to use messages in this way is that it allows you to split your program into reusable 'modules' and also to stop the main structure (the green flag script above) from getting cluttered with distracting detail.

Exercise 5

In this exercise you will make a new script that will call (trigger) the house script three times to make this 'village':

Here is the beginning of the solution:

You really need to study closely only the first of these scripts. You can see it will go to a specific location, trigger the house drawing script, then go to a different location and trigger the house drawing script again. Therefore this script is incomplete for it draws only two houses, not three.

The other scripts are basically the same as what you saw before except that:

the house script has a different 'hat' block (always-on-top block) so that it can now be 'called' (triggered) by another block
the last block in the house script is now 'broadcast and wait' rather than simply 'broadcast' since other scripts will now run after the house script has run and we want to make sure that the house block has time to complete its drawing
the triangle and square blocks have been modified so that the pen is only down when it is needed (to make sure lines are not drawn between the houses) and a block has been included to make sure the cat is pointing in the right direction before the square is drawn.

It's your job now to create the above scripts and to check that they work as expected, then extend the main script so that it draws the third house in the right location (the houses should be evenly spaced). As usual, it's a good idea to shrink the cat sprite so that it doesn't hide too much of the drawing. Please save this project with the name 'village'.

Exercise 6: Loops within loops: a flower

Try this neat little script to make the attractive flower shown. Take a good look at the flower and note that it is in fact made up simply of 10 squares. For this script the cat should be placed in the centre of the stage before the script is run. There is no 'green flag cap' on this script so you must run it by single-clicking it. Notice that the cat is hidden by this script but even the invisible cat can still trace lines. Click the 'show' block in the left panel to make the cat visible again.

It's interesting to realise that we can put a loop inside a loop like this, but we can also use this flower to get more practice in broadcasting a message and responding to it. We can use our 'square' script again as shown below. Notice how easy it is to understand the green flag script.

Challenge: design your own flower and save it. You can use either the 'loop within loop' method or the 'broadcast' method.

Exercise 7: Making a 'squiral' using variables,

How would you call this shape? it's a 'square spiral' so let's call it a 'squiral'... Now how would you make this shape? Notice that each line being drawn (starting at the centre) is slightly longer than the previous one. We can draw this by modifying our 'square' script so that the each line drawn has a length longer than the previous one. This means the length of the line is variable and we must use a 'variable' to contain it. Think of a variable as like a named container - the container can contain numbers, letters or a combination.

Before you can use a variable you have to create it. Open the 'Variables' group and click 'Make a variable' and give the variable the name 'length'. You will be asked whether this variable will be used only by this sprite or by all sprites. If the variable is used by this sprite only you SHOULD choose that option because that means that other sprites could use a different variable with the same name and also because it reduces the likelihood of mistakes later. So choose 'only this sprite' in this case.

Now that you have created the variable you can create a script like the one shown. Inside the repeat loop we have blocks to move the (invisible) cat forwards and turn it through 90°, just like for a square, but this time the cat moves forward a distance equal to the number stored in the variable 'length' and that variable is increased ('incremented') by 3 after each line is drawn. There are many lines in the above drawing, 50 in fact, so the loop repeats 50 times. So the first line is drawn with a length of three pixels, the next is drawn with a length of 6 pixels, the next with 9 and so on until 50 lines have been drawn.

Note also that there is a block which ensures the line drawing always begins in the center of the stage (the center has horizontal position x = 0 and vertical position y = 0).

Challenge: Make a script for drawing a shape like this and save it with the name 'squiral2'. Hint: I only changed the number of repeats (from 50 to 80) and one other number...

Exercise 8 onwards

That's the end of the Logo-like drawing exercises that we will do in Scratch (though you are welcome to experiment with drawing until the cows come home in your own time). Click HERE to jump to the next set of lessons in Scratch.