TeachScheme, ReachJava Adelphi University Monday afternoon July 12, 2010

July TeachScheme, ReachJava 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

July TeachScheme, ReachJava 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!

July TeachScheme, ReachJava move-right-5 ; move-right-5 : image -> image

July TeachScheme, ReachJava move-right-5 ; move-right-5 : image -> image (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")))

July TeachScheme, ReachJava move-right-5 ; move-right-5 : image -> image (define (move-right-5 old-pic) ) (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")))

July TeachScheme, ReachJava move-right-5 ; move-right-5 : image -> image (define (move-right-5 old-pic) ; old-pican image ) (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")))

July TeachScheme, ReachJava move-right-5 ; move-right-5 : image -> image (define (move-right-5 old-pic) ; old-pican image (beside (rectangle 5 0 "solid" "white") old-pic)) (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")))

July TeachScheme, ReachJava Running the animation (big-bang calendar (on-draw show-it ) (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. July TeachScheme, ReachJava

Writing draw handlers ; place-on-pink : image -> image July TeachScheme, ReachJava

Writing draw handlers ; place-on-pink : image -> image (check-expect (place-on-pink calendar) (place-image calendar (rectangle “solid” “pink”))) (check-expect (place-on-pink (rotate-cw schemelogo)) (place-image (rotate-cw schemelogo) (rectangle “solid” “pink”))) July TeachScheme, ReachJava

Writing draw handlers ; place-on-pink : image -> image (define (place-on-pink current) … ) (check-expect (place-on-pink calendar) (place-image calendar (rectangle “solid” “pink”))) (check-expect (place-on-pink (rotate-cw schemelogo)) (place-image (rotate-cw schemelogo) (rectangle “solid” “pink”))) July TeachScheme, ReachJava

Writing draw handlers ; place-on-pink : image -> image (define (place-on-pink current) ; current image … ) (check-expect (place-on-pink calendar) (place-image calendar (rectangle “solid” “pink”))) (check-expect (place-on-pink (rotate-cw schemelogo)) (place-image (rotate-cw schemelogo) (rectangle “solid” “pink”))) July TeachScheme, ReachJava

Writing draw handlers ; place-on-pink : image -> image (define (place-on-pink current) ; current image (place-image current (rectangle “solid” “pink”))) (check-expect (place-on-pink calendar) (place-image calendar (rectangle “solid” “pink”))) (check-expect (place-on-pink (rotate-cw schemelogo)) (place-image (rotate-cw schemelogo) (rectangle “solid” “pink”))) July TeachScheme, ReachJava

Writing draw handlers (big-bang calendar (on-draw place-on-pink) (on-tick rotate-cw 0.5)) July TeachScheme, ReachJava

July TeachScheme, ReachJava 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 -> image Specify with on-mouse key-handler : image key -> image Specify with on-key draw-handler : image -> image Specify 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. July TeachScheme, ReachJava

July TeachScheme, ReachJava 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.

July TeachScheme, ReachJava calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image

July TeachScheme, ReachJava calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (check-expect (calendar-at-mouse schemelogo "dummy") (place-image calendar (rectangle "solid" "yellow"))) (check-expect (calendar-at-mouse stick-figure "event") (place-image calendar (rectangle "solid" "yellow")))

July TeachScheme, ReachJava calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (check-expect (calendar-at-mouse schemelogo "dummy") (place-image calendar (rectangle "solid" "yellow"))) (check-expect (calendar-at-mouse stick-figure "event") (place-image calendar (rectangle "solid" "yellow"))) (define (calendar-at-mouse old-pic x y event) )

July TeachScheme, ReachJava calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (check-expect (calendar-at-mouse schemelogo "dummy") (place-image calendar (rectangle "solid" "yellow"))) (check-expect (calendar-at-mouse stick-figure "event") (place-image calendar (rectangle "solid" "yellow"))) (define (calendar-at-mouse old-pic x y event) ; old-pican image ; xa number ; ya number ; eventwhatever )

July TeachScheme, ReachJava calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (check-expect (calendar-at-mouse schemelogo "dummy") (place-image calendar (rectangle "solid" "yellow"))) (check-expect (calendar-at-mouse stick-figure "event") (place-image calendar (rectangle "solid" "yellow"))) (define (calendar-at-mouse old-pic x y event) ; old-pican image ; xa number ; ya number ; eventwhatever (place-image calendar x y (rectangle "solid" "yellow")))

July TeachScheme, ReachJava calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (define BACKGROUND (rectangle "solid" "yellow")) (check-expect (calendar-at-mouse schemelogo "dummy") (place-image calendar BACKGROUND)) (check-expect (calendar-at-mouse stick-figure "event") (place-image calendar BACKGROUND)) (define (calendar-at-mouse old-pic x y event) ; old-pican image ; xa number ; ya number ; eventwhatever (place-image calendar x y BACKGROUND))

July TeachScheme, ReachJava Running the animation (big-bang calendar (on-draw show-it) (on-mouse calendar-at-mouse))

Recipe for an animation 1What handlers will you need? 2Write their contracts. 3Develop each one, following the design recipe for functions (including testing!) 4Test the whole animation, using big- bang. July TeachScheme, ReachJava

July TeachScheme, ReachJava 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, …

July TeachScheme, ReachJava Examples of arithmetic 3+4 becomes (+ 3 4) 3+(4*5) becomes (+ 3 (* 4 5)) becomes ( ) 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)

July TeachScheme, ReachJava Exercise Convert the following from "standard" algebraic notation to Scheme notation: 3+cos(0) 2/(x+1) (-b+√(b 2 -4ac))/2a where a, b, c are variables

July TeachScheme, ReachJava 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))

July TeachScheme, ReachJava Kinds of numbers Try (cube (cube (cube ))) 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

July TeachScheme, ReachJava 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)) ) passes the test Use check-within whenever function result might be inexact.

July TeachScheme, ReachJava 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 b 2 - 4ac As usual, follow the design recipe!

July TeachScheme, ReachJava 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 1What handlers will you need? 2What type will your model be? 3Write the handlers' contracts. 4Develop each one, following the design recipe for functions (including testing!) 5Test the whole animation, using big- bang. July TeachScheme, ReachJava

July TeachScheme, ReachJava 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.

July TeachScheme, ReachJava 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

July TeachScheme, ReachJava 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))

July TeachScheme, ReachJava Exercise: parametric equations Write an animation that displays a small dot at x coordinate *cos(t/20) and y coordinate *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.

July TeachScheme, ReachJava 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.

July TeachScheme, ReachJava Discussion break How is this different from what you've done in the past? How much explaining would it take for your students?

July TeachScheme, ReachJava 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

July TeachScheme, ReachJava Animations with randomness (random 8) returns a random integer from 0 through 7 Use this to write more fun and unpredictable animations

July TeachScheme, ReachJava 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)

July TeachScheme, ReachJava 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 at Eat Sleep Come back for another day July TeachScheme, ReachJava 2010