Kids, Code, and Computer Science Magazine

Creating Shapes and Patterns with Scratch2

Les Pounder at Scratch

Here's a fun game you can create with Scratch2 that draws geometric shapes!

What will you need for this project?

Any computer with an Internet connection

All of the code for this project can be found online here:

https://scratch.mit.edu/projects/143372352/

Overview of the Project

Shapes are all around us. Every object in our home, the wheels on the school bus, even our planet has a shape. The most noticeable shapes are those that we learn in school, triangles, squares, pentagons, hexagons, heptagon, octagon, nonagon, decagon. In this tutorial we shall create our own shapes, with up to 20 sides using a little Computer Science with Scratch 2 and its built in pen tool!

We shall be covering the following concepts:

Loops

  • To control how many sides are drawn.
  • To control how many shapes are drawn.

Selection

  • Conditional test based on answer to a question.
  • Repetition
  • Using loops that iterate / repeat for a certain number of times.
  • Generating random numbers
  • Using random number for shape placement.

User interaction

  • Asking the user a question and storing the information.

Our game will use quite a few different blocks, joined together into a sequence of code, typically called an “algorithm” which will give our game a level of autonomy once the user has elected to play and specified the number of sides the shape has.

Getting Started

To code our project we shall open a web browser and visit http://scratch.mit.edu and click on “Create” to start a new project.

Figure 1. The Scratch Interface

As shown in Figure 1 above, Scratch has a wonderful approach to coding, feeling more like building blocks than coding!

Scratch 101

The Scratch 2 interface is split into three columns. The first column we see the stage, this is where our project can be seen and interacted with. Underneath the stage we see our Sprites, these are the characters and objects that exist in our game. By clicking on a sprite, we can create code or change how the sprite looks using costumes.

The second column sees the blocks that will make up our code. As you can see they are grouped by what they do, for example the Looks blocks create visual output such as moving a sprite. Each of the groups are color coded, enabling children to look for a particular block by its color. You can also see tabs for Costumes, and Sounds. These enable us to change how our sprite looks and sounds. The final column is the coding area. In here we drag blocks from the second column and build up our code, block by block.

So let’s start building our game!

Figure 2. Hide the Cat

For this project we will hide the Cat sprite, but it will still pop up if the player chooses to end the game.

Coding the game

We start the code for this project by going to Events and dragging the “When Green Flag clicked” block to the coding area, as shown in Figure 3. This will be the trigger to start the game. Now in order for our game to work we need to wrap the code for our game in a loop that will work forever. So from Control, drag the forever block across and connect it under the Green Flag block as shown in Figure 4.

Figure 3 When Green Flag Clicked Block
Figure 4. Define the Forever Block

In order to play the game, the player will need to answer a question. If they answer yes, then the game will play. If they answer no then the game will end. To ask this question we go to Sensing and drag the “ask” block into the forever loop. We will need to update the question as per the image in Figure 5.

Figure 5. Define the If/Else Answer

We have the players answer stored as a variable called “answer”, this is automatically created by Scratch. But how can we use that answer to trigger the game? Well using a conditional test, “If…Else” which can be found in Control. Drag this block and place it inside the Forever loop, and under the “Ask” block. To check the answer given by the player matches the expected answer “y” we need to go to Operators, and use the “__ = __” block. This will compare the answer in the left space, with that in the right space. So now we need to go back to the Sensing palette and drag the “answer” block into the left space. In the right space we will type “y” as that is the expected answer, aa shown in Figure 6.

Figure 6. Define the Answer = y Response

So if the player answers yes to playing the game we need to trigger a few actions. Firstly we need to hide our Cat sprite. The “hide” block can be found in Looks.

Our next block is found in Pen and it is “pen up”, but why do we need this? Well if we tell Scratch to move around the Stage with the pen down, it will drawn on the screen, just like if you draw on a piece of paper. We pick up the pen and then use “go to x: 0 y: 0” from Motion to move the pen to the center of the screen. Then we go back to Pen and use the “clear” block to ensure that the Stage is clear of drawing before we start.

We need to add two more blocks to our code before we move on. We need to ask another question to the player. This time it is the number of sides that the shape will have. Again we use the “ask” block from Sensing. Then we need to set our pen color. From Pen drag the “set pen color to” block over and connect it as per the image, as shown in Figure 7. You are free to change the color as you wish.

