Introduction

In this project, you will be making your own paint program!

screenshot
screenshot

Step 1: Making a pencil

Let’s start by making a pencil, that can be used to draw on the stage.

Activity Checklist

  • Start a new Scratch project, and delete the cat sprite so that your project is empty.

  • Add the pencil sprite to your project.

    screenshot
    screenshot
  • Rename your costume ‘pencil-blue’, and use the ‘Fill’ tool to make the pencil blue.

    screenshot
    screenshot
  • As you’ll be using the mouse to draw, you’ll want the pencil to follow the mouse forever. Add this code to your pencil sprite:

screenshot
screenshot
  • Test out this code by clicking the flag and then moving the mouse around the stage. Does this work as you expected?

  • Have you noticed that it’s the centre of the pencil, and not the tip, that follows the mouse pointer?

    To fix this, click on the ‘edit’ button of your pencil sprite’s costume, and click ‘Set costume center’.

    screenshot
    screenshot
  • You should notice that a crosshair appears on the costume. You can now click just below the tip of the pencil, to set this point as the costume centre.

    screenshot
    screenshot
  • Click the ‘Scripts’ tab, and then test out your pencil again - does it work better than it did before?

  • Next, let’s make your pencil draw if the mouse has been clicked. Add this code to your pencil sprite:

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

    screenshot
    screenshot

    If not, check that you placed the crosshair just below the tip of the pencil, not on the tip of the pencil.

Save your project

Step 2: Coloured pens

Let’s add different colour pens to your project, and allow the user to choose between them!

Activity Checklist

  • Click on your pencil sprite, click ‘Costumes’ and duplicate your ‘pencil-blue’ costume using the ‘copy’ button.

    screenshot
    screenshot
  • Rename your new costume ‘pencil-green’, and colour the pencil green.

    screenshot
    screenshot
  • Create two new sprites, which you will use to select the blue or green pencil.

    screenshot
    screenshot
  • When the green selector icon is clicked, you need to broadcast a message to the pencil sprite, telling it to change its costume and pencil colour.

    To do this, first add this code to the green selector icon:

    screenshot
    screenshot

    To create the broadcast block, click the down arrow and select ‘new…’.

    screenshot
    screenshot

    You can then type ‘green’ to create your new message.

    screenshot
    screenshot
  • You now need to tell your pencil sprite what to do when it receives the message. Add this code to your pencil sprite:

    screenshot
    screenshot

    To set the pencil to colour to green, click the coloured box in the set color block, and click on the green selector icon to choose green as your pencil colour.

  • You can now do the same for the blue pencil icon, adding this code to the blue selector sprite:

    screenshot
    screenshot

    …and adding this code to the pencil sprite:

    screenshot
    screenshot
  • Finally, you need to tell your pencil sprite what costume and pencil colour to choose, as well as clearing the screen, when your project is started. Add this code to the beginning of the pencil’s when flag clicked code (before the forever loop):

    screenshot
    screenshot

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

  • Test out your project. Can you switch between blue and green pens?

    screenshot
    screenshot

Save your project

Step 3: Making mistakes

Sometimes mistakes happen, so let’s add a ‘clear’ button and an eraser to your project!

Activity Checklist

  • Let’s add a button to clear the stage. To do this, add the ‘X’ letter sprite from the outlines folder to the stage, and colour it in red.

    screenshot
    screenshot
  • Add code to your new cancel button to clear the stage when it’s clicked.

        when this sprite clicked
        clear

    Notice that you don’t need to send a message to clear the stage, as any sprite can do it!

  • You can also create an eraser. Create a white pen and use the rotate tools to turn the pencil round so the eraser is at the bottom

    screenshot
    screenshot
  • You should also add the eraser image as a new selector sprite. This is how your stage shoud look:

    screenshot
    screenshot
  • You can then add code to the eraser selector sprite, to tell the pencil to switch to an eraser.

    screenshot
    screenshot
  • When the pencil receives this message, you can create an eraser by switching the pencil costume to the eraser, and switching the pencil colour to the same colour as the stage!

    screenshot
    screenshot
  • Test your project, to see if you can clear and erase on the stage.

    screenshot
    screenshot
  • There’s one more problem with the pencil - you can draw anywhere on the stage, including near the selector icons!

    screenshot
    screenshot

    To fix this, you have to tell the pencil only to draw if the mouse is clicked and if the y-position of the mouse is greater than -100 (mouse y> -100). Change your pencil’s if statement to look like this:

    screenshot
    screenshot
  • Test your project; you now shouldn’t be able to draw near the selector blocks.

    screenshot
    screenshot

Save your project

Step 4: Changing the pencil width

Let’s allow the user to draw using a range of different pencil sizes.

Activity Checklist

  • First, add a new variable called ‘width’. If you’re not sure how to do this, the ‘Ghostbusters’ project will help you.

  • Add this line inside the forever loop of your pencil’s code:

        set pen size to (width)

    Your pencil width will now repeatedly be set to the value of your ‘width’ variable.

  • You can change the number stored in this variable by right-clicking on your variable (on the stage) and clicking ‘slider’.

    screenshot
    screenshot

    You can now drag the slider below the variable to change its value.

    screenshot
    screenshot
  • Test your project, and see if you can modify the pencil width.

    screenshot
    screenshot

    If you prefer, you can set the minimum and maximum value of ‘width’ that’s allowed. To do this, right-click on your variable again and click ‘set slider min and max’. Set the minimum and maximum values of your variable to something more sensible, like 1 and 20.

    screenshot
    screenshot

    Keep testing your ‘width’ variable until you’re happy.

Save your project

Challenge: Shortcuts

Can you create keyboard shortcuts for your commands? For example:

  • b = Switch to blue pen
  • g = switch to green pen
  • e = switch to eraser
  • c = clear screen

You could even allow the user to change the pen width with the arrow keys!

Save your project

Challenge: More pens

Can you add red, yellow and black pens to your paint program? You’ll find all of the images you need in your ‘Resources’ folder. Remember to add keyboard shortcuts for these new pens!

Can you use your pens to draw a picture?

screenshot
screenshot