Digital Maestro Magazine digitalmaestro.org

Geometric Shapes and Scratch Code squares, rectangles, triangles, and circles Use variables in code blocks Apply math skills in geometry and trigonometry

July 1, 2018

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine

In the July 1st issue I take a look at using Scratch from MIT for basic geometric shapes. I cover the coding of basic shapes in the beginning. These shapes include squares and rectangles. The coding skills learned in these projects are reinforced and expanded upon in the remaining projects. The triangle and circle projects dive into geometry and trigonometry. These projects are better suited to older students. Alex Reyes

Page 2

Digital Maestro Magazine â&#x20AC;˘ Geometric Shapes and Scratch

4

Coded right triangles

15

Drawing circles

19

Page 3

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine

Squares and rectangles

Events are very common in programming. The event in this example is the Our first lesson is an introduction to clicking of a green flag. This isnâ&#x20AC;&#x2122;t the only the Scratch coding environment. We event we can use. We will look at other will develop code to draw a square and event types later. then a rectangle. In the lesson, we will learn to assemble code blocks. The first The remaining code blocks consist of two attempt at drawing a square will include functions. There is a function to move several code blocks. Our second attempt the Sprite a set number of steps. There is will include a loop. A loop reduces the a function to turn the sprite in a specific number of code blocks needed for repet- direction. These code blocks repeat for itive tasks. The rectangle shape uses the each drawn line. same steps. I assume you do not know how to program. You should have some familiarity with Scratch and code blocks. I will explain all the steps in the project. Each lesson begins with the core of the program we are developing. This rest of the lesson expands on this set of instructions. I will explain each step in the beginning. Future lessons will assume you have learned the code blocks used in previous lessons. I will introduce new code blocks in each lesson and explain each.

The program currently includes four code blocks that draw each of the four lines for the square. Three blocks of code handle the instructions for orienting the sprite. These directions point the Sprite 0, -90, and 180 degrees. We select each of these options by clicking the selector Go to Scratch at https://scratch.mit.edu in the code block. The value or the selecand create a new project. tion is an argument in programming.

Moving Scratch with code blocks The image on this page shows the basic code blocks needed to draw a square. The first code block is an event. An event is what needs to take place before the instructions execute. The event for our code is the clicking of the green flag. Page 4

Scratch uses a coordinate system to orient sprites on the stage. This system is like the one in math. It does have one difference. The typical math coordinate system has values that begin along the x-axis. This means zero lies along this axis. The Scratch coordinate system uses the y-axis as the origin.

Digital Maestro Magazine • Geometric Shapes and Scratch There are four move code blocks and three blocks that point the sprite in a direction. The sprite is pointing to the right at 90-degrees at the beginning. The code uses this starting position as the basis for the first code block.

code block. This is there to let you know the block will be placed between. Release the code block and the other blocks will move to accommodate. Repeat the process with the block that points Scratch at 90 degrees.

Use the image to develop the code. Click the green flag button to run the program. The code will run as it is currently setup but we won’t see a drawn square. Click the flag a few more times. What do you notice? The Scratch sprite points down. Each time we click the green flag it continues to go down the stage. The code is still moving the sprite around the perimeter of a square. At the end of each run, the sprite is in a new location. This location is in the lower left corner. This isn’t what we want the program to do. I leave these errors in my lessons on purpose. There is much more to be learned from mistakes. In this lesson, we have learned that the program needs to be reset. This will cause the square to be drawn in the same location each time the flag is clicked. We will update and fix the errors in the next part of the lesson.

Setting the initial state Code blocks are easy to insert and detach. In this lesson, we will do both. Drag the [go to] block onto the coding canvas and move it between the first and second code blocks. A white outline will appear between the first and second Page 5

These blocks set the initial position for the sprite. The first code block places the sprite at the center of the stage. The second code block points Scratch 90 degrees. The [go to] code block values need to be updated if they are not already set to zero for both x and y. Click inside each parameter and enter the number zero for each. Click the green flag to run the updated code. The sprite will move for a second and return to the original position. This is going on too fast. We can’t see Scratch move after a few clicks. Things will be clearer with the next set of code instructions.

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine

