/usr/share/doc/racket/teachpack/2htdpimage-guide.html is in racket-doc 6.1-4.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>2.2 Image Guide</title><link rel="stylesheet" type="text/css" href="../scribble.css" title="default"/><link rel="stylesheet" type="text/css" href="../racket.css" title="default"/><link rel="stylesheet" type="text/css" href="../manual-style.css" title="default"/><link rel="stylesheet" type="text/css" href="../manual-racket.css" title="default"/><link rel="stylesheet" type="text/css" href="../doc-site.css" title="default"/><script type="text/javascript" src="../scribble-common.js"></script><script type="text/javascript" src="../manual-racket.js"></script><script type="text/javascript" src="../doc-site.js"></script><script type="text/javascript" src="../local-redirect/local-redirect.js"></script><script type="text/javascript" src="../local-redirect/local-user-redirect.js"></script><!--[if IE 6]><style type="text/css">.SIEHidden { overflow: hidden; }</style><![endif]--></head><body id="doc-racket-lang-org"><div class="tocset"><div class="tocview"><div class="tocviewlist tocviewlisttopspace"><div class="tocviewtitle"><table cellspacing="0" cellpadding="0"><tr><td style="width: 1em;"><a href="javascript:void(0);" title="Expand/Collapse" class="tocviewtoggle" onclick="TocviewToggle(this,"tocview_0");">►</a></td><td></td><td><a href="index.html" class="tocviewlink" data-pltdoc="x"><span style="font-style: italic">How to Design Programs</span> Teachpacks</a></td></tr></table></div><div class="tocviewsublisttop" style="display: none;" id="tocview_0"><table cellspacing="0" cellpadding="0"><tr><td align="right">1 </td><td><a href="htdp.html" class="tocviewlink" data-pltdoc="x">Ht<span class="mywbr"> </span>DP Teachpacks</a></td></tr><tr><td align="right">2 </td><td><a href="2htdp2htdp.html" class="tocviewselflink" data-pltdoc="x">Ht<span class="mywbr"> </span>DP/<span class="mywbr"> </span>2e Teachpacks</a></td></tr></table></div></div><div class="tocviewlist"><table cellspacing="0" cellpadding="0"><tr><td style="width: 1em;"><a href="javascript:void(0);" title="Expand/Collapse" class="tocviewtoggle" onclick="TocviewToggle(this,"tocview_1");">▼</a></td><td>2 </td><td><a href="2htdp2htdp.html" class="tocviewlink" data-pltdoc="x">Ht<span class="mywbr"> </span>DP/<span class="mywbr"> </span>2e Teachpacks</a></td></tr></table><div class="tocviewsublist" style="display: block;" id="tocview_1"><table cellspacing="0" cellpadding="0"><tr><td align="right">2.1 </td><td><a href="2htdpbatch-io.html" class="tocviewlink" data-pltdoc="x">Batch Input/<span class="mywbr"> </span>Output:<span class="mywbr"> </span> <span class="stt">"batch-<wbr></wbr>io.rkt"</span><a name="(idx._(gentag._20._(lib._teachpack/teachpack..scrbl)._2htdp))"></a></a></td></tr><tr><td align="right">2.2 </td><td><a href="" class="tocviewselflink" data-pltdoc="x">Image Guide</a></td></tr><tr><td align="right">2.3 </td><td><a href="2htdpimage.html" class="tocviewlink" data-pltdoc="x">Images:<span class="mywbr"> </span> <span class="stt">"image.rkt"</span><a name="(idx._(gentag._21._(lib._teachpack/teachpack..scrbl)._2htdp))"></a></a></td></tr><tr><td align="right">2.4 </td><td><a href="2htdpuniverse.html" class="tocviewlink" data-pltdoc="x">Worlds and the Universe:<span class="mywbr"> </span> <span class="stt">"universe.rkt"</span><a name="(idx._(gentag._22._(lib._teachpack/teachpack..scrbl)._2htdp))"></a></a></td></tr><tr><td align="right">2.5 </td><td><a href="2htdpPlanet_Cute_Images.html" class="tocviewlink" data-pltdoc="x">Planet Cute Images</a></td></tr><tr><td align="right">2.6 </td><td><a href="2htdphtdp-port.html" class="tocviewlink" data-pltdoc="x">Porting World Programs to Universe</a></td></tr></table></div></div><div class="tocviewlist"><table cellspacing="0" cellpadding="0"><tr><td style="width: 1em;"><a href="javascript:void(0);" title="Expand/Collapse" class="tocviewtoggle" onclick="TocviewToggle(this,"tocview_2");">►</a></td><td>2.2 </td><td><a href="" class="tocviewselflink" data-pltdoc="x">Image Guide</a></td></tr></table><div class="tocviewsublistbottom" style="display: none;" id="tocview_2"><table cellspacing="0" cellpadding="0"><tr><td align="right">2.2.1 </td><td><a href="#%28part._.Overlaying__.Above__and_.Beside__.A_.House%29" class="tocviewlink" data-pltdoc="x">Overlaying, Above, and Beside:<span class="mywbr"> </span> A House</a></td></tr><tr><td align="right">2.2.2 </td><td><a href="#%28part._.Rotating_and_.Overlaying__.A_.Rotary_.Phone_.Dial%29" class="tocviewlink" data-pltdoc="x">Rotating and Overlaying:<span class="mywbr"> </span> A Rotary Phone Dial</a></td></tr><tr><td align="right">2.2.3 </td><td><a href="#%28part._.Alpha_.Blending%29" class="tocviewlink" data-pltdoc="x">Alpha Blending</a></td></tr><tr><td align="right">2.2.4 </td><td><a href="#%28part._.Recursive_.Image_.Functions%29" class="tocviewlink" data-pltdoc="x">Recursive Image Functions</a></td></tr><tr><td align="right">2.2.5 </td><td><a href="#%28part._rotate-center%29" class="tocviewlink" data-pltdoc="x">Rotating and Image Centers</a></td></tr><tr><td align="right">2.2.6 </td><td><a href="#%28part._.Image_.Interoperability%29" class="tocviewlink" data-pltdoc="x">Image Interoperability</a></td></tr><tr><td align="right">2.2.7 </td><td><a href="#%28part._nitty-gritty%29" class="tocviewlink" data-pltdoc="x">The Nitty Gritty of Pixels, Pens, and Lines</a></td></tr><tr><td align="right">2.2.8 </td><td><a href="#%28part._nitty-gritty-alpha%29" class="tocviewlink" data-pltdoc="x">The Nitty Gritty of Alpha Blending</a></td></tr></table></div></div></div><div class="tocsub"><div class="tocsubtitle">On this page:</div><table class="tocsublist" cellspacing="0"><tr><td><span class="tocsublinknumber">2.2.1<tt> </tt></span><a href="#%28part._.Overlaying__.Above__and_.Beside__.A_.House%29" class="tocsubseclink" data-pltdoc="x">Overlaying, Above, and Beside:<span class="mywbr"> </span> A House</a></td></tr><tr><td><span class="tocsublinknumber">2.2.2<tt> </tt></span><a href="#%28part._.Rotating_and_.Overlaying__.A_.Rotary_.Phone_.Dial%29" class="tocsubseclink" data-pltdoc="x">Rotating and Overlaying:<span class="mywbr"> </span> A Rotary Phone Dial</a></td></tr><tr><td><span class="tocsublinknumber">2.2.3<tt> </tt></span><a href="#%28part._.Alpha_.Blending%29" class="tocsubseclink" data-pltdoc="x">Alpha Blending</a></td></tr><tr><td><span class="tocsublinknumber">2.2.4<tt> </tt></span><a href="#%28part._.Recursive_.Image_.Functions%29" class="tocsubseclink" data-pltdoc="x">Recursive Image Functions</a></td></tr><tr><td><span class="tocsublinknumber">2.2.5<tt> </tt></span><a href="#%28part._rotate-center%29" class="tocsubseclink" data-pltdoc="x">Rotating and Image Centers</a></td></tr><tr><td><span class="tocsublinknumber">2.2.6<tt> </tt></span><a href="#%28part._.Image_.Interoperability%29" class="tocsubseclink" data-pltdoc="x">Image Interoperability</a></td></tr><tr><td><span class="tocsublinknumber">2.2.7<tt> </tt></span><a href="#%28part._nitty-gritty%29" class="tocsubseclink" data-pltdoc="x">The Nitty Gritty of Pixels, Pens, and Lines</a></td></tr><tr><td><span class="tocsublinknumber">2.2.8<tt> </tt></span><a href="#%28part._nitty-gritty-alpha%29" class="tocsubseclink" data-pltdoc="x">The Nitty Gritty of Alpha Blending</a></td></tr></table></div></div><div class="maincolumn"><div class="main"><div class="navsettop"><span class="navleft"><form class="searchform"><input class="searchbox" style="color: #888;" type="text" value="...search manuals..." title="Enter a search string to search the manuals" onkeypress="return DoSearchKey(event, this, "6.1", "../");" onfocus="this.style.color="black"; this.style.textAlign="left"; if (this.value == "...search manuals...") this.value="";" onblur="if (this.value.match(/^ *$/)) { this.style.color="#888"; this.style.textAlign="center"; this.value="...search manuals..."; }"/></form> <a href="../index.html" title="up to the documentation top" data-pltdoc="x" onclick="return GotoPLTRoot("6.1");">top</a></span><span class="navright"> <a href="2htdpbatch-io.html" title="backward to "2.1 Batch Input/Output: "batch-io.rkt""" data-pltdoc="x">← prev</a> <a href="2htdp2htdp.html" title="up to "2 HtDP/2e Teachpacks"" data-pltdoc="x">up</a> <a href="2htdpimage.html" title="forward to "2.3 Images: "image.rkt""" data-pltdoc="x">next →</a></span> </div><h4 x-source-module="(lib "teachpack/teachpack.scrbl")" x-part-tag=""image-guide"">2.2<tt> </tt><a name="(part._image-guide)"></a>Image Guide</h4><p>This section introduces the <a href="2htdpimage.html" class="RktModLink" data-pltdoc="x"><span class="RktSym">2htdp/image</span></a> library
through a series of increasingly complex image constructions
and discusses some subtle details of cropping and outline
images.</p><h5 x-source-module="(lib "teachpack/teachpack.scrbl")" x-part-tag=""Overlaying__Above__and_Beside__A_House"">2.2.1<tt> </tt><a name="(part._.Overlaying__.Above__and_.Beside__.A_.House)"></a>Overlaying, Above, and Beside: A House</h5><p>To build a simple-looking house, we can place a triangle above
a rectangle.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"red"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>We can give the house two roofs by putting two triangles next to
each other.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"red"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"red"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">80</span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_2.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>But if we want the new roof to be a little smaller, then they do not line
up properly.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"red"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"red"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">70</span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_3.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>Instead, we can use <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%2Falign%29%29" class="RktValLink" data-pltdoc="x">beside/align</a></span> to line up the two triangles
along their bottoms instead of along the middles (which is what
<span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span> does).</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">victorian</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%2Falign%29%29" class="RktValLink" data-pltdoc="x">beside/align</a></span><span class="hspace"> </span><span class="RktVal">"bottom"</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"red"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"red"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">70</span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktSym">victorian</span></td></tr><tr><td><p><object data="pict_4.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>To add a door to the house, we can overlay a brown <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span>,
aligning it with the center bottom of the rest of the house.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">door</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">15</span><span class="hspace"> </span><span class="RktVal">25</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"brown"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%2Falign%29%29" class="RktValLink" data-pltdoc="x">overlay/align</a></span><span class="hspace"> </span><span class="RktVal">"center"</span><span class="hspace"> </span><span class="RktVal">"bottom"</span><span class="hspace"> </span><span class="RktSym">door</span><span class="hspace"> </span><span class="RktSym">victorian</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_5.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>We can use a similar technique to put a doorknob on the door, but instead of
overlaying the doorknob on the entire house, we can overlay it just on the
door.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">door-with-knob</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%2Falign%29%29" class="RktValLink" data-pltdoc="x">overlay/align</a></span><span class="hspace"> </span><span class="RktVal">"right"</span><span class="hspace"> </span><span class="RktVal">"center"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktVal">3</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"yellow"</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktSym">door</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%2Falign%29%29" class="RktValLink" data-pltdoc="x">overlay/align</a></span><span class="hspace"> </span><span class="RktVal">"center"</span><span class="hspace"> </span><span class="RktVal">"bottom"</span><span class="hspace"> </span><span class="RktSym">door-with-knob</span><span class="hspace"> </span><span class="RktSym">victorian</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_6.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><h5 x-source-module="(lib "teachpack/teachpack.scrbl")" x-part-tag=""Rotating_and_Overlaying__A_Rotary_Phone_Dial"">2.2.2<tt> </tt><a name="(part._.Rotating_and_.Overlaying__.A_.Rotary_.Phone_.Dial)"></a>Rotating and Overlaying: A Rotary Phone Dial</h5><p>A rotary phone dial can be built by from a black disk and 10 little white ones
by placing the white disks, one at a time, at the top of the black disk and
then rotating the entire black disk. To get started, lets define a function
to make little white disks with numbers on them:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">a-number</span><span class="hspace"> </span><span class="RktSym">digit</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%29%29" class="RktValLink" data-pltdoc="x">overlay</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._text%29%29" class="RktValLink" data-pltdoc="x">text</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._number-%7E3estring%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">number->string</a></span><span class="hspace"> </span><span class="RktSym">digit</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktVal">12</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktVal">10</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"white"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr></table></blockquote><p>We’ll use <span class="RktSym">place-and-turn</span> to put the numbers onto the disk:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span><span class="hspace"> </span><span class="RktSym">digit</span><span class="hspace"> </span><span class="RktSym">dial</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">30</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%2Falign%29%29" class="RktValLink" data-pltdoc="x">overlay/align</a></span><span class="hspace"> </span><span class="RktVal">"center"</span><span class="hspace"> </span><span class="RktVal">"top"</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">a-number</span><span class="hspace"> </span><span class="RktSym">digit</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktSym">dial</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr></table></blockquote><p>For example:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">0</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_7.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">8</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">9</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">0</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_8.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>We can write a single function to put all of the numbers together into the dial:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-all-numbers</span><span class="hspace"> </span><span class="RktSym">dial</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">1</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">2</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">3</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">4</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">5</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">6</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">7</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">8</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">9</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">0</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktSym">dial</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">place-all-numbers</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_9.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>That definition is long and tedious to write. We can shorten it using
<span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=pairs.html%23%2528def._%2528%2528lib._racket%252Fprivate%252Flist..rkt%2529._foldl%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">foldl</a></span>:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-all-numbers</span><span class="hspace"> </span><span class="RktSym">dial</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=pairs.html%23%2528def._%2528%2528lib._racket%252Fprivate%252Flist..rkt%2529._foldl%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">foldl</a></span><span class="hspace"> </span><span class="RktSym">place-and-turn</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktSym">dial</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">'</span><span class="RktVal">(</span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">9</span><span class="hspace"> </span><span class="RktVal">8</span><span class="hspace"> </span><span class="RktVal">7</span><span class="hspace"> </span><span class="RktVal">6</span><span class="hspace"> </span><span class="RktVal">5</span><span class="hspace"> </span><span class="RktVal">4</span><span class="hspace"> </span><span class="RktVal">3</span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">1</span><span class="RktVal">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">place-all-numbers</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_10.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>To finish off the dial, we need to rotate it a little bit to its natural
position and put a white disk in the center of it. Here’s the inner dial:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">inner-dial</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%29%29" class="RktValLink" data-pltdoc="x">overlay</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._text%29%29" class="RktValLink" data-pltdoc="x">text</a></span><span class="hspace"> </span><span class="RktVal">"555-1234"</span><span class="hspace"> </span><span class="RktVal">9</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"white"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr></table></blockquote><p>and here’s a function to build the entire rotary dial, with an argument
that scales the dial:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">rotary-dial</span><span class="hspace"> </span><span class="RktSym">f</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._scale%29%29" class="RktValLink" data-pltdoc="x">scale</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktSym">f</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%29%29" class="RktValLink" data-pltdoc="x">overlay</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktSym">inner-dial</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal"><span class="nobreak">-9</span>0</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-all-numbers</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">rotary-dial</span><span class="hspace"> </span><span class="RktVal">2</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_11.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>Looking at the image, it feels like the numbers are too close to the edge of
the dial. So we can adjust the <span class="RktSym">place-and-turn</span> function to put a little
black rectangle on top of each number. The rectangle is invisible because it
ends up on top of the black dial, but it does serve to push the digits down
a little.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">place-and-turn</span><span class="hspace"> </span><span class="RktSym">digit</span><span class="hspace"> </span><span class="RktSym">dial</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">30</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%2Falign%29%29" class="RktValLink" data-pltdoc="x">overlay/align</a></span><span class="hspace"> </span><span class="RktVal">"center"</span><span class="hspace"> </span><span class="RktVal">"top"</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">5</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">a-number</span><span class="hspace"> </span><span class="RktSym">digit</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktSym">dial</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">rotary-dial</span><span class="hspace"> </span><span class="RktVal">2</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_12.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><h5 x-source-module="(lib "teachpack/teachpack.scrbl")" x-part-tag=""Alpha_Blending"">2.2.3<tt> </tt><a name="(part._.Alpha_.Blending)"></a>Alpha Blending</h5><p>With shapes that have opaque colors like <span class="RktVal">"red"</span> and <span class="RktVal">"blue"</span>,
overlaying one on top completely blots out the one one the bottom.</p><p>For example, the red rectangle here completely covers the blue one.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%29%29" class="RktValLink" data-pltdoc="x">overlay</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">127</span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">127</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">127</span><span class="hspace"> </span><span class="RktVal">127</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_13.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>But <a href="2htdpimage.html" class="RktModLink" data-pltdoc="x"><span class="RktSym">2htdp/image</span></a> also supports colors that are not
completely opaque, via the (optional) fourth argument to <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span>.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%29%29" class="RktValLink" data-pltdoc="x">overlay</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">127</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">127</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_14.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>In this example, the color <span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="stt"> </span><span class="RktVal">0</span><span class="stt"> </span><span class="RktVal">255</span><span class="stt"> </span><span class="RktVal">0</span><span class="stt"> </span><span class="RktVal">127</span><span class="RktPn">)</span> looks just
like the color <span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="stt"> </span><span class="RktVal">127</span><span class="stt"> </span><span class="RktVal">255</span><span class="stt"> </span><span class="RktVal">127</span><span class="RktPn">)</span> when the background
is white. Since white is <span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="stt"> </span><span class="RktVal">255</span><span class="stt"> </span><span class="RktVal">255</span><span class="stt"> </span><span class="RktVal">255</span><span class="RktPn">)</span>, we end up
getting <span class="RktVal">1/2</span> of <span class="RktVal">255</span> for the red and blue components
and <span class="RktVal">255</span> for the green one.</p><p>We can also use alpha blending to make some interesting effects.
For example, the function <span class="RktSym">spin-alot</span> takes an image argument
and repeatedly places it on top of itself, rotating it each time by
<span class="RktVal">1</span> degree.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">spin-alot</span><span class="hspace"> </span><span class="RktSym">t</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">local</span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">spin-more</span><span class="hspace"> </span><span class="RktSym">i</span><span class="hspace"> </span><span class="RktSym">θ</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._cond%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">cond</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._%7E3d%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">=</a></span><span class="hspace"> </span><span class="RktSym">θ</span><span class="hspace"> </span><span class="RktVal">360</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktSym">i</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._else%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">else</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">spin-more</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%29%29" class="RktValLink" data-pltdoc="x">overlay</a></span><span class="hspace"> </span><span class="RktSym">i</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktSym">θ</span><span class="hspace"> </span><span class="RktSym">t</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._%252B%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">+</a></span><span class="hspace"> </span><span class="RktSym">θ</span><span class="hspace"> </span><span class="RktVal">1</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">spin-more</span><span class="hspace"> </span><span class="RktSym">t</span><span class="hspace"> </span><span class="RktVal">0</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr></table></blockquote><p>Here are some uses of <span class="RktSym">spin-alot</span>, first showing the original
shape and then the spun shape.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">12</span><span class="hspace"> </span><span class="RktVal">120</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_15.svg" type="image/svg+xml"></object></p></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">spin-alot</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">12</span><span class="hspace"> </span><span class="RktVal">120</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">1</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_16.svg" type="image/svg+xml"></object></p></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">120</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_17.svg" type="image/svg+xml"></object></p></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">spin-alot</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">120</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">1</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_18.svg" type="image/svg+xml"></object></p></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._isosceles-triangle%29%29" class="RktValLink" data-pltdoc="x">isosceles-triangle</a></span><span class="hspace"> </span><span class="RktVal">120</span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_19.svg" type="image/svg+xml"></object></p></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">spin-alot</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._isosceles-triangle%29%29" class="RktValLink" data-pltdoc="x">isosceles-triangle</a></span><span class="hspace"> </span><span class="RktVal">120</span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">1</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_20.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><h5 x-source-module="(lib "teachpack/teachpack.scrbl")" x-part-tag=""Recursive_Image_Functions"">2.2.4<tt> </tt><a name="(part._.Recursive_.Image_.Functions)"></a>Recursive Image Functions</h5><p>It is also possible to make interesting looking shapes with little recursive functions.
For example, this function repeatedly puts white circles that grow, evenly spaced around
the edge of the given shape:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">swoosh</span><span class="hspace"> </span><span class="RktSym">image</span><span class="hspace"> </span><span class="RktSym">s</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._cond%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">cond</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._zero%7E3f%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">zero?</a></span><span class="hspace"> </span><span class="RktSym">s</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktSym">image</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._else%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">else</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">swoosh</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%2Falign%29%29" class="RktValLink" data-pltdoc="x">overlay/align</a></span><span class="hspace"> </span><span class="RktVal">"center"</span><span class="hspace"> </span><span class="RktVal">"top"</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._%252A%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">*</a></span><span class="hspace"> </span><span class="RktSym">s</span><span class="hspace"> </span><span class="RktVal">1/2</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"white"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">4</span><span class="hspace"> </span><span class="RktSym">image</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._-%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x"><span class="nobreak">-</span></a></span><span class="hspace"> </span><span class="RktSym">s</span><span class="hspace"> </span><span class="RktVal">1</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr></table></blockquote><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">swoosh</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktVal">94</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_21.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>More conventional fractal shapes can also be written using the image
library, e.g.:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">sierpinski-carpet</span><span class="hspace"> </span><span class="RktSym">n</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._cond%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">cond</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._zero%7E3f%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">zero?</a></span><span class="hspace"> </span><span class="RktSym">n</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._else%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">else</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">local</span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">sierpinski-carpet</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._-%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x"><span class="nobreak">-</span></a></span><span class="hspace"> </span><span class="RktSym">n</span><span class="hspace"> </span><span class="RktVal">1</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">i</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-width%29%29" class="RktValLink" data-pltdoc="x">image-width</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"white"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">c</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">i</span><span class="hspace"> </span><span class="RktSym">c</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">c</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr></table></blockquote><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">sierpinski-carpet</span><span class="hspace"> </span><span class="RktVal">5</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_22.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>We can adjust the carpet to add a little color:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">colored-carpet</span><span class="hspace"> </span><span class="RktSym">colors</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._cond%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">cond</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._empty%7E3f%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">empty?</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._rest%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">rest</a></span><span class="hspace"> </span><span class="RktSym">colors</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._first%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">first</a></span><span class="hspace"> </span><span class="RktSym">colors</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._else%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">else</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">local</span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">colored-carpet</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._rest%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">rest</a></span><span class="hspace"> </span><span class="RktSym">colors</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">i</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-width%29%29" class="RktValLink" data-pltdoc="x">image-width</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._car%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">car</a></span><span class="hspace"> </span><span class="RktSym">colors</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">c</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">i</span><span class="hspace"> </span><span class="RktSym">c</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">c</span><span class="hspace"> </span><span class="RktSym">c</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr></table></blockquote><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">colored-carpet</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._list%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">list</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">51</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">102</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">153</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">204</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">204</span><span class="hspace"> </span><span class="RktVal">0</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_23.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>The Koch curve can be constructed by simply placing four
curves next to each other, rotated appropriately:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">koch-curve</span><span class="hspace"> </span><span class="RktSym">n</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._cond%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">cond</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._zero%7E3f%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">zero?</a></span><span class="hspace"> </span><span class="RktSym">n</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._else%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">else</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">local</span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">smaller</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">koch-curve</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._-%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x"><span class="nobreak">-</span></a></span><span class="hspace"> </span><span class="RktSym">n</span><span class="hspace"> </span><span class="RktVal">1</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%2Falign%29%29" class="RktValLink" data-pltdoc="x">beside/align</a></span><span class="hspace"> </span><span class="RktVal">"bottom"</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktSym">smaller</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktSym">smaller</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal"><span class="nobreak">-6</span>0</span><span class="hspace"> </span><span class="RktSym">smaller</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktSym">smaller</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">koch-curve</span><span class="hspace"> </span><span class="RktVal">5</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_24.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>And then put three of them together to form the Koch snowflake.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">60</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">koch-curve</span><span class="hspace"> </span><span class="RktVal">5</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal"><span class="nobreak">-6</span>0</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">koch-curve</span><span class="hspace"> </span><span class="RktVal">5</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._flip-vertical%29%29" class="RktValLink" data-pltdoc="x">flip-vertical</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">koch-curve</span><span class="hspace"> </span><span class="RktVal">5</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_25.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><h5 x-source-module="(lib "teachpack/teachpack.scrbl")" x-part-tag=""rotate-center"">2.2.5<tt> </tt><a name="(part._rotate-center)"></a>Rotating and Image Centers</h5><p>When rotating an image, some times the image looks best when it
rotates around a point that is not the center of the image. The
<span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span> function, however, just rotates the image as
a whole, effectively rotating it around the center of its
bounding box.</p><p><div class="SIntrapara">For example, imagine a game where the hero is represented
as a triangle:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktSym">α</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._triangle%29%29" class="RktValLink" data-pltdoc="x">triangle</a></span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktSym">α</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_26.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote></div><div class="SIntrapara">rotating the hero at the prompt looks reasonable:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">10</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_27.svg" type="image/svg+xml"></object></p></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_28.svg" type="image/svg+xml"></object></p></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_29.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote></div><div class="SIntrapara">but if the hero has to appear to spin in place, then it will not look
right, as you can kind of see if we use α-blending to represent
old positions of the hero:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%29%29" class="RktValLink" data-pltdoc="x">overlay</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">10</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">125</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">100</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">75</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">50</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">50</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktVal">25</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_30.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote></div><div class="SIntrapara">What we’d really want is for the hero to appear to rotate around
the centroid of the triangle. To achieve this effect, we can put
the hero onto a transparent circle such that the center of the whole
image lines up with the centroid of the triangle:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero-on-blank</span><span class="hspace"> </span><span class="RktSym">α</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">the-hero</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero</span><span class="hspace"> </span><span class="RktSym">α</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">w</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-width%29%29" class="RktValLink" data-pltdoc="x">image-width</a></span><span class="hspace"> </span><span class="RktSym">the-hero</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">h</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-height%29%29" class="RktValLink" data-pltdoc="x">image-height</a></span><span class="hspace"> </span><span class="RktSym">the-hero</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">d</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._max%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">max</a></span><span class="hspace"> </span><span class="RktSym">w</span><span class="hspace"> </span><span class="RktSym">h</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">dx</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._%252F%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">/</a></span><span class="hspace"> </span><span class="RktSym">w</span><span class="hspace"> </span><span class="RktVal">2</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">centroid x offset</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">dy</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._%252A%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">*</a></span><span class="hspace"> </span><span class="RktVal">2/3</span><span class="hspace"> </span><span class="RktSym">h</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">centroid y offset</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">blank</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._circle%29%29" class="RktValLink" data-pltdoc="x">circle</a></span><span class="hspace"> </span><span class="RktSym">d</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._color%29%29" class="RktValLink" data-pltdoc="x">color</a></span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">255</span><span class="hspace"> </span><span class="RktVal">0</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._place-image%2Falign%29%29" class="RktValLink" data-pltdoc="x">place-image/align</a></span><span class="hspace"> </span><span class="RktSym">the-hero</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._-%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x"><span class="nobreak">-</span></a></span><span class="hspace"> </span><span class="RktSym">d</span><span class="hspace"> </span><span class="RktSym">dx</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._-%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x"><span class="nobreak">-</span></a></span><span class="hspace"> </span><span class="RktSym">d</span><span class="hspace"> </span><span class="RktSym">dy</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktVal">"left"</span><span class="hspace"> </span><span class="RktVal">"top"</span><span class="hspace"> </span><span class="RktSym">blank</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr></table></blockquote></div><div class="SIntrapara">and now the rotating hero looks reasonable:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%29%29" class="RktValLink" data-pltdoc="x">overlay</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero-on-blank</span><span class="hspace"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">10</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero-on-blank</span><span class="hspace"> </span><span class="RktVal">125</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero-on-blank</span><span class="hspace"> </span><span class="RktVal">100</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">30</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero-on-blank</span><span class="hspace"> </span><span class="RktVal">75</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">40</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero-on-blank</span><span class="hspace"> </span><span class="RktVal">50</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rotate%29%29" class="RktValLink" data-pltdoc="x">rotate</a></span><span class="hspace"> </span><span class="RktVal">50</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">hero-on-blank</span><span class="hspace"> </span><span class="RktVal">25</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_31.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote></div></p><h5 x-source-module="(lib "teachpack/teachpack.scrbl")" x-part-tag=""Image_Interoperability"">2.2.6<tt> </tt><a name="(part._.Image_.Interoperability)"></a>Image Interoperability</h5><p><div class="SIntrapara">Images can connect to other libraries. Specifically:
</div><div class="SIntrapara"><ul><li><p>images are <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=gui&rel=snip_.html&version=6.1" class="RktValLink Sq" data-pltdoc="x">snip%</a></span> objects, so can
be <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=gui&rel=text_.html%23%2528meth._%2528%2528%2528lib._mred%252Fmain..rkt%2529._text%7E25%2529._insert%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">insert</a></span>ed into <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=gui&rel=text_.html&version=6.1" class="RktValLink Sq" data-pltdoc="x">text%</a></span>
and <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=gui&rel=pasteboard_.html&version=6.1" class="RktValLink Sq" data-pltdoc="x">pasteboard%</a></span> objects</p></li><li><p>they implement the <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=file&rel=convertible.html%23%2528def._%2528%2528lib._file%252Fconvertible..rkt%2529._convert%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">convert</a></span> protocol for <span class="RktVal">'</span><span class="RktVal">png-bytes</span></p></li><li><p>they implement the <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=pict&rel=Conversion_to_Picts.html%23%2528def._%2528%2528lib._pict%252Fconvert..rkt%2529._pict-convert%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">pict-convert</a></span> protocol, and</p></li><li><p>there is a low-level interface for drawing directly into
a <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=draw&rel=dc___.html&version=6.1" class="RktValLink Sq" data-pltdoc="x">dc<%></a></span> object: <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=mrlib&rel=Image_Core.html%23%2528def._%2528%2528lib._mrlib%252Fimage-core..rkt%2529._render-image%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">render-image</a></span>.</p></li></ul></div></p><h5 x-source-module="(lib "teachpack/teachpack.scrbl")" x-part-tag=""nitty-gritty"">2.2.7<tt> </tt><a name="(part._nitty-gritty)"></a>The Nitty Gritty of Pixels, Pens, and Lines</h5><p>The image library treats coordinates as if they are in the upper-left corner
of each pixel, and infinitesimally small (unlike pixels which have some area).</p><p>Thus, when drawing a solid <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span> of whose side-length is 10, the image library
colors in all of the pixels enclosed by the <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span> starting at the upper
left corner of (0,0) and going down to the upper left corner of (10,10),
so the pixel whose upper left at (9,9) is colored in, but the pixel
at (10,10) is not. All told, 100 pixels get colored in, just as expected for
a <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span> with a side length of 10.</p><p>When drawing lines, however, things get a bit more complex. Specifically,
imagine drawing the outline of that rectangle. Since the border is
between the pixels, there really isn’t a natural pixel to draw to indicate
the border. Accordingly, when drawing an outline <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span> (without a
<span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._pen%29%29" class="RktValLink" data-pltdoc="x">pen</a></span> specification, but just a color as the last argument),
the image library uses a pen whose width is 1 pixel, but draws a line
centered at the point (0.5,0.5) that goes down and around to the point (10.5,10.5).
This means that the outline slightly exceeds the bounding box of the shape.
Specifically, the upper and left-hand lines around the square are within
the bounding box, but the lower and right-hand lines are just outside.</p><p>This kind of rectangle is useful when putting rectangles next to each other
and avoiding extra thick lines on the interior. For example, consider
building a grid like this:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">s1</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._square%29%29" class="RktValLink" data-pltdoc="x">square</a></span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktVal">'</span><span class="RktVal">outline</span><span class="hspace"> </span><span class="RktVal">'</span><span class="RktVal">black</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">r1</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktSym">s1</span><span class="hspace"> </span><span class="RktSym">s1</span><span class="hspace"> </span><span class="RktSym">s1</span><span class="hspace"> </span><span class="RktSym">s1</span><span class="hspace"> </span><span class="RktSym">s1</span><span class="hspace"> </span><span class="RktSym">s1</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span><span class="hspace"> </span><span class="RktSym">r1</span><span class="hspace"> </span><span class="RktSym">r1</span><span class="hspace"> </span><span class="RktSym">r1</span><span class="hspace"> </span><span class="RktSym">r1</span><span class="hspace"> </span><span class="RktSym">r1</span><span class="hspace"> </span><span class="RktSym">r1</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_32.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>The reason interior lines in this grid are the same thickness as the lines around the edge
is because the rectangles overlap with each other.
That is, the upper-left rectangle’s right edge is right on top of the
next rectangle’s left edge.</p><p>The special case of adding 0.5 to each coordinate when drawing the square
applies to all outline polygon-based shapes that just pass color,
but does not apply when a <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._pen%29%29" class="RktValLink" data-pltdoc="x">pen</a></span>
is passed as the last argument to create the shape.
For example, if using a pen of thickness 2 to draw a rectangle, we get a
shape that has a border drawing the row of pixels just inside and just outside
the shape. One might imagine that a pen of thickness 1 would draw an outline around the shape with
a 1 pixel thick line, but this would require 1/2 of each pixel to be illuminated, something
that is not possible. Instead, the same pixels are lit up as with the 2 pixel wide pen, but
with only 1/2 of the intensity of the color. So a 1 pixel wide black <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._pen%29%29" class="RktValLink" data-pltdoc="x">pen</a></span> object draws
a 2 pixel wide outline, but in gray.</p><p><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">p1</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._make-pen%29%29" class="RktValLink" data-pltdoc="x">make-pen</a></span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"round"</span><span class="hspace"> </span><span class="RktVal">"round"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr></table></blockquote></div><div class="SIntrapara"><blockquote class="SCodeFlow"><p><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktVal">"outline"</span><span class="hspace"> </span><span class="RktSym">p1</span><span class="RktPn">)</span></p></blockquote></div><div class="SIntrapara"><span class="RktRes"><object data="pict_33.svg" type="image/svg+xml"></object></span></div></p><p>When combining pens and cropping, we can make a rectangle that has a line that is one pixel
wide, but where the line is drawn entirely within the rectangle. This rectangle has a two-pixel wide
black pen, but we can crop out the outer portion of the pen.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">p2</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._make-pen%29%29" class="RktValLink" data-pltdoc="x">make-pen</a></span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"round"</span><span class="hspace"> </span><span class="RktVal">"round"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">s2</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._crop%29%29" class="RktValLink" data-pltdoc="x">crop</a></span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktVal">20</span><span class="hspace"> </span><span class="RktVal">"outline"</span><span class="hspace"> </span><span class="RktSym">p2</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktSym">s2</span></td></tr><tr><td><p><object data="pict_34.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>Using that we can build a grid now too, but this grid has doubled lines on the
interior.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528form._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">r2</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._beside%29%29" class="RktValLink" data-pltdoc="x">beside</a></span><span class="hspace"> </span><span class="RktSym">s2</span><span class="hspace"> </span><span class="RktSym">s2</span><span class="hspace"> </span><span class="RktSym">s2</span><span class="hspace"> </span><span class="RktSym">s2</span><span class="hspace"> </span><span class="RktSym">s2</span><span class="hspace"> </span><span class="RktSym">s2</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td></td></tr></table></td></tr><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._above%29%29" class="RktValLink" data-pltdoc="x">above</a></span><span class="hspace"> </span><span class="RktSym">r2</span><span class="hspace"> </span><span class="RktSym">r2</span><span class="hspace"> </span><span class="RktSym">r2</span><span class="hspace"> </span><span class="RktSym">r2</span><span class="hspace"> </span><span class="RktSym">r2</span><span class="hspace"> </span><span class="RktSym">r2</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_35.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote><p>While this kind of rectangle is not useful for building grids, it
is important to be able to build rectangles whose drawing does not
exceed its bounding box. Specifically, this kind of drawing is used
by <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._frame%29%29" class="RktValLink" data-pltdoc="x">frame</a></span> and <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._empty-scene%29%29" class="RktValLink" data-pltdoc="x">empty-scene</a></span> so that the extra drawn pixels
are not lost if the image is later clipped to its bounding box.</p><p>When using <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-~3ecolor-list%29%29" class="RktValLink" data-pltdoc="x">image->color-list</a></span> with outline shapes, the results
can be surprising for the same reasons. For example, a
2x2 black, outline rectangle consists of nine black pixels, as discussed above,
but since <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-~3ecolor-list%29%29" class="RktValLink" data-pltdoc="x">image->color-list</a></span> only returns the pixels that are
within the bounding box, we see only three black pixels and one white one.</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-~3ecolor-list%29%29" class="RktValLink" data-pltdoc="x">image->color-list</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">"outline"</span><span class="hspace"> </span><span class="RktVal">"black"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><table cellspacing="0" cellpadding="0"><tr><td><p><span class="RktRes">(list</span></p></td></tr><tr><td><p><span class="RktRes"></span><span class="hspace"> </span><span class="RktRes">(color 0 0 0 255)</span></p></td></tr><tr><td><p><span class="RktRes"></span><span class="hspace"> </span><span class="RktRes">(color 0 0 0 255)</span></p></td></tr><tr><td><p><span class="RktRes"></span><span class="hspace"> </span><span class="RktRes">(color 0 0 0 255)</span></p></td></tr><tr><td><p><span class="RktRes"></span><span class="hspace"> </span><span class="RktRes">(color 255 255 255 0))</span></p></td></tr></table></td></tr></table></blockquote><p>The black pixels are (most of) the upper and left edge of the outline shape,
and the one white pixel is the pixel in the middle of the shape.</p><h5 x-source-module="(lib "teachpack/teachpack.scrbl")" x-part-tag=""nitty-gritty-alpha"">2.2.8<tt> </tt><a name="(part._nitty-gritty-alpha)"></a>The Nitty Gritty of Alpha Blending</h5><p>Alpha blending can cause imprecision in color comparisons resulting in
shapes that appear <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._equal%7E3f%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">equal?</a></span> even though they were created with
different colors. This section explains how that happens.</p><p><div class="SIntrapara">To start, consider the color <span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._make-color%29%29" class="RktValLink" data-pltdoc="x">make-color</a></span><span class="stt"> </span><span class="RktVal">1</span><span class="stt"> </span><span class="RktVal">1</span><span class="stt"> </span><span class="RktVal">1</span><span class="stt"> </span><span class="RktVal">50</span><span class="RktPn">)</span>.
This color is nearly the darkest shade of black, but with lots of transparency,
to it renders a light gray color on a white background, e.g.:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._make-color%29%29" class="RktValLink" data-pltdoc="x">make-color</a></span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">50</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><p><object data="pict_36.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote></div><div class="SIntrapara">If the background had been green, the same rectangle would look like a darker shade of green:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._overlay%29%29" class="RktValLink" data-pltdoc="x">overlay</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._make-color%29%29" class="RktValLink" data-pltdoc="x">make-color</a></span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">50</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">200</span><span class="hspace"> </span><span class="RktVal">200</span><span class="hspace"> </span><span class="RktVal">"solid"</span><span class="hspace"> </span><span class="RktVal">"green"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><object data="pict_37.svg" type="image/svg+xml"></object></p></td></tr></table></blockquote></div></p><p><div class="SIntrapara">Surprisingly, this shape is equal to one that (apparently) has a different
color in it:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._equal%7E3f%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">equal?</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">'</span><span class="RktVal">solid</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._make-color%29%29" class="RktValLink" data-pltdoc="x">make-color</a></span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">50</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">'</span><span class="RktVal">solid</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._make-color%29%29" class="RktValLink" data-pltdoc="x">make-color</a></span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">50</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><span class="RktRes">#t</span></p></td></tr></table></blockquote></div><div class="SIntrapara">To understand why, we must look more carefully at how alpha blending
and image equality work. Image equality’s definition is straightforward: two images
are equality if they are both drawn the same. That is, image equality
is defined by simply drawing the two shapes on a white background and
then comparing all of the pixels for the two drawings
(it is implemented more efficiently in some cases, however).</div></p><p><div class="SIntrapara">So, for those shapes to be equal, they must be drawn with the same colors.
To see what colors were actually drawn, we can use <span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-~3ecolor-list%29%29" class="RktValLink" data-pltdoc="x">image->color-list</a></span>.
Since these images use the same color in every pixel, we can examine just the first one:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._first%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">first</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-~3ecolor-list%29%29" class="RktValLink" data-pltdoc="x">image->color-list</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">'</span><span class="RktVal">solid</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._make-color%29%29" class="RktValLink" data-pltdoc="x">make-color</a></span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">1</span><span class="hspace"> </span><span class="RktVal">50</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><span class="RktRes">(color 0 0 0 50)</span></p></td></tr><tr><td><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="stt">> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._first%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">first</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._image-~3ecolor-list%29%29" class="RktValLink" data-pltdoc="x">image->color-list</a></span></td></tr><tr><td><span class="hspace"> </span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._rectangle%29%29" class="RktValLink" data-pltdoc="x">rectangle</a></span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">100</span><span class="hspace"> </span><span class="RktVal">'</span><span class="RktVal">solid</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="2htdpimage.html#%28def._%28%28lib._2htdp%2Fimage..rkt%29._make-color%29%29" class="RktValLink" data-pltdoc="x">make-color</a></span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">2</span><span class="hspace"> </span><span class="RktVal">50</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></td></tr><tr><td><p><span class="RktRes">(color 0 0 0 50)</span></p></td></tr></table></blockquote></div><div class="SIntrapara">As expected from the <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._equal%7E3f%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">equal?</a></span> test, the two colors are the same, but
why should they be the same? This is where a subtle aspect of alpha blending
and drawing comes up. In general, alpha blending works by taking the color
of any shapes below the one being drawn and then combining that color with
the new color. The precise amount of the combination is controlled by the alpha value.
So, if a shape has an alpha value of <span class="RktSym">α</span>, then the drawing library
multiplies the new shapes color by <span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._%252F%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">/</a></span><span class="stt"> </span><span class="RktSym">α</span><span class="stt"> </span><span class="RktVal">255</span><span class="RktPn">)</span> and the existing shape’s
color by <span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._-%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x"><span class="nobreak">-</span></a></span><span class="stt"> </span><span class="RktVal">1</span><span class="stt"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=htdp-langs&rel=beginner.html%23%2528def._htdp-beginner._%2528%2528lib._lang%252Fhtdp-beginner..rkt%2529._%252F%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">/</a></span><span class="stt"> </span><span class="RktSym">α</span><span class="stt"> </span><span class="RktVal">255</span><span class="RktPn">)</span><span class="RktPn">)</span> and then adds the results to get the final color.
(It does this for each of the red, green, and blue components separately.)</div></p><p>Going back to the two example rectangles,
the drawing library multiplies <span class="RktVal">50/255</span><span class="RktMeta"></span> by <span class="RktVal">1</span> for the first
shape and multiplies <span class="RktVal">50/255</span><span class="RktMeta"></span> by <span class="RktVal">2</span> for the second shape (since they
are both drawn on a white background). Then rounds them to integers, which
results in <span class="RktVal">0</span> for both colors, making the images the same.</p><div class="navsetbottom"><span class="navleft"><form class="searchform"><input class="searchbox" style="color: #888;" type="text" value="...search manuals..." title="Enter a search string to search the manuals" onkeypress="return DoSearchKey(event, this, "6.1", "../");" onfocus="this.style.color="black"; this.style.textAlign="left"; if (this.value == "...search manuals...") this.value="";" onblur="if (this.value.match(/^ *$/)) { this.style.color="#888"; this.style.textAlign="center"; this.value="...search manuals..."; }"/></form> <a href="../index.html" title="up to the documentation top" data-pltdoc="x" onclick="return GotoPLTRoot("6.1");">top</a></span><span class="navright"> <a href="2htdpbatch-io.html" title="backward to "2.1 Batch Input/Output: "batch-io.rkt""" data-pltdoc="x">← prev</a> <a href="2htdp2htdp.html" title="up to "2 HtDP/2e Teachpacks"" data-pltdoc="x">up</a> <a href="2htdpimage.html" title="forward to "2.3 Images: "image.rkt""" data-pltdoc="x">next →</a></span> </div></div></div><div id="contextindicator"> </div></body></html>
|