Extended Exercise: Moving Circles and Rectangles

Implementing a computer game often requires moving a picture across a computer monitor. In figure , for example, a simplistic face is moved from the left part of the canvas toward the right border. For simplicity, our pictures consist of many colored circles and rectangles. From section , we already know, for example, how to draw and erase a circle. Here we learn to translate a circle, that is, to move its representation along some line. In sections , , and  we learn to move entire pictures with compact programs.

Figure: A moving face

Following the design recipe, we start with structure and data definitions, then move on to templates, and finally write the necessary functions. The first sequence of exercises covers circles; the second one is about rectangles.

A First Note on Iterative Refinement: This method of developing large programs is our first taste of ITERATIVE REFINEMENT. The basic idea behind iterative refinement is to start with a simple version of the program, that is, a version that deals with the most important part of the problem. In this section, we start with functions that move the most basic shapes: circles and rectangles. Then we refine the program to deal with more and more complex situations. For example, in section  we learn to deal with pictures that consist of an arbitrary number of circles and rectangles. Once we have a complete program, we edit it so that others can easily read and modify it, too. Section  covers this aspect of the example.

Refining a program in this manner is the most prevalent method of designing complex programs. Of course, we must know the eventual goal for this method to succeed, and we must always keep it in mind. It is therefore a good idea to write down an action plan, and to reconsider the plan after each refinement step. We will discuss this process again in section . 

Exercise 6.6.1

Provide a structure definition and a data definition for representing colored circles. A circle is characterized by three pieces of information: its center, its radius, and the color of its perimeter. The first is a posn structure, the second a number, and the third a (color) symbol.

Develop the template fun-for-circle, which outlines a function that consumes circles. Its result is undetermined. Solution

Exercise 6.6.2

Use fun-for-circle to develop draw-a-circle. The function consumes a circle structure and draws the corresponding circle on the screen. Use (start 300 300) to create the canvas before testing the function. Solution

Exercise 6.6.3

Use the template fun-for-circle to develop in-circle?. The function consumes a circle structure and a posn and determines whether or not the pixel is inside the circle. All pixels whose distance to the center is less or equal to the radius are inside the circle; the others are outside.

Consider the circle in figure . The circle's center is (make-posn 6 2), its radius is 1. The pixel labeled A, located at (make-posn 6 1.5), is inside the circle. The pixel labeled B, located at (make-posn 8 6), is outside. Solution

Exercise 6.6.4

Use the template fun-for-circle to develop translate-circle. The function consumes a circle structure and a number delta. The result is a circle whose center is delta pixels to the right of the input. The function has no effect on the canvas.

Geometric Translation: Moving a geometric shape along a straight line is referred to as a translation. Solution

Exercise 6.6.5

Use the template fun-for-circle to develop clear-a-circle. The function consumes a circle structure and clears the corresponding circle on the canvas. Solution

Exercise 6.6.6

Define the function draw-and-clear-circle, which draws a circle structure, waits for a short time, and clears it. To implement a waiting period, the teachpack draw.ss provides the function sleep-for-a-while. It consumes a number and puts the program to sleep for that many seconds; its result is true. For example, (sleep-for-a-while 1) waits for one second. Solution

The following function is the key ingredient for moving a circle across a canvas, one step at a time:

;; move-circle : number circle -> circle
;; to draw and clear a circle, translate it by delta pixels 
(define (move-circle delta a-circle) 
  (cond 
    [(draw-and-clear-circle a-circle) (translate-circle a-circle delta)] 
    [else a-circle])) 

(start 200 100)

(draw-a-circle 
  (move-circle 10 
    (move-circle 10 
      (move-circle 10 
        (move-circle 10 ... a circle ...))))) 

Figure: Circles, rectangles, and pixels

Exercise 6.6.7

Provide a structure definition and a data definition for representing colored rectangles. A rectangle is characterized by four pieces of information: its upper-left corner, its width, its height, and its fill color. The first is a posn structure, the second and third quantities are plain numbers, and the last one is a color.

Develop the template fun-for-rect, which outlines a function that consumes rectangles. Its result is undetermined. Solution

Exercise 6.6.8

Use the template fun-for-rect to develop draw-a-rectangle. The function consumes a rectangle structure and draws the corresponding rectangle on the screen. In contrast to circles, the entire rectangle is painted in the matching color. Remember to use (start 300 300) to create the canvas before testing the function. Solution

Exercise 6.6.9

Use the template fun-for-rect to develop in-rectangle?. The function consumes a rectangle structure and a posn and determines whether or not the pixel is inside the rectangle. A pixel is within a rectangle if its horizontal and vertical distances to the upper-left corner are positive and smaller than the width and height of the rectangle, respectively.

Consider the rectangle in figure . This rectangle's key parameters are (make-posn 2 3), 3, and 2. The pixel labeled C is inside of the rectangle, B is outside. Solution

Exercise 6.6.10

Use the template fun-for-rect to develop translate-rectangle. The function consumes a rectangle structure and a number delta. The result is a rectangle whose upper-left corner is delta pixels to the right of the input. The function has no effect on the canvas. Solution

Exercise 6.6.11

Use the template fun-for-rect to develop clear-a-rectangle. It consumes a rectangle structure and clears the corresponding rectangle on the canvas. Solution

Exercise 6.6.12

Here is the move-rectangle function:

;; move-rectangle : number rectangle -> rectangle
;; to draw and clear a rectangle, translate it by delta pixels 
(define (move-rectangle delta a-rectangle) 
  (cond 
    [(draw-and-clear-rectangle a-rectangle) 
     (translate-rectangle a-rectangle delta)] 
    [else a-rectangle])) 

Develop draw-and-clear-rectangle, which draws a rectangle, sleeps for a while, and then clears the rectangle. Finally, create a rectangle and use the functions of this exercise set to move it four times. Solution