Scratch with Ready Steady Code

All Short and Easy p.60 100 Shared Online

2 Free Wall Charts

p.21

by Seamus O’Neill

with

The Basics of Scratch for Everybody of All Ages

by Seamus O’Neill

Scratch Copyright (c) 2009 Massachusetts Institute of Technology Scratch is developed by the Lifelong Kindergarten group at the MIT Media Lab. See http://scratch.mit.edu The Scratch logo and the Scratch cat are trademarks of MIT.

About the Author: Seamus O'Neill is a former primary teacher and co-author of Mathemagic, Ireland's most popular and best-selling primary Maths programme since 2002. He has totalled over 50 years teaching experience with teacher training and is a prolific developer of online interactive learning resources. In June 2017 the Scratch team at the MIT Media Lab accorded Seamus unique and honourable distinction when they added his fine-line vector grids into the Scratch Backdrop library.

He brings a wealth of experience and a razor sharp focus on what actually works for modern teachers.

For Breda B

Š Seamus O’Neill 2017 We and Us Ltd. Educational Design Services Navan, Co. Meath, IRELAND

In June 2017, the MIT Media Lab (Boston) added Ready-Steady-Code grids directly into the Scratch the Backdrop library. These vector grids on a bitmap stage are a magic mix that gives Scratch new functionality and make it the world leading free teaching resource for Computational Thinking in 21st century classrooms.

The 3 main vector grids:

xy-grid-10px*

xy-grid-20px

xy-grid-30px

*The 10px grid is not in the Backdrop library. Download it from https://scratch.mit.edu/projects/104133413

All rights reserved. No part of this publication may be reproduced or transmitted, in any form or by any means, electronic, mechanical, photocopying or otherwise, without the prior permission of the author and publisher.

Contents PART 1: The Basics of Scratch How to Use Part 1 of This Book

1

The Grey and Yellow Pages

Exercise 1:

Getting Started

3

The Scratch Project Editor

Exercise 2:

Get a Scratch ID

5

Can I use Scratch 2.0 offline?

Exercise 3:

Create and Save Your First Scratch Script 7 What's in the Sprite Info Pane?

Exercise 4:

Thinking, Speaking Sprites

9

Toolbar Symbols

Exercise 5:

ii

Duplicate a Sprite and its Script

11

Sprites have Costumes; the Stage has Backdrops

Exercise 6:

Make a Simple Game (Shark Screech)

13

Where are the Sounds in Scratch?

Is the IF ..THEN block a loop?

Exercise 7:

Colour a Vector Graphic

15

Vector Graphics vs. Bitmap Graphics

Exercise 8:

Programme a Conversation

17

Learn About Some Code Blocks

Exercise 9:

Finding Missing Numbers

19

What is a Variable?

Exercise 10:

Code a Number Objective Project

21

Can You do Sums With the Operator Blocks?

Exercise 11:

Mouse and Cheese Game

23

Need a Sprite that’s not in the Sprite Library? (Exercise 12)

Exercise 12:

Draw a Vector Image (Piece of Cheese) Alternatively, save an image from a shared Scratch project.

24

PART 2: Essential Coding Skills with the SCRATCH Palettes

The Plan of Part 2 of This Book

25

There is an A2-size 10 Palettes Wall Chart to Support the Exercises in Part 2

Exercise 13:

The Sprite Library

26, 27

Learn More About Bitmap and Vector Sprites

Exercise 14:

Animate, Move and Turn Sprites

29

PALETTES: Motion, Events, Looks and Control

Exercise 15:

Make one Sprite Point Towards Another

30

Programme a Sprite’s Direction, Rotation and Size

Exercise 16:

Move an Apple Sprite with the Keyboard

31

Move Around the Stage Using the Direction Keys on the Keyboard

Exercise 17:

Animate Candles on a Birthday Cake

33

PALETTES: Sound, Sensing, Pen and Operators

Exercise 18:

Musical Instruments: Compose Music

34

Explore the Musical Instruments of the Sound Palette

Exercise 19:

Draw and Code a Xylophone to Play

35

Explore the Notes of the Sound Palette

Exercise 20:

Code a Sprite to Draw with its Pen

36

Change the Sprite’s Direction While it Draws

Exercise 21:

Pen Essentials and Programming Fun

37 - 39

Draw Simple Designs with the Pen Commands Blocks

Exercise 22:

Programme the Pen to Draw 2D Shapes

40

Square, Pentagon, Hexagon, Octagon and Circle

Exercise 23:

Plot a Circle from its Centre and Radius

41

Draw Filled Circles and Pie Graphs

Exercise 24:

Draw a Square in Scratch and on Paper

42

Working with Coordinates

Exercise 25:

Rotating Squares with Nested Loops

43

Number of Repeats and Amount of Turning

Explore the Operators Palette Further

44, 45

OPERATORS: Plus/Minus/ Multiply/ Divide / Mod and Round

Exercise 26:

Report the Position and Direction of a Sprite 46 Using the Join Operator (to Con-cat-en-ate) join Different Types of Data together

iii

Exercise 27:

Exploring the Operators Palette (continued)

47

The Equality and Inequality Operators

Exercise 28:

The Sprite that tells its Own Location

48

Learn Basic Coordinates on the Scratch Stage

Exercise 29:

Code a Number Objective Project (SUMS)

49

Programme Order of Operations with Animated Sprites

Exercise 30:

Variables and Lists in the Data Palette

50, 51

Make the Sprite recite the Multiples of any Number

Exercise 31:

Dinosaur Tables Test

52

Input Your Own Numbers and Multiply

Exercise 32:

Make the Sprite Recite Times Tables

53

Use a Variable in Slider Mode

Exercise 33:

Question and Answer Lists

54

Create a Number Quiz with Worded Questions

Exercise 34:

Create a Picture Quiz

55

Two Lists and Questions using Pictures on the Backdrop

iv

Exercise 35:

Create a Test Against Time

56

Base a Times test on Two Parallel Lists of Random Numbers

