Lessons Used in This Pathway

Students play a simple video game, and gradually break it down into parts. Doing so reveals how coordinates play a crucial role in video games, and how animation is created via equations that govern the changing values of those coordinates.

Play the NinjaCat demo game onscreen while students watch. Purposely make mistakes while playing the game, which should elicit responses/direction from students.

Crowdsource students' Notices.

Crowdsource students' Wonders.

The main idea here is to understand that while we see images on a screen, the computer only sees a small set of numbers, which uniquely model the state of the game. The way those numbers change determines how the game behaves, and we can add features to the game if we’re willing to keep track of more numbers.

Students apply this way of thinking to more complex, real-world games. They also get a sense for how much work is involved in creating games like that.

Ask students to share out their favorite current video game. Write the names of the games on the board.

Collect students estimates for each of the questions below.

Optional: Once students have made their estimates, have students use the Internet to research these questions and compare the actual numbers to their estimates.

Answers: There’s a lot of variability, especially between game consoles and cell phone games! But here’s a few sample numbers:

The goal here is not to discourage students from the possibility of eventually creating a game like their favorite game, but to manage expectations given our limited resources (time, money, and people). By starting with this game project, students are learning transferable skills that can help them later on in learning new programming languages and creating bigger projects.

The 3d, two-player version of NinjaCat needed a lot more numbers than the simple one you saw here, but the actual concepts at work are the same. Even if we don’t have time to make games like the ones we chose here, you’ll learn the same concepts just by making a simpler one.

Students are asked to come up with a way of identifying location on a grid, which provides the justification for coordinates.

Placing a Character on a number line 🖼Show image Computers use numbers to represent a character’s position onscreen, using number lines as rulers to measure the distance from the bottom-left corner of the screen. For our videogame, we will draw the number line so that the screen runs from 0 (on the left) to 1000 (on the right).

We can take the image of the Dog, stick it anywhere on the line, and measure the distance back to the left-hand edge. Anyone else who knows about our number line will be able to duplicate the exact position of the Dog, as long as they know the number.

OPTIONAL: Draw a number line on the board, and select a volunteer to leave the room for a moment. Place the printed Dog image somewhere on that line, and have the class quietly choose the number that represents the Dog’s location. Remove the Dog and invite the student back into the room. Can they position the Dog at the right place, based on the number chosen by the class?

This number line lets us communicate the position of the Dog using a single number! Unfortunately, it only represents the distance from the left-hand edge of the screen. That means the dog could be at any height in the center of the screen, and it would always have the same number to represent its position.

By adding a second number line, we can locate a character anywhere on the screen in either direction. The first line we drews is called the x-axis, which runs from left to right. The second line, which runs up and down, is called the y-axis. A 2-dimensional coordinate consists of both the x- and y-locations on the axes.

Placing a Character in two dimensions 🖼Show image Suppose we wanted to locate NinjaCat’s position on the screen. We can find the x-coordinate by dropping a line down from NinjaCat and read the position on the number line. The y-coordinate is found by running a line to the y-axis.

A coordinate pair is always written in the form of (x, y). When we write down these coordinates, we always put the x before the y (just like in the alphabet!). Most of the time, you’ll see coordinates written like this: (200, 50)$\displaystyle (200, 50)$ meaning that the x-coordinate is 200 and the y-coordinate is 50.

Math-phobic students often fail to realize that common sense and intuition can be helpful in exercises where the answer is a number! The first two prompts in the "Synthesize" section directly get at this misconception, but you may want to pay special attention to those students while they are working on this workbook page.

Students explore a coordinate activity in which a cartesian point is used to compute the position of a character in a game. From there, they brainstorm a game of their own.

In pairs, have students explore the Ninja Cat Desmos graph (Desmos).

Screenshot should include:

Students are given a challenging expression that exposes common misconceptions about order of operations. The goal is to demonstrate that a brittle, fixed notion of order of operations is insufficient, and lead students to a deeper understanding of order of operations as a grammatical device. The Circles of Evaluation are introduced as "sentence diagramming for arithmetic".

Humans use verbs like "throw", "run", "build" and "jump" to describe operations on nouns like "ball", "puppy", and "blocks". Mathematics has "operations" and functions, like addition and subtraction. Just as you can "throw a ball", a person can also "add four and five".

