1. TeachScheme, ReachJava Adelphi University Monday afternoon July 12, 2010

2. July 12 2010TeachScheme, ReachJava 20102 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

3. July 12 2010TeachScheme, ReachJava 20103 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!

4. July 12 2010TeachScheme, ReachJava 20104 move-right-5 ; move-right-5 : image -> image

5. July 12 2010TeachScheme, ReachJava 20105 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")))

6. July 12 2010TeachScheme, ReachJava 20106 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")))

7. July 12 2010TeachScheme, ReachJava 20107 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")))

8. July 12 2010TeachScheme, ReachJava 20108 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")))

9. July 12 2010TeachScheme, ReachJava 20109 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

10. 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 12 2010TeachScheme, ReachJava 201010

11. Writing draw handlers ; place-on-pink : image -> image July 12 2010TeachScheme, ReachJava 201011

12. Writing draw handlers ; 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 (rectangle 150 200 “solid” “pink”))) July 12 2010TeachScheme, ReachJava 201012

13. Writing draw handlers ; place-on-pink : image -> image (define (place-on-pink current) … ) (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 (rectangle 150 200 “solid” “pink”))) July 12 2010TeachScheme, ReachJava 201013

14. Writing draw handlers ; place-on-pink : image -> image (define (place-on-pink current) ; current 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 (rectangle 150 200 “solid” “pink”))) July 12 2010TeachScheme, ReachJava 201014

15. Writing draw handlers ; place-on-pink : image -> image (define (place-on-pink current) ; current image (place-image current 100 40 (rectangle 150 200 “solid” “pink”))) (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 (rectangle 150 200 “solid” “pink”))) July 12 2010TeachScheme, ReachJava 201015

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

17. July 12 2010TeachScheme, ReachJava 201017 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.

18. 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 12 2010TeachScheme, ReachJava 201018

19. July 12 2010TeachScheme, ReachJava 201019 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.

20. July 12 2010TeachScheme, ReachJava 201020 calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image

21. July 12 2010TeachScheme, ReachJava 201021 calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (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")))

22. July 12 2010TeachScheme, ReachJava 201022 calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (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"))) (define (calendar-at-mouse old-pic x y event) )

23. July 12 2010TeachScheme, ReachJava 201023 calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (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"))) (define (calendar-at-mouse old-pic x y event) ; old-pican image ; xa number ; ya number ; eventwhatever )

24. July 12 2010TeachScheme, ReachJava 201024 calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (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"))) (define (calendar-at-mouse old-pic x y event) ; old-pican image ; xa number ; ya number ; eventwhatever (place-image calendar x y (rectangle 500 300 "solid" "yellow")))

25. July 12 2010TeachScheme, ReachJava 201025 calendar-at-mouse ; calendar-at-mouse : image num(x) num(y) event -> image (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-pican image ; xa number ; ya number ; eventwhatever (place-image calendar x y BACKGROUND))

26. July 12 2010TeachScheme, ReachJava 201026 Running the animation (big-bang calendar (on-draw show-it) (on-mouse calendar-at-mouse))

27. 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 12 2010TeachScheme, ReachJava 201027

28. July 12 2010TeachScheme, ReachJava 201028 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, …

29. July 12 2010TeachScheme, ReachJava 201029 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)

30. July 12 2010TeachScheme, ReachJava 201030 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

31. July 12 2010TeachScheme, ReachJava 201031 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))

32. July 12 2010TeachScheme, ReachJava 201032 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

33. July 12 2010TeachScheme, ReachJava 201033 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.

34. July 12 2010TeachScheme, ReachJava 201034 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!

35. July 12 2010TeachScheme, ReachJava 201035 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)

36. 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 12 2010TeachScheme, ReachJava 201036

37. July 12 2010TeachScheme, ReachJava 201037 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.

38. July 12 2010TeachScheme, ReachJava 201038 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

39. July 12 2010TeachScheme, ReachJava 201039 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))

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

41. July 12 2010TeachScheme, ReachJava 201041 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.

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

43. July 12 2010TeachScheme, ReachJava 201043 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

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

45. July 12 2010TeachScheme, ReachJava 201045 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)

46. July 12 2010TeachScheme, ReachJava 201046 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)

47. Are we done yet? Fill out end-of-day survey at www.adelphi.edu/sbloch/class/tsrj/daily.html Eat Sleep Come back for another day July 12 201047TeachScheme, ReachJava 2010