Computational Thinking Unplugged – Identifying 2D Shapes from their Code

I recently tweeted about an activity we did in the Computational Thinking in Math Education (Primary/Junior) Course that I teach at Western University’s Faculty of Education:


Many educators appreciated this idea, as not only is it an unplugged opportunity, meaning students don’t require a device, but because you really have to think to determine the shape that has been coded.

Joel Speranza tweeted about the fact that supplementary angles are brought up when analyzing coded shapes.  Many of the pre-service teachers in the Computational Thinking class noticed this as well.  Jen Apgar suggested having students run the code in the snow, and record the time lapse!  What a cool idea!  Blayne Primeau (a fellow Port Elginite!) admitted his “geeky” side in that he loves this as a minds-on task and suggested having students figure out how they could adjust the code to create similar shapes. I love when a tweet results in my PLN coming up with ideas for remixing a task that I’ve shared!

“In order to learn something, first make sense of it” – Seymour Papert, Mindstorms

As computational thinkers, our students use decomposition,- that is, they break a larger problem down into smaller, more manageable steps.  Students need to deconstruct the code in their minds.  They also need to have an understanding of algorithms, sequencing and pattern recognition.  Many lines of code are executed in sequence, while some lines of code are repeated several times.  This “circle of squares” shape is a prime example:


Being able to visualize what is being drawn on the screen is also key in order to correctly identify the coded shapes.  In Fostering Spatial Understanding in Geometry, Kinach (2012) points out that in order for students to understand math ideas, they must be able to make sense of the world and to be able to visualize relationships in data.  Students often find themselves moving and rotating their bodies as they read each line of code.  I discuss this idea of “Body Geometry” in my first Blog post.  Papert (1980) describes this type of geometry as being syntonic,-that is, it’s related to “children’s sense and knowledge about their own bodies”.

Of course, the real magic happens when students actually create something through code.  While this activity is a great way to get students thinking and exposed to coding without a computer, having students actually coding their own shapes is always more engaging and allows for their creative side to be harnessed.

Perhaps, students can code a shape in Scratch and then write it on a piece of chart paper. The students and teacher can be confident that their code works, because they will test it out in Scratch first, debugging along the way.  The chart paper can be displayed around the room and students can do a “gallery walk”, identifying shapes and interacting with one another to discuss what they see. After all, humans are social beings and Jaworski (2015) suggests that we learn through “engagement with others: people and tools help us achieve what we cannot achieve alone”.

You can see an example of this below.  Enzo Ciardelli has his students do a similar activity after coding in Hopscotch (a block based app available on ipads).


Let’s have a look at some possible shapes that students might code for one another to identify. I’ve included what will be displayed for your convenience:)  Why not try it out with your own students?  Let me know how it goes!  What kind of math talk did you observe through this activity?









Jaworski, B. (2015). Teaching for mathematical thinking: inquiry in mathematics learning and teaching. Mathematics Teaching, (248), 28-37.

Kinach, B. M. (2012).  Fostering Spatial Understanding in Geometry.  Mathematics Teacher, 105(7), 534-540.

Papert, Seymour. (1980) Mindstorms: Children, computers, and powerful ideas. New York: Basic Books.

Using Body Geometry and Variables to Code Designs in Scratch

Making use of syntonicity and the power of variables to enhance a geometry program in Scratch

Variables play an important role in computer programming (often referred to as “coding”) and allow your programs to be flexible.  Once you can make sense of using variables, you will be able to create powerful programs!

Variables are like containers,-they hold information, and as the name suggests, this information may change throughout the program.  In a football game, for example, each team will have their own variable for the score, which is then displayed on the scoreboard.  In a video game, variables are used to keep track of players’ points.

We will use variables for two purposes in this program: to change a distance moved and to keep track of the number of steps the sprite moves (a counter).

The shape we are going to create is inspired by Seymour Papert in his book “Mindstorms”:


We’ll call this a “Square Spiral”.

In order to create this shape, students will need to make use of geometry skills.  They will need to decide on the initial length of the side of the square and will also develop an understanding of the degrees of rotation required for the Sprite to make a square shape.

Ideally, students have already had an opportunity to create two-dimensional shapes in Scratch in a previous lesson.  See the videos below:

Coding a Square

Coding a Triangle

Coding a Circle

Coding Many Circles

As students work out how to make their Sprite move to create geometric shapes, they are using what Seymour Papert refers to as “Body Geometry”.  He believed this type of geometry is learnable because it is syntonic,-children are relying on their sense and knowledge of their own bodies.