A mathematical expression is an instruction for doing something, which specifies the verbs and nouns involved. The expression 4 + 5$\displaystyle 4 + 5$ tells us to add 4 and 5. To evaluate an expression, we follow the instructions. The expression 4 + 5$\displaystyle 4 + 5$ evaluates to 9.

If you were to write instructions for getting ready for school, it would matter very much which instruction came first: putting on your socks, putting on your shoes, etc. Sometimes we need multiple expressions in mathematics, and the order matters there, too!

🖼Show image Mathematicians didn’t always agree on the order of operations, but at some point it became important to develop rules to help them work together.

The pyramid on the right is a model for summarizing the order of operations. When evaluating an expression, we begin by applying the operations written at the top of the pyramid (operations in parentheses and other grouping symbols). Only after we have completed all of those operations can we move down to the lower level. If both operations from the same level are present (as in 4 + 2 - 1$\displaystyle 4 + 2 - 1$), we read the expression from left to right, applying the operations in the order in which they appear. This set of rules is brittle, and doesn’t always make it clear what we need to do. Mnemonic devices for the order of operations like PEMDAS, GEMDAS, etc focus on how to get the answer. What we need is a better way to read math.

Instead of using a rule for computing answers, let’s start by diagramming the math itself!

That means that Numbers (e.g. - 3$\displaystyle 3$, -29$\displaystyle -29$, 77.01$\displaystyle 77.01$…​) are still written by themselves. It’s only when we want to do something like add, subtract, etc. that we need to draw a Circle.

If we want to draw the Circle of Evaluation for 6 ÷ 3$\displaystyle 6 \div 3$, the division function (/) is written at the top, with the 6 on the left and the 3 on the right.

What if we want to use multiple functions? How would we draw the Circle of Evaluation for 6 ÷ 1 + 2$\displaystyle 6 \div 1 + 2$? Drawing the Circle of Evaluation for the 1 + 2$\displaystyle 1 + 2$ is easy. But how do we take the result of that circle, and divide 6 by it?

We basically replace the 3 from our earlier Circle of Evaluation with another Circle, which adds 1 and 2!

Aside from helping us catch mistakes before they happen, Circles of Evaluation are also a useful way to think about transformation in mathematics. For example, you may have heard that "addition is commutative, so a + b$\displaystyle a + b$ can always be written as b + a$\displaystyle b + a$." For example, 1 + 2$\displaystyle 1 + 2$ can be transformed to 2 + 1$\displaystyle 2 + 1$.

Suppose another student tells you that 1 + 2 × 3$\displaystyle 1 + 2 \;\times\; 3$ can be rewritten as 2 + 1 × 3$\displaystyle 2 + 1 \;\times\; 3$. This is obviously wrong, but why?

Take a moment to think: what’s the problem? We can use the Circles of Evaluation to figure it out!

The first Circle is just the original expression. The second expression represents what the (incorrect) commutativity transformation gives us:

In this case, the student failed to see the structure, viewing the term to the right of the +$\displaystyle +$ sign as 2$\displaystyle 2$ instead of 2 × 3$\displaystyle 2 \;\times\; 3$. The Circles of Evaluation help us see the structure of the expression, rather than forcing us to construct it and keep it in our heads.

Students learn how to use the Circles of Evaluation to translate arithmetic expressions into code.

When converting a Circle of Evaluation to code, it’s useful to imagine a spider crawling through the circle from the left and exiting on the right. The first thing the spider does is cross over a curved line (an open parenthesis!), then visit the operation - also called the function - at the top. After that, she crawls from left to right, visiting each of the inputs to the function. Finally, she has to leave the circle by crossing another curved line (a close parenthesis).

All of the expressions that follow the function name are called arguments to the function. The following diagram summarizes the shape of an expression that uses a function. Diagram of a WeScheme Expression 🖼Show image

Arithmetic expressions involving more than one operation, will end up with more than one circle, and more than one pair of parentheses.

If you have time, start with the two pages in the student workbook that scaffold translating circles to code: Completing Partial Code from Circles of Evaluation (Page 10) and Matching Circles of Evaluation & Code (Page 11).

We have included one page of more complex problems in the student workbook so that you’re ready to challenge students who fly Arithmetic Expressions to Circles of Evaluation & Code - Challenge (Page 13).

