4117126, 11.08 aM Paint box 8 Projects Paint box Make your own paint program Step1 Introduction Make your own paint program! What you will make Youwill 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! aan 0n 4X jn Gee + Add the pen extension in Scratch + Use broadcasts to control a sprite in Scratch + Recall how to respond to mouse events in Seratch nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint ser4117126, 11.08 aM Paint box + Acomputer capable of running Scratch 3 Software + Scratch 3 {either online (https: /rpf.io/scratchon) or offline (https://rpfio/scratchoff)) Downloads + Offline starter project (hitis://rntio/p/en/paint-ox-go) © sesttonatintrmaton for eds If you need to print this project, please use the printer-friendly version (https://projects.raspberrypi.org/en/p rojects/paint-box/print) You can find the completed project here (nttps://rpf.io/p/en/paint-box-get) nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 274117126, 11.08 aM Paint box Step2 Makea pencil Start by making a pencil that you can use to draw on the Stage. Open the ‘Paint box’ Seratch starter project. Online: open the starter project at rpfio/paint-box-on (http: /rpf.io/paint-box-on) Ifyou have a Seratch account you can make a copy by clicking Remix. Offline: open the starter project (https://rpf.io/p/en/paint-box-go) in the offiine editor. If youneed to download and install the Scratch offline editor, you can findit at rpfio/seratchoff (http s:l/mpfio/scratchoff) In the starter project, you should see pencil and eraser sprites: pearl eraser nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 327sas 050 Parton Atha Pe eransin ta your poet © tow 24a ha Pon 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 acd it ‘+ The Pen section then appears at the bottom of the blocks menu, nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 4274117126, 11.08 aM Paint box @ 1@ fe iele 8 ? i pear.) jj so that you can ‘Add some cade to the pencil sprite to make the sprite follow the mouse pointer {i craw: 4 rc Gey coca Pad Glick the flag and then move the mouse pointer around the Stage to test whether your code works. Next, make your pencil only draw ff the mouse button is being clicked, npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint 5274117126, 11.08 aM Paint box ‘Add this code to your pencil sprite: OTe oc) tg Ce can te aa Z pendown Oc 7 nn ‘Test your code again. This time, move the pencil around the Stage and hold down the mouse button. Can you draw with your pencil? © rves yourpenainet draw om tsi Ifthe line your pencil draw looks ike itis coming trom the pencil's middle, you need to change your pencil sprites so the tip is the sprite’s centre, npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint4117126, 11.08 aM Paint box Glick on the pencil sprite, and then click on the Costumes tab. Move the costurne'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 fromitstip. nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 774117126, 11.08 aM Paint box Step3 Coloured pencils Now you're going te acd different coloured pencils to your project and allow the userto choose between them, Click on the Costumes tab of the ‘genci sprite. Rename the penci1=a costume to penciT=blue Soom | f comms | ae Sonts ~——o og. Right click on the pencil-blue costume and select duplicate. Som Somme | qsnnie Name the new costume ‘pencil-green, and colaurthe pencil green. 1 7 penci-blue 102121 nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 8274117126, 11.08 aM Paint box Draw two new sprites: one blue squate and one green square. These are for choosing between the blue and green pencil Sprite Pencil ox show OB Sue | 70 Rename the new sprites so that they are called ‘blue’ and ‘green’ © renames sprtinserton To rename a sprite in Scratch, click on the sprite: Edit the name of the sprite. nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 9274117126, 11.08 aM Paint box ‘Add some code to the ‘green’ sprite so that when this spite is clicked, it THEERISESES the message “green” RMS Ce cc) Dre aa e Broadcast a message in Scratch AGIIDEEIESD is @ way of sending a message which can be heard by all sprites. Think of it lke 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 (httns://scratch.mitedu/projects/518413238/editor) Youcan create a message to be The message text can be anything you like, but its Useful to give it a sensible description. + Find the [SERIES block under SES + Select New Message in the drop-down menu. New message ern] + Then type your message Now Mossago New message name npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint 10274117126, 11.08 aM Paint box Send a broadcast You can decide when to SiSERIEES your message. For example: PM ceo Dee aU ad Ra en eo Om aCe Receive a broadcast block. Multiple sprites can respond Sprite can react toa byusinga when they receive the same message. You can add blocks below a biock te tell the sprite(s) what to do when they receives. ‘the message. Pe ad Centers? “negative numbers decrease the size Pn eC Boe oR) ‘The pencil sprite should listen forthe “green” message and change its costume and pencil colourin response. npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint wer4117126, 11.08 aM Paint box ‘Switch to your pencil sprite. Add some code so that when this sprite receives the broadeast. it switchs to the green pencil costume and changes the pen colourto green. Rao Ciccuad Ennead Peed Ped ane 4 ‘To set the pencil to colourto green, click the coloured square in the Sm Gj block, and then click on the green square sprite. Then toa similar thing so that you can switch the pencil colourto bive. nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint sar4117126, 11.08 aM Glick on the blue square sprite and add this code: Ra Ae Raa eC aod Then click on the pencil sprite and ad¢ this code: PT Po e Sees USTe nd 7 setpen color to ( nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 13274117126, 11.08 aM Paint box Finally, add this code to tell the pencil snrite which colour to start with, and to make sure that the screen is clearwhen your program starts. Oa oc) Ce sstume to penci ot umn cog PNM CE Cand Geto aaa eo Oe 7 nn If you prefer, you can start with a different colour pencil npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint saer4117126, 11.08 aM Paint box ‘Test your code. Can you switch between the blue and green pencil colours by clicking on the blue or green square sprites? nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 18274117126, 11.08 aM Paint box & chationget Challenge: more pencils Can you add red, yellow, and black pencils to your paint prograrn? Take a lock at the earlier steps if you want a reminder of how to do this. Can you use your pencils to draw a picture? nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 16274117126, 11.08 aM Paint box 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. © ses srte rr these rary Click on Choose a Sprite to open the Sprite Library: You can search fora sprite, or browse for one by category. Click on a sprite to add it to your project ter °° ox4"r oma }* €& kee nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint ser4117126, 11.08 aM Paint box block sprite to clear the Stage when the sprite clicked. ‘Add code to the » PCRS eRe) erase all A You don't needto use a to clearthe Stage, because the | block does that job. Do yousee that the pencil sprite includes an eraser costume? 4 7 pencite 102% 121 Your project also includes a separate eraser sprite. npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint 18274117126, 11.08 aM Paint box Click on this eraser sprite and then select show. Show O | @ Here is how your Stage should look now: : 4% ‘Add code to the eraser sprite to send an ({SIEETTMELTRECIEN? when the eraser sprite is clicked. PS Cec) Pile Ca ad ‘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! npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint 19274117126, 11.08 aM Paint box ‘Add some code to create the eraser. Ineed a hint Here is what the code should look like: PCR Seana uaa WP |ccrecncazto( > 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 nearthe ‘clear’ and eraser buttons! nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 20274117126, 11.08 aM Paint box ‘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 pointers greaterthan 120: er] i El Meike Maun Tn rs PNM CE Cand mouse down? and areca (-120) 7 Pen-down else 7 nn npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint aint4117126, 11.08 aM Paint box Test your project. You now should not be able to draw nearthe buttons, if VUES if nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint zaer4117126, 11.08 aM Paint box Step5 Change the pen width Next youwill add code to allow the person using your program to draw things with different pen widths. First, add a new variable called (E09. ©} A114 variable in seraten “+ Click on Variables in the Code tab, then click on Make a Variable. er, Variables ake 2 Vane lake Lat ‘+ Type in the name of yourvariable. You can choose whether you would like your variable to be available to all sprites, or to only this sprite, Press OK. "Now variable name: @For all spites OFor this sprite only + 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 nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 2374117126, 11.08 aM Paint box Add this line inside the loop of the pencil sprite's code: Oa 7 setpen mon fore COONS coca Ree ema mouse down?» and | mousey > QED Peay pen up ‘The pen width now repeatedly gets set to the value of the variable. npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint i 2ae7‘11724, 14.08 aN Paint box Right-click on the variable displayed on the Stage, and then click on slider. width GD normal readout large readout You can now drag the slider that is visible below the variable to change the variable's value, width GE E ‘Test your project and see if you can change the pen width. nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 251074117126, 11.08 aM Paint box & chattenget 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=clearscreen IF you want te, you can also add code so that pressing the arrow keys changes the pen width. nipsifprject.raspberrypiorgleniprojectsipaint-boxiprint 28074117126, 11.08 aM Paint box Step6 What next? Now that you have completed the ‘Paint box’ project, try the ‘Boat race’ project (hitps://projects.raspberrypior /en/projects/boat-race?utm_source:pathway&utm_medium=whatnext&utm_campaign=projects). which helps you make a game where you have to stira 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) npsuifprojects.raspherrypiorg/eniprojectsipaint-boxiprint amet