Scratch Coding And Geometry

Transcription

1 Scratch Coding And Geometry by Alex Reyes Digitalmaestro.org Digital Maestro Magazine

2 Table of Contents Table of Contents... 2 Basic Geometric Shapes... 3 Moving Sprites... 3 Drawing A Square... 7 Drawing a Rectangle Drawing A Right Triangle Scratch and The Coordinate System Geometry Calculator for Squares Loops for squares Hiding our Sprite Centering Our Shapes Changing the backdrop Geometry Calculator for Rectangles Readout Variable Displays Centering the Rectangle Tidy Things Up A Little Page 2 : Digital Maestro Magazine : digitalmaestro.org

3 Basic Geometric Shapes Scratch projects are built on a two-dimensional surface called a plane. This two-dimensional plane uses a coordinate system to position Sprites. Sprites are images like the Scratch Cat that appears at the center of the Scratch backdrop. The backdrop is also called the stage. This is where the visual part of our program can be seen. I will be using backdrop and stage at various times during the lessons. They both refer to the same thing. In this lesson we will learn how to draw basic shapes on the background. We will draw squares, rectangles, and right triangles. Before we begin to draw we will learn how to move Sprites around on the backdrop. This skill will be used when drawing our shapes later. Moving Sprites Sign into Scratch at and click the Create button. We will be creating several shapes and it is convenient to have a way of starting the code for each shape. When a program waits for an event it is called a condition. The type of condition the will use is called a Wait until condition. The program will not start until something happens. In this example, the cat will not move until we press the letter c. Click on the Events section. Place the When space key pressed code block onto the coding area. The project will be given a generic untitled name. Erase the name and title the project Basic Shapes. Page 3 : Digital Maestro Magazine : digitalmaestro.org

4 Click the selector to see a list of arguments. Click on the letter c. An argument is a value that is passed into a programming statement. The word argument comes from math where an argument is passed into a function. If we press the letter c enough times the cat will go off the stage and disappear. We are the programmers and the cat will not go back to where it started unless we modify the program for it to do so. Go to the Motion section and attach a move code block to the previous code block. This code block instructs the Sprite to move 10 steps. Press the letter c on your keyboard and watch as the cat Sprite moves from left to right. Press the letter c a few times. One of the benefits of using Scratch is that we can see what code does at it is constructed. In this example, we will set a separate condition to reset the cat s position. This will be important later. Go to the Events section and place the When space key pressed condition next to the previous condition. This condition is sometimes called an event listener because it listens or waits for an event to begin. Page 4 : Digital Maestro Magazine : digitalmaestro.org

5 Change the key pressed to the letter r, go to the Motion section, and place the go to X... y:... code block under the reset condition statement. This code block has a value of 230 for x in my example. The value on yours could be different. We will change this value to zero for both x and y. block after that code block. Change the number of steps for the first move code block to 100 and change the value for the second move code block to 50. The stage is a coordinate plane with x and y- axis. The center is at zero for x and zero for y. Make sure that the values for both x and y are zero and press the letter r on your keyboard. The cat will return to the center of the stage. Press the letter c a few times and press the letter r to return the cat to the center. The point in direction code block is set to 90. This puts the Sprite facing the right side of the backdrop. Click the selector. The selector has three additional arguments. These include -90 for left, 0 for up, and 180 for down. Notice that these are measurements in degrees used in geometry. Select the option to point up (0). The angles of this coordinate plane are different from those used in math. In math the zero is along the horizontal or x-axis on the right. Scratch has the zero degree of the coordinate plane start on the y-axis. We will have to make modifications to our code to compensate for this difference. In the first few lessons it really won t make a difference. Okay, let s have the cat do something a little more interesting. Go to the Motion section and place the point in direction code block under the move steps code block, and place another move 10 steps code Page 5 : Digital Maestro Magazine : digitalmaestro.org

6 Press the letter c on the keyboard and observe what happens. stage upward because we did not change the direction the cat is pointing. We are the programmers so everything the cat does depends on what we instruct it to do. Knowing what our code will do and will not do is very important. The cat Sprite will move forward 100 steps, point up, and move 50 steps. This all happens very quickly. Press the letter c again. What happened? Did you expect the cat to turn again? The cat Sprite continued off the Page 6 : Digital Maestro Magazine : digitalmaestro.org

