CS 1101: Lab 1

Lab Motivation and Goals

By the end of this lab, you should be able to:

Get Credit for this Lab


Exercises: Getting to Know DrRacket

Everybody should be able to finish up to this point during lab. Do as many of the remaining exercises as you can before you leave lab today. Finish all exercises that you don't finish during the lab on your own time (we won't always ask you to do this, but this last set of problems introduces you to writing animation programs in DrRacket... we'll continue this animation exercise in Lab 2.)

Exercises: Introduction to animation in DrRacket

    Moving a ball

  1. In order to use the animation features of DrRacket, you need to use the library functions from a library called universe. Add these lines to the beginning of your definitions file:

    (require 2htdp/universe)
    (require 2htdp/image)
    

    The essence of a soccer game is a ball on a field. For the ball, download the following image to your computer and import it into your file using the "Insert image" option under the "Insert" menu.

    [image of ball] (from www.hscripts.com)

    Use define to create a constant name for this image.

  2. Using the following expression as a template, experiment in the Interactions window with several expressions that place a ball into an empty animation scene (creating a new scene). The numbers 300 and 200 represent the width and height of the window that will be drawn. You should replace the terms in italics with appropriate expressions.

    (place-image ball-image x-position y-position (empty-scene 300 200))

  3. Write a function place-ball-x that consumes a number representing the x-coordinate of the soccer ball and produces a scene with the ball drawn at that x-coordinate and some fixed y-coordinate (create a constant for the y-coordinate and choose your own value for it).

  4. Write a function update-ball-x that consumes a number representing an x-coordinate and produces a new x-coordinate (the new x-coordinate will be the desired position of the ball in the next frame of the animation). Moving the coordinate by a small number (3 or 4) works well.

  5. You are now ready to create your first animation. Place the following lines in your Definition window:

    (big-bang 0
              (on-tick update-ball-x)
              (to-draw place-ball-x))
    
    (The 0 represents the starting x-coordinate of the ball. On every "tick" of the animation clock, your update-ball-x will execute, changing the x-coordinate of the ball. Your place-ball-x function will then draw the ball at the new coordinate.) When you hit run, you should see the ball move across the screen.

    Stopping the Game

    Right now, the animation keeps running after the image of the ball has moved off the screen. We want to stop the animation when the ball reaches the right edge of the screen.
  6. Write a function at-right-edge? that consumes an x-coordinate and determines whether the right edge of the ball is touching (or beyond) the right edge of the screen. Introducing a constant for the screen width (and updating old uses of this value) would be a good idea at this point.

    Add the line

    (stop-when at-right-edge?) 
    
    to the commands that run the animation. When you hit run, the ball should stop moving when it reaches the right edge of the screen (indicating that the animation has stopped).

    Responding to keystrokes

    Now we need to learn how to animate characters who move according to user input. Remove from your Definitions window the commands that run the animation. Download and insert the following goalie image (as you did previously for the ball).

    [image of goalie] (from www.fotosearch.com)

  7. Write a function place-goalie-y that consumes a y-coordinate and produces a scene with the goalie drawn at that y-coordinate and some fixed x-coordinate (create a constant for the x-coordinate and choose your own value for it).

  8. Write a function goalie-react that consumes the goalie's current y-coordinate and a string (which represents which key was pressed by the user) and produces a new y-coordinate for the goalie. If the given key value is "up" subtract 3 from the current y-coordinate. If it is "down", add 3 to the current y-coordinate. Otherwise, produce the same coordinate. Use the built-in function key=? to compare the input symbol to the possible key values.

  9. You are now ready to create your second animation. Place the following lines in your Definitions window:

          (big-bang 120
                    (on-key goalie-react)
                    (to-draw place-goalie-y))
    
    The 120 represents the starting y-coordinate of the goalie. When you hit run, you should see the goalie move when the user presses the up and down arrow keys.

    Next week, we'll combine the ball and goalie animations into one program.