Exercise 36:

Make Rows and Columns of Apples

57

What it is to Clone a Sprite

Exercise 37:

Rows and Columns of 3 Sprites

58

Base on Random Selection of Fruit

Exercise 38:

Vary the Lengths of Shapes

59

Use a Variable in Slider Mode to Draw Various Shapes

Exercise 39:

A New Block to Draw a Triangle and Square

61

PALETTES: More Blocks. Define a New Block to Draw a Line

Exercise 40:

A New Block to Draw a Circle

62

Define a New penSetup Block

Exercise 41:

Use Nested Procedures

63

Draw Petals and Flower Designs using Procedures (New Blocks)

Exercise 42:

Re-use a Procedure and Add a Variation Correlate Coding with Drawing a House in a Copybook

There is an A2-size 10 Wall Chart to Support Part 2

64

PART 3: Scratch and Maths with the fine-line Vector Grids

The Plan of Part 3 of This Book

65

NUMBERS You Should Know About the Scratch Stage. Make Scratch Resemble Squared Paper

Exercise 43:

Draw a Square in Scratch and on Paper

67

Use a squareSize Variable

Exercise 44:

Draw a Triangle in Scratch and on Paper

68

Use a squareSize Variable

Exercise 45:

Draw and Code Regular Shapes

69

Correlate Coding with Drawing Shapes and Angles in a Copybook

Exercise 46:

Draw with the Pen Using the Keyboard

70

When it’s Necessary to Lift and Move the Pen

Exercise 47:

Draw Regular Shapes Together

71

Correlate Coding with Drawing Shapes and Computational Thinking

Exercise 48:

Calculate the Area of Rectangles in Sq Units

72

Correlate Coding with Calculating Area and Perimeter

Exercise 49:

Code a Circle and its Area

73

Work out its Area by Counting Squares on Squared Paper

Exercise 50:

Code a Line Sprite to Rotate

74

Draw the Line in the Scratch Paint Editor and Set its Rotation Point

Exercise 51:

Code a Protractor to Measure Angles

75

Correlate Scratch Code with Angle Measurement

Exercise 52:

Types of Angles

76

Make the Monkey Say the Type of Angle

Exercise 53:

Code a Pie Chart

77

Correlate with Data Collection and Representation

Exercise 54:

Code a Block Graph to Show 20 Rolls of a Die 79 Draw a Gaming Die Sprite

Exercise 55:

Layout and Code a 6-Horse Race Game

80, 81

Use Grids to Make Layout Easier

Save and Upload a Shared Backdrop

82

Save and Upload a 10 pixel Graph-paper Backdrop

Exercise 56:

Demonstrate Secondary Level Graphs in Scratch

83-86

Example 1: Graph a Linear Equation / Example 2: Graph a Quadratic Equation

v

PART 4: Animation and Integration with the PAINT EDITOR Exercise 57:

Layout a Mother’s Day Animation

88, 89

Show How Grids Make Layout Easier

Exercise 58:

A Game for Juniors Made by Seniors

90, 91

Create a New Sprite: Draw a Lily Pad

Exercise 59:

Create an Interactive Graphic

92

A Frog With and Without a Tongue

Exercise 60:

The Anatomy of a Vector Sprite

93

Ungroup, Duplicate, Rotate and Group a Vector Sprite

Exercise 61:

Create a Cartoon-type Animation

94, 95

Draw and Code a Fly Sprite

Exercise 62:

Dance to a Beat

96

Create a triple Nested Loop

Exercise 63:

Dress Up the Cat for the Snow

97

Animate a Snowfall

vi

Exercise 64:

The Magic Carpet and Rings Game

98, 99

Create Elements of a Game in Paint Editor

Exercise 65:

Shark Chomp

100 -102

Node Editing in Vector Graphics

Exercise 66:

Grids for Drawing Paths and Designs

103

Draw Yor Own Maze

Exercise 67:

Flags and Other Drag and Match Games

104, 105

Use Grids to Layout a 4x3 Drag-and-Match Game

Exercise 68:

Puzzle Challenges

106, 107

The 9-Dot Puzzle and Other Challenges

Exercise 69:

Tell the Story of the Fox and the Crow

108, 109

Animate any Well Known Story

Exercise 70:

The Disappearing Submarine Make a Submarine Disappear and Reappear using Abs

110

with

PART 1 the Basics of Scratch

How to Use Part 1 of This Book Follow Exercises 1 to 12 on the yellow edged pages. The yellow pages are mostly on the right - the odd numbered pages - in Part 1. The grey edged pages - contain lots of extra information and further explanations of steps and points in each exercise. All the grey pages in Part 1 are even numbered on the left side of the book.

1

Can I use Scratch 2.0 Offline?

Yes. You can use Scratch offline if you have the offline project editor installed. This can be useful where internet connection is poor or non-existent. The Scratch offline editor lets you create, edit and save projects without having to get a Scratch ID. Go to the Scratch 2.0 offline editor and download page at https://scratch.mit.edu/scratch2download/ Adobe AIR

1

Scratch Offline Editor

If you don't already have it, first download and install the latest Adobe AIR. Adobe Integrated Runtime is the the environment in which Scratch operates offline.

2

Next download and install the Scratch 2.0 Offline Editor.

Support Materials

3

There are some helpful resources available that you can download: Starter Projects Getting Started Guide Starter Cards

Online vs. Offline The offline Project Editor is nearly identical to the online version. The main difference is how your work is saved.

When you are signed in to Scratch online, once you click Create, a file is created. This file is called ‘Untitled’. This file appears in the My Stuff section on the website. This happens even if you do nothing with the project and close the Project editor.

When you are working in the offline Project Editor, a file is not automatically created. You must save your work to create a file as you would normally do with any software.

The other main difference between working online and offline is how your work is saved as you go along. When you are working online, your work is saved automatically every minute or so. When working offline, you must manually click save now as you go along.

These differences are reflected in the different file menus online and offline.

