Scratching the Surface of Pong: Enriching Linear Equations with Computer Programming Kelly Wamser Remijan, Michael Pedersen Abstract Increasingly, coding is seen as a desirable and even necessary skill for jobs of all types. While coding is essential in today s technology-driven world, integrating coding into existing curriculum can be challenging and may require mathematics teachers to think outside the box and to become more knowledgeable of coding programs such as Scratch. The purpose of this manuscript is to show teachers how coding through the free program Scratch can enrich and review math concepts such as writing the equation of a line. The following manuscript is similar to a lab activity conducted by my 9th grade math students. This was the third Scratch-based activity conducted by the students; thus, they had some experience with the program before attempting to apply linear equations to Pong. Keywords: algebra, mathematics education, STEM integration, computer coding, mathematical modeling, algebra enrichment, algebra connections Published online by Illinois Mathematics Teacher on March 8, 2018. 1. Introduction Scratch (MIT Media Lab Lifelong Kindergarten Group, 2002) is a free online program that allows people of all ages to not only play games but also to create or hack existing games. After learning about Scratch from Michael Pedersen, founder of Junior Code Academy and then a fellow member of the Metro East STEM Society, I worked with Pedersen to develop various lab activities that reinforce Algebra 1 concepts as well as expose students to coding. During this process, we experienced how coding reinforces math concepts, promotes problem solving and collaboration, and encourages students to build off of other people s work to create something new. The purpose of this manuscript is to show teachers how coding through the free program Scratch can enrich math concepts. This article is similar to a lab activity conducted by my 9th grade math students in which they apply linear equations and coding to the game of Pong, a 2D old-school video game which resembles a ping pong game where a ball Corresponding author bounces off of a paddle and ricochets off of walls. While it is important to note that this was the third Scratch-based activity conducted by my 9th grade math students, the version presented here is a self-contained lesson and can be completed without prior experience of Scratch, provided that students have prior knowledge of how to write the equation of a line. 2. Getting Started The participant, to be referred to as the programmer, can go to scratch.mit.edu and log in. A Scratch account is not required, but creating and logging in with a Scratch account will allow the programmer to save and share their work. After logging into Scratch, the programmer should go to Scratching the Surface of Pong, found at scratch.mit.edu/projects/122969995/. To begin the game of Pong, or to execute the code for the program, hover over the flag next to the stop sign (the flag will turn green), then click the green flag (figure 1). Once the game begins, the computer mouse can be used to control the paddle. To stop the Illinois Mathematics Teacher 1
Kelly Wamser Remijan, Michael Pedersen Figure 1: Flag (start program) and stop sign (end program) icons Figure 2: See inside button Figure 4: Sprites region Figure 3: New backdrop button game, the programmer should click the stop sign found next to the green flag (figure 1). Playing the game a few times, the programmer should discover that the ping pong ball travels in a linear path after the ball hits the paddle or wall. To help the students begin to see a connection to coding, click the See inside button (figure 2), which is found on the top right of the screen. There are five regions inside of Scratch, which are identified in figure 6. To help students make more mathematical connections to this version of Pong, a new background, specifically an xy-grid, can be inserted into the game by clicking the icon found at the bottom left corner of the screen, as shown in figure 3. After going to the Backdrop Library, the xy-grid should be selected as the backdrop for the Pong game by double clicking the xy-grid. (Backdrop images are listed alphabetically, so the xy-grid will be found toward the end of the list.) Clicking the sprite labeled Ball in the Sprites region (highlighted in figure 4) and then clicking the Scripts tab (circled in black in figure 5), the programmer can view the code written specifically for the ball. At any point in the activity, the programmer may save a copy of the project with their own ideas by clicking Remix (circled in green in figure 5). Furthermore, it is recommended that the programmer periodically save their work throughout the lab activity by clicking File then Save Now. The remainder of this article gives details Figure 5: Scripts tab about the process used to write, program, and graph the equation of the linear path of a ball. If this project is used for a classroom activity, students should be asked questions on a corresponding handout that require them to review the code, analyze the graph, and use skills learned in class to determine the slope as well as the equation of the linear path of the ball. 3. Linear Path 1 By inspecting the code, students can identify the starting location of the ball as (0, 50) circled in purple in figure 5. After the code is executed, the point at which the ball first hits the wall may be difficult to determine, since the ball travels very quickly. To reduce the speed in which the ball travels, the programmer should change the code from move 15 steps to move 1 steps. With the ball traveling at a slower speed, the programmer, to the best of their ability, can use the mouse/cursor to approximate the location at which the ball hits the wall. It is important 2 Illinois Mathematics Teacher
Scratching the Surface of Pong Figure 6: Scratch regions Illinois Mathematics Teacher 3
Kelly Wamser Remijan, Michael Pedersen Figure 9: icon New sprite Figure 10: Shrink icon Figure 7: Observing the ball s ricochet point (x 1, y 1 ) = (0, 50) (x 2, y 2 ) = (240, 75) slope = m = 75 50 240 0 = 125 240 = 25 Figure 8: Calculating the slope from two points to note that students may approximate locations differently, and observed data may cause the calculated slopes to be a bit different from the actual slope. In the example in figure 7, the programmer observed that the ball hit the first wall at approximately (240, 75). Knowing that the ball starts from (0, 50) and estimating that the ball hits the first wall at (240, 75), students can calculate the slope of the first linear path to be 25, as shown in the work in figure 8. Now, using the y-intercept, (0, 50) which identifies b = 50 and the slope, 25, which identifies m = 25, students can determine the equation of the first linear path of the ball in slope-intercept form, y = mx + b, to be y = 25x + 50. To program the computer to draw the line modeling the path of the ball, the programmer can add a new sprite to the game screen. To add a Pencil sprite, which will draw the line illustrating the path of the ball, click the New sprite icon found underneath the xy-grid (figure 9) and double click the pencil sprite found in the sprite library. To make the pencil sprite more manageable, the pencil can be shrunk by clicking the Shrink icon (figure 10) and then clicking the pencil found on the xy-grid until it reaches an appropriate size. (This can also be done to shrink the ball, if desired.) Once the pencil sprite is complete, the programmer may program the pencil to draw the line modeling the equation y = 25 x + 50. Since the slope-intercept form of an equation involves m representing slope and b representing the y- coordinate of the y-intercept, m and b should be programmed as variables. To do this, click Data found under the Scripts tag (figure 12). Click Make a Variable and type m as the variable name, for this sprite only (see figure 13). Next, click Data once again. Click Make a Variable and type b as the variable name and select the option For this sprite only (see figure 14). In the workspace, code should be written for the pencil (figure 11). It is important to note that each line of the code corresponds to the coinciding script command category. These lines of code can be dragged into the workspace and must be locked into place followed by typing in the m and b values as well as the starting point for the line, which in this case is (0, 50). As the paddle in the game of Pong can move, the path the ball takes will vary after the paddle hits the ball. To make the linear path of the ball consistent for all students in this activity, the paddle can be hidden so that the ball is only hitting stationary walls. To hide the paddle, click the Paddle sprite in the sprite region, then click i on the paddle sprite and deselect show, followed by clicking the blue circle containing a white triangle to exit the edit screen. 4 Illinois Mathematics Teacher
Scratching the Surface of Pong Figure 11: Writing code for the pencil Test the program by executing the code. To execute the code, hover over the flag and click it when it turns green. Tap the space bar at any time to stop the pencil from tracing its path any further. Figure 12: Data button Figure 13: Defining variable m Figure 14: Defining variable b 4. Linear Path 2 After stopping the game by clicking the stop sign, and then starting the game once again by hovering over the flag and clicking it when it turns green, students can watch the path of ball and see that it changes directions after hitting the wall at (240, 75). Knowing that the second linear path leaves the first wall at (240, 75) and using the mouse/cursor to determine the point in which the ball hits the second wall to be approximately (70, 180), students can calculate the slope of the second linear path to be 21. Now, using one of the points, (240, 75) and the slope, 21, students can determine the equation of the second linear path of the ball to be y = 21x 223 as shown in the work in figure 15. In the workspace, additional code should be written for the pencil to draw linear path 2 as shown in figure 17. (Do not delete the code already written for the pencil.) It is important Illinois Mathematics Teacher 5
Kelly Wamser Remijan, Michael Pedersen (x 1, y 1 ) = (240, 75) and m = 21 y + 75 = 21 (x 240) y + 75 = 21 x 1 y = 21 x 223 Figure 15: Computing the equation for linear path 2 (x 1, y 1 ) = (70, 180) and m = 25 y + 180 = 25 (x 70) y + 180 = 25 x + 36 y = 25 x 144 Figure 16: Computing the equation for linear path 3 to note that the programmer can save time by duplicating previous code for the pencil. To duplicate code, right click on the code you want to duplicate, click Duplicate, drag the duplicated code, and then make changes as needed. Test the program by executing the code. Be sure to tap the space bar before the pencil hits the first wall. Additionally, don t forget to tap 2 to execute the second set of code commands for the pencil, and to tap the space bar before the pencil hits the second wall. 5. Linear Path 3 When starting the game once again by clicking the green flag, students can watch the path of the ball and determine the point at which the ball hits the second wall to be approximately (70, 180). In addition, one can observe that linear path 3 is parallel to linear path 1. Thus, the slope of linear path 3 is the same as the slope of linear path 1, making m = 25. Using the point (70, 180) and slope 25, students can calculate the equation of linear path 3 to be y = 25 x 144, as shown in figure 16. In the workspace, additional code should be written for the pencil to draw linear path 3 as Figure 17: Code for drawing a linear path shown in figure 18. (Do not delete the code already written for the pencil.) Test the program by executing the code. Tap the space bar before the pencil hits the first wall, then tap 2 to execute the second set of code commands for the pencil and tap the space bar before the pencil hits the second wall. This time, be sure to tap 3 to execute the third set of code commands for the pencil, and tap the space bar before the pencil hits the third wall. Once again, it is important to note that students may approximate locations differently and observed data may cause the calculation of slopes to be a bit off from the observed reality causing the third line to be slightly different from the path traveled by the ball. As a result, students may calculate different linear equations for the three linear paths of the ball. After completing the activity, we recommend that programmers save the file with a name that identifies the activity as completed. Once logged in, all saved files can be accessed by clicking the Scratch file folder (figure 19) found in the upper right corner of the screen. In our experience, this activity promotes discussion and allows students to reinforce or review the topic of writing the equation of a line, all while being exposed to coding through the free online program Scratch. Furthermore, this activity provides teachers with the opportunity to 6 Illinois Mathematics Teacher
References Scratching the Surface of Pong MIT Media Lab Lifelong Kindergarten Group (2002). Scratch (Software). http://www.scratch.mit.edu. Accessed Jan. 2018. Kelly Wamser Remijan O FALLON TOWNSHIP HIGH SCHOOL 600 S SMILEY ST O FALLON, IL 62269 E-mail: wamser.remijan@yahoo.com Michael Pedersen E-mail: pedersen0906@gmail.com Figure 18: Pencil code for linear path 3 Figure 19: Save icon make connections related to physics and geometry through topics such as angle of incidence, angle of reflection, and parallelograms. Teachers are encouraged to consider incorporating Scratch and other games to integrate coding into mathematics curriculum. In addition to Pong, other games with potential for integrating coding with Scratch include billiards, to reinforce and extend on the topic of linear equations, or Super Mario Brothers, to reinforce and extend on the topic of quadratic equations. Illinois Mathematics Teacher 7