Drawing the square

rectangular shapes with a variety of sizes. We will explore squares and rectUpdate the code to match the image. The angles with greater detail in the next set code includes two blocks. The first block of lessons. clears the stage. This is part of our initial settings. The second block places then pen down. It instructs the code to follow the steps and to draw a colored line along those steps.

Using loops

The current perimeter of the box is very small. The steps are set to the default of 10 steps. Click inside each move parameter and update the steps to 100. Click the green flag button.

This lesson uses the same basic principles learned earlier and introduces loops. Loops repeat lines of code. Our code has lines of code that repeated several times to draw a square. The move and point code blocks are each used four times.

Reducing the lines of code means we can The box will be drawn on the stage and do more with less. It also means we can Scratch will end up in the lower left find problems in our code without having corner of the drawn square. Change the to read through the repetitive code. values of each step code block to make the box larger or smaller. Click and detach the move code block below the pen down block.

Drawing a rectangle

To draw the rectangle we will re-use the same program. Use the same code blocks and change the values for the first and third move blocks. Each should be the same value. Use values that are larger or smaller than the second and fourth code blocks. This will create Page 6

Digital Maestro Magazine • Geometric Shapes and Scratch Set the detached code off to the right side of the coding canvas. Go to the Control section. Attach a repeat loop to the pen down code block. Change the repeat value to 4. The repeat block has a space to fit other code blocks. The blocks we place within the space will repeat four times.

Go to the motion section. Place a [move step] code block within the [repeat] block. Change the value to 100 steps. Place a [turn…degrees] code block within the [repeat] and below the [move] code block. There are two versions of this code block. One has an arrow turning clockwise and another pointing counterclockwise. It doesn’t matter which you choose for this lesson. Change the value from 15-degrees to 90-degrees. Click the green flag button.

The program did the exact same thing with fewer steps. Loops are very useful. We will be using them often.

Loop to draw a rectangle Use the same loop to draw a rectangle. Place a [move] block within the [repeat] and after the [turn] block. Change the value to 200. Place a [turn] block below and change the degrees to 90. Make sure the [turn] block is turning in the same direction. Change the [repeat] value to 2. Click the green flag.

If the rectangle goes off the stage adjust the values so the rectangle fits on the stage.

Squares and rectangles together Instructions to draw squares and rectangles were created separately. We recreate the script when a different shape needed to be drawn. Rewriting script is not effective. In this lesson, we will use triggers to run separate scripts. Each event trigger will draw a square or a rectangle.

Page 7

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine We will begin with the code for the rectangle. Click and drag the clear code block away from the green flag event trigger. Drag the green flag event to the scripts panel. This will remove the code block from the coding canvas.

Square Event

Rectangle Event Go to the Events section and place the [When space key pressed] event on the canvas. Attach the rectangle code to the Space event trigger. Press the spacebar on your computer.

Now we will work on the code to draw a square. The code to draw the square is similar to the one for the rectangle. We donâ&#x20AC;&#x2122;t need to recreate the program. We will duplicate the code and modify it to draw our square. Right-click the first code block, the event trigger. Select the duplicate option. The code blocks will attach themselves to the mouse arrow. Move the arrow to an empty location on the canvas and click.

Click the trigger selector and choose the letter R. Press the letter R on the Go to the [repeat] block in the code we keyboard to draw the rectangle. duplicated. Click the second move code block and drag it away. The move and turn code blocks should come away together. Change the repeat step to 4. Change the event trigger to S for square.

Page 8

Digital Maestro Magazine â&#x20AC;˘ Geometric Shapes and Scratch Press the letter S to draw a square and press the letter R to draw a rectangle.

Variables in squares

The variable code block will be created along with four other code blocks. These code blocks work with the variable.