The file extension for Scratch 2.0 projects is .sb2

4

New Open Save Save as Share to website Check for updates Quit

Upload your work to the Scratch website When you work offline, you have the option to Share to website if you have a Scratch ID and password.

Access the Scratch website when working offline If you are connected to the internet while working on the offline Project Editor, you can click on the Scratch logo (top left of the screen) to open an Internet browser and launch the the Scratch website.

Exercise 2: Get a Scratch ID

If you are working online, you can save your work on the Scratch website. To do this, you need to register and get a Scratch ID. Go to the Scratch website (https://scratch.mit.edu) and click Join Scratch in the top right hand corner of the screen.

x

Sign in

1

Click Join Scratch

Username

Password

Sign in

2

Choose a Username and Password

Or Join Scratch

x

Join Scratch

It's easy (and free!) to sign up for a Scratch account Choose a Scratch Username

My_Digital_Numeracy

Don't use your real name

Choose a Password

Remember it - don't tell anyone else

Confirm Password

1

3

Provide some information and an email address.

2

3

Next

x

Join Scratch

Your responses to these questions will be kept private.

Why do we ask for this info

Birth Month and Year

?

- Month -

- Year -

Gender

Male

Female

Country

- Country -

Email address

1

2

3

Next

x

Join Scratch

You're now logged in as a New Scratcher!

Thanks for joining Scratch!

You're now logged in.

Scratch is a community of all ages, from all over the world. Make sure your projects and comments are respectful and friendly.

Would you like to: Learn how to make a project Choose a starter project Connect with a Scratcher

1

2

3

OK Let's Go!

Teachers can request a Scratch Teacher Account, which makes it easier to create accounts for groups of students and to manage students’ projects and comments. To learn more, see the Teacher Account FAQ page. Under About on the Main Page click INFO FOR EDUCATORS.

5

The Scratch Project Editor

A

A

B2 D

The Big Picture

B1 C

● At a quick glance, the Scratch Project Editor is divided into four main areas.

A: the Stage B: the Palettes and Blocks: B1 ten Palettes B2 code Blocks C: the Scripting Area D: the Sprite Pane (clicking gives the Sprite Info Pane)

● The stand out feature is the cat in the middle of the Stage (A). The cat is the default sprite.

If you look carefully, you will see three images of this sprite on the screen. ● Above the Blocks (B2), there is a blue button with the word Motion. See what happens when you click each of the ten coloured buttons (Motion, Looks, Sound etc.). Each button (B1) opens a different Palette of code blocks. Blocks are colour-coded according to function. ● Notice the three tabs Scripts, Costumes, Sounds at the top of (B). Explore them! ● The large grey area on the right is the Scripting Area (C). This is where you code/make scripts. Just drag blocks from (B) into the Scripting Area. To delete a block or stack of blocks, just drag them back into the centre column and release the mouse button. Try it out! ● The code/script that's visible in the Scripting Area is linked to the currently selected sprite.

There is just one sprite by default, but you will be adding more in time. At any time, the currently selected sprite is the one highlighted in blue in the sprite pane. It is important to realise that sprites do not share scripts.

B Some of the detail: direction, orientation and position ● Every sprite has a direction. Direction is about movement. Where will the sprite move towards? ● Every sprite has an orientation. Orientation is the way the sprite is facing. Where is the sprite looking towards? ● Direction and orientation are different concepts. To understand the difference between direction and orientation, think about walking backwards! You direction is backwards, but you are looking forwards. However, most of the time, our orientation is the same as our direction — we typically walk in the direction where we are looking towards. By default, orientation is the same as direction in Scratch. ● Every sprite has a position. Where is the sprite? By default, the sprite is in the centre of the Stage. The horizontal value is x: 0. The vertical value is y: 0. In the top right corner of the Scripting Area, these coordinates are displayed. When you click the move (10) steps block, the horizontal value of x changes. You can see that the sprite has moved from its original position of 0,0 to 10,0. Click the block again and the sprite's position will show 20,0. Click again and it will show 30,0.

Return it to centre by replacing 10 to -30 and clicking on the block itself.

C

x: 0 y: 0

Symbols to explore in the Sprite Pane

● There are quite a number of symbols in the Scratch Project Editor. The four shown above are the new sprite symbols, these are located at the top right of the Sprite Pane (D). ● The The The The

2

pixie-face symbol opens the Sprite Library. You can choose a ready-made sprite here. paint-brush opens the Paint Editor. You can draw your own sprite here. open-folder symbol allows you upload a sprite from a file on your computer. camera symbol links to your webcam. You can take a photo and use it as a sprite!

Introduction Exercise 1: Getting Started 1

Go to www.scratch.mit.edu

2

Click Create in the top left corner of the website.

3

This is the Scratch 2.0 Project Editor. Take some time to familiarise yourself with it!

(The previous version of Scratch was Scratch 1.4. A lot has changed! Get Scratch 2.0) File

Edit

Create

Explore

Discuss

About

Help

Tips About

x: 0 y: 0

Help, Tips

Hide the Help and Tips.

New sprite:

Stage

Sprite 1

1 backdrop

New backdrop

zoom button

4

Drag the move () steps block into the Scripting Area (on the right).

5

For practice, change the default move value (which is 10) to 8.

6

Click once on the block of code to execute the code. The sprite moves 8 steps (pixels) to the right. The sprite moves (forward) to the right because that is its default direction.

(90 degrees is facing right in Scratch). See page 6 for more information on direction.

7

Change the value to -8 (minus 8).

8

Click once on the block of code to execute the code. The sprite moves 8 steps to the left.

Negative values make the sprite move (back) in the opposite direction to forward.

9

Click File > New > OK to start a new project. Click ‘Discard contents’ or click ‘Don’t save’.

This will discard your work and start a new project.

10

3

with

PART 2

Essential Coding Skills with the Scratch Palettes The Plan of Part 2 of This Book Sprites, Backdrops and Sounds are the visual and audio components of the Scratch programming language.

Inspiration is accelerated when you know where to find particular blocks, sprites and backdrops. Knowing their purpose and how to use them are the essential skills covered in Part 2 of this book.

The Exercise are on green-edged pages. Extra learning points, explanations and optional extra projects are on the grey-edged pages.

There is an A2-size Wall Chart to Support the Exercises in Part 2

25

Exercise 13: The Sprite Library Learn More About Bitmap and Vector Sprites

1 Click the pixie icon under the right side of the stage to open the Sprite Library.

New Sprite:

Sprite Library Choose sprite from library Category

On page 14 you learned about Bitmap and Vector sprites . Scratch is all about coding sprites. You can create interactive games, challenges, stories and animations. Sprites are very important in Scratch.

All Animals Fantasy Letters People Things Transportation Theme

The Cat is just one of the 350 sprites in the Sprite Library.

2

Find out: Are there more than or less than 40 sprites in the Animals Category?

Are there more than or less than 30 sprites in the Fantasy Category?

Are there more than or less than 100 sprites in the Things Category?

How many sprites in the People Category can also be found in the Fantasy Category?

Click the Animals Category. Click Bitmap then click Vector. Which Type has most Animal sprites?

Castle City Dance Dress-Up Flying Holiday Music Space Sports Underwater Walking Type All Bitmap Vector

Select any sprite and

4 click OK or Cancel.

To close the Sprite Library click the x in top right corner of the window.

Click the Dance Theme. Click Bitmap then click Vector. Which Type has most Dance theme sprites?

You are not limited to sprites in the library.

3

Bitmaps and Vectors: Bitmap and Vector are two types of images. Bitmaps are made up of tiny squares of colour called pixels often they are cut from photographs. Vectors are drawn images with ‘outlines’ and ‘fills’.

26

You can draw your own sprites in Scratch or you can upload images as sprites from other sources, such as the internet.

Sprites in the Library Mostly Face Right.

Most sprites in the library face right or straight ahead. Facing is called orientation. Very few sprites face left, but it’s easy to change a sprite’s orientation.

The sprites pictured here don’t exactly correspond to the library as you see it. Notice the Puppy and the Squirrel are clearly bitmap images cut from photographs.

Dinosaur 2

Dinosaur 3

Dog Puppy

Dog 1

Dog 2

Duck

OK

Cancel

27

Motion

Events Control

Motion

Motion

Motion

MOTION

EVENTS

LOOKS

CONTROL

PALETTES: Motion, Events, Looks and Control

space up arrow down arrow right arrow left arrow a b c etc.

Check boxes allow you to make a value (x position, y position or direction) visible on the stage.

Some blocks, like this one in Events have a drop down list.

You can use this block to programme every key on the keyboard. It is a very useful block for maths and games.

Click on Events to open the Events palette and see the brown hat-shaped blocks with the curved tops. Events blocks usually go on top of a stack of script to trigger an event to happen.

1

There are two broadcast blocks in the Events palette - only two which don’t have the curved tops.

The broadcast blocks have a notch and a bump so that they can snap into other blocks in the stack.

2

Loops with the Forever and Repeat blocks The two C-shaped blocks from the Control palette create loops.

You can fit code inside the arms of the block. In the forever loop the code continues to execute indefinitely. In the repeat loop it executes a set number of times.

Animate

Sprite 1

current sprite

notch bump

Change the duration of wait to of a second

28

What happens when you run the animation?

No bump means it can’t have blocks after it.

The bump means it can be in a stack with blocks after it.

Palettes used in this Project

Exercise 14: Animate, Move and Turn Sprites Three Very Short Projects

1

Animate Several Sprites Together

A Sprite Can be Animated if it has More Than One Costume 1. Continue from the Animation project at Step 2 page 6.

2. Find these sprites in the Sprite Library.

Sprite 1

Bat 1

Hippo

Parrot

Dog 2

Ballerina

To code a sprite you must click it to make it the current sprite.

The current sprite will be the one surrounded by a blue box.

3. Make each the current sprite and code it with the same script to animate it. Experiment with different values in One click of the green the wait window to make the pause shorter or longer. flag will cause all the 4. Find out which of these sprites have more than two costumes. sprites to animate at the 5. Delete any unnecessary costume on a sprite. same time!

6. Arrange the sprites on the stage.

Palettes used in this Project Each sprite animates where it stands on the stage.

Bats at the Castle. Move, Animate and Duplicate

2 Move and Animate the Bats Bat 1

1.

2.

3.

4.

Start a New project.

Delete the cat and get the bat sprite from the Library.

Create the new longer code on the bat.

Get the castle backdrop.

Bats at the Castle

5. Run the project to test your code.

6. The bat is out of proportion in the scene. Add set size to 50% to the script.

7. When you are satisfied that the project is running correctly, duplicate the sprite twice.

Palettes used in this Project This is the same script as before. It has extra Motion blocks to programme the Motion sprite to move as well as animate. Experiment to discover the purpose of each new code block. The set rotation style block must not be inside the forever loop.

The three new block are shown with the dashed lines

What happens when you run the animation?

Palettes used in this Project Ballerina’s Cartwheel Motion 1. Start a New project.

2. Delete the cat and get the ballerina sprite from the Library.

3. Create the new code on the ballerina.

3 Rotate a Sprite

Ballerina Cartwheel

Ballerina

4. Experiment to discover the purpose of each block.

5. Experiment with the number of repeats and the amount of turning. Are the numbers connected?

5. Experiment: Can you make the ballerina do a reverse turn cartwheel?

29

Exercise 15: Make one Sprite Point Towards Another

. . . projects/171571753

Programme a Sprite’s Direction, Rotation and Size Set the Scene The cat walks over and back across the bedroom floor.

Mouse Watching Cat

The mouse is up on the bed post watching every move the cat makes.

Programme the cat to move.

Programme to mouse stay on the bedpost and watch every movement of the cat.

Shrink both cat and mouse to half of their original size (50%) using code.

New Blocks 50

This is the code block to shrink the sprites to half of their full size.

Click each sprite with the shrink tool 10 times.

1

Start a New project.

2

Delete the startup cat and get the pictured Cat and Mouse sprites from the Sprite Library.

3 4

Get the Backdrop.

Make the Cat the current sprite and code the Cat with this single script.

This is the code block to make the sprite point in the direction of other sprites whose names automatically appear on the drop down list. When this block is on the Mouse sprite, the name of the Cat appears in the list.

Things to do and questions to answer: Try this: See what happens when you type 100 in the block and click it while it is still in the Looks palette.

Cat

What are the 4 directions you get in the drop list of the block ?

What are the 3 rotation styles you get in the drop block ? list of the At what height up the stage will the cat finish after crossing the bedroom floor ten times? (Trick question!)

The mouse is standing on the bed. What is special about its location on the stage?

5

Make the Mouse the current sprite and code the Mouse. (The new point towards blocks is in the loop).

Get the gift from the Sprite Library. Shrink it to half its original size and set it in the picture at 165, 60.

Get the shoes from the Sprite Library. Don’t shrink them. Set the shoes in the picture at 165, -60.

Use code to put the gift and slippers into the picture

Mouse

Describe where in the picture are the gift and shoes? Do you notice anything symmetrical about the x and y positions of the gift and the shoes?

Palettes used in this Project Motion

30

Exercise 16: Move an Apple Sprite with the Keyboard Move Around the Stage Using the Direction Keys on the Keyboard

1

Start a New project.

2

Delete the cat sprite and get the Apple from the Sprite Library.

3

Open the Backdrop Library and choose Category> Other > xy-grid-30px.

4

With the apple as current sprite create the following 5 short scripts.

Mouse and Apple

. . . projects/171571789

Move an apple sprite around the stage in 60-step intervals using the direction keys of your keyboard. Make a mouse sprite continuously point towards the apple.

The apple moves 60 pixels (two grid squares) at each key press. Make it move 30 pixels if you like.

Hint (Duplicate): For the 4 identical direction key scripts use the duplicate tool (or right-click and select duplicate from the context menu.) Edit the changes.

Apple

Duplicate tool

duplicate delete

Hold down Shift for multiple duplicates

add comment help

The direction keys of your keyboard can be coded with when () key pressed.

5

Get the Mouse sprite from the Sprite Library. As current sprite create the following script on the mouse.

Hint (Shrink): You can shrink a sprite to a percentage of its original size manually, using the shrink tool or with code using the set size to ( )% block.

Click the Shrink tool.

Shrink tool Mouse

100%

50%

Click the apple with the Shrink tool exactly 10 times. This action will make any sprite half its size (that’s 50%).

Palettes used in this Project Motion

x is across: forwards and backwards from the centre. y is up and down from the centre. ( Wise up! X is a cross! )

31

Exercise 42: Re-use a Procedure and Add a Variation

. . . projects/138142416

Correlate Coding with Drawing a House in a Copybook Draw the House in in your sum copy and in Scratch

Draw a House

1 Draw the house in your sum copy as shown in the

picture. Measure the corner points in squares or units of 20 pixels.

2

For a pen use the Button 1 sprite reduced to 15%.

Even better, draw a donut-shaped sprite in the Paint Editor (with the Ellipse tool). You will be able to see the active drawing point. In the picture, the donut sprite marks the starting position.

3 Make and define

these two new blocks penSetup and drawSquare.

4 Get the xy-grid-20px from the Backdrop

Scratch looks like a squared copybook.

Draw an identical house in a copybook.

Get details from this picture.

library and create a variable sqSize.

5 Complete the missing sections of the

Script 2: Three windows

following scripts.

. . . projects/171572604 . . . projects/171572759

Pen

Script 1: Draw Outline square and Roof

Back 5 squares, down 7 from the centre.

Changing x by -180, y by -80 takes the pen to the starting point of the first of 3 windows (the green dot) ?

The square is 200px (10 sq) in length.

Changing y by 200 (up 10 squares) takes the pen from its current position to the starting point to draw the roof.

From centre, that’s back 5 squares, up 3 squares to the grey dot.

Work out the missing ? data to complete these scripts

Changing x by 100 and no change in y takes the pen to the starting point of window 2 ?

Changing y by -100 with no change in x takes the pen to the starting point of window 3 (the blue dot) ?

X and Y coordinates are measured from the centre.

Script 3: Draw the door

See how long scripts can be broken up by sending and receiving broadcasts. Without broadcasts this would be one long script.

Script 4: Draw the chimney

Changing x by -100 and y by -20 takes the pen to the starting point to draw the door (the orange dot) Why can’t the drawSquare procedure be used to draw the door?

64

Back 40 and up 260 takes the pen to the starting point to draw the chimney, the red dot. ?

with

PART 3

Scratch and Maths with the Vector Grids The Plan of Part 3 of This Book The new vector grids in the Other Category of the Backdrop library make the stage resemble the familiar squares of a sum copy or graph paper and make coding even easier and more fun. The grids are almost inconspicuous and could go unnoticed. Part 3 will show you how you can now use Scratch to support constructivist maths learning and Computational Thinking in ways not possible before the introduction of the grids. Part 3 Exercises are on blue-edged pages.

The 3 main vector grids:

xy-grid-10px*

xy-grid-20px

*The 10px grid is not in the Backdrop library.

Download it from https://scratch.mit.edu/projects/104133413

xy-grid-30px Get instructions on page 82

65

NUMBERS You Should Know About the Scratch Stage

480

The width of the stage is 480 pixels. Its height is 360.

Width to height is in the ratio 4:3 In Scratch steps refer to pixels.

Each pixel can be identified by an x and y value. The x values are horizontal and the y values are vertical. The centre pixel of the stage is 0,0. Negative x values are on the left of centre and positive x values are on the right.

Negative y values are below centre and positive y values are above.

360

x: 80

y:15

The current sprite’s x,y position is given in the top right corner of the Scripting Area. The x,y position of the mouse pointer is shown under the right corner of the stage. e.g. it is shown in the picture at x: 80, y:15.

The vanishing point of the railway track is shown at the tip of the mouse pointer to be At start-up the default cat (Sprite ) is located at 0,0. at x:80, y:15 (under the right side of stage)

A 20 px: 24x18 squares (Sample points)

Make the Scratch Stage Resemble the Page of a Copybook To make the Scratch stage resemble squared paper, get either the x-grid-20px (A) or the x-grid-30px (B) from the Other Category of the Backdrop Library. You can also code projects that would work better with 40px, 60px or 120px squares by using 2, 3 or 4 squares at a time.

80,120 -120,80

0,0

30 px: 16x12 squares (Sample points) 120,-80

B

210,150

-210,150

-80,-120 -60,60

-60,60

0,0

C

-210

10 px: 48x36 squares (Sample Quadratic)

-60,-60

the graph of y = x² - 2x - 3 f(x) = Y: var Y

210,0

-210,-150

5

60,-60

210,-150

Make the Scratch Stage Resemble Graph Paper the graph of for -2 < x <4 Point X: var X

4

To make the Scratch stage resemble graph paper (with smaller ten-pixel squares) you can download a 10px grid to your computer from the shared presentation project: See ‘Save and Upload a Shared Backdrop’ page 82 https://scratch.mit.edu/projects/104133413

Bitmaps and Vectors: A bitmap is a computer image consisting of coloured squares called pixels. Go to the Backdrop library and open the bitmap xy-grid in the Other Category of the Scratch Backdrop library. You can see the jagged edges of the labels X, Y and the jagged number markings. Open the new xy-grid-20px and see

66

finer lines and greater accuracy. Each square measures exactly 20 pixels (or steps) of the stage. Vectors consist of finer lines and shapes as you saw (pages 14, 15). You can zoom in and the lines don’t pixelate. To make the Scratch stage resemble a sum copy or graph paper use the fine-line vector grids.

Make the Scratch stage resemble squared paper with the backdrop grid from the Backdrop Library. Use code to draw a square of 10 x 10 grid squares set in the centre of the stage. Draw a similar square centred on a page of a copybook.

A

Drawing with code: Every sprite in Scratch has a ‘pen’. A sprite’s invisible pen is up and it must be programmed to be down to draw. The cat’s shape is not ideal to use as a pen. A round sprite is better.

For the fun of it, let’s code a small Apple sprite to draw a square.

Draw a 10 x 10 Square with Code

1 Open a New Project and delete the cat.

2

Choose Sprite from library and select Category > Things > Apple >OK

3

Choose backdrop from library and select Category > Other > xy-grid-20px >OK

. . . projects/171637404

Exercise 43: Draw a Square in Scratch and Replicate it on Paper

4 Make a Variable (see page 18 to remind you

how) and give it the name squareSIze. SquareSize will have a value of 20 to represent the number of pixels in each square of the backdrop grid.

5 Construct these two scripts on the Apple

Script 1 of 2

sprite.

Script 2 of 2

Apple

B

Draw a Similar Square centred on the page of a Copybook

1

Preparation: Carefully divide the page of the copybook into 4 sections with pencil and ruler (or by folding along horizontal and vertical grid lines in the middle of the page). The number of squares on the page won’t correspond exactly with the Scratch stage, but that’s not important. What is that they both have centres marked by crossing horizontal and vertical lines (known as axes). They cross in the centre (known as the origin).

2

From the origin, Count back 5 squares and count up 5 squares to start drawing your 10 x 10 square. The starting point in the picture, is marked with a red x.

This corresponds with the Apple marking the starting point in the top picture of the Scratch stage.

a Start back 5 and up 5 from centre

c

b inch

Count squares. Use a ruler just to draw the straight line - not to measure.

With pencil and ruler, draw the square 10 squares by 10 to complete the exercise.

3 Learn about Positive and Negative Directions.

Counting back is a negative direction and it is represented by the minus sign. So too is counting down. Forward is a positive direction and it is represented by the plus sign (or simply by no sign). Up is also a positive direction.

The letter X represents back and forward (horizontal) and Y represents up and down (vertical). So the starting point of the square is x:-5, y: 5. The other corners are a x:5, y:5 b x:5, y:-5 c x:-5, y:-5

67

Save and Upload a Shared Backdrop Save a backdrop to your Computer from a Shared External Project

A

See inside https://scratch.mit.edu/projects/75288402

All_Grids

2

1 script 1 sprite

For Step 1 look below.

by readysteadycode

CLICK the Backdrops tab and click the 10px thumbnail

Backdrops New backdrop:

48 x 36 grid RIGHT CLICK

1

3 and choose

‘save to local file’ from the menu.

backdrop 1 480x360 2

duplicate delete

10px_48 x 36 480x360

3

save to local file

4 20px_24 x 18 480x360

4

1 Stage 7 backdrops: New backdrop:

B

CLICK the backdrop thumbnail picture —– then look above for STEP 2

30px_16 x 12

Now you have saved the 10px_48 x36 grid.svg backdrop as an image to a folder on your computer. Remember where you have it stored on your computer. To code the Linear Equation and Quadratic Graph at the back of this book, you will have to upload the fine-line grid into your project as a New Backdrop.

Upload the Image to your Project as a backdrop .

Four Cats Untitled

Make the Scratch stage resemble graph paper.

1

Open a New Project.

2

Click the icon

3

Locate the file 10px_48x36 grid.svg on your computer.

4

Select it and click Open.

The backdrop will appear perfectly in place.

to upload backdrop from file.

The cat is positioned in the centre of the stage where the two centre gridlines cross.

Stage 1 backdrop: New backdrop:

The tool tip below tells you to click the circled icon to upload a backdrop that’s already saved on your computer. You have saved the 10-pixel grid to a file location on your computer. Do you The centre gridremember where you saved it? lines are called the axis.

Upload backdrop from file

82

SAVE the image You have to decide where to store the image on your computer.

Four Cats Untitled

with

PART 4

SCRATCH Animation and Integration with the

Paint Editor

87

Exercise 57: Layout a Mother’s Day Animation Show How Grids Make Layout Easier Watch this Mother’s Day animation online at https://scratch.mit.edu/projects/99337255. You can see that it is consists of two animations, the main one based on the Heart sprite from the Sprite library. This sprite has two costumes, heart red and heart purple. The second animation is based on the Balloon sprite which has five costumes.

. . . projects/99337255

Mothers’ Day

The Heart sprite clones itself in rows and columns.

It might help if you review Exercise 36, page 57.

A

the Stage Colour and 60px Grid Layout

Colour the backdrop a deep purple. Use the Fill with Color tool in the Paint Editor in Bitmap Mode.

New sprite:

Stage 1 backdrop

Heart

New backdrop

Balloon

Happy

Mother’s

Day

Happy

Mother’s

Day

Make the text sprite in the Paint Editor. The Mystery font is one of the 6 available for text sprites.

Part 1 of script 1 on the heart

B

As guide to sizing the sprite so that it fits across the stage, get the xy-grid-30px from the Backdrop library. This backdrop will make it easier to layout the animation environment in 60px squares.

C

the

Sprites

Happy

Mother’s

Day

Happy

Mother’s

Day

Continued on opposite page

Create 3 new sprites with the Text tool in Vector Mode. (i) Happy (ii) Mother’s (iii) Day. Make sure the words fit inside the BIG HEART which you will not see until you run part 1 of script 1 on the heart sprite (see opposite page).

Heart

create 6 rows of 8 hearts

script 2 on the heart Heart

spin and grow

This script gives the rows of cloned hearts the random colours.

Animation: turn 36º and change size by (20) in a 10 loop makes the sprite turn a full revolution while growing to 200% of its original size.)