7 Drawing A Square Now that we know how to move a sprite around the backdrop and set conditions we are ready to draw some shapes. The first shape will be a square. We won t be using the cat code to move the cat anymore, so we will delete that part of the program. Click and drag the first code block to the Scripts section and release. We will be using the letter r as a condition to draw the rectangle so we need to assign a different letter to clear the backdrop. The letter w would be good to use for wiping clean the backdrop or stage. I won t be using the letter c because that will be used for drawing a circle. Drawing content on the backdrop requires the pen code blocks. Click on the Pen section and attach a set pen color to code block to the condition code block. The color of the code block in my example is set to brown. The color on your code block may be different. I am using version 2 of Scratch for this training and it does not contain a color palette option. We will look at choosing a pen color later in this lesson. Go to the Events section and place a key press condition onto the coding area. Change the argument to the letter s for square. Page 7 : Digital Maestro Magazine : digitalmaestro.org

8 Before drawing we need to set the pen down onto the backdrop. Place a Pen down code block after the pen color code block. It is good programming practice to set all your variables at the beginning of a program. I didn t initiate the variables here, but we will look at how this is done in future lessons. Fore example, even if we know the cat will travel to the left without a direction code block we should include it. The next step is to move the pen and draw the first line of our square. Click on the Motion section and place a move 10 steps code block below the previous code block. Change the steps value from 10 to 50. Attach another Move and point in direction code block. Change the move to 50 steps and the direction to -90. Student Question: Why is the value a negative or why is there a minus before the 90? How does this affect the movement of the Sprite on the stage? Attach a point in direction code block to the previous code block and change the argument from 90 to 0. Student Question: Why didn t we set a direction before the first move step? Page 8 : Digital Maestro Magazine : digitalmaestro.org

9 We can continue to return to the Motion Scripts section to place Move and point in direction code blocks but there is an easier way. Right click on the last Move code block and select duplicate. Student Question: Do you think the program is ready to create a square? Why? The Move code block and any code blocks attached below this code block will be duplicated and attached to the mouse pointer. Walk through the program instructions with students. This is a good exercise because students rarely go back to check their steps or reason through a set of instructions. Asking students to draw out the steps as they are written will help them take this abstract concept and turn it into something tangible. Press the letter s and run the program as it is written. Ask students what needs to be done to complete the diagram of the square. Move the mouse pointer to the end of the code blocks and release. Change the value of the direction to 180. Page 9 : Digital Maestro Magazine : digitalmaestro.org

10 Attach another Move block to the end of the program and change the value to 50. the pen does not continue to draw while the cat moves out of the way. Before running the program again, we need to clear the backdrop of the partial square. Go to the Pen section and attach a clear code block to the end of the wipe code. This code block erases any drawings on the backdrop. Press the letter w. Go to the Motion section and attach a Move and point in direction code block. Change the number of steps to 50 and leave the direction at 90. Press the letter s to draw the square. The square is drawn properly but the cat is covering our shape. Let s fix that. Press the letter w to wipe the backdrop and then press the letter s. The square is now fully visible above the cat. Press the letter s again to see what happens. Go to the Pen section and attach a pen up code block. We need to attach this code, so Students Question: What happened? Why? Why are the squares nicely connected to Page 10 : Digital Maestro Magazine : digitalmaestro.org

11 one another? Can this be useful? What new shape can we see in the drawing? We can see that the square was drawn again below the previous square. We didn t reset the position of the cat and pen, so the shape was drawn at the current position. The current position is the exact same distance as the length of the side of the square, so each square connects to the previous square. Page 11 : Digital Maestro Magazine : digitalmaestro.org

12 The program and process for drawing a rectangle is essentially the same as it is for drawing a square. Drawing a Rectangle Student Questions: In what ways are a rectangle and square the same and in what ways are they different? Is there a way we can modify the program used to draw a square, so we can use it to draw a rectangle? Give the students some time to come up with one or more solutions. Change the argument for the condition to r for rectangle. This is the condition that starts the script that will eventually draw a rectangle. Earlier we learned how to make a copy of blocks of code. We can use the same process to duplicate the entire program to create a square. Right click the first code block and select the duplicate option. Change the steps argument for the first and third move code blocks to 100. The string of codes will attach themselves to the mouse pointer. Place the duplicated code to the right of the existing code. Page 12 : Digital Maestro Magazine : digitalmaestro.org