The size of each shape is based on values updated within the code. We want a user to choose values for each side. To make this possible we need to create variables. Variables are code blocks that accept input. This input is used by our code to draw the shapes. Click the Data section. Click the [Make a There is a checkmark next to the variable variable] button. name. The checkmark places the variable information on the stage. It should be at the top right corner of the stage. The value for the variable is currently at zero.

A panel will open and prompt us to provide a name for the variable. Name the variable side and click the OK button.

Page 9

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine Drag the variable from the Data section over to the square program. Place it into the value for [move]. The value will highlight to indicate it will accept the variable. The code block will read [move side steps].

The variable is set to zero. The variable itself does not have a way to change this value. This is why the other code blocks were created. Drag the [set side to] code block and place it before the repeat loop. Change the value from zero to 150. Press the letter S to draw the square. The program worked just like before. Look at the value for the variable on the stage.

Right-click the variable display on the stage. Select the slider option. The variable display will change to include a slider below the value box.

We need to remove the set block from our code before using the slider. Click and drag the [repeat] code down and away. Remove the set code block for the variable. Attach the repeat code back to the pen down code block.

Drag the slider all the way to the right. Press the letter S.

The variable and the value for the variable is still within the code. We will take it out of the code in the next step.

Page 10

Digital Maestro Magazine â&#x20AC;˘ Geometric Shapes and Scratch The square will be drawn with the side value set in the slider. The maximum value on the slider is 100 and the minimum value is zero. The maximum and minimum can be changed. Rightclick the variable value. Select the option to set the slider minimum and maximum. Set the slider minimum to 25 and the maximum to 200. Click the OK button. Move the slider and draw squares with different values.

Right-click the width variable on the stage and select the slider option. Repeat the process for the length variable. Right-click each variable and set the minimum and maximum values. Set the minimum to 25 and the maximum to 250. Move the sliders to different values and press the letter R.

Less Scratch more shape The Scratch sprite is nice but it can get in the way. We are going to hide Scratch so the shape is easier to see. Go to the Looks section. Drag the [Hide] code block and place it after the [Clear] block. Do this for the square and rectangle code. Run the code for each shape by pressing the appropriate letter.

Variables for rectangles too We are going to use a similar process to create and use variables in rectangles. Go to the Data section and create two variables. Label the variables length and width. Place the width variable in the first move code block and length in the second move block. Bring scratch back at any time by removing the [hide] code block. Placing the show code block somewhere in the code to show the sprite. Here is something to try. Place the [Show] block at the beginning of the code and the [Hide] block at the end of the code.

Page 11

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine

Perimeter calculator We will add another code block to calculate the perimeter of our square and rectangle shapes. We need to create a variable. Go to the Data section and create a variable. Name the variable Square Perimeter. The variable will appear on the stage. Drag this variable display to the top center of the stage. Click the Data section. Drag the [Set] code block onto the stage and attach it to the bottom of the square code blocks. Make sure the selection is set to Square Perimeter. If it is not, click the selector and choose the variable.

Go to the Data section. Drag the [Side] variable and drop it into the left side of the asterisk symbol. Enter the number 4 into the placeholder on the right side of the asterisk. This will multiply the value in the variable Side by 4. Move the slider for the Side variable and press the letter S.

The variable display on the stage will This Square Perimeter variable will show the perimeter of the square. receive the value from a math operation. Click the Operators section. Find the multiplication operator. This is the third code block from the top. The operator uses an asterisk to represent multiplication. Drag this operator and place it into the place of the current value for Square Perimeter. The field is shown as a square but the oval shape will fit.

Page 12

Digital Maestro Magazine â&#x20AC;˘ Geometric Shapes and Scratch

Rectangle perimeter script We need to create a variable to store the perimeter value of the rectangle. Create a variable and name it Rectangle Perimeter. Move the variable on the stage and place it below the perimeter of the square. Place the [set] code block for the Rectangle Perimeter at the end of the rectangle code block. Make sure the [set] code block is set to Rectangle Perimeter. If it is not, click the selector and choose the variable.

