5. Becoming a painter

Introduction

In this project, you will be making your own paint program and in the process you will become a digital Painter!

Step 1: Making a pencil

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

Activity Checklist

We will start by removing the Monkey sprite from the stage by right clicking and deleting it.

Then we go the sprite library:

Find “pencil” sprite from the things category and for our eraser we can use the eraser on the back of the pencil as we do not have a separate one in our library.

 

For that we have to make a copy and modify the costume of the pencil. We can then right click and press “duplicate” to make a copy of the existing pencil to make it our eraser. Before that, we need to rotate the pencil and rename it as eraser.

 

 You can do the rotation by going to the costume tab and then clicking on the Pencil on the design window. You will see a box pops up on surrounding the pencil. Drag the circle on top of the box and move it to the bottom.

  

We can then change the color of the pencil. I like red, we can design our own eraser from here too. For now, let’s change the color by going to the paint tool from the toolbox on the right side of the window.

Now we have a red pencil sprite which we will use it for erasing the drawings.

 

  • 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:
  • Test out this code by clicking the flag and then moving the mouse around the stage.
  • Next, let’s make your pencil draw if the mouse has been clicked. Add this code to your pencil sprite:

 

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

If you do not see the pencil writing properly it is because your mouse pointer is underneath the pencil and it can not touch the screen. You need to place the pencil in such a way that the mouse cursor touches the screen. To fix this go to the costumes tab for pencil sprite and look for a + sign and place your pencil’s tip at the side of it.

Save your project

Step 2: Colored pens

Let’s add different color 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’ costume.
  • Rename your new costume to ‘pencil-green’, and color the ‘pencil-blue’.
  • Create two new sprites, which you will use to select the blue or green pencil.

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

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

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

screenshot

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

screenshot

  • You now need to tell your pencil sprite what to do when it receives the message. Add this code to your pencil sprite:
  • To set the pencil to color to green, click the colored box in the set color block, and click on the green selector icon to choose green as your pencil color.
  • You can now do the same for the blue pencil icon, adding this code to the blue selector sprite:

…and adding this code to the pencil sprite:

Finally, you need to tell your pencil sprite what costume and pencil color 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):

Your code will look like this:

 

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

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

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, We will create a ‘X-block’ sprite from the new sprite menu to the stage, and color it in red.
  • Add code to your new cancel button to clear the stage when it’s clicked.

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

  • You have probably noticed that your pencil sprite includes an eraser costume:

 

  • Your project also includes an eraser selector sprite, right click on it and choose ‘show’. This is how your stage should look:
  • You can then add code to the eraser selector sprite, to tell the pencil to switch to an eraser.
  • When the pencil receives this message, you can create an eraser by switching the pencil costume to the eraser, and switching the pencil color to the same color as the stage!
  • Test your project, to see if you can clear and erase on the stage.
  • There’s one more problem with the pencil - you can draw anywhere on the stage, including near the selector icons!
  • 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 -120 (mouse y> -120). Change your pencil’s if statement to look like this:

screenshot

 

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

Save your project.

Overall code for Pencil:

You can get the PDF version here.