Extended Exercise: Drawing Simple Pictures

~<#70734#>This set of exercises introduces a very small number of graphics routines that are used over and over again throughout the book The goal is to illustrate the idea of <#60983#><#3979#>posn<#3979#><#60983#> structures graphically. The goal is <#3980#>not<#3980#> to memorize the routines; instead have the students mark the section and refer back to it for other exercises. Have some fun, but don't spend too much time in graphics.<#70734#> DrScheme provides the graphics teachpack <#3981#>draw.ss<#3981#>, which introduces simple graphics operations:

<#60984#><#3983#>draw-solid-line<#3983#><#60984#>, which consumes two <#60985#><#3984#>posn<#3984#><#60985#> structures, the beginning and the end of the line on the canvas, and a color.
<#60986#><#3985#>draw-solid-rect<#3985#><#60986#>, which consumes four arguments: a <#60987#><#3986#>posn<#3986#><#60987#> structure for the upper-left corner of the rectangle, a number for the width of the rectangle, another number for its height, and a color.
<#60988#><#3987#>draw-solid-disk<#3987#><#60988#>, which consumes three arguments: a <#60989#><#3988#>posn<#3988#><#60989#> structure for the center of the disk, a number for the radius of the disk, and a color.
<#60990#><#3989#>draw-circle<#3989#><#60990#>, which consumes three arguments: a <#60991#><#3990#>posn<#3990#><#60991#> structure for the center of the circle, a number for the radius, and a color.

Each of the operation produces <#60992#><#3992#>true<#3992#><#60992#>, if it succeeds in changing the canvas as specified. We refer to the action to the canvas as an <#60993#><#3993#>EFFECT<#3993#><#60993#>, though we will ignore studying the precise nature of effects until part~#partstate#3994>. Also, if anything goes wrong with the operation, it stops the evaluation with an error. Each drawing operation also comes with a matching <#60994#><#3995#>clear-<#3995#><#60994#> operation: <#60995#><#3996#>clear-solid-line<#3996#><#60995#>, <#60996#><#3997#>clear-solid-rect<#3997#><#60996#>, <#60997#><#3998#>clear-solid-disk<#3998#><#60997#>, and <#60998#><#3999#>clear-circle<#3999#><#60998#>. If these functions are applied to the same arguments as their matching <#60999#><#4000#>draw-<#4000#><#60999#> function, they clear the corresponding shapes of the canvas. In contrast to school geometry, drawing operations on computers interpret positions on the screen differently. First, the origin of the plane is in the upper-left corner. Second, y coordinates grow in the downwards direction. Here is a picture:

#picture4003#

Understanding this picture is critical for drawing pictures on computer screens. Study it well!
<#4021#>Exercise 6.2.1<#4021#> #drnexdrawfig#4024> Evaluate the following expressions in order:

<#61014#><#4026#>(start<#4026#>\ <#4027#>300<#4027#>\ <#4028#>300)<#4028#><#61014#>, which opens a canvas for future drawing operations;
<#61015#><#4029#>(draw-solid-line<#4029#>\ <#4030#>(make-posn<#4030#>\ <#4031#>1<#4031#>\ <#4032#>1)<#4032#>\ <#4033#>(make-posn<#4033#>\ <#4034#>5<#4034#>\ <#4035#>5)<#4035#>\ <#4036#>RED)<#4036#><#61015#>, which draws a red line;
<#61016#><#4037#>(draw-solid-rect<#4037#>\ <#4038#>(make-posn<#4038#>\ <#4039#>20<#4039#>\ <#4040#>10)<#4040#>\ <#4041#>50<#4041#>\ <#4042#>200<#4042#>\ <#4043#>BLUE)<#4043#><#61016#>, which draws a blue rectangle of width 50 parallel to the line; and
<#61017#><#4044#>(draw-circle<#4044#>\ <#4045#>(make-posn<#4045#>\ <#4046#>200<#4046#>\ <#4047#>10)<#4047#>\ <#4048#>50<#4048#>\ <#4049#>RED)<#4049#><#61017#>, which draws a red circle of radius 50 and a center point at the upper line of the rectangle.
<#61018#><#4050#>(draw-solid-disk<#4050#>\ <#4051#>(make-posn<#4051#>\ <#4052#>200<#4052#>\ <#4053#>10)<#4053#>\ <#4054#>50<#4054#>\ <#4055#>GREEN)<#4055#><#61018#>, which draws a green disk of radius 50 and a center point at the height of the upper line of the rectangle.
<#61019#><#4056#>(stop)<#4056#><#61019#>, which closes the canvas.

Read the documentation for <#4058#>draw.ss<#4058#> in DrScheme's HelpDesk.~<#61020#><#61020#> The definitions and expressions in figure~#figdrawtraffic#4061> draw a traffic light. The program fragment illustrates the use of global definitions for specifying and computing constants. Here, the constants represent the dimensions of the canvas, which is the outline of the traffic light, and the positions of three light bulbs.

rawhtml13 <#4062#>Figure: Drawing a traffic light<#4062#>