If you consider, for instance, how to walk in the shape of a circle, children will get up, and begin to walk in a circle, and soon realize that they move a little, turn a little, over and over again.

For the “Square Spiral”, let’s consider how to create it using Body Geometry:

     Move a little, turn 90 degrees.

     Move a little more, turn 90 degrees.

     Move a little more, turn 90 degrees….

In Papert’s Logo language, it would look something like this:

     Forward 5

     Right 90

     Forward 10

     Right 90

     Forward 15

     Right 90

     Forward 20

     Right 90


Can you see the pattern?

Let’s take a look at how this could be coded in Scratch:


The move block steps are increased by 5 each time.

The turn block remains at 90 degrees.

This would take a long time to code in Scratch, having to update the move block each time you need it.  This code works, but is inefficient.


Let’s now introduce the power of variables!

Traditional use of variables in math, such as: 3 + x = 10  aren’t always “personally relevant”, as Papert suggests.

In coding, the idea of a variable becomes a source of power!  Not only do students see their usefulness, but they also appreciate that we tend to use descriptive names rather than single letters in coding.  In this case, students are making use of a variable to create an aesthetically pleasing design.

Let’s have a look at the same program, but with the use of a variable, called moveAmount:


Steps to Using  a Variable:

1 – When writing computer programs, we first say that we are going to create a variable.  This is called “declaring” a variable.  In Scratch, you select Data, Make a Variable and give it a name.  Our variable is called moveAmount, in this case.

2 – The variable is then given a starting value.  This is called “initializing” the variable.  The set block was used in this program to give the moveAmount a starting value of 5, because we want the sprite to move five steps in their first move.

3 – Finally, we can use the variable.  We use the variable in the move block, as well as in the change block.  The moveAmount variable increases each time the sprite moves.

We’ve also introduced a repeat block (which students will have used when making two-dimensional shapes in a previous lesson).

To a programmer, this code is much more aesthetically pleasing.  It is efficient.

“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away”. – Antoine De Saint-Exupery

(Thanks, Steve Floyd for the quote suggestion)

     The first time the Sprite moves, it will move 5 steps, since we have indicated that the  moveAmount value is set to 5 at the start of the program.

     The Sprite will turn 90 degrees and then the moveAmount variable is increased by 5.

     The second time, the moveAmount is equal to 10 (since we increased the initial value by 5).

     The Sprite will move 90 degrees, the moveAmount variable is increased by 5 and so on….

Here’s a video explaining how to use the power of variables to enhance the program as shown above.


How could students adjust this program to make the spiral tighter or wider?

How could students adjust this program so that the base shape is a pentagon, rather than a square?

An Accumulator

Just for fun, let’s throw in another variable to keep track of the total number of steps the Sprite moves.


The variable “total” will start out at 0 and increase by the moveAmount each time, so it will keep track of the total number of steps displayed.

For a full description of how to add an accumulator to this program, watch the video below:

Students might now go back and adjust their basic two-dimensional shapes to determine the perimeter using an accumulator variable.

Accumulator and Counter variables are often used in games to keep track of scores and time passed.  In a trivia game, for example, each time the user gets a question correct, their score accumulates by a certain value.  You might also count the number of times a user attempts a question.

In Ontario, geometry can be found across the grades, (thanks to Katrina Massey for sorting through the curriculum docs). You can see that integrating this type of “body geometry” through coding readily touches upon curriculum expectations at each grade level (of course, you will need to adjust the skill level depending on students’ readiness and prior experience):

expectations.JPGAdditional Extensions…

After students successfully code the square spiral, encourage them to explore with other values, other base shapes (e.g., triangle, pentagon, octagon) and perhaps even try out the shape below (a coil, also inspired by Papert):


Here is a hint to the code (Note: * is the multiply symbol in coding world):

     Forward 20

     Right 5

     Forward 20 * 0.99

     Right 5

     Forward 20 * 0.99 * 0.99

     Right 5

     Forward 20 * 0.99 * 0.99 * 0.99



Blog Intentions

This blog is meant to provide educators with ideas and tasks to use coding with their students.

Many suggested tasks will be created with the intention to integrate coding into math class. I also plan to share challenges for teachers to try with their students.

If you have any suggestions for future posts and coding ideas, send me an email or a tweet!

Follow me on Twitter at @lisaannefloyd

Thank you to Brian Aspinall for encouraging me to begin “blogging” and for being a source of inspiration with his own blog.

I hope you enjoy my first official post.  Thanks for visiting!