13 Clear the backdrop drawing area by pressing the letter w and then press the letter r to draw the rectangle. This is one possible solution to drawing the rectangle. Another solution is to change the arguments for the second and fourth move code blocks to 100. Press the letter r two times and you will get a shape similar to the one shown in the image where the rectangles over lap and creates squares within a larger rectangle. Student Question: How many squares are in the rectangle? How many rectangles do students count in the shape? How is this like fractions? This gives us a rectangle that is rotated 90 degrees in relation to the other rectangle we drew. This ties in to transformations of shapes in geometry. The shape is a rotation of the previous shape. In a transformation the shape has the same size, area, angles, and line lengths. Repeat the same process with the previous code. Go back and change the move arguments. Student Question: how may rectangles do they count? Page 13 : Digital Maestro Magazine : digitalmaestro.org

14 Drawing A Right Triangle Creating a triangle is a little trickier. The square and rectangle have simple 90 degree angles all the way around. A right triangle can be drawn in any direction as long as one of the angles measures 90 degrees. This is where it would be important for students to draw a triangle on paper with a protractor before creating the code. We will begin with a simple triangle. One that has 90 degrees. A right triangle has 90 degrees and since all the angles in a triangle add up to 180 degrees we can easily determine the other angles. We will use the existing code to begin the process of coding our right triangle. Right click the program for creating a rectangle and select the duplicate option. Place the duplicate program to the right of the existing program and change the condition argument to the letter t for triangle. The first move code block is useful because it will draw a line moving right 100 steps. The second line instructs the pen to point straight up. This needs to be changed. If the first angle is 90 degrees and all the angles in a triangle sum to 180 degrees, then the other degrees can be 45. This helps keep things simple for our first triangle. The code block that changes the direction of the pen needs to be changed to 45 degrees. When we click the argument selector there isn t an option for 45 degrees. This is fine because we can type the value we want into the argument. Page 14 : Digital Maestro Magazine : digitalmaestro.org

15 Type 45 into the argument. As programmers develop programs they often test the program to see if it is delivering the result they want. This means they run sections of the code. We want to test the code created up to this point without including the rest of the code. The rest of the code would give us a strange shape. Click the point in direction code after the move 50 steps code and move it down. This will detach the rest of the code from the code above. Move it down and away until the white highlight disappears, and release. The drawing shows a horizontal line and then a line that extends 45 degrees. The program worked as we coded it but the line for the angle in our triangle is not going in the direction we want. A solution to this can be found in the code we used to create squares and rectangles. When the line in a square or rectangle was drawn to the left, the code used a negative value. We can change the value from 45 to -45(negative 45). Press the letter t to test this part of the code. If the backdrop has a drawing, make sure to press the letter w to clear the drawing. Change the value to -45(negative 45), clear the backdrop, and draw the part of the triangle we have coded to this point. Page 15 : Digital Maestro Magazine : digitalmaestro.org

16 The angle is now going in the direction we need. The distance the line needs to be drawn for this part of the triangle can be figured out with a little bit of math. This line is opposite the 90-degree angle and has a special name. It is called the hypotenuse. square root of this number. The square root of this value is We will round the value to 141 steps. Student Question: Ask students if 20,000 is a reasonable value. We will use the Pythagoras Theorem to determine the hypotenuse. The formula is shown in the image below. Replace the value in the last code to 141 steps. Clear the drawing and run the code again by pressing the letter t. To keep things simple, we will set the measurements for the sides that are along the 90- degree angle at the same measurement. Both will measure 100 steps. Each of these sides of the triangle is labeled a and b. These are the variables used in the Pythagoras Theorem shown in the image above. Squaring 100 is the same as multiplying 100 by 100. This gives us 10,000. Adding the two values together gives us 20,000. The value of 20,000 is the answer squared and is too long for the hypotenuse. We need to get the This is looking much better now. In the last part of the program we need to draw the line down. We can look at the code used to draw squares and rectangles for a hit at how we can code the next part. Page 16 : Digital Maestro Magazine : digitalmaestro.org

