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 centre 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 centre of the stage has coordinates (0,0). The x position is the horizontal position relative to the centre of the stage (right of centre is positive). The y position is the vertical position relative to the centre of the stage (above the centre is positive). For the record, the exact coordinates of the corners are
• (-240,-180), (239,180), (-240,-179), (239,-179).
• 
  
• When you save your work in Scratch at school please save to the 'H' drive - this is your normal personal space even if you don't see your name next to it.

Exercise 1: Make the cat dance!

Open Scratch - you'll find it at school in My Computer>Classes>Ward>ict_all_levels. 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 centre panel (the scripts area) to form this script:

When you click the green flag above the stage (or simply click the stack itself) this script will run and the 'forever loop' will run the blocks inside it forever (or until you click the red stop sign or click the stack a second time). Inside the loop are blocks to move the cat sprite forwards and backwards as well as to change the cat's appearance or 'costume'. If you click the costumes tab above the scripts area then you can see the cat's two costumes - you can add additional costumes to any sprite by loading ready-made ones or by making your own in the paint editor. Also inside the forever loop are instructions to play drum sounds (make sure your computer's sound is turned on). The drum sound blocks not only play sounds but also make the program pause for a moment - if these blocks were not present then the cat would step back and forth so fast you would not seem him moving very well. Save your project into your space (the H drive) with the name 'ex 1'. Then make a new project (File>New) - your teacher will probably give you 15 minutes to explore Scratch now because playing with programs is a pretty good way to get to know them...

Exercise 2: Logo-like programs for simple shapes

View the following video and recreate the same program for yourself. 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 dragging it with the stamp tool. Save your project in your personal folder with the name 'square'.

Viewing the video as an SWF file is preferable to viewing as a web page since the SWF file will automatically resize to fit the window.

In School

Out of School

web page

SWF file

web page

SWF file

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'.

To get this program we need to be able to calculate how many degrees to turn between drawing the lines of the polygon. For a square we turned 90°. For a triangle we turned 120°. Can you see that the angle can always be found by dividing 360° by the number of sides? 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 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':

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.

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 centre of the stage (the centre 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.