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)
