How to design programs (HtDP)

The HtDP tutorial (How to Design Programs) is dedicated to programming in the Scheme language in drRacket.
drRacket can be downloaded from the site .
The introductory part of the textbook contains a description of the function empty-scene, intended for working with images. For example, this program creates an empty scene.

#lang racket (require 2htdp/image) ;     (empty-scene 100 60) ; ()  10060 

And this one places a green circle on the stage.

 #lang racket (require 2htdp/image) (place-image (circle 5 "solid" "green") ;  50 80 ;  (empty-scene 100 100)) ;  () 

To create an animation, use the animate function. The following program creates an animation (object movement).
')

 #lang racket (require 2htdp/image) ;     (require 2htdp/universe) ;     (define (picture-of-circle height) (place-image (circle 5 "solid" "green") 50 height (empty-scene 100 60))) (animate picture-of-circle) 

1. The animate function starts a timer and counts the number of ticks.
2. Timer fires 28 times per second.
3. Each time the timer ticks, the animane sends the current measure to the picture-of-circle; and
4. The scene is displayed on the canvas.

This means that the circle first appears in the coorinate 0, then 1, then 2, and so on. Therefore, the circle descends from top to bottom. Those. this program in 3.5 seconds creates about 100 images, which allows you to create the effect of movement.



In the first part of the textbook, the big-bang function is described, and all programs that use big-bang are called world-programs in the following. This program draws a red square 100x100 (Section 2.5).

 #lang racket (require 2htdp/image) (require 2htdp/universe) (define (number->square s) (square s "solid" "red")) (big-bang 100 [to-draw number->square]) 

If you change the value of the parameter, the function will draw a square of another size.

 (big-bang 50 [to-draw number->square]) ;  5050 (big-bang 100 [to-draw number->square]) ;  100100 (big-bang 150 [to-draw number->square]) ;  150150 

The parameter passing mechanism used by the big-bang function can be considered.
on the example of the algorithm for implementing the functions CONS, CAR, CDR from the SICP textbook.

 (define (f-cons xy) (define (dispatch m) (cond ((= m 0) x) ((= m 1) y) (else (error "  0  1 -- CONS" m)))) dispatch) (define (f-car z) (z 0)) (define (f-cdr z) (z 1)) 

Check the result of these functions.

 (define a 1) (define b 2) (display (f-car (f-cons ab))) ;  1 (display (f-cdr (f-cons ab))) ;  2 

Create the f-cr function:

 (define (f-cr xy) (yx)) 

Now the f-cr function can transmit any values.


By analogy, create the function big-bang-1:

 (define (big-bang-1 xy) (yx)) 

and the to-draw-1 function encapsulating render-1:

 (define (to-draw-1 x) (define (render-1 y) (place-image (xy) yy (empty-scene (* 2 y) (* 2 y))) ) render-1) 

We implement the algorithm for passing parameters (values):


Further in the textbook the construction of the form is considered:

 (big-bang cw0 [on-tick tock] [on-key ke-h] [on-mouse me-h] [to-draw render] [stop-when end?] ...) 

which allows you to handle keystrokes, timer, the coordinates of the object. Further (Figure 13) the listing of the program using this construction is given.

 (define BACKGROUND (empty-scene 100 100)) (define DOT (circle 3 "solid" "red")) (define (main y) (big-bang y [on-tick sub1] [stop-when zero?] [to-draw place-dot-at] [on-key stop])) (define (place-dot-at y) (place-image DOT 50 y BACKGROUND)) (define (stop y ke) 0) 

You can start the program in the mode “Novice student” (Top menu → Language → Select language ... → Novice student) by adding packages (Top menu → Language → Add training package ...) for working with images (image.rkt) and animation ( universe.rkt).

Paragraph 3 is called How to Design Programs. Here the author says that programs represent information in the form of data. Indeed, numbers can be the number of ticks counted by the timer, as well as the coordinates of the object, its color, size, etc. Next, the program must convert the data back into information.

In fig. 14 is a diagram illustrating this idea.
Paragraph 3.5 (On Testing) is devoted to developing with the help of tests.
Paragraph 3.6 is devoted to the design of world-programs. Figure 17 shows a simplified 2htdp / universe library diagram.