Go to the Data section and place the length variable into the left value position for the first multiplication operator. Place the width variable into the left value position of the second multiplication operator. Place the number 2 on the right side of each multiplication operator. The solution for the perimeter of a rect- Adjust the length and width sliders. Press angle is different from that of a square. the letter R. We need to multiply the length by two and the width by two. These values are then added together. Go to the Operators section. Find the addition code block and place it into the values place for the Rectangle Perimeter.

Solving for the area We need to solve for the area of these shapes. You have all the skills to do this on your own. Give it a try and then read the rest of this to see how you did. Drag the multiplication operator and place it into the placeholder on the left side of the addition operator. Place another multiplication operator on the right side. Page 13

Create a variable and name it Square Area. Create another variable and name it Rectangle Area. Attach the set code for each variable under each code block. Make sure the code block for the

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine rectangle reads Rectangle Area. Make sure the code block for the square reads Square Area. Go to the Operators section and place the multiplication block into the value place for each set block. Place the length variable on the left side of the multiplication operator for the Rectangle Area. Place the width variable on the right side. Place the Side variable on the left and right side of the multiplication operator in the Square Area set code block. Move the sliders and press the letter R or S. The perimeter and area for each shape are calculated.

Page 14

Digital Maestro Magazine • Geometric Shapes and Scratch

Coded right triangles

here to prevent stray marks that might be caused by repositioning the pen. We In the next few lessons, we will work don’t need the Scratch sprite to draw our with Right triangles. Drawing trian- shapes. The Hide code block hides the gles isn’t as easy as drawing squares or Scratch sprite. rectangles. Right triangles are a good example. A right triangle has two sides and a hypotenuse. The hypotenuse is a side of the triangle opposite the rightangle. The sides of a right triangle are usually labeled a, b, and c. Side c is usually the hypotenuse. Sides a and b are often referred to as legs. There is a formula available to help determine one of the sides if we know the other two. This formula is known as the Pythagorean theorem. You should remember it from school. Our program will use this formula to determine the sides of our triangle and to draw the triangle.

The goal is to have the triangles drawn near the center of the stage. This is the reason why there is a code block that moves the sprite 100 steps to the right. The pointer is moved to this location before we put the pen down. I’m referring to this position as the pointer because the sprite is no longer visible.

Exit the previous project by clicking the The code that draws the first two sides Scratch logo. Create a new project and of the triangle draws a line from right to title the project right triangles. left. The pointer is rotated 90-degrees and another line is drawn going up. Our first lesson will solve for the hypotenuse. To begin we will draw the first two legs. The legs are joined by a 90-degree angle. I’ll go over the code shown in the image. The first five code blocks reset the code so our triangle drawing begins at the center of the stage. This is similar to the previous lessons where we drew our The final two lines of code rotate the squares and rectangles. The first code pointer 135 degrees and moves 100 block picks up the Pen code. This code is steps. This is the point where we need Page 15

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine to use math to draw the hypotenuse. Pythagorean Moving 100 steps does not meet with the end of the other line. To determine the length of our hypotenuse we will use the Pythagorean theorem. The length of the hypotenuse is the square root of each side squared and added to the other. You might also know the theorem as a-squared plus b-squared equals c-squared. We need to create three variables. These variables represent each side in the right The turn to 135-degrees is simple. triangle. Go to the Data section and Here is how the angle was deter- create three variables. Name each varimined. All the angles in a triangle add able a-side, b-side, and c-side. up to 180-degrees. We know that a right triangle has one angle at 90-degrees. Insert the b-side variable into the first The lengths of each leg are the same. move step after the pen down code. This makes it easy to determine the This variable will be used to update the remaining angles. The angle of each is number of steps with a slider later. Insert 45-degrees. the a-side variable into the next move code block. Insert the c-side variable into The pointer is moving along the y-de- the last move block for the hypotenuse. gree axis. This is zero in Scratch. The opposite direction is 180-degrees. We canâ&#x20AC;&#x2122;t turn 45 degrees because the pointer would point 45-degrees from its current orientation. The line would be drawn up and away from the line. Enter this value and see what happens. Subtract 45-degrees from 180-degrees. The value of 135-degrees is used to rotate the pointer to draw the hypote- The c-side variable will receive the nuse. distance value from the Pythagorean formula. Drag the set variable code block and place with before the last move block. Make sure the selector is set to c-side.

