[OSSU] <UBCx HtC1x_How to Code> / 3a_How to Design Worlds

벌써 3주차다!!

이거 듣고 리트코드 푸니까, 속도도 확연히 빨라졌고, 코드도 깔끔해지고 자신감이 생긴다.

공부한 게 성과로 나타나니까 매우 뿌듯하다 :-) 

 

|  개요 

In this module you will learn how to design interactive programs that use the DrRacket big-bang functionality. We will make simple animations of animals walking across the screen that can be controlled by the keyboard and the mouse.

 

여기서는 애니메이션을 만들어본단다!!!! >< 꺅 

 

HtDW creates HtDD and HtDF sub-tasks. 

 

|  The big-bang Mechanism 

 

 

 

 

interactive world를 선언하기 위해 big-bang 을 쓴다

 

시간이 줄어드는 타이머 & 움직이는 고양이가 함께 연동된다

그럼 이제 어떻게 World를 만드는지 확인해보자 

 

 

World program design is divided into two phases, each of which has sub-parts:

1. Domain analysis (use a piece of paper!)
 1)Sketch program scenarios (그림을 그려본다)
 2)Identify constant information (변치않는 값들 : screen의 width, height, cat's y-coordinate, background img(mts), cat img)
 3)Identify changing information (변하는 값 : cat's x- coordinate)
 4)Identify big-bang options (on-tick, to-draw) (빅뱅 세계에 적용할 특징들)

2. Build the actual program
 1)Constants (based on 1.2 above)
 2)Data definitions using HtDD (based on 1.3 above)
 3)Functions using HtDF
   -main first (based on 1.3, 1.4 and 2.2 above)
   -wish list entriesfor big-bang handlers
 4)Work through wish list until done

 

1. Domain Analysis (진짜 종이에 적어가면서 그리는 거)

The first phase of the How to Design Worlds (HtDW) recipe is to analyze the problem to identify constant information, changing information and required big-bang options.

 

 

* big-bang options the program needs

big-bang options

 

 

2. Build actual Program (링크)

어려운 문제를 마주쳐을 때, template을 사용할 수 있다. 문제의 구조에 따라서 쓸 수 있다

 

- 템플렛

(require 2htdp/image)
(require 2htdp/universe)

;; My world program  (make this more specific)

;; =================
;; Constants:


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

;; WS is ... (give WS a better name)



;; =================
;; Functions:

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

;; WS -> WS
;; produce the next ...
;; !!!
(define (tock ws) ...)


;; WS -> Image
;; render ... 
;; !!!
(define (render ws) ...)

 

 

 | 고양이를 움직여보자

;;Template copy paste

(require 2htdp/image)
(require 2htdp/universe)

;; A cat that walks from left to right across the screen.

;; =================
;; Constants:
(define WIDTH 600)
(define HEIGHT 400)
(define CTR-Y (/ HEIGHT 2))
(define MTS (overlay (rectangle WIDTH HEIGHT "solid" "grey") (empty-scene WIDTH HEIGHT)))
(define CAT-IMG [진짜 이미지])





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

;; 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))

;;Template rules used:
;; - atomic non-distinct: Number

;; =================
;; Functions:

;; Cat  -> Cat 
;; start the world with (main 0)
(define (main c)
  (big-bang c                           ; Cat
            (on-tick   advance-cat)     ; Cat -> Cat
            (to-draw   render)))        ; Cat -> Image

;; Cat  -> Cat 
;; produce the next cat, by advancing it 1 pixel to right
(check-expect (advance-cat 3) 4)

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

;<use template from Cat>
(define (advance-cat c)
  (+ c 1))


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

;(define (render c) MTS) ;stub
;<use template from Cat>
(define (render c)
  (place-image CAT-IMG c CTR-Y MTS))

 

 

 

| 수정할 때도 structure를 잘 보자!!

1) 고양이의 Speed 빠르게 해주기

고양이가 움직이는 속도를 조정해주려면, 두 군데에 추가해야 한다

 

 

2) Space바를 누르면 고양이가 다시 맨 왼쪽 끝으로 돌아가기

(handle-key 는 2개의 변수가 필요하다. 하나는 tick 숫자, 하나는 누르는 key enter값)

 

 

---

;  PROBLEM:
; 
; ; Design a world program that represents a countdown. The program should
; ; display the number of seconds remaining and should decrease at each
; ; clock tick. Upon reaching zero, it should stay there and not change.
; ;
; ; To make your countdown progress at a reasonable speed, you can use the
; ; rate option to on-tick. If you say, for example,
; ; (on-tick advance-countdown 1) then big-bang will wait 1 second between
; ; calls to advance-countdown.
; ;
; ; Remember to follow the HtDW recipe! Be sure to do a proper domain
; ; analysis before starting to work on the code file.
; ;
; ; Once you are finished the simple version of the program, you can improve
; ; it by reseting the countdown to ten when you press the spacebar.
; 
; ;; A simple countdown animation.
; 


(require 2htdp/image)
(require 2htdp/universe)

;; shows countdown by the clock tick

;=========================
;; Constants:
(define Txt-size 35)
(define Txt-color "white")
(define WIDTH 100)
(define HEIGHT 100)
(define MTS (rectangle WIDTH HEIGHT "solid" "black"))
(define CTR-X (/ WIDTH 2))
(define CTR-Y (/ HEIGHT 2))


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

;; Countdown is Number
;; interp. clock tick decreasing by seconds
(define CD1 10)
(define CD2 0)

#;(define (fn-for-countdown c)
  (... c))

;:Template rules used:
;; - atomic non-distinct : Number


;=========================
;; Functions:

;; Second -> Image
;; start the world with (main 10)
;; 
(define (main c)
  (big-bang c                         ; Second
            (on-tick   countdown 1)   ; Second -> Second
            (to-draw   render)        ; Second -> Image
            (on-key    handle-key)))  ; Second KeyEvent -> Second

;=========================
;; Number -> Number
;; produce the number 1 less than given, and stay 0 if 0
(check-expect (countdown 10) 9)
(check-expect (countdown 1) 0)
(check-expect (countdown 0) 0)
    
;(define (countdown c) 0) ;stub
;<use template from Countdown>
(define (countdown c)
  (cond [(< 0 c) (- c 1)]
        [else 0]))

;=========================
;; Number -> Image
;; render ... 
;; !!!
(check-expect (render 10) (overlay (text (number->string 10) Txt-size Txt-color)
                                   MTS))


;(define (render c) MTS) ;stub
;<use template from Countdown>
(define (render c)
  (overlay (text (number->string c) Txt-size Txt-color)
           MTS))

;=========================
;; Number -> Number
;; reset to 0 when press spacebar
(check-expect (handle-key 0 " ") 0)
(check-expect (handle-key 10 " ") 0)

;(define (handle-key c ke) 0) ;stub

;(template)
(define (handle-key c ke) (if (key=? ke " ") 0 c))

 

world 디자인할 때, (on-tick function이름 1) 하면 뒤에 1 이게 숫자이다. 몇 초만에 한 번씩 값이 변하게 하는지 설정해준다

 

 

| 신호등 만들기

 

멋쟁이 신호등을 만들어버렸다 !!!