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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
<html>
<head>
<title>Teachpack : Images</title>
</head>
<body bgcolor="#ffffff" text="#000000"
link="#009900" vlink="#007700" alink="#cc0000">
<a href="index.html">Teachpacks for How to Design Programs</a>
<h1>Images</h1>
<hr> <h3><a name="image.ss">image.ss</a></h3> <!-- DOCNOTE="teach=image.ss" -->
<p>This teachpack provides primitives for constructing and manipulating
images. Basic images are created as outlines or solid shapes. Additional
primitives allow for the composition of images. </p>
<br>Data definition:
<pre>
<code>
;; <em><a name="Mode">Mode</a></em> is one of the following two symbols or strings:
;; -- 'solid
;; -- 'outline
;; -- "solid"
;; -- "outline"
;; Interpretation: <code>'solid</code> is used for creating solid basic
;; shapes; <code>'outline</code> is used for creating outlines of basic
;; shapes. Strings are used in an analogous manner.
</code></pre>
Data definition:
<pre>
<code>
(define-struct color (red blue green))
;; A CS is a structure: (make-color N N N)
;; where N is between 0 and 255.
;; <em><a name="Color">Color</a></em> is one of:
;; -- a color symbol, e.g., 'blue
;; -- a color string, e.g., "blue"
;; -- a CS, e.g., (make-color 0 0 255), which also denotes blue.
;; Interpretation: <code>Color</code> arguments are used to paint the shapes
;; or their outlines. See below for more information about color structs.
</code>
</pre>
The following predicate precisely specifies what a valid image color is:
<menu>
<li><code><a name="image-color?">image-color?</a> : anything -> boolean </code><br>
to determine if the input is a valid image color
</menu>
The first group of functions creates basic shapes (<code>Image</code>):
<menu>
<li><code><a name="rectangle">rectangle</a> : Int Int Mode Color -> Image </code><br>
to create a rectangle using the given width, height, mode, and color
<li><code><a name="circle">circle</a> : Int Mode Color -> Image</code><br>
to create a circle using the given radius, mode, and color
<li><code><a name="ellipse">ellipse</a> : Int Int Mode Color -> Image </code><br>
to create an ellipse using the given width, height, and color
<li><code><a name="triangle">triangle</a> : Int Mode Color -> Image</code><br>
to create an upward pointing equilateral triangle using the given edge size and color
<li><code><a name="line">line</a> : Int Int Color -> Image </code><br> to create an
image with a colored line from (0,0) to the point with the given
coordinates
<li><code><a name="add-line">add-line</a> : Image Int Int Int Int Color -> Image </code><br>
to add a line to an existing image, drawn between the two given points
<li><code><a name="text">text</a> : String Size Color -> Image </code><br>
to create an image of the text in the given string, with the point size,
and color specified by the last two arguments
</menu>
Images have many properties. To understand how functions manipulate and
create images, we need to understand one of these properties immediately:
<em>pinholes</em>. Each image, including primitive shapes, come with a
pinhole. Usually the pinhole is in the center of the shape except for those
created from <code>line</code> and <code>text</code>, which have pinholes
at the top left. When in doubt you can always find out where the pinhole is
and even place it somewhere else:
<menu>
<li><code><a name="pinhole-x">pinhole-x</a></code> : Image -> Int </code><br>
to determine the x coordinate of the pinhole, measuring from
the left of the image
<li><code><a name="pinhole-y">pinhole-y</a> : Image -> Int </code><br>
to determine the y coordinate of the pinhole, measuring down from
the top of the image
<li><code><a name="put-pinhole">put-pinhole</a> : Image Int Int -> Image </code><br>
to put the pinhole in the location specified by the arguments, counting
from the left and down from the top, respectively.
<li><code><a name="move-pinhole">move-pinhole</a> : Image Int Int -> Image </code><br>
to move the pinhole down and to the right (by the specified amounts) of
its current location. Use negative numbers to move it up or to the left.
</menu>
The next group of functions build images from images:
<menu>
<li><code><a name="overlay">overlay</a> : Image Image Image ... -> Image </code><br>
to add the pixels of the second Image onto the first image. The operation
lines up the images via their pinholes.
<li><code><a name="overlay/xy">overlay/xy</a> : Image Int Int Image -> Image </code><br> to
add the pixels of the second image onto the first image. Instead of lining
up on the pinhole, the second image's pinhole is lined up with an offset
from the first image's pinhole. The two coordinates specify how far down
and to the right the offset should be. The pinhole of the resulting image
is the same place as the pinhole in the first image.
</menu>
For composite images, it is always possible to determine whether one occurs
in the other and where:
<menu>
<li><code><a name="image-inside?">image-inside?</a> : Image Image -> Boolean </code><br>
to determine whether the pixels of the second image appear in the first.
<p>Be careful when using this function with jpeg images. If you use an
image-editing program to crop a jpeg image and then save it,
<code>image-inside?</code> will not recognize the cropped image, due to
standard compression applied to JPEG images. </p>
<p>Use PNG images instead whenever possible. </p>
<li><code><a name="find-image">find-image</a></code> : Image Image -> Posn </code><br>
to determine where the pixels of the second image appear in the first, with
respect to the pinhole of the first image.
</menu>
Two more properties of images are useful for image manipulations: their
width and height. The two functions for extracting these properties are:
<menu>
<li><code><a name="image-width">image-width</a> : Image -> Int </code><br>
to obtain an Image's width in pixels
<li><code><a name="image-height">image-height</a> : Image -> Int </code><br>
to obtain an image's height in pixels
</menu>
Data definition:
<pre>
<code>
;; <em>List-of-color</em> is one of:
;; -- empty
;; -- (cons Color List-of-color)
</code>
</pre>
Interpretation: represents a sequence of colors
It is possible to extract an image's colors and pixels and to create images
from a list of colors:
<menu>
<li><code><a name="image->color-list">image->color-list</a> : Image -> List-of-color </code><br>
to convert an image to a list of colors
<li><code><a name="color-list->image">color-list->image</a> : List-of-color Nat Nat Nat Nat -> Image </code><br>
to convert a list of colors to an image with the given
width and height, and pinhole coordinates (the pinhole
coordinates are with respect to the top-left of the image).
</menu>
The shrink functions trim an image by eliminating extraneous pixels.
<menu>
<li><code><a name="shrink-tl">shrink-tl</a> : Image Int Int -> Image </code><br>
to shrink the image, starting from the top-left corner. The
two numbers indicate how many pixels to save.
The pinhole of the resulting image is in the middle of the image.
</li>
<li><code><a name="shrink-tr">shrink-tr</a> : Image Int Int -> Image </code><br>
to shrink the image, starting from the top-right corner. The
two numbers indicate how many pixels to save.
The pinhole of the resulting image is in the middle of the image.
</li>
<li><code><a name="shrink-bl">shrink-bl</a> : Image Int Int -> Image </code><br>
to shrink the image, starting from the bottom-left corner. The
two numbers indicate how many pixels to save.
The pinhole of the resulting image is in the middle of the image.
</li>
<li><code><a name="shrink-br">shrink-br</a> : Image Int Int -> Image </code><br>
to shrink the image, starting from the bottom-right corner. The
two numbers indicate how many pixels to save.
The pinhole of the resulting image is in the middle of the image.
</li>
<li><code><a name="shrink">shrink</a> : Image Int Int Int Int -> Image </code><br>
to shrink an image around its pinhole. The numbers are the
pixels to save to left, above, to the right, and below the
pinhole, respectively. The pixel directly on the pinhole is
always saved.
</li>
</menu>
The last group of functions extracts the consitiuent colors from an image
and combine colors into an image, but the functions provide alpha-channel
information as well. Alpha channels are a measure of transparency; 0
indicates fully opaque and 255 indicates fully transparent.
<menu>
<li><code><a name="image->alpha-color-list">image->alpha-color-list</a> : image -> list-of-alpha-color </code><br>
to convert an image to a list of alpha colors
<li><code><a name="alpha-color-list->image">alpha-color-list->image</a> : list-of-alpha-color int int int int -> image </code><br>
to convert a list of alpha colors to an image with the given
width and height, and pinhole coordinates (the pinhole
coordinates are with respect to the top-left of the image).
<li><code><a name="make-alpha-color">make-alpha-color</a> : int int int int -> color </code><br>
to construct an alpha color
<li><code><a name="alpha-color?">alpha-color?</a> : anything -> boolean </code><br>
to determine if its input is a color
<li><code><a name="alpha-color-alpha">alpha-color-alpha</a> : color -> int </code><br>
to extract the alpha value of a color
<li><code><a name="alpha-color-red">alpha-color-red</a> : color -> int </code><br>
to extract the red component of a color
<li><code><a name="alpha-color-green">alpha-color-green</a> : color -> int </code><br>
to extract the green component of a color
<li><code><a name="alpha-color-blue">alpha-color-blue</a> : color -> int </code><br>
to extract the blue component of a color"
</menu>
<br>
<br>
</body>
</html>
<br>
<br>
</body>
</html>
|