88

continued from previous page

B

C

Continued

Continued

Happy Mother’s Day Text Animation script 1 of 2 on each text sprite

Part 2 of script 1 on the heart Add this script after the red dot Part 1, opposite page. It sends a message to each text sprite to make it appear on the big purple heart.

Happy

Mother’s

Day

Happy

Mother’s

Day

script 2 of 2 on each text sprite

x3

Create 3 one for each text sprite.

Happy / Mother’s / Day Each text sprite is placed on the stage above the enlarged purple heart. The green flag click makes each invisible.

When each text receives its broadcast it visible: Happy - Mother’s - Day

D

Balloon Animation

becomes

After the ‘HAPPY MOTHER’S DAY’ greeting appears a row of balloons rises and fades towards the top of the stage.

Get the Balloon sprite from the Sprite Library. Notice that this sprite has three costumes. You might like to add about two more colour costumes if you want to.

Script 1 of 3 on the balloon Script 3 of 3 on the balloon

Make the balloon invisible at start

Balloon

Script 2 of 3 on the balloon

This creates different lengths of pause 0.1, 0.2, 0.3, 0.4, 0.5 secs, so that the balloons don’t move up all in a straight line.

Create a single row of 9 cloned balloons

E

Add Music or Record a Greeting

The balloons rise at different speeds and the ghost effect makes them gradually disappear until they rise to a y value of 150.