17 We turned the Sprite by 180 degrees to go down. moves the cat out of the way in the rectangle code and copy that part of the code here. Add a point in direction code block and use 180 for the argument. Place a move code block and use 100 for the argument. Clear the drawing and run the program for the triangle. Attach the copy of the code to the end of the triangle program. That did it! We have drawn a right triangle in Scratch. Clear the previous drawing and run the triangle program again. In the last step we need to move the cat Sprite out of the way, so we can see the triangle. We can borrow the code from one of the other programs. Find the code that Adjust the number of steps in the code arguments to change the size of each shape. Coding shapes using this process re-enforces the concept of perimeter for students. It also helps students understand the connection to the Pythagoras Theorem when it comes to Page 17 : Digital Maestro Magazine : digitalmaestro.org

18 drawing triangles. This is a nice real-world application of concepts we teach in class. Click the Scratch logo to return to the project page for the next lesson. Page 18 : Digital Maestro Magazine : digitalmaestro.org

19 Scratch and The Coordinate System Scratch uses a coordinate plane to place and move Sprites on a backdrop. The cat sprite is placed at the center of the plane. When we program the cat or any sprite to move to the left or right on the plane it is moving along the x-axis of the plane. When the Sprite is programmed to move up or down it is moving along the y-axis of the plane. The Scratch program is constantly keeping track of anything that happens on the project stage. Click the Create button to create a new project. Move the mouse pointer around the backdrop and look at the lower right-hand corner of the stage. The position of the mouse pointer is shown with x-axis and y-axis coordinate numbers. The backdrop measures 240 units or steps from the center to the right and 240 units from the center to the left. The entire backdrop measures 480 units from the left to the right along the x-axis. Each unit along the x-axis or y-axis is equivalent to one step in our code blocks. Knowing where a Sprite is on the coordinate plane can be difficult because there is nothing to mark the center of a Sprite. The cat Sprite is an irregular shape and finding the center where it lands on a point in the coordinate plane can be difficult. Scratch provides some tools to help us determine the position of a Sprite on the backdrop. Go to the Motion section. The backdrop measures 180 units along the y-axis from the center up and 180 units along the y-axis from the center down for a total of 360 units along the y-axis. Page 19 : Digital Maestro Magazine : digitalmaestro.org

20 At the bottom of the Motion section there are two code blocks to provide feedback for the x and y positions. Click the check box next to each code block. Change the key argument to d for draw. Variable information boxes for the sprites position will appear in the top left corner of the backdrop. Move the cat sprite and watch as the x and y position values change. Go to the Motion section and attach a go to x: y: code block to the previous code block. We will use the Pen drawing skills of the previous lesson to draw the x-axis and y-axis lines of the coordinate planes. Go to the Events section and place a when key pressed code block on to the canvas. The script we are creating will be used to center the pen and draw the main x and y- axis lines. Page 20 : Digital Maestro Magazine : digitalmaestro.org

21 Change the values of the code x and y arguments in the code block to -240 for x and 0 for y. This will place the pen at the edge of the stage on the left. Go to the Pen section and attach a pen down code block to the end of the previous code block. Click the color swatch and drag the mouse pointer while holding down the mouse button. The color in the swatch will change as the mouse pointer moves over colors on the Scratch application. Move the mouse pointer over the blue color in the go to x: y: code block to sample the blue color. Attach a set pen color to the previous code block. The color of the pen in my example is purple. The color of your pen might be different. I am using version 2.0 of Scratch online and this version does not have a color palette selector. The color swatch is more like a color sampler. We change the color by clicking inside the color swatch and dragging the mouse pointer around to sample colors. Go to the Motion section and place a go to x: y: code block below the previous code block. Change the x argument to 240. This will draw the line for the x-axis. Page 21 : Digital Maestro Magazine : digitalmaestro.org

22 Go to the Pen section and attach a pen up code block. up code block us useful because we can use it to move the cat sprite out of the way. To draw the line for the y-axis we will repeat the same steps by change the y position. Right click the go to x: y: code block and select duplicate. Place a go to x: y: code block at the end of the program. Set the x and y arguments to 50. Press the letter d to draw the coordinate plane main lines. Attach the code to the bottom of the pen up code block. The main coordinate plane lines will be drawn, and the cat Sprite will be placed in the top right coordinate section. Change the argument for x to zero and the value of the first y argument to 180. Change the second y argument to This will draw the line from the top to the bottom. The pen Page 22 : Digital Maestro Magazine : digitalmaestro.org

