1 / 47

TeachScheme, ReachJava

TeachScheme, ReachJava. Adelphi University Monday afternoon July 12, 2010. Animation. (big-bang calendar (on-draw show-it) (on-tick rotate-cw 0.5)) ; big-bang : image handler … -> image

uriah-reilly
Download Presentation

TeachScheme, ReachJava

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TeachScheme, ReachJava Adelphi University Monday afternoon July 12, 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 TeachScheme, ReachJava 2010

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  17. Other kinds of event handlers • tick-handler : image -> imageSpecify 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. TeachScheme, ReachJava 2010

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

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

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

  21. 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"))) TeachScheme, ReachJava 2010

  22. 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)) TeachScheme, ReachJava 2010

  23. 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-pic an image; x a number; y a number; event whatever) TeachScheme, ReachJava 2010

  24. 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-pic an image; x a number; y a number; event whatever(place-image calendar x y (rectangle 500 300 "solid" "yellow"))) TeachScheme, ReachJava 2010

  25. 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-pic an image; x a number; y a number; event whatever(place-image calendar x y BACKGROUND)) TeachScheme, ReachJava 2010

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

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

  28. 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:(operationargument …) • 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, … TeachScheme, ReachJava 2010

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

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

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

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

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

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

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

  36. Recipe for an animation, version 2 • What handlers will you need? • What type will your model be? • Write the handlers' contracts. • Develop each one, following the design recipe for functions (including testing!) • Test the whole animation, using big-bang. TeachScheme, ReachJava 2010

  37. Kinds of event handlers • tick-handler : model -> modelSpecify with on-tick (optional argument for clock interval) • mouse-handler : model number(x) number(y) event -> modelSpecify with on-mouse • key-handler : model key -> modelSpecify with on-key • draw-handler : model -> imageSpecify 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. TeachScheme, ReachJava 2010

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

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

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

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

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

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

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

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

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

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

More Related