teachscheme, reachjava adelphi university monday afternoon july 12, 2010

TeachScheme, ReachJava

Adelphi University

Monday afternoon

July 12, 2010

July 12 2010 TeachScheme, ReachJava 2010 2

Animation

(big-bang calendar(on-draw show-it)(on-tick rotate-cw 0.5))

; big-bang : image handler … -> image

At every event (in this case, a clock tick every half second), applies handler to old image to get new image

Currently using “default” draw handler, show-it, which takes old image and displays it in animation window

Try some variations: different images, tick-intervals, "on-tick" handlers


A more complex animation

• Write an animation of an image that moves 5 pixels to the right every second

• We'll need a function that takes in an image and returns the same image 5 pixels to the right

• Follow the design recipe!


move-right-5

; move-right-5 : image -> image


move-right-5


(check-expect (move-right-5 calendar)(beside (rectangle 5 0 "solid" "white") calendar))

(check-expect (move-right-5 (circle 3 "solid" "red"))(beside (rectangle 5 0 "solid" "white") (circle 3 "solid" "red")))


move-right-5


(define (move-right-5 old-pic)

)




move-right-5


(define (move-right-5 old-pic); old-pic an image)




move-right-5


(define (move-right-5 old-pic); old-pic an image(beside (rectangle 5 0 "solid" "white") old-pic))




Running the animation

(big-bang calendar

(on-draw show-it 500 50)

(on-tick move-right-5 1))

; Note window dimensions as optional

; arguments to on-draw

Writing draw handlers

Worked exercise: develop an animation of a calendar that rotates, sitting at (100,40) on a 150x200 pink rectangular background.

Can’t do this using just show-it; need to write our own draw handler.

“current image” will be the calendar in its current orientation, but draw handler will put it in right place on right background.



; place-on-pink : image -> image




(check-expect (place-on-pink calendar)

(place-image calendar 100 40

(rectangle 150 200 “solid” “pink”)))