23 Title the project Coordinate System and return to the project page. This is one way to draw the coordinate lines. Prompt students to find other ways to draw these lines on the stage. Page 23 : Digital Maestro Magazine : digitalmaestro.org

24 Geometry Calculator for Squares In a previous lesson we learned to use Scratch to draw three basic geometric shapes. In this lesson we will use scratch to draw the shapes, calculate the perimeter, and area. The perimeter and area of squares, rectangles, and triangles can be calculated using formulas. Formulas use constants and variables. Constants remain the same and variables change. We will be using variables to change the values of the shape s sides and to calculate the perimeter and area. Teachable Moment: This is an excellent application of constants and variables used in math and science experiments. Click the Create button to start a new project. To calculate the area and perimeter of a square we will need two variables. One for perimeter and one for area. We will also need another variable which we will use to provide the length of the sides of the square. Variables are regularly used in applications because they can be changed and are often set at the beginning of a program to a standard value before they are changed within the application by the user. Variables are often reset at the start of an application, so they can be updated with new information from the user each time. This is very common in video games. Go to the Data section. In this section we can create our own code blocks and variables that can be used in our code. Click the button titled Make a variable. Title the project Area and Perimeter of a Square. Page 24 : Digital Maestro Magazine : digitalmaestro.org

25 A new variable configuration box will open so we can name the variable. changing the variable argument in the code block. A check mark is placed to the right of each variable. Placing a check mark on each variable instructs Scratch to place an information box for the variable on the stage. Title the variable area and click the Ok button. The information boxes are placed on the left side of the stage. We will use these boxes to read the values and variables in our formula. Place the set to code block created with the variable onto the coding canvas. A variable block will be created. In addition to the variable block, Scratch will create four additional code blocks. We will use some of these blocks in our program later. Use the selector to change the set argument to area. Use the make a variable button to create two more variables. Title each variable perimeter and side. Scratch doesn t create four additional code blocks for each variable. The same four code blocks can be used by Page 25 : Digital Maestro Magazine : digitalmaestro.org

26 Go to the Operators section and place a multiplication operation into the value argument of the set portion of the code. Return to the Data section and place the side variable into both sides of the multiplication operator. This will multiply the side by itself. This is like squaring the value of the side of a square. Go to the Events section and place a when flag clicked code block above the previous code block. Place a set to code block above the code block we just created. Click the flag to execute the program. Look at the values in the variables information boxes. The area variable displays the area of the square with sides of 100. Make sure the set argument is set to the side variable. Place a value of 100 for the variable side. Scratch is a very flexible development environment. In this lesson, we developed the code from the bottom up. This gives us a great deal of flexibility. Page 26 : Digital Maestro Magazine : digitalmaestro.org

27 Right click the set to code block and select duplicate. Place the duplicate code below the current code block. Change the value from 10 to 4. Change the set argument to the perimeter variable. Click the flag to execute the program and read the value for the perimeter variable. The perimeter of a square is resolved by multiplying the value of the side by four. Click and drag away the side variable on the left. Could we have solved for perimeter with addition? How could we have done that? Page 27 : Digital Maestro Magazine : digitalmaestro.org

28 Now that we have the values for area and perimeter of a square it is time to draw the square. Go to the Pen section and attach clear, set pen color to, and pen down code blocks to the end of the program. The color for the pen can be changed by clicking and dragging away from the color swatch to select a color from anywhere in the Scratch application. Attach a turn degrees code block to the move steps code block. This turn code block will rotate the pen 90 degrees counterclockwise. Change the degrees argument to 90. Attach a move steps code block from the Motion section to the pen down code block. Insert the side variable from the Data section into the steps argument. Page 28 : Digital Maestro Magazine : digitalmaestro.org

29 Right click the move side steps code block and select the duplicate option. Repeat the duplicate process two more times. Attach the duplicate code block to the end of the program. Click the flag to execute the program. Page 29 : Digital Maestro Magazine : digitalmaestro.org