89

Exercise 58: A Game for Juniors Made by Seniors Create a New Sprite: Draw a Lily Pad . . . projects/171267346

Frogs on the LilyPad

A Number Objective for Juniors Counting, Partitioning and Combining Numbers up to 20 are important activities when laying foundational number concepts for 5-7 year old children.

How many frogs do you want in the pond?

0 12

12

As there is no Lily Pad sprite in the Sprite Library, you will have to draw one. Start by clicking the icon under the stage.

1

It’s not difficult to create an interactive learning resource that adds fun and excitement to these activities. The creative coding skills that are required to create the resource are well inside the scope of older children but well outside the coding capability of the 5-7 year old learners themselves.

Here’s a project with a purpose - Seniors create an application that Juniors can use.

You only need one frog sprite You can clone as many frogs as you need. You also need a sprite. On page 57 (Ex. 36) you can review what it is to clone a sprite .

Draw with the Ellipse Tool

Draw a lily pad.

Clear Add Import

Costume 1

2

Select

Select Vector Mode.

Reshape

3

Draw a dark green circle shape centred on the cross hair.

4

Choose the Reshape tool and click the circle. You see 8 nodes. Push the bottom right node towards the centre.

5

Fill with a lighter green using the Color a shape paint bucket tool.

6

Click the Scripts tab to exit.