(check-expect (place-on-pink (rotate-cw schemelogo))

(place-image (rotate-cw schemelogo) 100 40





(define (place-on-pink current)

…

)











; current image

…

)











; current image

(place-image current 100 40










(big-bang calendar

(on-draw place-on-pink)

(on-tick rotate-cw 0.5))



Other kinds of event handlers• tick-handler : image -> image

Specify with on-tick (optional argument for time interval)

• mouse-handler : image number(x) number(y) event -> imageSpecify with on-mouse

• key-handler : image key -> imageSpecify with on-key

• draw-handler : image -> imageSpecify with on-draw (optional args for window dimensions)

• I'm lying: they're actually more general than this.• Note: on-tick, on-mouse, on-key, and on-draw all take in a

function name as their first argument.

Digression for GUI programmers

We’re teaching model/view separation:• The draw handler is the map from model to view• Other event handlers map from old model to new

model.• For now, the model is always an image. (This

changes in a few chapters.)

Non-majors with 3 weeks’ programming experience can do this.



Another animation

Write an animation of a calendar that moves with the mouse on a 500x300 yellow background.

Need a mouse-handling function

Contract must be

; handle-mouse : image num(x) num(y) event -> image

We don't know what an "event" is yet; ignore it.


calendar-at-mouse

; calendar-at-mouse : image num(x) num(y) event -> image


calendar-at-mouse


(check-expect (calendar-at-mouse schemelogo 47 218 "dummy")(place-image calendar 47 218 (rectangle 500 300 "solid" "yellow")))

(check-expect (calendar-at-mouse stick-figure 350 12 "event")(place-image calendar 350 12 (rectangle 500 300 "solid" "yellow")))


calendar-at-mouse




(define (calendar-at-mouse old-pic x y event)

)


calendar-at-mouse




(define (calendar-at-mouse old-pic x y event); old-pic an image; x a number; y a number; event whatever)


calendar-at-mouse




(define (calendar-at-mouse old-pic x y event); old-pic an image; x a number; y a number; event whatever(place-image calendar x y (rectangle 500 300 "solid" "yellow")))


calendar-at-mouse


(define BACKGROUND (rectangle 500 300 "solid" "yellow"))

(check-expect (calendar-at-mouse schemelogo 47 218 "dummy")(place-image calendar 47 218 BACKGROUND))

(check-expect (calendar-at-mouse stick-figure 350 12 "event")(place-image calendar 350 12 BACKGROUND))

(define (calendar-at-mouse old-pic x y event); old-pic an image; x a number; y a number; event whatever(place-image calendar x y BACKGROUND))


Running the animation

(big-bang calendar

(on-draw show-it)

(on-mouse calendar-at-mouse))

Recipe for an animation

1 What handlers will you need?

2 Write their contracts.

3 Develop each one, following the design recipe for functions (including testing!)

4 Test the whole animation, using big-bang.



Numbers

• Remember, my students are numerophobic. We haven't seen an arithmetic operator yet.(Week 4 of a non-major course)

• Arithmetic operators follow the same syntax rule as every other function:(operation argument …)

• The +, -, *, / operations accept 2 or more arguments• Example: 3 + 4*5 + 6 becomes

(+ 3 (* 4 5) 6)• Other built-in functions with obvious names: sqrt, cos,

sin, abs, min, max, …


Examples of arithmetic

• 3+4 becomes (+ 3 4)• 3+(4*5) becomes (+ 3 (* 4 5))• 1+2+3+4+5 becomes (+ 1 2 3 4 5)• 3x-7 becomes (- (* 3 x) 7)

(presumably x is an already-defined variable)• 3*4+5/6 becomes (+ (* 3 4) (/ 5 6))

(but you have to know order of operations to understand the former; the latter is unambiguous)


Exercise

Convert the following from "standard" algebraic notation to Scheme notation:

• 3+cos(0)• 2/(x+1)• (-b+√(b2-4ac))/2a

where a, b, c are variables


Writing functions on numbers

; cube : number -> number

(define (cube num); num a number(* num num num))

(check-expect (cube 0) 0)(check-expect (cube 5) 125)(check-expect (cube -6) -216)(check-expect (cube (/ 2 3)) (/ 8 27))


Kinds of numbers• Try (cube (cube (cube 1234567890)))• Integers behave correctly• Try (+ (/ 2 3) (/ 3 4))• Fractions behave correctly (can choose output in

either fraction or repeating-decimal form)• Abbreviations: -4 = (- 4), 2/3 = (/ 2 3), etc. as long

as there are no spaces


Kinds of numbers• Try (sqrt 2)• Result is marked as inexact, as are results of subsequent

computations using it

• Note (sqr (sqrt 2)) ≠ 2

• (check-expect (sqr (sqrt 2)) 2) will fail!

• (check-within (sqr (sqrt 2)) 2 0.001) passes the test

• Use check-within whenever function result might be inexact.


Exercises

• Define a function f that takes in two numbers x and y and returns 3x-2y

• Define a function discriminant that takes in three numbers a, b, and c and returns

b2 - 4ac

• As usual, follow the design recipe!


Animations revisited

• Previous animations computed the "new image" from the "old image"

• Often makes more sense to compute on something other than an image -- a "model"

• "Model" can be an image or a number (or really any data type you choose)

Recipe for an animation, version 2

1 What handlers will you need?

2 What type will your model be?

3 Write the handlers' contracts.

4 Develop each one, following the design recipe for functions (including testing!)

5 Test the whole animation, using big-bang.



Kinds of event handlers• tick-handler : model -> model

Specify with on-tick (optional argument for clock interval)• mouse-handler : model number(x) number(y) event -> model

Specify with on-mouse• key-handler : model key -> model

Specify with on-key• draw-handler : model -> image

Specify with on-draw (optional arguments for window dimensions)

• big-bang: model handler … -> model

• Note: on-tick, on-mouse, on-key, and on-redraw all take in a function name as an argument.


Animations with numeric models

Write an animation of a blue circle that grows in radius by 1 pixel per half second

Need a tick handler and a redraw handler

Follow the design recipe for both

There happens to already be an add1 function which will work as the tick handler


Growing-circle animation; blue-circle-of-size : number -> image

(check-expect (blue-circle-of-size 0)(circle 0 "solid" "blue"))

(check-expect (blue-circle-of-size 12)(circle 12 "solid" "blue"))

(define (blue-circle-of-size r)(circle r "solid" "blue"))

(big-bang 0 (on-tick add1 1/2) (on-draw blue-circle-of-size))


Exercise: parametric equations

Write an animation that displays a small dot atx coordinate 100+50*cos(t/20) andy coordinate 100+30*sin(t/20)where t is the number of time steps so far.

(Set the tick interval fairly short, e.g. 1/10 second.)

Hint: write helper functions x(t) and y(t).

Play with the formulae and see what different patterns you can get.


Exercise

Write an animation that displays a digital counter, in 18-point blue numerals. It should start at 0 and increase by 1 every second.

Hint: there's a built-in function number->string that converts a number to its decimal representation. Then use text to convert the string to an image.


Discussion break

• How is this different from what you've done in the past?

• How much explaining would it take for your students?


Animations with numeric models

• Can now assign animations in which model is a number

• Examples: radius, x coordinate, or y coordinate, number of sides, …

• Model can increase & decrease in response to ticks, mouse actions, & keyboard actions


Animations with randomness

• (random 8) returns a random integer from 0 through 7

• Use this to write more fun and unpredictable animations


Strings

; string-append : string … -> string; string-length : string -> number; substring : string number [number] -> string; string->number : string -> number; number->string : number -> string

Can now write animations with strings as the model (e.g. adding or chopping characters)


So far we've…• covered the first 5-6 weeks of my non-majors'

programming course

• learned three syntax rules– function call

– variable definition

– function definition

• gotten some practice writing, composing, and re-using functions, following a concrete step-by-step recipe

• learned to write interactive animations with model/view framework and callbacks (will do the same in Java)

Are we done yet?

• Fill out end-of-day survey atwww.adelphi.edu/sbloch/class/tsrj/daily.html

• Eat• Sleep• Come back for another day

July 12 2010 47TeachScheme, ReachJava 2010

teachscheme, reachjava adelphi university monday afternoon july 12, 2010

Documents

image image slide

image image check

image handler image

old image

right place

current image

new image

right background