Unit 4:   Welcome to the World

imageUnit 4Welcome to the World
Unit Overview

Students are introduced to event-based programming using big-bang, and codewalk through the next-world and draw-world functions. They then modify these functions and experiment with the results, eventually leading to a point where they discover the need for structures.

Product Outcomes:
  • Students practice altering and adding fields to the Cake data structure

  • Students will act out the event-based programming model, beginning with a simple world containing just one number

  • Students codewalk through a simple version of the Ninja Cat game, creating a new World data structure and adding animation

Standards and Evidence Statements:

Standards with prefix BS are specific to Bootstrap; others are from the Common Core. Mouse over each standard to see its corresponding evidence statements. Our Standards Document shows which units cover each standard.

    Length: 90 minutes
    Glossary:
    • constructor function: The function that creates a particular data structure

    • dot-accessors: A way to extract values from a data structure

    • event-based programming: a style of programming in which every functions are written to respond to mouse-clicks, keypresses, etc.

    • events: something that happens outside of a running program, which the program can respond to

    • instances: Specific values of data

    • type: refers to a general kind of data, like Number, String, Image, or Boolean

    Materials:
    • Pens/pencils for the students, fresh whiteboard markers for teachers

    • Class poster (List of rules, design recipe, course calendar)

    • Editing environment (Pyret Editor)

    • Language Table

    Preparation:
    • The Bakery file used in the previous unit, preloaded on students’ machines

    • Seating arrangements: ideally clusters of desks/tables

    • The Intro to Big-Bang file preloaded on students’ machines

    • next-world, big-bang, and draw-world nametags

    • cutout image of dog

    Types

    Functions

    Number

    + - * / num-sqr num-sqrt num-expt

    String

    string-append string-length

    Image

    rectangle circle triangle ellipse star text scale rotate put-image

    Cake

    cake .flavor .color .message .layers .is-iceCream

    Party

    party .theme .location .guests


    Review: Your Bakery

    Overview

    Learning Objectives

      Evidence Statements

        Product Outcomes

        • Students practice altering and adding fields to the Cake data structure

        Materials

        • Pens/pencils for the students, fresh whiteboard markers for teachers

        • Class poster (List of rules, design recipe, course calendar)

        • Editing environment (Pyret Editor)

        • Language Table

        Preparation

        • The Bakery file used in the previous unit, preloaded on students’ machines

        • Seating arrangements: ideally clusters of desks/tables

        Review: Your Bakery (Time 10 minutes)

        • In our previous lesson, we worked on the Cake structure. Cakes have a flavor, a color, a message, number of layers, and an indicator of whether or not it’s an ice cream cake.

          What datatype do we use for each of these fields?

          What if we realize later, after defining our Cake struct, that it would be helpful to include more information about each cake, like a frosting color? Thankfully, working in Pyret, it’s easy to change our data definition so a Cake can include this as well.
          • How would you change the data definition to include this new information about cakes?

          • What new argument does the cake constructor need to take in? What kind of data is this?

          • Change your Cake definition so it includes this new information.

          Important! When you change any data structure, all instances of that structure will need to change as well. Right now our definitions for cake1, cake2, and cake3 are creating cakes with only four inputs — we need to add the information about the frosting color!

          Change the definitions of cake1, cake2, cake3 and the other cakes you defined so they reflect the new Cake struct.

        The Hollywood Principle

        Overview

        Learning Objectives

        • Deepen their understanding of structures, constructors and accessors by being introduced to a third data structure.

        • Discover the event-based microworld implementation of Pyret, which uses events to modify the World.

        Evidence Statements

          Product Outcomes

          • Students will act out the event-based programming model, beginning with a simple world containing just one number

          Materials

            Preparation

            • The Intro to Big-Bang file preloaded on students’ machines

            • next-world, big-bang, and draw-world nametags

            • cutout image of dog

            The Hollywood Principle (Time 30 minutes)

            • Now let’s talk about animation. We’ll start off with a really simple example that only uses Numbers, and gradually build up to using Data Structures.

              Open the Intro to Big-Bang program and read the code with your partner. Can you answer the questions below? image

              • Lines 7-19 define several values. What are their names?

              • Are these values Numbers, Strings or Images?

              • There are two functions defined farther down in the file. What are their names?

              • Scroll down to where the code says "GRAPHICS FUNCTIONS" (line 22).

              • What is the name of the function defined in this section?

              • What is the Domain of this function? The Range?

              • According to the purpose statement, what does this function do?

              Every time draw-world runs, it gives back an image of the Dog, sitting on the Background at a certain location. Now look at the body of draw-world. It’s using a function you might remember, called put-image, which takes in an image, and then places it on top of another image, using the x- and y-coordinates to determine where to put it. In this example, it is placing the DOG onto the BACKGROUND. Notice that it’s using the number 400 for the dog’s y-coordinate, and the variable current-world as dog’s x-coordinate. As the value of current-world changes, the dog will appear to move across the screen. The dog will appear to move to the right if this value gets larger, or to the left if it gets smaller.

              image

              • Scroll down to where the code says "UPDATING FUNCTIONS" (line 32).

              • What is the name of the function defined in this section?

              • What is the Domain of this function? The Range?

              • According to the purpose statement, what does this function do?

              • Will this function’s output be larger than its input, or smaller?

              Every time next-world runs, it gives back a new number that is 10 larger than the number it was given.

              These activities encourage students to read others’ code and think about how it works, looking at the contracts and definitions and piecing together what they already know. Ask a LOT of questions when going through the file: Why is dogX a good variable name? What will draw-world(10) produce? draw-world(NumberA)? What about update-world(1000)? update-world(NumberB)?

            • draw-world doesn’t know what the next world should be, and next-world has no idea how a world should be drawn. They’ll have to work together - in just the right way - to make sure the animation is smooth. Let’s act this out in the real world to see what’s going on.

              This activity will need two volunteers, a print-out of the dog and some pieces of paper. The wall will represent our game screen, with (0,0) being at the bottom left-hand corner of the wall. One volunteer will be draw-world. Their job is to put images onto the wall, at the appropriate location. When handed a current-world (a number, written on a piece of paper), they will stick the dog on the wall at the location (current-world, 400). next-world has a different job: when they recieve a current-world, they will write a new world (on another piece of paper) that is 10 larger than the one they were given.

              This activity needs to be very carefully explained, so it’s worth practicing giving instructions before you try it in the classroom. First, be sure to designate a part of the wall to be the "background", and be sure to label the coordinates of the corners. Second, it’s helpful to create simple signs or nametags for your student volunteers, to designate which one is draw-world and which is next-world. Hand out slips of paper to the class and let them create different "worlds", and let them take turns handing each of these "worlds" to your volunteers. Don’t move on until you’re confident that the class understands what each function does, separately.

            • At this point, we have all the workers needed to make a simple animation:

              • BACKGROUND-IMG, DOG-IMG, etc. are all Image values that we can use for our animation.

              • draw-world is a function that will draw a single frame of our animation, using a single number as input.

              • next-world is a function thay will take the current world as input, and figure out what the next world should be.

              • We also know that time is passing, and every second or so we’d like to see the next frame in our animation.

              What we’re missing is a way to pull all of these workers together, so that they work in concert to create our animation.

              OPTIONAL: Can your students brainstorm a pattern for each function to be called over time, in order to make the dog move across the wall?

            • In film-making, there’s a saying: "Don’t call us, we’ll call you." Having next-world and draw-world fighting with one other is just going to cause chaos - we need a director, who will let each one know when it’s time to do their job. In programming, this is called the "Hollywood Principle," and it is exactly how we’re going to make the animation work in our programs. The director is called big-bang, and its job is to call each function when it’s time for something to happen. big-bang needs a world to begin, so the very first thing we do is pass a starting world to big-bang. If that’s all we do, then the world will never change over time.

              Dramatically reveal the "big-bang" sign or nametag. Have a student volunteer to be big-bang, and start out by randomly-selecting a student to hand big-bang their "world". TIP: snap your fingers every 5 seconds, to demonstrate the passage of time. Students should see that the world doesn’t change, no matter how much time has passed. Repeat for different students, so the class sees that the world can be any starting value.

            • The first thing we need to do is have big-bang call next-world every few seconds, passing the current world to that function and then holding whatever is returned. Now, every five seconds, big-bang will pass the world they are are holding over to next-world. next-world will produce a new piece of paper with the new value, and hand it back to big-bang. The process repeats on and on and on...

              Have your students model this for the class, and encourage the whole classroom to say "tick" every 5 seconds.

            • Now we can see the world changing, but we haven’t used it to draw each frame yet. When should big-bang call draw-world? Every time a new world is produced, big-bang will hand it over to draw-world, which will use it to place the dog on the background.

              Have students act this out.

            • On your computers, scroll down to line 42, which include some comments and an example of using big-bang. According to this code, what starting world is big-bang taking in? Try clicking "Run", to see what happens. Just as in our role-play, big-bang will happily display the current world forever, even as time passes. Try passing in different values besides numberA and see what happens. What we need to do is tell big-bang which events to listen to, and which functions to call when those events occur.

              image Uncomment line 49 by remove the # mark from the beginning of the line. Now big-bang will call next-world with the current world every time there is a "tick" event.

              • What do you think will happen when you click "Run"?

              • Try it out - did you see what you expected?

              • What will happen if you use a different starting value for the world?

              • What will happen if you change next-world so that it subtracts 10, instead of adding?

              Now try uncommenting line 50. This will tell big-bang who to call when it’s time to draw the world.

              • What do you think will happen when you click "Run"?

              • Try it out - did you see what you expected?

              • What will happen if you use a different starting value for the world?

              • What will happen if you change draw-world so that it draws the COIN-IMG instead of the DOG-IMG?

              • What will happen if you change draw-world so that uses the current-world as the y-coordinate, rather than the x-coordinate?

              Let students experiment here, challenging them to come up with the coolest next-world and draw-world functions.

            • big-bang and The Hollywood Principle are all part of a programming paradigm used all over the world, called Event-Based Programming. In Event-Based Programming, your program is just a chunk of data - called a "World" - which is changed whenever certain events fire. So far, the only events you know about are things like tick-events and draw-events, but you can imagine building other functions to handle key-events or mouse-events in your game. However, the world that we’re using here is just a single Number. What if we wanted to have both the Dog and the Coin in our animation, moving at different speeds? We’d need a way for the world to be two numbers. To pull this off, we’ll need to combine Event-Based Programming with another concept we’ve learned...

              Solicit student guesses for how to do this, reminding them of the last time they were confronted with this problem - during the Parachute Jumper exercise. The solution here is the same as it was there: Data Structures to the rescue!

            Extending the World

            Overview

            Learning Objectives

            • Students will create a data structure for their animation

            • Students will modify draw-world to add the coin, clouds and Ninja Cat.

            • Students will iteratively expand the World structure, and trace these changes throughout their program

            Evidence Statements

              Product Outcomes

              • Students codewalk through a simple version of the Ninja Cat game, creating a new World data structure and adding animation

              Materials

                Preparation

                  Extending the World (Time 45 minutes)

                  • If we want the Dog and the Coin to be moving independently, we’ll need a Word that is more than just one number. Specifically, we’d like to be able to track the Dog’s x-coordinate and the Coin’s x-coordinates seperately. We need to make a data structure that will contain both a dogX and a coinX. Let’s add a data: block to the top of the file, declaring a World to contain both a dogX and a coinX. We’ll also make two sample Worlds, just for practice:  

                    Type this into your programs, and answer the following questions:

                    • What is the name of the type that is created by this data block?

                    • What is the constructor function that makes a World?

                    • How many inputs does the constructor take, and what are their types?

                    • What type of data is worldA?

                    • How would you get the dogX out of worldA?

                    • How would you get the coinX out of worldB?

                    • Define two new worlds, worldC and worldD.

                  • Now we need to modify the rest of our code so that is uses Worlds instead of Numbers. Let’s start with draw-world. Before adding the coin, let’s first make sure the dog still moves now that we’re using a structure for our World.
                    • Will the name of this function have to change? What about the Domain? The Range?

                    • How will the purpose statement have to change?

                    • Before, the body of function used current-world as the Dog’s x-coordinate. Now current-world is a World. How do we get the dogX out of that world?

                    • Fix the code so that current-world.dogX is used to display the dog.

                    Remind students that this is just about making the Dog move - the Coin will come later!

                  • Now let’s look at next-world. It’s written to consume Numbers and produce Numbers, but now we need to change it to use Worlds instead.
                    • Will the name of this function have to change? What about the Domain? The Range?

                    • How will the purpose statement have to change?

                    • The Range says we need to produce a new World. What function makes Worlds?

                    • Use the world constructor to produce a new World, where the dog’s x-coordinate is 10 pixels to the right and the coin’s x-coordinate is 5 pixels to the left:

                     

                    This is a great opportunity to have students practice their vocabulary for working with structures. The revised next-world functions uses a constructor function and two dot-accessors.

                  • Finally, we need to change big-bang to use our new world structure.
                    • Does the initial value given to big-bang need to change? If so, why?

                    • Are we still calling next-world on tick-events?

                    • Are we still calling draw-world on draw-events?

                    • Make the changes you think are necessary, and click "Run". If everything checks out, you should see your original animation, now using the new World structure.

                    • What happens if you change the starting World given to big-bang? Try using worldA, worldB, etc. and see what happens!

                  • image Now it’s time to add other images to our animation. Putting the Coin aside for a moment, let’s try adding the Cloud for practice.

                    How could you use put-image to place CLOUD-IMG onto the BACKGROUND-IMG at position (500, 400)?

                      Now try adding the COIN-IMG, this time at (250, 300).

                    Since this is their first time using put-image themselves, write the code to add the CLOUD-IMG with the kids. They’ll have time to practice on their own once they add the COIN-IMG. This is a good time to offer some tidbits about "beautiful" code: point out the "staircase" pattern that develops when you put images on top of one another. Challenge strong students to also add the Cat.

                  • Now you’ve got the Cloud and the Coin sitting on screen, while the Dog moves to the right. But we also want to see that Coin moving as well, so our work isn’t finished! Remember, the current-world now includes both a dogX and a coinX - we just need to use the coinX to figure out where to put that image!

                    Modify the code for draw-world so that the COIN-IMG is placed using the coinX from current-world. When you click "Run", you should see the dog move to the right and the coin move to the left! What will happen if you change the initial World that is given to big-bang?

                    For strong students, challenge them to modify the World structure to also contain a cloudX, and modify the rest of the code so that the clouds move on their own.

                  • Suppose you wanted to add the Cat’s x-coordinate to this animation, so it could move to the right. What would you have to change about the World structure? What about the draw-world and next-world functions? Suppose you also wanted to have the Cat move up and down - what would you change then?

                  • Modify the World structure to include the cat’s x- and y-coordinate, then change draw-world to place the cat into the image. (Note: since the cat will eventually respond to keypresses, and not move on it’s own, it will just sit still for now.)

                    next-world is responsible for everything in our game that changes on its own, in response to time just naturally passing by. We want the cat to move in response to a key being pressed, which is just another kind of event. In the next lesson, you’ll learn how to add a new function that will build Worlds in response to keypresses!

                  Closing

                  Overview

                  Learning Objectives

                    Evidence Statements

                      Product Outcomes

                        Materials

                          Preparation

                            Closing (Time 5 minutes)

                            • Now you have the basic building blocks of a simple Ninja Cat game and an understanding of how draw-world, next-world, and big-bang work together to create an animation in Pyret. In the next unit you’ll include another event-handler to make the cat respond to key presses.