1. CSC 160 Computer Programming for Non-Majors Lecture #8: Animations I Prof. Adam M. Wittenstein Wittenstein@adelphi.eduhttp://www.adelphi.edu/~wittensa/csc160/

2. Review Question 1 on Variables In the following Scheme program, (define NAME ‘adam) (define (switch n) (sentence (item 2 n) (first n) (butfirst (butfirst n)))) Name all global variables. Name all local variables. What will the example (switch ‘adam) return? What will the example (switch NAME) return?

3. Review Question 2 on Variables Here is a slightly modified version of the program: (define NAME ‘adam) (define (switch NAME) (sentence (item 2 NAME) (first NAME) (butfirst (butfirst NAME)))) Name all global variables. Name all local variables. Now, what will the example (switch ‘adam) return? And, what will the example (switch NAME) return?

4. Review Question 3 on Variables Here is a Scheme program: (define NAME ‘adam) (define (add-question-mark sent) (sentence (butlast sent) (word (last sent) '?))) (define (switch n) (sentence (item 2 n) (first n) (butfirst (butfirst n)))) (define (query sent) (add-question-mark (switch sent))) Name the 2 auxiliary functions. Name the main function. Name all global variables. Name all local variables.

5. Review Question 4 on Variables In the following Scheme program, (define E 2.72) (define (cube E) (* E E E)) (define (sum-of-cubes x y) (+ (cube x) (cube E) ) Name the auxiliary function. Name the main function. Write 3 examples (in Scheme notation) for each of these functions.

6. A preview… We have now learned how to write functions, the basic building blocks of programs. Today, we will see how to use our functions, in conjunction with functions are partner (i.e. the teachpack) wrote to create simple animations.

7. I. The “world.ss” teachpack again Section 01: Nov. 2, 2006 Section 02: Nov. 2 & 9, 2006

8. 1. big-bang big-bang : Number Number Number World -> true (big-bang width height n w) creates and shows a width x height canvas (a.k.a. window), gets the clock ready, makes it tick every n seconds, and makes w the first world. The collection of Worlds may consist of objects of any data type, such as numbers, images, and strings.

9. 2. on-tick-event on-tick-event : (World -> World) -> true (on-tick-event tock) starts the clock according to the values given to big-bang; It also means that DrScheme must call tock on the current world every time the clock ticks; it uses the result as the next world.

10. 3. on-redraw on-redraw : (World -> Image) -> true (on-redraw world->image) means that DrScheme calls world->image whenever the canvas must be redrawn to obtain an image of the current world.

11. 4. empty-scene empty-scene: number number -> true The teachpack provides a predefined function for creating empty scenes. (empty-scene 100 100) creates an empty scene of 100 x 100 pixels.

12. 5. place-image Place-image: image number number scene -> true The teachpack provides a function to place graphical images into scenes. (define SOME-IMAGE (circle 8 ‘solid ‘blue)) (place-image SOME-IMAGE 10 20 (empty-scene 100 100)) places the blue circle 10 pixels from the left and 20 pixels down from the top into this empty scene

13. II. Dropping the Ball Section 01: Nov. 2, 2006 Section 02: Nov. 14, 2006

14. Creating a Moving Circle Design a program that simulates the fall of a ball from the top of the canvas to the bottom. The ball should drop one pixel per clock tick. To construct a ball, use (circle 3 'solid 'red). This program includes the 5 predefined functions, as well as two functions we will now define.

15. Changing our Model of the World The predefined on-tick-event function has one argument, another function. This function must take in one world and return another world. Here is a function to change the position of our ball by one pixel. (define (next-model t) (+ t 1))

16. Changing our View of the World The predefined on-redraw function has one argument, another function. This function takes in a (model of the) world and returns an image representing it. Here is a function to draw a small red disk in the proper location (specified by t, the number of pixels). (define (next-view t) (place-image (circle 3 'solid 'red) 20 t (empty-scene 50 50) ) )

17. Finishing the animation We can now determine: –the model of the world –the view of the world We still need to: –Open a window where we can see the scene. –Set up how to change the model of our world every second. –Set up how to change the view of our world every second.

18. Finishing the Animation We can now use the predefined functions for our last three steps: (big-bang 50 50.1 0) (on-redraw next-view) (on-tick-event next-model)

19. A complete solution 1 (define (next-model t) ;Define a function to keep track of the world (time). (+ t 1)) ;Adding 1 to the time (when the function is called on). (define (next-view t) ;Define a function to put the ball in the right place at ;the right time. (place-image ;Calling a function to place the image in the scene. (circle 3 'solid 'red) ;Calling a function to draw a circle. 20 ;This is the horizontal location of the image’s center. t ;This is the vertical location of the image’s center. (empty-scene 50 50) ;Calling a function to create an empty scene. ) (big-bang 50 50.1 0) ;Calling a function to determine the window’s size, how often ;the model changes, and what the initial model of the world ;will be. (on-redraw next-view) ;Repeatedly changes the view of the world. (on-tick-event next-model) ;Repeatedly changes the time (which is our model of the ;world).

20. III. Dropping a "Real" Ball: Giving Constants Names Section 01: Nov. 9 & 14, 2006 Section 02: Nov. 16, 2006

21. Creating a Moving Ball Same model function: (define (next-model t) (+ t 1)) Replace the small red circle with the image of a ball. Find the image of the ball on the Links tab of the class webpage. Copy the first program and insert the image of the ball in place of (circle 3 'solid 'red).

22. Changing our View of the World (define (next-view t) (place-image 20 t (empty-scene 50 50) )

23. Finishing the Animation Again, we can now use the predefined functions for our last three steps: (big-bang 50 50.1 0) (on-redraw next-view) (on-tick-event next-model)

24. A complete solution 2.0 (define (next-model t) (+ t 1)) (define (next-view t) (place-image 20 t (empty-scene 50 50) ) (big-bang 50 50.1 0) (on-redraw next-view) (on-tick-event next-model)

25. Oops… The ball is too big for the image. We need to create a bigger scene. Change all the 50s to 200s. What if I forget to change one of the 50s? Trying it out in DrScheme, you see it can cause problems.

26. Variable Definitions to the Rescue Define a variable, SIZE, to represent 200. (define SIZE 200) If we did that at the beginning, we would only have to change the 50 to 200 once, in the SIZE definitions, instead of doing it four times.

27. A complete solution 2.1 With a Variable Definition (define SIZE 200) (define (next-model t) (+ t 1)) (define (next-view t) (place-image 20 t (empty-scene SIZE SIZE) ) (big-bang SIZE SIZE.1 0) (on-redraw next-view) (on-tick-event next-model)

28. A complete solution 2.2 With another variable definition (define SIZE 200) (define WORLD0 (empty-scene SIZE SIZE) ) (define (next-model t) (+ t 1)) (define (next-view t) (place-image 20 t WORLD0 ) (big-bang SIZE SIZE.1 0) (on-redraw next-view) (on-tick-event next-model)

29. A complete solution 2.3 Different Width and Height (define WIDTH 200) (define HEIGHT 180) (define WORLD0 (empty-scene WIDTH HEIGHT)) (define (next-model t) (+ t 1)) (define (next-view t) (place-image 20 t WORLD0 ) (big-bang WIDTH HEIGHT.1 0) (on-redraw next-view) (on-tick-event next-model)

30. Exercise Similar to Solution 1, describe each line of the program in Solution 2.3. Solution on Blackboard.

31. Removing line breaks and Including Purpose Statements (define WIDTH 200) (define HEIGHT 180) (define WORLD0 (empty-scene WIDTH HEIGHT)) ;Purpose: To change the world from one time to the next. (define (next-model t) (+ t 1)) ;Purpose: To adjust the ball’s location as time passes. (define (next-view t) (place-image 20 t WORLD0)) (big-bang WIDTH HEIGHT.1 0) (on-redraw next-view) (on-tick-event next-model)

32. Why does the ball go off the screen? The ball has a length and width of 80 pixels. How can you check this, if I did not tell you? Use the predefined functions image-width and image-height. In the next-view function, the 20 is the horizontal location of the center. So if the center is 20, where is the right edge?

33. Why does the ball go off the screen? The ball has a length and width of 80 pixels. How can you check this, if I did not tell you? Use the predefined functions image-width and image-height. In the next-view function, the 20 is the horizontal location of the center. So if the center is 20, where is the right edge? At 20 + (1/2 of 80) = 20 + 40 = 60. Where is the left edge?

34. Why does the ball go off the screen? The ball has a length and width of 80 pixels. How can you check this, if I did not tell you? Use the predefined functions image-width and image-height. In the next-view function, the 20 is the horizontal location of the center. So if the center is 20, where is the right edge? At 20 + (1/2 of 80) = 20 + 40 = 60. Where is the left edge? Off the screen.

35. IV. What is a world? Nov. 16, 2006

36. Changing Speed Modify the previous animation so that the ball drop down the middle of the screen. Also, the world should increased by 2 after every clock tick. Again, the "world" (number) will represent how far the ball has dropped until now.

37. Changing our Model of the World ; Purpose: When the clock ticks, the world ;(number of clock ticks that have happened) ;gets two bigger. ;Contract: ;next-model: number -> number ;OR ;next-model: world -> image ;Examples: ;(next-model 0) “should be” 2 ;(next-model 4) “should be” 6 ;(next-model 12) “should be” 14

38. Changing our Model of the World ; Purpose: When the clock ticks, the world ;(number of clock ticks that have happened) ;gets two bigger. ;Skeleton: ;(define (next-model t) ; …t…) ;Function: (define (next-model t) (+ t 2))

39. Changing our View of the World ;Purpose: ;Display the ball in the middle of the canvas ;according to the time. ;Contract: ;next-view: number -> image ;Example ;(next-view 6) “should be” “the ball at its third ; location”

40. Changing our View of the World ;Purpose: Display the ball in the middle of the ;canvas according to the time. ;Skeleton: (define (next-view t) …t… )

41. How can we make the ball go down the center of the scene? Make the horizontal location the center of the scene, which is 100. Or better yet, since WIDTH = 200, we can write (/ WIDTH 2). This way if we change the size, it will still go down the center of the screen.

42. Changing our View of the World ;Purpose: Display the ball in the middle of the ;canvas according to the time. ;Function: (define (next-view t) (place-image (/ WIDTH 2) ; will drop the ball in the center t WORLD0 )

43. Finishing the Animation Again, we can now use the predefined functions for our last three steps: (big-bang WIDTH HEIGHT.1 0) (on-redraw next-view) (on-tick-event next-model)

44. A Complete Solution 3 (define WIDTH 200) (define HEIGHT 180) (define WORLD0 (empty-scene WIDTH HEIGHT)) ;Purpose: To change the (model of the) world from one time to the next. ;When the clock ticks, the ball has drops two more pixels. (define (next-model t) (+ t 2)) ;Purpose: Display the ball in the middle of the canvas at a time, t. (define (next-view t) (place-image (/ WIDTH 2) t WORLD0)) (big-bang WIDTH HEIGHT.1 0) (on-redraw next-view) (on-tick-event next-model)

45. Explaining the World When writing an animation: You write Purpose Statements for both of the functions you define. You also need to write a statement explaining what the world is, in your particular animation. For example, in Solution 3, a good statement would be: “The World is a number which is represented by how far the ball has dropped.”

46. V. Summary and Practice

47. In summary… To write an animation, -we write a function that keeps track of the “model” of the world. -we write another function that keeps track of the “view” of the world. -we use 3 predefined functions that repeatedly run the 2 functions we wrote -make sure at the top of any animation you write, you include a statement “explaining the world”

48. Coming up… To write more realistic animations, we need to learn more ideas about programming. Starting next class, we will learn about one more simple data type, booleans. Knowing how to work with booleans is essential to writing conditional functions. Once we can write conditional functions, we will be able to add more features to our animations.