Note: If you want to practice making Circles of Evaluation with exponents and square roots, we use sqrt as the name of the square root function, and sqr as the function that squares its input.

Have students share back what they learned from the Circles of Evaluation.

Circles of Evaluation are a powerful tool that can be used without ever getting students on computers. If you have time to introduce students to the wescheme editor, typing their code into the interactions area gives students a chance to get feedback on their use of parentheses as well as the satisfaction of seeing their code successfully evaluate the expressions they’ve generated.

Now that we understand the structure of Circles of Evaluation, we can use them to write code for any function!

Working together using a Driver/Navigator group setup, students experiment with the Editor. They explore Number and String datatypes, and how they behave in this programming language.

Driver/Navigator 🖼Show image When programming in this class, you’ll be working together using the Driver/Navigator model. Each group can only have one "Driver" - their hands are on the keyboard, and their job is to manage the typing, clicking, shortcuts, etc. If you’re not a Driver, you’re a "Navigator" - your job is to tell the Driver where to go, what to type, etc. A good Driver types only what the Navigator tells them to, and a good Navigator makes sure to give clear and precise instructions.

Students should open WeScheme in their browser, and click "Log In". This will ask them to log in with a valid Google account (Gmail, Google Classroom, YouTube, etc.), and then show them the "My Programs" page. This page is empty - they don’t have any programs yet! Have them click "Start a New Program".

Our Editing Environment 🖼Show image This screen is called the Editor, and it looks something like the diagram you see here. There are a few buttons at the top, but most of the screen is taken up by two large boxes: the Definitions Area on the left and the Interactions Area on the right.

The Definitions Area is where programmers define values and functions that they want to keep, while the Interactions Area allows them to experiment with those values and functions. This is like writing function definitions on a blackboard, and having students use those functions to compute answers on scrap paper.

Math is a language, just like English, Spanish, or any other language. Languages have nouns (e.g. “ball”, “tomato”, etc.) and verbs, which are actions we can perform on these nouns (e.g. - I can “throw a ball”). Math and programming also have values, like the numbers 1, 2 and 3. And, instead of verbs, they have functions, which are actions we can perform on values (e.g. - “I can square a number”).

Languages also have rules for syntax. In English, for example, words don’t have ! and ? in the middle. In math and programming numbers don’t have & in them.

Languages also have rules for grammar. The cat sat. is a sentence, whereas The sat cat. is nonsense, even though all the words are valid syntax. The order of the words matters!

Keeping the importance of syntax and grammar in mind is helpful when learning to program!.

Our programming language knows about many types of numbers, and they behave pretty much the way they do in math. Discuss what students have learned:

This lesson introduces students to Booleans, a unique datatype with only two values: "true" and "false", and why they are useful in both the real world and the programming environment.

Boolean-producing expressions are yes-or-no questions and will always evaluate to either true (“yes”) or false (“no”). The ability to separate inputs into two categories is unique and quite useful!

For example, some rollercoasters with loops require passengers to be a minimum height to make sure that riders are safely held in place by the one-size-fits all harnesses. The gate keeper doesn’t care exactly how tall you are, they just check whether you are as tall as the mark on the pole. If you are, you can ride, but they don’t let people on the ride who are shorter than the mark because they can’t keep them safe. Similarly, when you log into your email, the computer asks for your password and checks whether it matches what’s on file. If the match is true it takes you to your messages, but, if what you enter doesn’t match, you get an error message instead.

Debrief student answers as a class.

Students learn how to apply functions in WeScheme, reinforcing concepts from standard Algebra, and practice reading error messages to diagnose errors in code.

Students know about Numbers, Strings, and Booleans — all of which behave just like they do in math. But what about functions? Students may remember functions from algebra: fx = x + 4$\displaystyle f(x) = x + 4$.

Arguments (or "inputs") are the values passed into a function. This is different from variables, which are the placeholders that get replaced with input values! Pyret has lots of built-in functions, which we can use to write more interesting programs.

Have students log into WeScheme, open the editor, type (sqrt 16) into the interactions area and hit Enter.

Have students type (string-length "rainbow") into the interactions area and hit Enter:

Have students complete Applying Functions (Page 17) to investigate the triangle function and a series of error messages. As students finish, have them try changing the expression (triangle 50 "solid" "red") to use "outline" for the second argument. Then have them try changing colors and sizes!