7

Name the sprite lilyPad as its name will appear in the block’s drop list in script 3 on the frog sprite.

Look under the

Ellipse (Shift: Circle)

Color a shape

1600%

Vector Mode Convert to Bitmap

to name a sprite lilyPad x: 0

y: 0

direction: 90

rotation style: lilyPad

Click the i

90

can drag in player: show:

continued from opposite page

1

There are 3 Scripts on the Frog Sprite

Get the frog sprite in the Sprite Library.

Frog

lilyPad

2

Draw the lilyPad sprite.

3

Open the Data palette and make two variables frogsInPond and frogsOnLilyPad. One variable will store the number of frogsInPond and the other will store the number of frogsOnLilyPad.

Frog

Script 1

New Variable

Script 2 Variable name:

frogsInPond

For all sprites

OK

4

For this sprite only

Cancel

You only need 1 frog sprite.

Code the frog with the three scripts on the right. There is no script on the lilyPad sprite.

5

Click the to open frog’s sprite info box. Tick ‘can drag in player’. See picture at the bottom of the opposite page.

Script 3

How it Works One click of the green flag triggers two separate simultaneous events.

Script 1: The script sets the size, position and visibility of the frog and sets the two variables frogsInPond and frogsOnLilyPad to zero at the start.

Frogs on the LilyPad