Page 16

Digital Maestro Magazine â&#x20AC;˘ Geometric Shapes and Scratch Go to the Operators section and find the last code block on the list. This code block has a math operation followed by the word [of]. This code block will get the square root of a value.

Place this code block in place of the value for the set parameter. The code reads [set c-side to sqrt of].

value by itself is squaring a value. Place the b-side variable onto the second multiplication operator. Place the variable on both sides.

Go to the stage and right click the a-side variable display module. Select the Slider option. Repeat the process for the b-slide variable display module. Move the slider all the way to the right for a-side and b-side. The maximum value should be 100.

Find the addition operator and drag it into the value for the square root. Drag the multiplication operator onto the left side of multiplication parameter. Drag Click the flag to run the program. The another multiplication operator onto the right triangle should be drawn with right side. a hypotenuse. The variable display module for the c-side will show a value of 141.421356. Update the min and max values for the slider. Create a variety of right triangles.

Go to the Data section. Drag the a-side variable and place it into the first left side multiplication operator. Place another a-side variable into the left side of the first multiplication operator. This will multiply a-side by a-side. Multiplying a Page 17

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine

Not all legs are equal

Change the function to atan. The arc-tangent function will do all the work for us. The program does not work when the Drag the division operator and place it legs have different lengths. The angles into the value parameter. change with different leg lengths. We need to use some trigonometry to Go to the Data section. Drag the b-side determine the angle before drawing the variable and place it into the left side of hypotenuse. the divisor. This is the numerator position. Drag the a-side variable into the The other angles in the triangle are right side, the denominator. labeled A and B. The angle for B is the one we need to calculate. It is the angle Before using this expression we need to at the top of the triangle. Go to the Data accommodate for the Scratch coordinate section and create a variable. Name the system. The Scratch coordinate system variable B-angle. Drag the B-angle vari- uses y-axis for zero. In math, the 0 is able and place it into the last turn angle placed on the x-axis. We need to subtract code block. The value from our calcula- the arctan degrees from 180-degrees. tion will be passed into the value for the angle. Go to the Operations section. Drag the subtract operation onto the value for Drag the [Set] variable code block onto the set variable. Type 180 into the left the canvas. Place the code block before parameter. Drag the arctan equation we the last [turn] code block. We need the creation into the right side. The formula calculation to take place before the turn reads set B-angle to 180 minus atan of code is executed. b-side divided by a-side. To calculate the angle we use the Tangent and ArcTangent functions. The Tangent of the angle is b-side divided by a-side. The answer for the tangent is converted to degrees using arctangent. Go to the Operations section and find the last code block at the bottom of the list. This is the code block that has a function selector. Donâ&#x20AC;&#x2122;t attach this code to our program yet. Place it on an empty area of the campus. We will develop the math first and then insert it. Page 18

Move the A and B sliders to different values. Click the flag to run the program. Change the point in direction argument to different directions and run the script. Use different angles like 50 or 30.

Digital Maestro Magazine • Geometric Shapes and Scratch

Drawing circles

Trig Circle

There are two approaches for drawing circles with Scratch. There is an easy script that doesn’t require much coding or math. Then there is a script that is not as easy and requires trigonometry. We will look at both options. First, the easy script. Create a new project and title it easy circles.

The script that includes math appears just as easy. This script uses the law of sine and cosine to determine the position to draw each point of the circle. The points of the circle determine the circumference. These points are related to the radius. The radius in this program can be adjusted. Create a new project. Title it circle with Trig.

Easy Circle The script in the image begins with something we have already done. The stage is cleared and the pen is placed at center stage. This is followed by a loop. The loop repeats 360 times. This is the number of degrees in a circle. Within the loop, we have two code blocks. The first moves the pen one step. The second turns the pen by one-degree. The ease of this program comes with some limitations. We can’t adjust the radius.