30 Loops for squares The code for drawing the square repeats the draw process several times with the same steps. This set of repetitive code blocks is idea for loops. Loops allow us to reduce the number of lines in our code when there is something that needs to be repeated. The code to draw the lines of the square was repeated four times. Click the move side steps code block that begins the second step and drag the code down and onto the Scripts panel. This will delete this portion of the code. Change the repeat value to four. Click the flag to execute the program. The square will be drawn the same way but with fewer lines of code. Programs can get very long with hundreds and thousands of lines of code. It is much easier to find edit our program when we have fewer lines of code to review. Hiding our Sprite The cat Sprite has been very useful, but it can get in the way and having to add code to move the cat out of the way takes time. Insert a hide code block anywhere before the pen down code block. This code will hide the Sprite. Place a repeat code block from the Control section at the beginning of the first move side steps code. Teachable Moment: Why did we hide the code block before the pen down code? Reinforce cause and effect and process skills. Page 30 : Digital Maestro Magazine : digitalmaestro.org

31 Click the flag to start the program. The square will be drawn, and the cat Sprite will not cover any part of the square drawing. Insert a go to x: y: code block before the pen down code block. The sprite in our program is already set to the coordinate position of zero for the x-axis and zero for the y-axis. It is always a good idea to set the initial values of a program at the beginning. This includes the sprite. This assures the drawing will begin where we want it to start instead of where the sprite happens to be at the moment. Change the x-axis and y-axis values to zero. Click the flag to execute the program. Page 31 : Digital Maestro Magazine : digitalmaestro.org

32 Centering Our Shapes The square is drawn from the center of the coordinate plane to the right then up and back to the left. This puts the shape in the upper right quadrant of the plane. In this lesson we will learn how to center the shape on the coordinate plane. We will use some additional math in the process. Before beginning the modifications to the code let s take a look at the math. Half of the square needs to be above and below the x- axis and to the left and right of the y-axis. That is all we need to know to calculate the starting position. We will divide the value for the side of the rectangle in half to get the value for the starting position. Using the existing code, we will insert division operators from the Operators section for each argument in the x and y value section of the go to code block. Place the side variable on the left side of each division operator this is the numerator in fractions. Place 2 for the divisor in each operator. Teachable Moment: Why is a slash used for division? How is the slash similar to the fraction bar? We need to change the divisors from positive to negative. This will start the drawing on the left side of the coordinate plane, so the square is centered on the stage. Click the flag to draw the square. The square is drawn in the center of the backdrop. It is hard to tell if this is true since there is no point of reference to help us determine the center of the backdrop. Let s change the backdrop to help us see the coordinate plane. Page 32 : Digital Maestro Magazine : digitalmaestro.org

33 Changing the backdrop Go to the Sprites and Stage section. Click the choose backdrop from library icon. A backdrop library will open. The grid backdrop helps us visualize the center of the stage and how the square is centered on the stage. Scroll to the bottom of the library and select the xy-grid-20x backdrop. Click the Ok button to add the backdrop. This coordinate backdrop is very useful, and we will be using it regularly in future lessons. Page 33 : Digital Maestro Magazine : digitalmaestro.org

34 Geometry Calculator for Rectangles In the previous lesson we learned to program Scratch to work as a calculator to solve for the area and perimeter of a square. In this lesson we will create a calculator to solve for the area and perimeter of a rectangle. Solving for the area and perimeter of a rectangle is essentially the same. Teaching Tip: This is where we can ask students to consider how the code can be modified to solve for the area and perimeter of rectangles. How do the equations need to be modified? We could modify the existing code from instructions to draw a square, but it might be easier to create a new set of instructions. The structure used for the square is essentially the same, but we need to create new variables and move several lines of code around. It is just much easier to construct the new code. Go to the Data section and create four new variables. Create one for the perimeter of the rectangle, one for the area of the rectangle, one for the length, and one for the width. It is always a good idea to create variables for specific scripts that will not be used with other scripts. Reusing the same variable that is used in other scripts can cause problems and lead to false results. Place set code blocks from the data section to initiate the variables and begin solving for area and perimeter. Notice that we set the values of the variables first. Teachable Moment: What do students think would happen if we didn t declare the variables first and their values before the equations for perimeter and area? Remember that instructions are processed one step at a time from beginning to end. Set the value of the length variable to 200 and the width variable to 100. Teachable Moment: I use the term construct when referring to the program. How is construction a program similar to constructing objects like a home? How similar is construction a program to constructing a story? Page 34 : Digital Maestro Magazine : digitalmaestro.org