<#4064#>Exercise 6.2.2<#4064#> Develop the function <#61021#><#4066#>clear-bulb<#4066#><#61021#>. It consumes a symbol that denotes one of the possible colors: <#61022#><#4067#>'<#4067#><#4068#>green<#4068#><#61022#>, <#61023#><#4069#>'<#4069#><#4070#>yellow<#4070#><#61023#>, or <#61024#><#4071#>'<#4071#><#4072#>red<#4072#><#61024#>, and it produces <#61025#><#4073#>true<#4073#><#61025#>. Its effect is ``to turn off'' the matching bulb in the traffic light. Specifically, it should clear the disk and display a circle instead.

<#4074#>Design Recipe:<#4074#>:\ See section~#secsym#4075> for designing functions that consume a fixed number of symbols.~<#61026#><#61026#>

<#4078#>Combining effects:<#4078#>:\ The primitive operations for drawing and clearing disks and circles produce <#61027#><#4079#>true<#4079#><#61027#>. The natural way to combine the values and the effects of these functions is to use the <#61028#><#4080#>and<#4080#><#61028#> operation. Later we will study effects in more detail and learn different ways to combine effects.~ Solution<#61029#><#61029#> <#4086#>Exercise 6.2.3<#4086#> Develop a function <#61030#><#4088#>draw-bulb<#4088#><#61030#>. It consumes a symbols that denotes one of the possible colors: <#61031#><#4089#>'<#4089#><#4090#>green<#4090#><#61031#>, <#61032#><#4091#>'<#4091#><#4092#>yellow<#4092#><#61032#>, or <#61033#><#4093#>'<#4093#><#4094#>red<#4094#><#61033#>, and produces <#61034#><#4095#>true<#4095#><#61034#>. Its effect is ``to turn on'' the matching bulb in the traffic light.~ Solution<#61035#><#61035#> <#4101#>Exercise 6.2.4<#4101#> Develop the function <#61036#><#4103#>switch<#4103#><#61036#>. It consumes two symbols, each of which stands for a traffic light color, and produces <#61037#><#4104#>true<#4104#><#61037#>. Its effects are to clear the bulb for the first color and then to draw the second bulb.~ Solution<#61038#><#61038#> <#4110#>Exercise 6.2.5<#4110#> Here is the function <#61039#><#4112#>next<#4112#><#61039#>:

<#70735#>;; <#61040#><#4117#>next<#4117#> <#4118#>:<#4118#> <#4119#>symbol<#4119#> <#4120#><#4120#><#4121#>-;SPMgt;<#4121#><#4122#><#4122#> <#4123#>symbol<#4123#><#61040#><#70735#>
<#4124#>;; to switch a traffic light's current color and to return the next one <#4124#> 
<#4125#>(d<#4125#><#4126#>efine<#4126#> <#4127#>(next<#4127#> <#4128#>current-color)<#4128#> 
  <#4129#>(c<#4129#><#4130#>ond<#4130#> 
    <#4131#>[<#4131#><#4132#>(and<#4132#> <#4133#>(symbol=?<#4133#> <#4134#>current-color<#4134#> <#4135#>'<#4135#><#4136#>red)<#4136#> <#4137#>(switch<#4137#> <#4138#>'<#4138#><#4139#>red<#4139#> <#4140#>'<#4140#><#4141#>green))<#4141#> 
     <#4142#>'<#4142#><#4143#>green]<#4143#> 
    <#4144#>[<#4144#><#4145#>(and<#4145#> <#4146#>(symbol=?<#4146#> <#4147#>current-color<#4147#> <#4148#>'<#4148#><#4149#>yellow)<#4149#> <#4150#>(switch<#4150#> <#4151#>'<#4151#><#4152#>yellow<#4152#> <#4153#>'<#4153#><#4154#>red))<#4154#> 
     <#4155#>'<#4155#><#4156#>red]<#4156#> 
    <#4157#>[<#4157#><#4158#>(and<#4158#> <#4159#>(symbol=?<#4159#> <#4160#>current-color<#4160#> <#4161#>'<#4161#><#4162#>green)<#4162#> <#4163#>(switch<#4163#> <#4164#>'<#4164#><#4165#>green<#4165#> <#4166#>'<#4166#><#4167#>yellow))<#4167#> 
     <#4168#>'<#4168#><#4169#>yellow]<#4169#><#4170#>))<#4170#>

It consumes the current color of a traffic-light (as a symbol) and produces the next color that the traffic light shows. That is, if the input is <#61041#><#4174#>'<#4174#><#4175#>green<#4175#><#61041#>, it produces <#61042#><#4176#>'<#4176#><#4177#>yellow<#4177#><#61042#>; if it is <#61043#><#4178#>'<#4178#><#4179#>yellow<#4179#><#61043#>, it produces <#61044#><#4180#>'<#4180#><#4181#>red<#4181#><#61044#>; and if it is <#61045#><#4182#>'<#4182#><#4183#>red<#4183#><#61045#>, it produces <#61046#><#4184#>'<#4184#><#4185#>green<#4185#><#61046#>. Its effect is to switch the traffic light from the input color to the next color. Use <#61047#><#4186#>draw-bulb<#4186#><#61047#> to create a traffic light that is red. Then compose <#61048#><#4187#>next<#4187#><#61048#> with itself to switch the traffic light four times.~

Solution<#61049#><#61049#>