How to design programs (HtDP)

Textbook HtDP dedicated to programming in the Scheme language in the drRacket environment.
drRacket can be downloaded from site.
chapeau tutorial provides a description of the function empty-scene, designed to work with images. For example, this program creates an empty scene.

the

#lang racket 
(require 2htdp/image) ;library for working with images 
(empty-scene 100 60) ;scene (canvas) size 100х60 

And this puts on stage a green circle.

the

#lang racket 
(require 2htdp/image)
(place-image (circle 5 "solid" "green") ;to place the image 
50 to 80 ;the coordinates of the image
(empty-scene 100 100)) ;empty stage (canvas)

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

the

#lang racket 
(require 2htdp/image) ;a library for working with images
(require 2htdp/universe) ;a library for working with animations
(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 the timer and positive the number of cycles.
2. The timer 28 times per second.
3. Every time the timer "ticks", animane sends picture-of-circle the current step; and
4. the scene is displayed on the canvas.

This means that the circle first appears in coordinate 0, then 1, then 2, etc. So the circle down from the top down. Ie this program for 3.5 seconds, creates about 100 images that allows you to create a motion effect.

By the way, this article discusses the issue of object-oriented programming in the language Scheme.

first part tutorial provides a description of the function big-bang, and all the programs that use the big-bang, called in the future world. This program draws a red square 100x100 (Paragraph 2.5).

the

#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 a different size.

the

(big-bang 50 [to-draw number- > square]) ; square 50x50
(big-bang 100 [to-draw number- > square]) ; square 100x100
(big-bang 150 [to-draw number- > square]) ; square 150x150

The mechanism of transmission parameters used by the function big-bang, can be considered
for example, the algorithm of implementation of the functions CONS,CAR,CDR from the textbook SICP.
the

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

Check the result of these functions.

the

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

Create function f-cr:

the

(define (f-cr x y) (y x)) 

Now the function f-cr may assign any values.

Image

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

the

(define (big-bang-1 x y) (y x))

and feature-to-draw-1, encapsulates the render-1:

the

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

Implement the algorithm of transmission parameters (values):

Image

Later in the tutorial design is:

the

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

which allows you to process key presses, timer, coordinates the movement of the object. Next (Figure 13) shows a program listing that uses this design.

the

(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 ke y) 0)

You can run the program in the "Novice student" (Top menu → Language → Select language... → Beginner student), adding packages (Top menu → Language → Add training package...) to work with images (image.rkt) and animation (universe.rkt).
Paragraph 3 called "How to design programs" (How to Design Programs). Here the author suggests that programs provide information in the form of data. Indeed, the numbers can be as the number of ticks counted by the timer and the coordinates of the object, its color, size, etc. Next, the program must convert the data back into information.

In Fig. 14 shows a diagram illustrating this idea.
Paragraph 3.5 (On Testing) devoted to the development of the tests.
Paragraph 3.6 is devoted to designing world programs. Figure 17 shows a simplified diagram of the library 2htdp/universe.

The author writes that there are 3 main steps to creating a big-bang programs (see paragraph 3.7):

1. To all values that remain the same, we need to create constants.
a. The physical constants are tied to the object's attributes like 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 pressing the keys
timer, etc. must be represented in the form of the control object state.
3. Upon receipt of the set of States of all objects have to call big-bang to display these objects. Further, readers are encouraged to do exercises in which you need to use the function big-bang.

Paragraph 4.3 discusses the issue of handling events generated by the keyboard and mouse. In Fig. 20 shows a reference design that handles the keys "left" and "right".

the

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

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

the

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

and pass this list to big-bang:

the

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

function place-dot-at "parses" a list apart:

the

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

and keh function "parses" the list changes one of the coordinates, and puts it back together:

the

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

It is further proposed to develop a program-traffic.

the

(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 changes very quickly (each step). To avoid this, it is necessary to change the activation time of the timer.

the

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

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

Also, the text given link to the page with the world. To run the program in the "Beginner student", adding the required packages.

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

the

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

In paragraph 5.4 the author gives a definition of the structure. He wrote that the structure actually defines other functionality. In particular:

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

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

Read more about this in the Documentation (Structures)

Paragraph 5.5. The program from exercise 71 are invited to run in the steps (step by step) in the debugger. Should be run in the "Beginner student", adding training packages.

In paragraph 5.6 the author does a phased program description for time-lapse animation (moving of object along one of the axes). Now the program uses the structure to determine the coordinates of the object.
the

(require 2htdp/image)
(require 2htdp/universe)
; (define-struct posn (x y))
(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-p dot x y me)
(cond
[(mouse=? me "button-down") (make-posn x y)]
[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))

In paragraph 5.11 provides an example of the 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 the paragraph 4.3 (traffic light).

paragraph 7 the author summarizes some results and shares with readers his thoughts about what skills needed to be a good programmer.

Article based on information from habrahabr.ru