CPSC

htdw 是how to design data 的缩写
还是那句话，经典不妨一看再看
htdW这章的视频可以在edx上看，也可以点开youtube的公开课链接看
这里的总结是假设你都看过视频了(￣< ￣)>

我们先说一下htdw 里面的bigbang 是个啥。。。。
不是这个，，，

也不是这个。。。

而是这个

(define (main ws)
  (big-bang ws                           ; WS
            (on-tick   tock)             ; WS -> WS
            (to-draw   render)           ; WS -> Image
            (stop-when handle-stop)      ; WS -> Boolean
            (on-mouse  handle-mouse)     ; WS Integer Integer MouseEvent -> WS
            (on-key    handle-key)))     ; WS KeyEvent -> WS

big-bang 是专门用来animation的，就像一个套餐一样，你可以选择任意需要的option。
如果big-bang 是一个生产流水线的话，每一个option 就是一道工序， 然后需要一个人来负责
这道工序，例如(on-tick tock)，就是说 on-tick这道工序由tock 这个人负责。tock其实就是个
关于WS的function，名字随便起。

============================================================================
了解bigbang之后,结合视频的内容，来梳理一下htdw的步骤。
目标是写这么一个animation，有只喵从左往右跑，按回车从头再来

1.Domain analysis javaIsTheBest
2.Coding ssss[color]javaIsTheBest


这里的例子是simple atomic data + htdw, 其他的htdd+htdw可以参考下面的链接(rkt文件)
interval + htdw
enumeration + htdw
itemization + htdw

javaIsTheBest 全部写完的话应该是这样一份code

(require 2htdp/image)
(require 2htdp/universe)
;; =================
;; Constants:

(define WIDTH 600)
(define HEIGHT 400)

(define CTR-Y (/ HEIGHT 2))

(define SPEED 3)

(define MTS (empty-scene WIDTH HEIGHT))

(define CAT-IMG (bitmap/url "https://i.imgur.com/mW5B6Lh.jpg"))


;; =================
;; Data definitions:

(@template Cat)
;; Cat is Number
;; interp. x position of the cat in screen coordinates
(define C1 0)           ;left edge
(define C2 (/ WIDTH 2)) ;middle
(define C3 WIDTH)       ;right edge
#;
(define (fn-for-cat c)
  (... c))

(@dd-template-rules atomic-non-distinct) ;; Number

;; =================
(@signature Cat -> Cat)
;; start the world with (main 0)
;; 
(define (main c)
  (big-bang c                       ; Cat
            (on-tick   next-cat) ; Cat -> Cat
            (to-draw   render-cat)      ; Cat -> Image
            (on-key    handle-key))); Cat -> Cat


(@signature Cat -> Cat)
;; produce the next cat, by advancing it SPEED pixel(s) to right
(check-expect (next-cat 3) (+ 3 SPEED))

;(define (next-cat c) 0) ;stub

(@template Cat)

(define (next-cat c)
  (+ c SPEED))       

(@signature Cat -> Image)
;; render the cat image at appropriate place on MTS 
(check-expect (render-cat 4) (place-image CAT-IMG 4 CTR-Y MTS)) 
              


;(define (render c) MTS) ;stub

(@template Cat)

(define (render-cat c)
  (place-image CAT-IMG c CTR-Y MTS))

(@signature Cat -> Cat)
;; when space pressed, reset cat at the strat place
(check-expect (handle-key C2 " ") C1)
(check-expect (handle-key C2 "a") C2)
(@template KeyEvent)

(define (handle-key c ke)
  (cond [(key=? ke " ") C1]
        [else
         c]))