Lab 3 Hello World
Purpose: The purpose of this lab is to give you some hands-on experience with designing interactive programs and programs that process structures and itemizations of data.
Textbook references: Chapter 2.5: Programs, Chapter 3: How to Design Programs, Chapter 6: Itemizations and Structures
Goals: Practice defining constants. Create data and structure definitions. Create main functions for world programs. Create and process wishlists of functions.
Chip the Cheap Sheep (60 minutes)
An animation studio is working on a game called "Chip, the Cheap Sheep". They have a basic idea, which is to have a sheep running across the screen. Here are some sheep shapes that their artist has drawn:
Exercise 1 You should be able to drag the images from the webpage into DrRacket, and once they are there you can define them as constants. If not, save them to the desktop, and use "Insert">"Insert Image..." from the DrRacket menu bar. You can also copy and paste the images into DrRacket.
Your goal is to create a simple proof-of-concept game with Chip running from offscreen to the x-coordinate of the point the player clicks on first. Before Chip runs, the screen shows the text
Exercise 2 Draw some still frames from the game. Which aspects remain the same? Which change?
Exercise 3 Gather constant definitions for the properties of the world frames that remain the same. Here are some:
(define WIDTH (* 20 (image-width CHIP1))) (define HEIGHT (* 2 (image-height CHIP1))) (define PLAYGROUND (empty-scene WIDTH HEIGHT)) (define TXT (text "click the mouse to get Chip running" 33 "pink"))
Exercise 4 Develop a structure type definition so that your program can keep track of all the quantities that change between frames.
Hint: In addition to where Chip currently is, your program must know where Chip is going. After all, at the very beginning you have no clue where Chip is supposed to go. Develop a data definition so that you can represent the state of the game. Remember that data definitions come with an interpretation and sample data.
Exercise 5 Develop a wishlist. You know you need a function that renders the current state of the game. What else do you need? Which kind of events make the game transition from one state to another?
Exercise 6 Create a main function to start your world program. Use your answer to the previous exercise to determine which event handlers you need. Here is a sketch:
; chip : PositiveNumber -> ... class of data that big-bang manages ... ; Given the animation rate, play a game of Chip the cheap sheep ; NOTE: by supplying the animation rate you can slow down the game (define (chip rate) (big-bang initial-world (to-draw ... what name did you choose? ... rate) ; add your event handlers here))
Exercise 7 Develop a template for functions that work on the state of the Chip game.
Exercise 8 Design the function pick-chip. It takes a number between 0 and 3 and returns the corresponding image of Chip from the sequence above.
Exercise 9 Design the rendering function.
Exercise 10 Design the clock tick event handler. The function takes a world and returns a world where Chip is moved to the left, toward his goal. The image of chip should also change.
Hint: Check out modulo and/or remainder
Exercise 11 Design the mouse click handler. The function that takes a world, x and y coordinates, and a mouse event and returns a new world. The new world will have the mouse’s coordinates as Chip’s new destination and Chip teleported from offscreen to a location close to the right edge. Remember that mouse events are just strings. Be sure to ignore all mouse events except "button-down".
Exercise 12 Design a function that determines whether Chip is close to his destination. We let you choose what "close" means. Then equip the chip function from above with a stop-when clause.
Shrinking Balloons (40 minutes)
Goals: Practice defining constants. Create data and structure definitions. Create main functions for world programs. Create and process wishlists of functions.
Sample Problem Create a table of what changes in the balloon game (functions) and what stays the same (constants).
Constants (what stays the same)
Functions (what changes)
The size of the screen
The time
The color of the circle
The size of the circle
Sample Problem Add appropriate constant definitions to your definitions area.
(require 2htdp/image) (require 2htdp/universe) (define WIDTH 500) (define HEIGHT WIDTH) (define BACKGROUND (empty-scene WIDTH HEIGHT))
Sample Problem Define a structure type for the world and then develop a data definition. Recall that initially the world is a size 50 red circle. While you’re at it, define a constant initial world and some intermediate world which is not quite as big.
; A ShrinkingWorld (SW) is a (make-shrinking Number Number) (define-struct shrinking (size time)) ; - where size is the size of the circle ; - and time is the running time of the world (define initial-world (make-shrinking 50 0)) (define intermediate-world (make-shrinking 70 10))
Sample Problem Add the rendering function to your wishlist:
; draw-world : SW -> Image ; Draws a red circle whose size depends on the world (define (draw-world world) BACKGROUND) ; TODO: finish function
Sample Problem Create the remainder of your wishlist.
; shrink-world : SW -> SW ; Creates a new SW in which time has been incremented by 1 ; and the size has decreased (define (shrink-world an-sw) an-sw) ; TODO: finish function ; grow-world : SW Number Number MouseEvent -> SW ; Creates a new SW in which the size is slightly larger if the left ; mouse button has been pressed (define (grow-world an-sw) an-sw) ; TODO: finish function ; stop-sw? : SW -> Boolean ; Is the circle too small to shrink any more? (define (stop-sw? an-sw) false) ; TODO: finish function
Sample Problem Define the main function, which “composes” the handlers and the rendering functions.
; main : SW -> SW ; Run the game with this initial world (define (main world0) (big-bang world0 (to-draw draw-world) (on-tick shrink-world) (on-mouse grow-world)))
Exercise 13 Define 3 numeric constants, SHRINK-TIME0, SHRINK-TIME1, and SHRINK-TIME2 such that (< SHRINK-TIME0 SHRINK-TIME1 SHRINK-TIME2). These constants represent times in the game and shrink-world uses these times to determine how quickly to shrink the world. As the time increases, the balloon should shrink faster.
Exercise 14 Design the function shrink-world, which takes an SW. It increments the world’s time and shrinks the world’s size depending on how the world’s time compares with SHRINK-TIME0, SHRINK-TIME1, and SHRINK-TIME2.
Hint: That’s two distinct tasks. You may choose by how much the world should shrink in each interval.
Exercise 15 Design the function grow-world, which takes an SW, an x coordinate, a y coordinate, and a MouseEvent. If the mouse button has been pressed, then the returned SW should have a slightly larger size than the give one. You may choose by how much the world’s circle should grow. Remember that mouse events are special strings. Be sure to ignore all mouse events except "button-down".
Note: This function takes in more data than necessary to complete its task of increasing the size of the circle. Why is this?
Exercise 16 Modify the game to change the color of the circle to blue if the size is greater than the original size, yellow if the size is exactly the same, and red if the size is smaller than the original size.
Note: Once you figure out what data you need to keep track of, be sure to update your data definitions (and tests and examples) accordingly. Note that while the initial size of the world does not change, every time the main function is run it potentially changes. Thus, at least for now, if a function on the wishlist is dependent on data passed into the main function, it needs to be a part of the world state whether or not it changes.
Before You Go...
If you had trouble finishing any of the exercises in the lab or homework, or just feel like you’re struggling with any of the class material, please feel free to come to office hours and talk to a TA or tutor for additional assistance.