imageUnit 4

Welcome to the World

Unit Overview


Students return to the Ninja World game, and codewalk through the ’update-world’ and ’draw-world’ functions. Making minimal changes to these functions, they are able to modify the dog’s speed, add static clouds, etc. They then modify the world to include the ruby’s x-coordinate, and systematically update each function in the source code to accommodate this new world. If time allows, additional iterations are possible by adding more sets of coordinates to the World. Students brainstorm their videogames, and derive the structure for their game world.

Product Outcomes:

  • Student will define their World structures

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


    • example: shows the use of a function on specific inputs and the computation the function should perform on those inputs


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

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

    • Editing environment (WeScheme or DrRacket with the bootstrap-teachpack installed)

    • Language Table


    • Seating arrangements: ideally clusters of desks/tables

    • The Ninja World 2 file [NW2.rkt from | WeScheme] preloaded on students’ machines




    + - * / sq sqrt expt


    string-append string-length


    rectangle circle triangle ellipse star text scale rotate put-image


    make-auto auto-model auto-hp auto-rims auto-color auto-value


    make-party party-theme party-location party-guests



    Learning Objectives

      Evidence Statements

        Product Outcomes


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

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

          • Editing environment (WeScheme or DrRacket with the bootstrap-teachpack installed)

          • Language Table


          • Seating arrangements: ideally clusters of desks/tables

          Review (Time 5 minutes)

          • You have had a lot of practice with structs over the past few lessons, so now it’s time for a challenge.

            Turn to Page 19 in your workbook. Fill in the blanks with the information you know about auto, party, and world structs.

            Refresh students’ memories about the Structs they have already seen, in preparation for defining their own.



          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 Racket, which uses events to modify the world.

          Evidence Statements

            Product Outcomes



                Codewalking (Time 20 minutes)

                • Open up Ninja World 2 and click "Run". What happens? Does it do the same thing as in the simulation last unit?

                  Let’s walk through it and figure out what’s wrong. At the top of the screen, you see the ;; DATA section. This is where we define everything we need to keep track of during the animation. As you can see, define-struct is used to define the World structure here.

                  • What is in the world structure?

                  • Take a look at the section labelled ;; STARTING WORLD. What is the name of the first variable defined here?

                  • What kind of thing is it?

                  • How would you get the dogX out of the START world?

                  • As in the last Ninja World, if the dog is moving ten pixels to the right each time, what should the world be in the next frame?

                  • Underneath the START world, define another world called NEXT. What will the value of dogX be in the NEXT world?

                  There are also a number of values for images, defined below, which will be used in the game. What are they images of?

                  Type in their names in the interactions window to find out.

                  World structures will be used to define every changing value within the game world. At the moment, the game contains only one changing thing, the dog’s x-coordinate.

                • Now that we have a world structure, we need to know how to draw it.

                  Scroll down until you see ;; GRAPHICS FUNCTIONS. What is the name of this function? What is the Domain? The Range?

                  As in the last lesson, the draw-world function is using put-image to place the DOG onto the BACKGROUND at some coordinates.

                  What is it using for the dog’s x-coordinate? The dog’s y-coordinate?

                  Think for a moment about how the Ninja World "game" worked in the last lesson. On each "tick" draw-world would take in the current world and extract the dogX before using it to draw dog. But this draw-world function never looks at the current world! If the function isn’t looking at the world it’s taking in, so it has no way to change the position of the dog.

                  • How would you get the dogX out of the world?

                  • Which world is going to be used? (Which world is update-world taking in?)

                  • (world-dogX w)

                  • Now where do you need to put this (world-dogX w)? Which number here represents the x-coordinate of the DANGER on the BACKGROUND?

                  This draw-world function will always draw the dog at (0, 400) on the screen. Even through the world is being updated and passed to draw-world, students should understand that unless the image of the dog is drawn at the UPDATING x-coordinate (dogX), the game will not animate.

                • Suppose you want to add the CLOUD image to the game at the position (500, 400). How could you use put-image to stick them on the BACKGROUND?   image

                  Since this is their first time using put-image themselves, write the code with the kids. They’ll have time to practice on their own later. Point uot the "staircase" pattern that develops when you put images on top of one another. Once they’ve put the image onto the background, have them click "Run" and take a look at that cloud!

                • Now scroll down until you see ;; UPDATING FUNCTIONS. This code is responsible for changing the World.

                  • What does update-world DO to the world?

                  • update-world will make a new world and add 10 to the dogX of that world. How will this make the dog move? Does it go to the right, left, up, down?

                  • If the dog is at 100, where will it be next? After that?

                  • How could you make the dog move faster? Slower? Backwards?

                  • Write two examples for update-world, using the START world and the NEXT world you already defined.

                  Each of these three functions work together to create the game that students see. define-struct world tells the computer what a world contains, draw-world draws the images onto the screen, and update-world changes the world, according to the rules of the game. Point out to students that without all of these functions, the game would not be playable.

                Extending the World


                Learning Objectives

                • Students will modify draw-world to add clouds and a ruby

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

                Evidence Statements

                  Product Outcomes



                        Extending the World (Time 15 minutes)

                        • Let’s make this game more exciting:

                          If you wanted to draw the TARGET into the world, at the coordinates (500, 300), What will you need to modify?

                          If the TARGET isn’t moving, then nothing new will be changing in the game, so we don’t need to change the world structure. The draw-world function will need to change, however, if we want the TARGET to show up in the game.

                          Using put-image, place the TARGET image on top of everything you have already, so that it shows up when you click "Run".


                          This section requires that you walk through and model each one of the changes to the code, with students following along on their own computers. You can write the code on the board or use a projector to show the code, and use cutouts of the dog and ruby to model their behavior.

                        • Now suppose the TARGET is flying across the screen, moving left slowly at 5 pixels each frame. The ruby’s position will be changing, so this time the world DOES need to be modified.

                          • What specifically will be changing about the ruby?

                          • How does the world struct need to change?

                          • What is a good variable name to represent the ruby’s x-coordinate? How about rubyX?

                          • How has the contract for make-world changed? Update it on your contracts sheet

                          • Now that the world structure includes a rubyX, What new function do you now have access to? Write it in your contracts page.

                          ; world-rubyX : world -> Number

                        • Because the world structure is different, we need to go through the code, line-by-line, and change every world we find. Look at the START variable - It uses make-world, which now requires two inputs in it’s Domain.

                          • What should the ruby’s x-coordinate be when the simulation starts? Include this number in the START world.

                          • Now change the definition of NEXT. Don’t forget to think about how the ruby’s x-coordinate will change from the START world to the NEXT world

                          • Do the definitions of the image variable need to change? Why not?

                          • What about draw-world? Does its contract change? The contract says it takes a World as it’s Domain, and it still does. The only thing that has changed is what a world contains. Does draw-world still produce an Image?

                          • What needs to change about the body of draw-world? Right now the ruby is being drawn at the coordinates (500, 300) every time, but we want the position (namely, its x-coordinate) to change. How do you get the rubyX out of the world? Place the image of the TARGET at that x-coordinate.


                        • What about update-world? Does the contract change, now that the world structure is different? Why or why not?

                          Get rid of the function body of update-world completely, because a lot needs to change here. Don’t delete the Contract - we’re not going to change the Domain or Range of the function!

                          Once again, the contract tells you a LOT about how to write the function. Here’s a quick tip: if the range is a World, you know that you’ll have to make a world at some point.

                          How do you make a world?

                          The moment you write make-world, your instincts should kick in right away: Every world contains a dogX and a rubyX, so you can write them down automatically. Now you can ask yourself: What happens to dogX be? In the game, the dog will still be moving to the right by 10 pixels.

                          • How will you update the x-position of the dog? How do you get the dogX out of the world?

                          • How would you add ten to that?

                          • We said we wanted the ruby to move to the left by 5 pixels. How do you get the rubyX out of the world?

                          • If it’s moving to the left, will you add or subtract from the position?

                          • Which world are you pulling the dogX and rubyX out of?

                          • Do the examples for update-world need to change?

                          • Look at the first example: how many things are being passed into make-world? How many should there be? Hint: look at its domain.

                          • The ruby’s x-coordinate needs to be added. Where does it begin, in the START world? If it goes left by 5 pixels, where should it end up in the first example?

                          • Fix the second example in the same way, adding the ruby’s x-coordinate.

                          Every time the world (or any structure) changes, every single instance of make-world (or make-auto, make-party, etc.) will need to change to reflect that. Have students find instance of make-world and incorporating the rubyX into the new world. Any time they add something new to their game they will need to do the same thing, so make sure they understand that every change to the world structure requires careful reading and editing of their world functions.

                        Game Brainstorming


                        Learning Objectives

                          Evidence Statements

                            Product Outcomes



                                  Game Brainstorming (Time 15 minutes)

                                  • You have been working with structures for the last three lessons, and you’ve gotten really good at defining, making and accessing them. Now, you’re going to define the World structure for YOUR GAME!

                                    Suppose I have a racing game, where my player is at the bottom of the screen, sitting in their car. In front of them, I have two lanes, with cars coming at me as I catch up to them. To move out of the way, I need to change into the left or right lane of the road.

                                    • What are all the things I need to keep track of in my game?

                                    • PlayerX - a number

                                    • CarY - a number

                                    • Car2Y (if I want another car) - a number

                                    • Score - a number

                                    • How would I define this world?

                                    • How do I get the playerX out of my word? My CarY? My Car2Y? The score?

                                    • What if I wanted the player’s car to change color as the score goes up? How would my world structure need to change?

                                    • Now think about YOUR game - what will be changing in your world?

                                    Make sure they are collaborating with their partner(s) to brainstorm a game that they will both be happy with. Make sure you force them to think about their world structures, and start simple: Limit their world structure to no more than five things, initially. Pass out some scratch paper. They will need it to brainstorm on

                                  Game Design!


                                  Learning Objectives

                                    Evidence Statements

                                      Product Outcomes

                                      • Student will define their World structures



                                          Game Design! (Time 10 minutes)

                                          • It’s time to start work on your game!

                                            Turn to Page 20 in your workbooks. First, you’re going to draw a rough sketch of what your game should look like when the user clicks "Run".

                                            • Keep your world structure limited to five or fewer things to begin with - you can add more things to make it more complex later on.

                                            • Make a list of all the images you’ll need in your game.

                                            • Make a list of everything that changes in your game - if something moves, will you need to keep track of it’s x-coordinate? y? both?

                                            Many students will want to create ambitious games at first, with many values in their world structure. Make sure they start simple at first: Once they have a simple game working, they can add more elements and features to make it more advanced. Check their work: Does each pair’s world structure correspond to the things that are changing in their game?

                                          Defining the World


                                          Learning Objectives

                                            Evidence Statements

                                              Product Outcomes



                                                    Defining the World (Time 20 minutes)

                                                    • Now that you’ve gotten a list of everything that changes, it’s time to turn them into a World structure.

                                                      Turn to Page 21 in your workbooks, and define your world structure. When you’re done, write down all of the contracts that you need to work with your structures.

                                                      • Define an example world called START, which is how your world should look a split-second after the game begins. Write it in on the bottom of Page 21.

                                                      Review each team’s structure and make sure it accurately models their world. Also be sure to check their contracts, which should include make-world, and functions to access every part of their world structure.



                                                    Learning Objectives

                                                      Evidence Statements

                                                        Product Outcomes



                                                              Closing (Time 5 minutes)

                                                              • Now you have the basic building blocks of your game and an understanding of how draw-world, update-world, and big-bang work together to create an animation in Racket. In the next unit you’ll use your world structure to write the draw-world and update-world functions for your own game.

                                                                Have the class take turns telling their peers about their games: Who the player is, what their danger, target, etc. will be. Most importantly, have them tell the class what they have in their World structure.

                                                                • Make sure student names are on page 20

                                                                • Take page 20 itself, or take photos of page 20, to prep game images for the next unit.

                                                                • Images should be in PNG or GIF format. Background images should be 640x480, and character images should generally be no larger than 200px in either dimension. Make sure that the character images have transparent backgrounds!

                                                                • TIP: use animated GIFs for the characters - not only does the animation make the game look a lot better, but these images usually have transparent backgrounds to begin with.