Debrief the activity with the class.

This activity introduces the notion of Contracts, which are a simple notation for keeping track of the set of all possible inputs and outputs for a function. They are also closely related to the concept of a function machine, which is introduced as well. Note: Contracts are based on the same notation found in Algebra!

When students typed (triangle 50 "solid" "red") into the editor, they created an example of a new data type, called an Image.

The triangle function can make lots of different triangles! The size, style and color are all determined by the specific inputs provided in the code, but, if we don’t provide the function with a number and two strings to define those parameters, we will get an error message instead of a triangle.

As you can imagine, there are many other functions for making images, each with a different set of arguments. For each of these functions, we need to keep track of three things:

The Name, Domain and Range are used to write a Contract.

Where else have you heard the word "contract"? How can you connect that meaning to contracts in programming?

An actor signs a contract agreeing to perform in a film in exchange for compensation, a contractor makes an agreement with a homeowner to build or repair something in a set amount of time for compensation, or a parent agrees to pizza for dinner in exchange for the child completing their chores. Similarly, a contract in programming is an agreement between what the function is given and what it produces.

Contracts tell us a lot about how to use a function. In fact, we can figure out how to use functions we’ve never seen before, just by looking at the contract! Most of the time, error messages occur when we’ve accidentally broken a contract.

Contracts don’t tell us specific inputs. They tell us the data type of input a function needs. For example, a Contract wouldn’t say that addition requires "3 and 4". Addition works on more than just those two inputs! Instead, it would tells us that addition requires "two Numbers". When we use a Contract, we plug specific numbers or strings into the expression we are coding.

Let’s take a look at the Name, Domain, and Range of the functions we’ve seen before:

Optional: Have students make a Domain and Range Frayer model (Page 18) and use the visual organizer to explain the concepts of Domain and Range in their own words.

Have students complete pages Practicing Contracts: Domain & Range (Page 19) and Matching Expressions and Contracts (Page 20) to get some practice working with Contracts.

This activity digs deeper into Contracts. Students explore image functions to take ownership of the concept and create an artifact they can refer back to. Making images is highly motivating, and encourages students to get better at both reading error messages and persisting in catching bugs.

(If needed, you can print a copy of these contracts pages for your students.)

Students are given contracts for some more interesting image functions and see how much more efficient it is to write code when starting with a contract.

You just investigated image functions by guessing and checking what the contract might be and responding to error messages until the images built. If you’d started with contracts, it would have been a lot easier!

Have students turn to Using Contracts (Page 21), Using Contracts (continued) and use their editors to experiment.

Once they’ve discovered how to build a version of each image function that satisfies them, have them record the example code in their contracts table. See if you can figure out what aspect of the image each of the inputs specifies. It may help you to jot down some notes about your discoveries. We will be sharing our findings later.

Have students turn to Triangle Contracts (Page 22) and use the contracts that are provided to write example expressions. If you are ready to dig into triangle-sas, you can also have students work through Triangle Contracts (SAS & ASA).

Sometimes it’s helpful to have a contract that tells us more information about the arguments, like what the 3 numbers in a contract stand for. This will not be a focal point of our work, but to give students a taste of it, have them turn to Radial Star (Page 23) and use the contract to help them match the images to the corresponding expressions. For more practice with detailed contracts you can have them turn to Star Polygon to work with the detailed contract for a star-polygon. Both of these functions can generate a wide range of interesting shapes!

Make sure that all students have completed the shape functions in their contracts pages with both contracts and example code so they have something to refer back to.

Students are very likely to randomly experiment, rather than to actually use the Contracts. You should plan to ask lots of direct questions to make sure students are making this connection, such as:

Divide students into groups of 3-4, and distribute a set of Function Cards to each group. Write down pairs of integers on the board, representing the "starting numbers" and "ending numbers". These integers should range from -50 to +50, but you can change the difficulty of the activity by making that span wider (more difficult) or more narrow (less difficulty). You can find a random integer generator here.

Give students time to experiment with this. You can make the activity more challenging by asking them to find the shortest path from start to end, using the smallest number of compositions.

If two groups come up with different compositions that achieve the same end result, have them share their ideas!