35 Solving for the area of the rectangle is almost the same as it is for solving for the area of a square. Go to the Operators section and place the multiplication operator in the set argument box. Return to the Data section and place the variable for the rectangle length on the left side of the operator and the variable for the length on the right side of the operator. It really doesn t matter which side the variables are placed because multiplication in this equation is commutative. This is the commutative property of multiplication. add length with width on both sides. We could also choose to add one length and width then multiply by two. We could multiply each length and width by two then add them together. This provides an excellent opportunity for math explorations. It is always a good idea to let students know that there may be more than one way to solve a problem and in this case there are multiple ways to solve the problem. This exploration takes this instruction to a higher level of cognitive thinking for students. In this example we can add all the lengths and widths together. The widths and lengths are grouped together but they can be mixed, and we would arrive at the same answer. This demonstrates the associate and commutative properties of addition. Teachable Moment: Ask students to recall the commutative property of multiplication. In this example, we multiply the length by two and the width by two and add the product. Solving for the perimeter is interesting and a great way to explore the flexibility of programming and mathematics with students. We can solve for the perimeter by adding all the sides together. We can add the lengths first then the widths. We can mix them and Page 35 : Digital Maestro Magazine : digitalmaestro.org

36 We can test the program to see if our math is working properly. Click the green flag then press the letter r to run the rectangle code. The area is 20,000 and the perimeter is 600, which is correct. We can repeat the code twice because the length and width can be repeated twice. The first loop will move the pen the length of the rectangle. This step is then followed by a 90- degree turn to then begin drawing the width. After drawing the width, we need to position the pen to draw the length again. The final block will turn the pen 90-degrees again. At this point the loop can repeat one more time to draw the second length and width set of lines. Press the letter r to draw the rectangle. Now we can draw the rectangle. Go to the Pen section and add blocks to clear the stage, change the pen color, and set the pen down. Place a loop with a counter at the end. The loop is going to be different for the rectangle because we won t repeat the same instructions four times. Why do you think we can t repeat the instructions four times? Let s think about the process. We need to draw either the length or width first. It doesn t matter which we draw first at this point. After drawing the length for example, we need to draw the width. We then need to draw the length and width again but in different directions. Can you figure out how we can write the code? The rectangle is drawn according to our instructions. We do need to make a few modifications to the code, so the rectangle is drawing where we want near the center of the stage. We need to set the start position for the pen and we need to set the direction the pen will draw the first length of the rectangle. Place a set go to x y code block below the clear Page 36 : Digital Maestro Magazine : digitalmaestro.org

37 code block. Place a point in direction code block before the loop and set the direction argument to 90-degrees. Readout Variable Displays The readout displays are very useful. They provide information about the value of the variables in our program. They can get in the way of our drawings. We can move the displays around the stage. The last step is to lift the pen from the stage. This assures the pen is up and ready for us to draw a different shape like the square the coded earlier. The rectangular shape in this example is drawn with the length of the rectangle being drawn horizontally. Think of how we can draw the rectangle with the width being drawn horizontally. Can you do this by changing the argument on just one code block? In the example shown on the image below, I organized the display readout boxes so they information for the square s area, perimeter, and sides is displayed in a row at the top of the stage. Below that row of information I organized the information for the rectangle. This cleared the stage on the left for our geometric shapes. The readouts still take up valuable Real-estate on the stage. We will learn how to use other feedback options in future lessons, so the readouts are not distracting or interfering with our presentation. Page 37 : Digital Maestro Magazine : digitalmaestro.org

