csc 160 computer programming for non-majors lecture #8: animations i prof. adam m. wittenstein...

CSC 160CSC 160Computer Computer

ProgrammingProgrammingfor Non-Majorsfor Non-Majors

Lecture #8: Animations ILecture #8: Animations I

Prof. Adam M. WittensteinProf. Adam M. Wittenstein

[email protected]@adelphi.edu

http://www.adelphi.edu/~wittensa/csc160/http://www.adelphi.edu/~wittensa/csc160/

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?


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?

Review Question 3 on VariablesHere 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.


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.

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.

I. The “world.ss” teachpack againI. The “world.ss” teachpack again

Section 01: Nov. 2, 2006Section 01: Nov. 2, 2006

Section 02: Nov. 2 & 9, 2006Section 02: Nov. 2 & 9, 2006

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.

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.

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.

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.

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

II. Dropping the BallII. Dropping the Ball



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.

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))

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) 20t(empty-scene 50 50)

))

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.

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)

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).

III. Dropping a "Real" Ball: III. Dropping a "Real" Ball:

Giving Constants Names Giving Constants Names

Section 01: Nov. 9 & 14, 2006Section 01: Nov. 9 & 14, 2006


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).


(define (next-view t) (place-image

20 t(empty-scene 50 50)

))


Again, we can now use the predefined

functions for our last three steps:

• (big-bang 50 50 .1 0)



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)

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.

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.

A complete solution 2.1With 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)

A complete solution 2.2With another variable definition

(define SIZE 200)(define WORLD0 (empty-scene SIZE SIZE) )(define (next-model t) (+ t 1))(define (next-view t)

(place-image

20tWORLD0

)) (big-bang SIZE SIZE .1 0) (on-redraw next-view) (on-tick-event next-model)

A complete solution 2.3Different 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 tWORLD0

)) (big-bang WIDTH HEIGHT .1 0) (on-redraw next-view) (on-tick-event next-model)

Exercise

Similar to Solution 1, describe each line of the program in Solution 2.3.

Solution on Blackboard.

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)

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?




• 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?




• 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.

IV. What is a world?IV. What is a world?

Nov. 16, 2006Nov. 16, 2006

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.


; 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


; 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))


;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”


;Purpose: Display the ball in the middle of the

;canvas according to the time.

;Skeleton:

(define (next-view t)

…t…

)

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.


;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 centertWORLD0

))


Again, we can now use the predefined

functions for our last three steps:

• (big-bang WIDTH HEIGHT .1 0)



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)

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.”

V. Summary and PracticeV. Summary and Practice

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”

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.

csc 160 computer programming for non-majors lecture #8: animations i prof. adam m. wittenstein...

Documents

world world

world image

scene slide

placeimage placeimage

image circle

number number true

current world

global variables