Projects

Paint box
Make your own paint program

Step 1 Introduction

Make your own paint program!

What you will make
You will click on the green flag to start, and you’ll use the mouse to move the pencil and hold down the left mouse
button to draw. Clicking on a colour will change pencil colours, and clicking on the eraser will change to the eraser!

What you will learn

Add the pen extension in Scratch
Use broadcasts to control a sprite in Scratch
Recall how to respond to mouse events in Scratch
 What you will need
Hardware
A computer capable of running Scratch 3

Software
Scratch 3 (either online (https://rpf.io/scratchon) or offline (https://rpf.io/scratchoff))
Downloads
Offline starter project (https://rpf.io/p/en/paint-box-go)

Additional information for educators

If you need to print this project, please use the printer-friendly version (https://projects.raspberrypi.org/e
n/projects/paint-box/print).
You can find the completed project here (https://rpf.io/p/en/paint-box-get).
Step 2 Make a pencil

Start by making a pencil that you can use to draw on the Stage.

Open the ‘Paint box’ Scratch starter project.

Online: open the starter project at rpf.io/paint-box-on (https://rpf.io/paint-box-on)

If you have a Scratch account you can make a copy by clicking Remix.
Offline: open the starter project (https://rpf.io/p/en/paint-box-go) in the offline editor.
If you need to download and install the Scratch offline editor, you can find it at rpf.io/scratchoff (http
s://rpf.io/scratchoff)
In the starter project, you should see pencil and eraser sprites:
Add the Pen extension to your project.

How to add the Pen extension

To use the Pen blocks in Scratch, you need add the Pen extension.

Click on the Add extension button in the bottom left-hand corner.

Click on the Pen extension to add it.

The Pen section then appears at the bottom of the blocks menu.
 Add some code to the pencil sprite to make the sprite follow the mouse pointer forever so that you
can draw:

when clicked

forever

go to mouse pointer

Click the flag and then move the mouse pointer around the Stage to test whether your code works.

Next, make your pencil only draw if the mouse button is being clicked.
Add this code to your pencil sprite:

when clicked

forever

go to mouse pointer

if mouse down? then

pen down

else

pen up

Test your code again. This time, move the pencil around the Stage and hold down the mouse button.
Can you draw with your pencil?

Does your pencil not draw from its tip?

If the line your pencil draw looks like it is coming from the pencil’s middle, you need to change your pencil
sprite’s so the tip is the sprite’s centre.
Click on the pencil sprite, and then click on the Costumes tab.
Move the costume’s so the tip of the pencil is just above the centre.

Now move the pencil around on the Stage and draw. The pencil should now draw a line from its tip.
Step 3 Coloured pencils

Now you’re going to add different coloured pencils to your project and allow the user to choose between them.

Click on the Costumes tab of the ‘pencil’ sprite.

Rename the pencil-a costume to pencil-blue

Right click on the pencil-blue costume and select duplicate.

Name the new costume ‘pencil-green’, and colour the pencil green.
Draw two new sprites: one blue square and one green square. These are for choosing between the blue
and green pencil.

Rename the new sprites so that they are called ‘blue’ and ‘green’

Rename a sprite in Scratch

To rename a sprite in Scratch, click on the sprite:

The information about the sprite will be displayed above:

Edit the name of the sprite.

Add some code to the ‘green’ sprite so that when this sprite is clicked, it broadcasts the message
“green”.

when this sprite clicked

broadcast green

Broadcast a message in Scratch

A broadcast is a way of sending a message which can be heard by all sprites. Think of it like an
announcement made over a loudspeaker.
Broadcasting spells: Use the magic wand to click on the buttons and cast spells. What does each
spell do to the characters? See inside (https://scratch.mit.edu/projects/518413238/editor)

You can create a message to be broadcast. The message text can be anything you like, but it is
useful to give it a sensible description.
Find the broadcast block under Events

Select New Message in the drop-down menu.

Then type your message

 Send a broadcast
You can decide when to broadcast your message. For example:

when this sprite clicked

broadcast shrink

when backdrop switches to level 1

broadcast start

Receive a broadcast
Sprite can react to a broadcast by using a when I receive block. Multiple sprites can respond
when they receive the same message.
You can add blocks below a when I receive block to tell the sprite(s) what to do when they
receives the message.

when I receive shrink

change size by -10 negative numbers decrease the size

when I receive start

go to x: 100 y: 50

show

The pencil sprite should listen for the “green” message and change its costume and pencil colour in response.
 Switch to your pencil sprite. Add some code so that when this sprite receives the green broadcast, it
switchs to the green pencil costume and changes the pen colour to green.

when I receive green

switch costume to pencil-green

set pen color to

To set the pencil to colour to green, click the coloured square in the set pen color block, and then
click on the green square sprite.

Then to a similar thing so that you can switch the pencil colour to blue.
Click on the blue square sprite and add this code:

when this sprite clicked

broadcast blue

Then click on the pencil sprite and add this code:

when I receive blue

switch costume to pencil-blue

set pen color to

 Finally, add this code to tell the pencil sprite which colour to start with, and to make sure that the screen
is clear when your program starts.

when clicked

erase all

switch costume to pencil-blue

set pen color to

forever

go to mouse pointer

if mouse down? then

pen down

else

pen up

If you prefer, you can start with a different colour pencil.

Test your code. Can you switch between the blue and green pencil colours by clicking on the blue or
green square sprites?
 Challenge!

Challenge: more pencils

Can you add red, yellow, and black pencils to your paint program? Take a look at the earlier steps if you want a
reminder of how to do this.

Can you use your pencils to draw a picture?

Step 4 Undo mistakes

Sometimes mistakes happen, so add a ‘clear’ button and an eraser button.

Add the ‘X-block’ sprite from the library’s letters section. Colour the sprite’s costume in red and make it a
little smaller. This sprite is the ‘clear’ button.

Add a sprite from the Sprite Library

Click on Choose a Sprite to open the Sprite Library:

You can search for a sprite, or browse for one by category. Click on a sprite to add it to your project.
 Add code to the ‘X-block’ sprite to clear the Stage when the sprite clicked.

when this sprite clicked

erase all

You don’t need to use a broadcast to clear the Stage, because the erase all block does that job.

Do you see that the pencil sprite includes an eraser costume?

Your project also includes a separate eraser sprite.

 Click on this eraser sprite and then select show.

Here is how your Stage should look now:

Add code to the eraser sprite to send an 'eraser' broadcast when the eraser sprite is clicked.

when this sprite clicked

broadcast eraser

When the pencil sprite receives the ‘eraser’ message, it should switch its costume to the eraser and switch the pen
colour to white, which is the same colour as the Stage!
 Add some code to create the eraser.

I need a hint
Here is what the code should look like:

when I receive eraser

switch costume to eraser

set pen color to

Test your project to see if you can clear the Stage and erase pencil lines.

There’s one more problem with the pencil: you can draw anywhere on the Stage, including near the ‘clear’ and
eraser buttons!
To fix this, change the code so that the pen is only down if the mouse is clicked and the y position of the
mouse pointer is greater than -120:

when clicked

erase all

switch costume to pencil-blue

set pen color to

forever

go to mouse pointer

if mouse down? and mouse y > -120 then

pen down

else

pen up
Test your project. You now should not be able to draw near the buttons.
Step 5 Change the pen width

Next you will add code to allow the person using your program to draw things with different pen widths.

First, add a new variable called width.

Add a variable in Scratch

Click on Variables in the Code tab, then click on Make a Variable.

Type in the name of your variable. You can choose whether you would like your variable to be
available to all sprites, or to only this sprite. Press OK.

Once you have created the variable, it will be displayed on the Stage, or you can untick the
variable in the Scripts tab to hide it.
 Add this line inside the forever loop of the pencil sprite’s code:

when clicked

erase all

switch costume to pencil-blue

set pen color to

forever

go to mouse pointer

set pen size to width

if mouse down? and mouse y > -120 then

pen down

else

pen up

The pen width now repeatedly gets set to the value of the width variable.
 Right-click on the width variable displayed on the Stage, and then click on slider.

You can now drag the slider that is visible below the variable to change the variable’s value.

Test your project and see if you can change the pen width.
 Challenge!

Challenge: keyboard commands

Can you add code so that, instead of clicking on the coloured squares or buttons on the Stage, you can make
things happen by pressing keyboard keys? For example:

b = Switch to blue pencil

g = switch to green pencil
e = switch to eraser
c = clear screen

If you want to, you can also add code so that pressing the arrow keys changes the pen width.
Step 6 What next?

Now that you have completed the ‘Paint box’ project, try the ‘Boat race’ project (https://projects.raspberrypi.or
g/en/projects/boat-race?utm_source=pathway&utm_medium=whatnext&utm_campaign=projects),
which helps you make a game where you have to stir a boat around obstacles.

Published by Raspberry Pi Foundation (https://www.raspberrypi.org) under a Creative Commons

license (https://creativecommons.org/licenses/by-sa/4.0/).
View project & license on GitHub (https://github.com/RaspberryPiLearning/paint-box)