I’ll go over code blocks in the image. The first set of blocks clear the stage and set the position of the pen. The loop is repeated 360 times. The first code block in the loop is the key to drawing the circle. The code block is complex. It includes operations within the code block and operations within operations.

To develop this code block we place a [go to] code block in the loop. The go to code block has an x and y parameter. Within these parameters, we place two addition operators. Each addition operator has two parameters. In the left parameter, we place a multiplication operator. The multiplication operator has two arguments too. We place a function on the left side of each multiplication operator. Page 19

Geometric Shapes and Scratch â&#x20AC;˘ Digital Maestro Magazine The first function solves for the sine of an angle. The second function solves for the cosine of the angle. The angle is calculated from the variable i. The program has four variables. The x and y variables are used to set the center position of the circle. The r variable is for the circleâ&#x20AC;&#x2122;s radius. The i variable is used to iterate the angle measurement. This Create two variables. Create a variable variable is increased by one each time it for the area and one for circumference. passes through the loop. Place the [set variable] code block after the loop. Change the selector to area. Use the image to develop and run the Place a multiplication operator into the program. Before running the program to argument. Place another multiplicachange the radius. The variable for the tion operator into the right side of the radius is on the stage. Right-click the previous multiplication operator. Enter variable and activate the slider. Move the 3.14 into the first multiplication arguslider to a radius of 100. The [go to] code ment. Place the radius variable into the block uses the radius to place the pointer remaining multiplication arguments. Run on the x-axis at zero. The y parameter the program and see the value for area places the pointer on the y-axis at a posi- appear on the stage. tion equal to the radius. To solve for the circumference place the To make circles with larger radii you will [set variable] code block after the [set need to change the slider min and max area] code block we just created. Change parameters. Right click the slider and the selector to the circumference varichoose the option to set the min and able. To solve for the circumference we max values. multiply two times pi and multiply that by the radius.

Circumference and area

We need variables and operations to solve for the circumference and area of the circle. The solutions will be calculated at the end of the loop. The area of a circle is calculated by multiplying the radius squared by pi. We will need two multiplication operators. Page 20

Insert two multiplication operators into the [set to] argument. Place one multiplication operator into the argument. Place another multiplication operator into the left side of the multiplication argument.

Digital Maestro Magazine â&#x20AC;˘ Geometric Shapes and Scratch Enter 2 and the value for pi into the first and second argument of the first multiplication operator. Place the radius variable into the last argument. Run the program. The values for circumference and area will appear in the variable blocks on the stage.

Setting the stage for a change

The grid backdrop will be applied to the stage. Run the circle program. The grid The drawn shapes are based on the helps to visualize the center of the circle coordinate system. The stage or back- and the diameter. ground doesnâ&#x20AC;&#x2122;t reflect these operations. Setting the stage background to something appropriate is helpful. Below the stage, we have the Sprites section. In the Sprites section, we have the Stage option. Click the first icon in the backdrop button bar.

Offset circles

There are a variety of backdrops that are useful for a variety of projects. The backdrops are organized into categories and themes. Click the [other] categories option. We have two grid background options. There is a 20px and a 30px backdrop. The 20px grid has grid squares that are smaller. Click the 20px backdrop and click the OK button.

Page 21

With the grid, we get a better view of the placement of our drawn images. The code to draw a circle includes variables to adjust the position of the center. These are the x and y variables. Right-click each variable display bock on the stage and enable the slider. Move the sliders for each variable to different values. Run the program to draw the circle in a different position.

Learning is not attained by

chance, it must be sought for with ardor and diligence. Abigail Adams

# Geometric Shapes and Scratch

In the July 1, 2018 issue of Digital Maestro Magazine, I explore the use of Scratch for teaching basic geometry skills. The first lessons be...

# Geometric Shapes and Scratch

In the July 1, 2018 issue of Digital Maestro Magazine, I explore the use of Scratch for teaching basic geometry skills. The first lessons be...