Figure 7. Ask How Many Sides to Create

Still inside the “If” part of the loop we now introduce another loop. This loop will iterate a set number of times, let’s say 100, before it will end. This loop is called “repeat 10” and is found in Control. Drag it so that it connects to our “set pen color” block, change the value to 100. Now inside the “repeat 100” loop we shall insert another “go to x: y:” from Motion. The x and y values control where our pen will move to on the Stage. The Scratch Stage has a horizontal distance (x) of 480 pixels, ranging from -240 to +240. The same is true for our vertical distance (y). So using two “pick random” blocks from Operators we set the minimum value as -240 and the maximum as 240 and place them inside the blank spaces. So now our pen can magically appear at any point on the Stage!

Figure 8. Create Another Loop

Still inside the “repeat 100” loop we shall now create another “repeat 10” loop, so drag the “repeat 10” loop and place it under the “go to x: y:” block inside the “repeat 100” loop. This new repeat loop will be used to create shapes and so it needs to use the number of sides that the player answered earlier. So drag the “answer” block from Sensing and drop it on top of the “10” of “repeat 10”. Now our new loop will repeat for the number of sides that our shape has.

Figure 9. Set Coordinates

We now write the code that will draw our shape. We start with three blocks from Pen, these are “pen down” to start drawing, “set pen size” to change the thickness of our lines, and “change pen color by 10” which will constantly change the pen color as we draw. We then go to Motion and drag the “move 10 steps” block into the code. We changed it to 30 steps to create larger shapes. Again from Motion we drag the “Turn clockwise degrees” block and place it under the “move” block.

Figure 10. Set Turn

But how do we work out how much to turn? Well we have 360 degrees of motion, which is also the total sum of all external angles. If we divide this by the number of sides our shape has we get the external angle needed to turn the pen. So from Operators we need the “__ / __” block, place this inside the “turn clockwise degrees” block. In the first blank space type 360, and in the second drag the “answer” block from Sensing. Lastly for this section of code we drag “pen up” from Pen. This will ensure that our pen does not leave a mark when we move around the screen.

We now move to the last section of code, and this is inside the “Else” section. Here we have the code that will be run if the user wishes to stop playing the game.

We start by using “show” from Looks. This will ensure that our Cat sprite is visible. We then use “go to x: 0 y: 0” to send the sprite, which is also our pen, to the center of the screen. We then use “clear” from Pen to clear any drawings from the screen. We then use “say Hello for 2 secs” from Looks and change it as per the image. Lastly we use “Stop all” from Control to stop all of our loops and code from running, as shown in Figure 11.

Figure 11. Add Show and Stop Code

So we now have our code, let’s give it a go! Click on the green flag to start the game. You will immediately be asked if you wish to start the game. Answer “y” to start. Then tell the game how many sides your shape should have. It works up to 15/16 sides before it gets a little…weird!

But what can you see happening on the Stage? You should see your shape being replicated 100 times at different positions across the Stage! That is our “repeat 100” loop in action.

Figure 12. All the Code!

Just in case you need it here is all of the code for this project, in Figure 12, and all the code for this project can be found online here:

https://scratch.mit.edu/projects/143372352/

Congratulations you have made your own geometric shape generator!

Learn More

Project at Scratch

https://scratch.mit.edu/projects/143372352/



Also In The April 2017 Issue

We all use fonts yet rarely notice they are designed. Here are some interesting details to help you notice fonts.

This iPad app is a creative tool kids can use to explore and record what they learn in school.

Smart software design makes it easy for you to learn how to use it without help.

A new version of a fun Mario-like game that teaches kids coding has been released. Learn HTML and save kittens!

Mark is a designer who also knows a lot about how to use technology to create design.

Design is about solving problems, from donuts to race cars, how we eat to what to wear in cold weather.

Everyone know the difference between saying, “Let’s eat, grandma!” and “Let’s eat grandma!” Computers don't.

The user interface often determines whether or not people can easily use your software.

State is an important concept in computer science as well as our everyday lives.

Links from the bottom of all the April 2017 articles, collected in one place for you to print, share, or bookmark.

Interesting stories about computer science, software programming, and technology for April 2017.

Computers collect garbage the way humans do. Here's how they manage memory space.

Code reviews help programmers improve their code and learn more about the software they build.