The Circles of Evaluation are extended to provide a visual-spatial metaphor for function composition, in addition to Order of Operations.

Three of the function cards we just used were for the functions f, g and h:

We can compose those function in any order. If we composed them as f(g(h(x))) and evaluated them for x = 4 what would happen?

We can diagram the function composition using Circles of Evaluation (see first column, below). In the second column, we’ve replaced the function names in each Circle of Evaluation with what each function does:

The circles show us that in order to evaluate f(g(h4)))$\displaystyle f(g(h(4))))$

Have students turn to Diagramming Function Composition (Page 25) to practice writing, translating and evaluating Circles of Evaluation of composed functions.

The Circles of Evaluation are extended to functions that do more than compute values.

Have students log into WeScheme open a new program and save it as Function Composition.

Have students open to Function Composition — Green Star (Page 26), in which they will be drawing circles of evaluation to help them write expressions to compose a series of images.

Then have students open to Function Composition — Your Name (Page 27) in which they will create a text image of their name and experiment with other functions.

If you have time, you can also have students work with Function Composition — scale-xy (Page 28) and/or Function Composition Matching Activity (Desmos)

Students identify multiple expressions that will create the same image, and think about the merits of one expression over another.

Students complete More than one way to Compose an Image! (Page 29).

There is a special function in WeScheme that let’s us test whether or not two images are equal.

image=?:: Image, Image -> Boolean

Use it to test whether all of the expressions you wrote successfully build the same images.

This activity introduces the problem with duplicate code, leveraging Mathematical Practice 7 - Identify and Make Use of Structure. Students identify a common structure in a series of expressions, and discover how to bind that expression to a name that can be re-used.

Take a look at the expressions below:

There are lots of potential problems with duplicate code:

Since we’re using that star over and over again, wouldn’t it be nice if we could define a "nickname" for that code, and then use the nickname over and over in place of the expression? And then, if we wanted to change something about all of the stars, we would only have to make the change once, in the definition.

Once we’ve defined x to be the value 4 and clicked "run", anytime we use x, the computer will remember that it is defined as 4. We can use that definition to get an answer. For example, x + 2$\displaystyle x + 2$ will evaluate to 6.

Of course, the whole point of defining a value is so that it sticks around and can be used later! That’s why programmers put their definitions on the left-hand side, known as the Definitions Area.

Now that we know how to define values, we’ve got two more things to consider:

Have students open to Defining Values - Chinese Flag (Page 32). It will direct them to open the Chinese flag Starter File (Wescheme)

once they complete the first half of the questions on the page.

Students learn about the put-image function.

As you’ve already seen, overlay sticks two images together, so that the center of the first image is placed exactly on top of the center of the second image. But what if we want to put the dot somewhere besides the center?

The put-image function works like overlay, but instead of placing the centers of each image on top of one another, it translates the center of the top image by some distance in the x- and y-direction.

Have students open the Flags Starter File , and click Run.

There are some special lines in this file called comments. The programmer who wrote this code included a series of messages - called comments - that will never be read by the computer.

Professional programmers work with teams who need to be able to follow each other’s thinking in order to collaborate efficiently. Comments are a way for programmers to leave notes for one another, and even for a single programmer to keep track of their thinking when they come back to their code another day.

Have students open the Flags of Netherlands, Ireland, Mauritius Starter File , and click Run.

Once you’ve discussed the code for the flag of the Netherlands with your class, have them keep working with this starter file to write code for the flags of Ireland and Mauritius. Some students will make it through the challenges. Some students may only complete one flag. All of them will be synthesizing how to apply put-image and locate images on the coordinate grid.

Could we completely replace overlay with put-image? Why or why not?

Students focus on decomposing complex images into simple ones, and using put-image to combine them.

Let’s dig into the process for how the flags we’ve seen so far were made:

1) Decompose the Image

We observe that the Japanese flag is made up of two simpler images: a black, outline rectangle and a red dot.

2) Define those parts

We define dot and background. Once we’ve defined those images, we test them out in the Interactions Area to make sure they look right!

3) Find the Coordinates

For each image, calculate what the x- and y-coordinates of the center should be. TIP: this is a lot easier if you have a sheet of graph paper handy!

4) Build the Image & Check that it Matches the Target Image

