Coding in the Classroom | Coding Transformations

Leveraging the power of coding to understand transformations
By: Lisa Anne Floyd

In this article, we’ll take a look at creating an application in Scratch that helps students become acquainted with various transformations The application incorporates both Spatial Sense (Location and Movement) and Algebra (Coding Skills) expectations from the new Ontario Mathematics Curriculum (2020).

The completed project link can be found here: Completed Transformations in Scratch.

The application can be modified based on the grade level. Through the guided materials below, we’ve indicated in which grade levels the coding and location and movement concepts appear in the new curriculum. We’ve also included video clips to explain how to create the code for the application.

Coding Skills addressed in this application include:

  • Sequential code
  • Loops
  • Nested Events
  • Conditional Statements
  • Subprograms

Some of the expectations for grade 7 are listed here, since this program does incorporate Algebra and Spatial Sense expectations up to Grade 7 (again, this can be modified, but there is no reason to prevent students from incorporating certain control structures or Spatial Sense concepts in earlier grades, if they are ready – just be aware of what’s required for assessment purposes). 

Algebra – Grade 7

C3. solve problems and create computational representations of mathematical situations using coding concepts and skills

  • C3.1 solve problems and create computational representations of mathematical situations by writing and executing efficient code, including code that involves events influenced by a defined count and/or sub-program and other control structures
  • C3.2 read and alter existing code, including code that involves events influenced by a defined count and/or sub-program and other control structures, and describe how changes to the code affect the outcomes and the efficiency of the code

Spatial Sense – Grade 7

E1. describe and represent shape, location, and movement by applying geometric properties and spatial relationships in order to navigate the world around them

  • E1.3 perform dilations and describe the similarity between the image and the original shape
  • E1.4 describe and perform translations, reflections, and rotations on a Cartesian plane, and predict the results of these transformations

Writing the code for a translation

In the following code, the butterfly moves from (0,0) on the Cartesian plane to (50,75) when the green flag is pressed. It then waits 0.5 seconds before returning to the original position (0,0).

An image of the code that executes a transformation.

Here’s a short video clip explaining how to create this application:

Suggested student extensions
Move the butterfly to each of the four quadrants using the glide and wait blocks: Students’ ability to plot and read points within all four quadrants begins in grade 6 in the new Mathematics Curriculum (2020). In grade 5, plotting and reading points within the first quadrant is assessed, but they can certainly explore the other three quadrants in grade 5 and earlier.

Using speech to text to say “This is a translation”

Now it is time to add code that will indicate to the user, through voice, that a translation has occurred. The text to speech blocks can be found in “Add Extension” on the bottom of the screen. The icon looks like this:

An image of the code required to play a recorded message.

Here’s a short video clip explaining how to add the text to speech blocks:

Suggested student extension
Add speak blocks for other points, indicating the plotted point locations as well as the quadrant.

Making a new block called “Translation”

It is often helpful to break a program up into smaller pieces, so let’s make a new block, or a subprogram, for doing a translation. This will be useful when we add additional transformations to our program.

An image of Scratch code using a subprogram block to perform the translation.

Here’s a short video clip explaining how to make your own block:

Subprograms appear in the grade 7 specific expectations under Algebra (Coding Skills). In the new Mathematics Curriculum in Ontario (2020), a subprogram is defined as “A small set of instructions for completing one small task. Subprograms can be combined in a main program to accomplish a large task using small steps.”

Suggested student extension
Write subprograms for multiple translations that move to various quadrants. It is good practice to ensure subprogram names do not have any spaces (although in Scratch, it will still work). An example of a subprogram might be “moveToQ1”.

Writing the code

Now that we know how to create our own blocks, we can write the code for a rotation. Here, we’ve added some code to rotate the butterfly 90 degrees.

An image of the code required to perform a rotation and a translation using subprograms.
Suggested student extension
Add code for a variety of rotations – perhaps incorporate the random operator block   (found under Operators) in so the butterfly rotates a random number of degree between 1 and 360. Students are required to understand how to describe and perform rotations of up to 180 degrees in grade 5 and 360 degrees in grade 6 in the new Ontario Mathematics curriculum (2020).

Writing the code for dilation

Below, you will see code has been added for making the butterfly larger and then back to the original size. You can find the change size blocks under Looks.

An image of the code required to perform a dilation.
Suggested student extension
Add code to perform multiple dilations including both enlargements and reductions.

Writing the code for a reflection

To demonstrate a reflection, we will use the Costumes tab to flip the butterfly upside down across the x-axis.

An image indicating the code required to perform a reflection.

Here’s a short video explaining how to reflect the butterfly across the x-axis by switching the costumes:

Suggested student extension
Add code to perform a reflection across the y-axis.

Adding conditional statements so the user can select which transformation to perform

Conditional statements appear in grade 5 of the new Ontario Mathematics Curriculum under Algebra (Coding Skills). A conditional statement is a “type of coding instruction used to compare values and express and make decisions. A conditional statement tells a program to execute an action depending on whether a condition is true or false. It is often represented as an if-then or if-then-else statement. (Ontario Mathematics Curriculum, 2020).

This requires quite a bit of additional code. You can see that we’ve added some conditional statements, created a variable, added an ask block (found under Sensing) to get information from the user, and also incorporated a loop so that the user can continue to select different transformations.

An image of the code required to ask the user to perform the various transformations.

The conditional statements are inside a forever block, so in this case, we’ve also incorporated nested events, which are introduced in grade 4 in the new Ontario Mathematics Curriculum.

Nested events involve “control structures that are placed inside other control structures; for example, loops occurring inside other loops, or a conditional statement being evaluated inside a loop.” (Ontario Mathematics Curriculum, 2020).

Suggested student extension
Alter the code to allow the user to enter in values to specify the plotted points, dilation factor and/or rotation degrees. Additional variables and ask blocks will be required.

The completed project link can be found here: Completed Transformations in Scratch.

Next Steps – Challenge your Students:

Once students know the code for performing transformations, you can challenge them to create a story application that incorporates transformations. Maybe a character will dance, go for a walk around a neighborhood, see themselves in the mirror…. The possibilities are endless. Perhaps they can use conditional statements to create a choose your own adventure application!