The author writes that there are 3 basic steps to create big-bang-programs (paragraph 3.7):

1. For all values ​​that remain unchanged, you need to create constants.
a. “Physical” constants are tied to object attributes such as speed, color,
width, height, etc.
(define WHEEL-RADIUS 5)
b. "Graphic" constants.
(define WHEEL
(circle WHEEL-RADIUS "solid" "black"))
2. Those properties that change over time in response to keystrokes,
timer etc. must be represented in the form of the state of the control object
3. When receiving a set of states of all objects, you need to call big-bang to display these objects. Further, readers are invited to do exercises in which you need to use the big-bang function.

Section 4.3 discusses the handling of events generated by the keyboard and mouse. In fig. 20 shows the conventional design processing the “left” and “right” keys.

 (define (keh pk) (cond [(string=? "left" k) (- p 5)] [(string=? "right" k) (+ p 5)] [else p])) 

I will add that if you also need to handle the "up" and "down" keys, then the coordinates of the object should be stored in the list:

 (define coord-xy (list 50 50) ) ; x=50 ; y=50 

and transfer this list to big-bang:

 (big-bang coord-xy [to-draw place-dot-at] [on-key keh]) 

the place-dot-at function “parses” the list into parts:

 (define (place-dot-at xy ) (place-image DOT (car xy) (cdr xy) MTS)) ; (car(cdr xy)) 

and the keh function “parses” the list, changes one of the coordinates, and assembles it back:

 (list (-(car p)5) (cdr p) ) ; (car (cdr p)) 

Further, it is proposed to develop a traffic light program.

 (check-expect (traffic-light-next "red") "green") (define (traffic-light-next s) (cond [(string=? "red" s) "green"] [(string=? "green" s) "yellow"] [(string=? "yellow" s) "red"])) 

I will add that the traffic light switches very quickly (every clock). To avoid this, you need to change the timer response time.

 [on-tick traffic-light-next rate-expr] 

Now the timer will fire every rate-expr seconds (on-tick tick-expr rate-expr).

Also in the text is a link to a page with world-programs. You can run programs in the "beginner student" mode by adding the necessary packages.

Paragraph 5 (Adding Structure) contains the definition of data structures ( Example )

 #lang racket (define-struct posn (xy)) (define a (make-posn 10 34)) (posn-x a) (posn-y a) (posn? (posn 10 34)) 

In paragraph 5.4, the author defines the structure. He writes that the structure actually defines other functions. In particular:

1. A constructor that creates an instance of the structure.
2. A selector that has access to the fields of the structure instance.
3. A structural predicate that, like ordinary predicates, checks
whether the argument is an instance of a structure.

make-posn is a constructor
posn-x and posn-y - selectors
posn? - predicate

Read more about this in the Documentation ( Structures ).

Paragraph 5.5. The program from exercise 71 is proposed to be run in steps (step-by-step) in the debugger. It is necessary to run in the "beginner student" mode by adding training packages.

In paragraph 5.6, the author makes a phased description of the program for frame-by-frame animation (moving an object along one of the axes). Now the program uses structures to determine the coordinates of the object.
Here is the program

 (require 2htdp/image) (require 2htdp/universe) ; (define-struct posn (xy)) (define MTS (empty-scene 100 100)) (define DOT (circle 3 "solid" "red")) ; A Posn represents the state of the world. (define (x+ p) (make-posn (+ (posn-x p) 3) (posn-y p))) (define (scene+dot p) (place-image DOT (posn-x p) (posn-y p) MTS) ) (define (reset-dot pxy me) (cond [(mouse=? me "button-down") (make-posn xy)] [else p])) ; Posn -> Posn (define (main p0) (big-bang p0 [on-tick x+] [on-mouse reset-dot] [to-draw scene+dot])) (main (make-posn 1 20)) 

Section 5.11 gives an example of image processing.
In paragraph 6.1 is a phased description of the game Space invanders.
In paragraph 6.2 it is proposed to supplement the program from paragraph 4.3 (traffic light).

PS This article discusses the issue of object programming in the Scheme language.