We stack the parts on top of the bottom image using the coordinates we found. TIP: don’t cram all the code into one line! If you break it up into new lines (for example, hitting "Return" before the x-coordinate and after the y-coordinate), you’ll notice that the code forms a "staircase" pattern. Be sure to compare the image you get with the target image!

If you have time, these matching activities will support student thinking.

Which flags were the easiest to make? The hardest?

Why is it useful to define each part of the flag first, before stitching the images together?

This activity is primarily about review and reading comprehension, in which students open a large and unfamiliar file and must make sense of it using what they’ve seen before.

Students should have their workbook, pencil, and be logged into WeScheme and have their completed “Game Design” worksheet.

By now you’ve learned about defining values, composing functions, and reading contracts. Taken together, that’s a lot of code you’re now able to understand! It’s time to flex your reading skills, and look at the file you’ll be working with to build your video game.

This file has code you haven’t seen before! And that’s ok! For now, see what parts you recognize, and make sure you understand them.

With their partner, students should load the Blank Game Starter File (Wescheme).

This activity is all about finding the right images for students' games. Since the internet never has exactly the right image, students' need to get their games just right motivates them to confront the need for dilation, rotation, and reflection of the images they find. This, in turn feeds back into their understanding of Contracts and Function Composition.

Guide the students through finding an image, saving it to their Drive, importing it into their program, and defining the image value as PLAYER. Students will change this image later on their own, this is just for teaching purposes.

In your favorite search engine (we recommend DuckDuckGo), search for an image and then click "Images". Click "All Types" and select "Transparent" (In Google Image Search, it’s under "Color -> Transparent"). This will filter and display images that have a transparent background, appearing as a light white/grey checkerboard pattern behind the character.

Finding Images on GIS, Source: Google Image Search, https://images.google.com 🖼Show image

Once an image has been selected, click it to expand and save the image to Google Drive. For file management, students may want to create a folder to store their game images.

Once the image is saved to Google Drive, it can be brought into the program by using the "Images" button. This will automatically bring in the image using the bitmap-url function, and students can run the code to see the image.

What happens if the image we find needs to be made bigger or smaller? What if it needs to be rotated, or flipped?

Students can define the image as a value and make changes to it with the image manipulation functions scale, rotate, flip-horizontal, and flip-vertical.

Students should:

When finished, students should be able to type SCREENSHOT in the interactions window and see all four of their images appropriately sized and oriented.

Students have already searched for structure in a list of expressions in order to define values.

In this lesson, students will build their flexibiltiy of thinking by engaging with multiple representations. Students will search for structures that are dynamic, meaning they change in a predictable way. This is the foundation for defining functions.

Students should have their workbook, pencil, and be logged into WeScheme on their computer.

I Love Green Triangles 🖼Show image

I Love Green Triangles 🖼Show image

This is a fun lesson to make silly! Dramatically confess to your students, "I LOVE green triangles!" Challenge them to use the Definitions Area to code as many unique, solid, green triangles as they can in 2 minutes.

Walk around the room and give positive feedback on the green triangles. When the time is up, ask for some examples of green triangles that they wrote and copy them to the board. Be specific and attend to precision with the syntax such that students can visually spot the pattern between the different lines of code.

Select a student to act out gt. Make it clear to the class that their Name is "gt", they expect a Number, and they will produce an Image. Act out some examples before having the class add their own and record them on the board:

Thank your volunteer. Assuming they did a wonderful job, ask them:

Have students turn to Matching Examples and Definitions (Math) (Page 40).

You may also want to have students complete Matching Examples & Function Definitions (Desmos)

Now that we’ve seen how this works in math, let’s go back to gt.

400 🖼Show image

500 🖼Show image

You may also want to have students complete Matching Examples & Function Definitions (Desmos).

Have students turn to Matching Examples and Contracts (Page 42).

Confirm that everyone is on the same page before moving on. You may want to have students turn to a partner, compare their findings, and discuss their thinking about anything they didn’t agree on at first.

Have students open the gt starter file (Wescheme).

Have students turn to Contracts, Examples & Definitions (Page 43)

If you have time, have students complete

In this lesson students build on what they already know about multiple representations of functions (contracts, examples and definitions) to write purpose statements and gain fluency with the Design Recipe.

Have students turn to Creating Contracts From Examples (Page 46) and write contracts for the examples provided.