38 Centering the Rectangle In the lesson for drawing the square we learned how to center the drawn image on the stage. We did a little math to center the square regardless of the length of the sides. We will write a script for the rectangle to do the same thing. To center the square shape, we divided the values for the side by negative two. Do you think we can do that here too? Place the division operator into the x and y coordinate positions in the go to x y code block. Place the length variable to the left of the first fraction and the width variable to the left of the second fraction. The variables should be in the numerator position. Place negative two for the value in the denominator for both. Place another go to x y code block above this code block to make sure the pointer starts at the center of the stage. Make sure the values are set to zero for each coordinate. Centering the rectangle is slightly different. Change the direction that the pen is pointing to 90-degrees. The point in direction argument should read 90. This will assure that the length is drawn first. Press r to draw the triangle. If we were to have left the value of the first direction at zero then the rectangle would have been drawn differently. What is wrong with this drawing? Why didn t it get drawn in the center? These are all good questions. Let s take a look at why this happened. Teachable Moment: Ask students to come up with a reason and a solution. Page 38 : Digital Maestro Magazine : digitalmaestro.org

39 The reason the rectangle was draw on the left side and not in the center is because of the position where the pen is placed to begin the drawing. The initial position sets the conditions for the rest of the drawing. If the drawing were to begin with the longest side and move to the right then everything would be fine, but the drawing begins here and draws the shorter side of the rectangle. This is an excellent example of how programs we create may not always work as we intended. It all comes down to the instructions we write in the program and how clear we are about those instructions. I like this example, because students don t often think about the reasonableness of their sentences, stories, or solutions to a math problem. The program provides immediate feedback and lets them know there is a mistake in the way they wrote the instructions or in the way they reasoned through the problem. As teachers we often provide this feedback, but it is often delayed and the connection to the problem to be solved may be lost. This sort of problem when solved sets the stage and continues to reinforce the need for students to think of the reasonableness of their solutions. To properly solve this problem, we need to change the position where the rectangle is drawn to accommodate the length and width of the rectangle. The image below shows that I exchanged the positions of x and y so that the pointer uses the width first then the length to position the pointer. Press the letter r and run the program. The rectangle is drawn but it still isn t centered. The problem isn t with the code this time but with the math. Take a look at the math and reason through the steps. Page 39 : Digital Maestro Magazine : digitalmaestro.org

40 To center the rectangle, we change the first denominator from a negative 2 to a positive 2. Draw the rectangle again. The rectangle is properly centered on the stage with these modifications. This is just a temporary solution. If we chose to draw a rectangle where the longest side was drawn horizontally we would have to reposition the x and y values and change the positive 2 to a negative 2. To solve this problem, we will need to learn more about condition statements and Boolean operators. The solution to this problem will be presented in the chapter where I cover these topics. Page 40 : Digital Maestro Magazine : digitalmaestro.org

41 Before leaving this lesson you should create a script that clears the stage. Tidy Things Up A Little Page 41 : Digital Maestro Magazine : digitalmaestro.org

42 If you like this book then you might like these books too. Sphero for STEM Code Sphero and teach your students STEM concepts. Teach students to apply geometry skills like angles, shapes, and perimeter. Apply science skills of mass, motion, and acceleration. Wirecast Live Streaming Use the free version of Wirecast to live stream events over YouTube. Create studio quality video that integrates a variety of media and different camera shots. Start your own television studio with very little and stream live content at your campus. Microsoft Class Notebook With a Microsoft Office 365 account available to school districts you can create classroom notebooks. Classroom notebooks are great for distributing and collecting a variety of written exercises from students. Class Notebook uses the free OneNote app which is available for a variety of mobile devices. Page 42 : Digital Maestro Magazine : digitalmaestro.org

43 Thinking Maps with Google Drawings Use Google Drawings to create online thinking maps. Thinking maps can be created by students or shared by teachers with students. Learn to create circle, bubble, flow, brace, and double-bubble thinking maps. Students will not only learn to use thinking maps but they will also learn the skills it takes to build the thinking maps by manipulating graphic objects in Google Drawing. Interactive Stories with Google Slides Google slides can be used to create interactive stories. In this book you will learn how to add interactive elements like buttons and links. You will also learn how to add voice over audio for students with reading difficulties. You will learn how to add animated Gifs to a presentation for something a little more interesting than simple slide in and slide out transitions. Screencast with Screencastify Screencastify is a free screen recording app for the Google browser and Chromebook. In this book you will learn how to use Screencastify to record web pages, computer desktops, and content captured with an external camera like a webcam. You will also learn how to upload your video to YouTube and share them with the world. Students can create video and share them with you and other students through Google Drive. Page 43 : Digital Maestro Magazine : digitalmaestro.org