Script 2: An input box asks How many frogs do you want in the pond? There is a wait until the user types in a number.

The answer is the number that is now assigned to the frogsOnLilyPad. The frogsInPond monitor beside the frog shows the number you have inputted. It looks like there is still only one frog as they are all stacked on top of each other.

The frog invites the user, Now drop us one by one on the lily pad. The user can drag frogs one-by-one to the lily pad. The variables register the partitioned input (one less in the pond, one extra on the lily pad).

Children should enjoy the activity while learning the number concepts. Add the teacher’s creativity through discussion.

7 5

Palettes used in the project Motion

91

Exercise 68: Puzzle Challenges Use Grids to Layout the Nine-dot Challenge This is the 9-dot puzzle. It is usual to try out solutions with pencil and paper. It is also possible to use your Scratch coding skills to animate your solution when you have found one. Arrange 9 dots as shown. Your challenge is to join all the dots with straight lines. You must not lift the pencil and you can visit each dot only once.

. . . projects/90149237

Nine-points Puzzle

Try it on paper first! When you have worked out the solution discuss with a friend how you could instruct the Scratch pen to draw the path.

You need a sprite to give the instructions. You need a dot sprite which you could arrange in code. You need a pen to draw the line without using the pen up command, until the end.

1

Cat

A sprite gives the instructions Cat

