suzanne.soy/racket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image docs fixed

Browse Source 
svn: r3749
This commit is contained in:
Matthias Felleisen 2006-07-18 14:10:47 +00:00
parent 7a44d396d1
commit 86d08f4197
1 changed files with 116 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
collects/teachpack/htdp/Docs/image.thtml
View File

@ -1,98 +1,160 @@
{ (define LIBNAME "Images")
(include "head.tinc") }
This teachpack provides primitives for constructing and
manipulating images.
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.
These functions create basic shapes. The mode can be either
<code>'solid</code> or <code>"solid"</code>, meaning the
shape is filled in, or <code>'outline</code> or
<code>"outline"</code>, meaning the shape is hollow. Image
colors can be either symbols (like <code>'blue</code>),
strings (like <code>"blue"</code>), or color structs (like
<code>(make-color 0 0 255)</code>) -- see below for more
information about color structs.
Data definition:
<pre>
<code>
;; <em>Mode</em> is one of the following two symbols or strings:
;; -- 'solid
;; -- 'outline
;; -- "solid"
;; -- "outline"
</code>
</pre>
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.
Data definition:
<pre>
<code>
;; <em>Color</em> is one of:
;; -- a color symbol, e.g., 'blue
;; -- a color string, e.g., "blue"
;; -- a color struct, e.g., (make-color 0 0 255), which also denotes blue.
</code>
</pre>
Interpretation: <code>Color</code> arguments are used to paint the shapes
or their outlines. See below for more information about color structs.
The following predicate precisely specifies what a valid image color is:
<menu>
<li><code>{(idx rectangle)}</code> : int int mode image-color -> image <br>
<li><code>{(idx image-color?)}</code> : anything -> boolean <br>
to determine if the input is a valid image color
</menu>
The following functions create basic shapes (<code>Image</code>):
<menu>
<li><code>{(idx rectangle)}</code> : Int Int Mode Color -> Image <br>
to create a rectangle using the given width, height, mode, and color
<li><code>{(idx circle)}</code> : int mode image-color -> image <br>
<li><code>{(idx circle)}</code> : Int Mode Color -> Image<br>
to create a circle using the given radius, mode, and color
<li><code>{(idx ellipse)}</code> : int int mode image-color -> image <br>
<li><code>{(idx ellipse)}</code> : Int Int Mode Color -> Image <br>
to create an ellipse using the given width, height, and color
<li><code>{(idx triangle)}</code> : int mode iamge-color -> image <br>
<li><code>{(idx triangle)}</code> : Int Mode Color -> Image<br>
to create an upward pointing equilateral triangle using the given edge size and color
<li><code>{(idx line)}</code> : number number image-color -> image <br>
to create an image with a colored line from (0,0) to the
point with the given coordinates
<li><code>{(idx add-line)}</code> : image number number number number image-color -> image <br>
<li><code>{(idx line)}</code> : Int Int Color -> Image <br> to create an
image with a colored line from (0,0) to the point with the given
coordinates
<li><code>{(idx add-line)}</code> : Image Int Int Int Int Color -> Image <br>
to add a line to an existing image, drawn between the two given points
<li><code>{(idx text)}</code> : string size image-color -> image <br>
to create an image of the text in the given string, with the point size, and color specified by the last two arguments
<li><code>{(idx text)}</code> : String Size Color -> Image <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>
These functions build complex images from the basic
shapes. When two images are laid on top of each other, the
are lined up at their <i>pinhole</i>. Most shapes have their
pinholes in the middle. The exceptions are
<code>text</code> and <code>line</code> which have their
pinholes in the top-left corner.
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>{(idx overlay)}</code> : image image image ... -> image <br>
to add the pixels of the second image onto the first image, lining up the pinholes
<li><code>{(idx overlay/xy)}</code> : image int int image -> image <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.
<li><code>{(idx pinhole-x)}</code> : Image -> Int <br>
to determine the x coordinate of the pinhole, measuring from
the left of the image
<li><code>{(idx pinhole-y)}</code> : Image -> Int <br>
to determine the y coordinate of the pinhole, measuring down from
the left of the image
<li><code>{(idx put-pinhole)}</code> : Image Int Int -> Image <br>
to put the pinhole in the location specified by the arguments, counting
from the left and down from the top, respectively.
<li><code>{(idx move-pinhole)}</code> : Image Int Int -> Image <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>
After an image has been overlaid on another, it is possible
to recover the position of overlaid image, using the next
two functions.
The next group of functions build images from images:
<menu>
<li><code>{(idx image-inside?)}</code> : image image -> boolean <br>
to determine whether the pixels of the second image appear in the first
<li><code>{(idx overlay)}</code> : Image Image Image ... -> Image <br>
to add the pixels of the second Image onto the first image. The operation
lines up the images via their pinholes.
<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 jpeg's compression. </p>
<li><code>{(idx overlay/xy)}</code> : Image Int Int Image -> Image <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>
<p> Use png images instead. </p>
For composite images, it is always possible to determine whether one occurs
in the other and where:
<menu>
<li><code>{(idx image-inside?)}</code> : Image Image -> Boolean <br>
to determine whether the pixels of the second image appear in the first.
<li><code>{(idx find-image)}</code> : image image -> posn <br>
<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>{(idx find-image)}</code> : Image Image -> Posn <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>{(idx image-width)}</code> : Image -> Int <br>
to obtain an Image's width in pixels
<li><code>{(idx image-height)}</code> : Image -> Int <br>
to obtain an image's height in pixels
</menu>
The shrink functions trim an image by eliminating extraneous pixels.
<menu>
<li><code>{(idx shrink-tl)}</code> : image number number -> image <br>
<li><code>{(idx shrink-tl)}</code> : Image Int Int -> Image <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>{(idx shrink-tr)}</code> : image number number -> image <br>
<li><code>{(idx shrink-tr)}</code> : Image Int Int -> Image <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>{(idx shrink-bl)}</code> : image number number -> image <br>
<li><code>{(idx shrink-bl)}</code> : Image Int Int -> Image <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>{(idx shrink-br)}</code> : image number number -> image <br>
<li><code>{(idx shrink-br)}</code> : Image Int Int -> Image <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>{(idx shrink)}</code> : image number number number number -> image <br>
<li><code>{(idx shrink)}</code> : Image Int Int Int Int -> Image <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
@ -100,43 +162,9 @@ always saved.
</li>
</menu>
These functions provide information about the image's size.
<menu>
<li><code>{(idx image-width)}</code> : image -> number <br>
to obtain an image's width in pixels
<li><code>{(idx image-height)}</code> : image -> number <br>
to obtain an image's height in pixels
</menu>
This functions provide information and manipulate an image's
pinhole.
<menu>
<li><code>{(idx pinhole-x)}</code> : image -> number <br>
to determine the x coordinate of the pinhole, measuring from
the left of the image
<li><code>{(idx pinhole-y)}</code> : image -> number <br>
to determine the y coordinate of the pinhole, measuring down from
the left of the image
<li><code>{(idx move-pinhole)}</code> : image number number -> image <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.
<li><code>{(idx put-pinhole)}</code> : image number number -> image <br>
to put the pinhole in the location specified by the arguments, counting
from the left and down from the top, respectively.
</menu>
This function precisely specifies what a valid image color is.
<menu>
<li><code>{(idx image-color?)}</code> : anything -> boolean <br>
to determine if the input is a valid image color
</menu>
The next functions separate an image into its consitiuent
colors and combine pixels together to build an image.
The next functions separate an image into its consitiuent colors and
combine pixels together to build an image.
<menu>
<li><code>{(idx image->color-list)}</code> : image -> list-of-color <br>
to convert an image to a list of colors