Dot

Pen

3 Arrange the dots

Dot

2 The sprite repeats the instructions if a key is pressed

4 Code and draw the solution based on the xy-grid-30px

Pen

There are several coding styles e.g. use a variable for squareSize or use blocks of 30 to designate points.

Find the solution at â&#x20AC;Ś projects/90149237

106

continued from opposite page Visit each project. Look inside and see if you have found a better solution.

The donut-shaped pen sprite marks the starting position. p107_Envelope Puzzle

Try drawing it without lifting the pen (solution) . . projects/172295927 p107_Traffic Lights Puzzle

You may lift the pen (solution) . . projects/172297612

p107_Coat Hanger Puzzle

Try drawing it without lifting the pen (solution) . . projects/172296990 p107_Spectacles Puzzle

You may lift the pen (solution) . . projects/172315033

There are probably several ways to draw each of these pictures. Some ways better that others.

Check your solutions against the online examples and perhaps you have a found a better solution. To improve your computational thinking ability, in the Envelope and Coat Hanger, puzzles, try drawing the shape without lifting the pen once you put the pen down.

There is much trial-and-error in constructing the script, especially when deciding angles of direction, distances, fixed points etc. The comment* feature in Scratch is useful to take note of a point on the stage that you might need to return to as an absolute value, without the need to calculate intricate angles or distances. Before attempting the drawings on this page, consider the following questions about the coat hanger picture: (a) What is the starting point of the picture? (b) Does the picture finish where it started? (c) Which part of the picture draws first? (d) How is the hook drawn? (e) Once the pen is down, Is the picture completed without lifting the pen?

To use the comment feature, right click on any block and choose add comment.

Type where you see add comment here

(f) Could you use a New Block procedure to shorten the script?

107

In June 2017, the MIT Media Lab (Boston) added Seamus O’Neill’s vector grids directly into Scratch. In two clicks from startup the Scratch stage can now be made to resemble the squared paper of a copybook. The grids are the magic mix that give extra fun and functionality to Scratch - the world’s leading free teaching resource for Computational Thinking. This book is the first to show the magic of the vector grids in Scratch.

What is Scratch? Scratch is free software that is engaging and exciting. It is the place in which to create games, animations, stories, puzzles, music, simple graphics, maths resources and anything on the school curriculum.

It is for all learners, from children at school to adults who just want to learn code as a modern challenging pastime.

Scratch was developed to give the thrill of creating something from nothing with easy, colourful, block based, drag and drop code. It is by far the most popular type of coding taught to children and young people from 8 to 18 years of age (and older). It has well over 20 million registered users worldwide.

What‘s in Scratch is full of quirky charactersespecially and bustling libraries of SCRATCH is aScratch? free programming language developed for children by sprites, the MITbackdrops Media Lab.and It issound by far effects.

You can even record your own voice overs and add them to your project.

Scratch has 10 colour palettes the most popular coding language taught in schools and computer clubs worldwide, with millions of registered of code blocks (and this and bookexciting has a free Chart that shows themplace all at in once). is a second Itfree wall users.

Scratch is engaging as aWall highly visual and colourful whichThere to programme. is full of chart especially to help children construct maths solutions using Scratch code and computational thinking. quirky characters and bustling libraries of sprites, backdrops and sound effects and 10 colour palettes of code blocks.

There is increasing interest among many parents in seeing their children learning to code and there is a corresponding growth of after school Clubs like This book is classroom for everyone who wants a READY-STEADY-CODE (RSC) stands out code as a unique wayCoderDojo. to use SCRATCH in the to do maths and new hobby but especially for any teacher or adult encouraging children to create through code. coding at the same time. Coming from a teaching specialist who is one of Ireland’s top primary maths authors

this is a serious statement. There’s nothing else like RSC, anywhere! When the MIT Media Lab released Scratch 2.0 in 2013, it would appear that unknown to themselves they greatly increased the capacity of Scratch as a very effective teaching tool. This makes RSC the fast-track way of introducing coding into the classroom as an easy Examples 21st century scaffold to the best maths teaching methodology.

There is increasing interest among many parents in seeing their children learning to code and there is a corresponding growth of Code Clubs like CoderDojo. This two books A to Z of Scratch Teach Maths with New Technology and this book: A to Z of Scratch Essential Coding Skills and Graphics, are very suitable for any adult encouraging children to create through code. They cover a learning journey that starts from scratch and lays a solid foundation that builds up teacher confidence and competence. A to Z of Scratch is above all both enjoyable and challenging for all ages.

GAME

COMPUTER ART

SUMS

MAZE PUZZLE

GEOMETRY

SPECIAL OCCASION

MATHS

MUSIC

STORY

NUMBER PATTERN

CODE A DESIGN

HIGHER MATHS