re-organized docs for world and image
svn: r5192
This commit is contained in:
Matthias Felleisen
parent
8f1abdaf86
commit
36c8deb65c
216
collects/teachpack/htdp/Docs/image-content.tinc
Normal file
216
collects/teachpack/htdp/Docs/image-content.tinc
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<br>Data definition:
|
||||
<pre>
|
||||
<code>
|
||||
;; <em>{(idx Mode)}</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>{(idx Color)}</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>{(idx image-color?)} : 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>{(idx rectangle)} : Int Int Mode Color -> Image </code><br>
|
||||
to create a rectangle using the given width, height, mode, and color
|
||||
|
||||
<li><code>{(idx circle)} : Int Mode Color -> Image</code><br>
|
||||
to create a circle using the given radius, mode, and color
|
||||
|
||||
<li><code>{(idx ellipse)} : Int Int Mode Color -> Image </code><br>
|
||||
to create an ellipse using the given width, height, and color
|
||||
|
||||
<li><code>{(idx triangle)} : Int Mode Color -> Image</code><br>
|
||||
to create an upward pointing equilateral triangle using the given edge size and color
|
||||
|
||||
<li><code>{(idx star)} : Int[>=2] Int[>=1] Int[>=1] Mode Color -> Image</code><br>
|
||||
to create a multi-pointed star; the first number specifies
|
||||
the number of points, the second specifies the radius where
|
||||
the points begin and the third specifies the radius where they end.
|
||||
|
||||
<li><code>{(idx line)} : 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>{(idx add-line)} : 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>{(idx text)} : 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>{(idx pinhole-x)}</code> : Image -> Int </code><br>
|
||||
to determine the x coordinate of the pinhole, measuring from
|
||||
the left of the image
|
||||
|
||||
<li><code>{(idx pinhole-y)} : Image -> Int </code><br>
|
||||
to determine the y coordinate of the pinhole, measuring down from
|
||||
the top of the image
|
||||
|
||||
<li><code>{(idx put-pinhole)} : 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>{(idx move-pinhole)} : 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>{(idx overlay)} : 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>{(idx overlay/xy)} : 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>{(idx image-inside?)} : 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>{(idx find-image)}</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>{(idx image-width)} : Image -> Int </code><br>
|
||||
to obtain an Image's width in pixels
|
||||
<li><code>{(idx image-height)} : 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>{(idx image->color-list)} : Image -> List-of-color </code><br>
|
||||
to convert an image to a list of colors
|
||||
|
||||
<li><code>{(idx color-list->image)} : 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>{(idx shrink-tl)} : 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>{(idx shrink-tr)} : 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>{(idx shrink-bl)} : 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>{(idx shrink-br)} : 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>{(idx shrink)} : 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>{(idx image->alpha-color-list)} : image -> list-of-alpha-color </code><br>
|
||||
to convert an image to a list of alpha colors
|
||||
<li><code>{(idx alpha-color-list->image)} : 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>{(idx make-alpha-color)} : int int int int -> color </code><br>
|
||||
to construct an alpha color
|
||||
<li><code>{(idx alpha-color?)} : anything -> boolean </code><br>
|
||||
to determine if its input is a color
|
||||
<li><code>{(idx alpha-color-alpha)} : color -> int </code><br>
|
||||
to extract the alpha value of a color
|
||||
<li><code>{(idx alpha-color-red)} : color -> int </code><br>
|
||||
to extract the red component of a color
|
||||
<li><code>{(idx alpha-color-green)} : color -> int </code><br>
|
||||
to extract the green component of a color
|
||||
<li><code>{(idx alpha-color-blue)} : color -> int </code><br>
|
||||
to extract the blue component of a color"
|
||||
</menu>
|
||||
|
|
@ -5,223 +5,7 @@
|
|||
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>{(idx Mode)}</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>{(idx Color)}</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>{(idx image-color?)} : 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>{(idx rectangle)} : Int Int Mode Color -> Image </code><br>
|
||||
to create a rectangle using the given width, height, mode, and color
|
||||
|
||||
<li><code>{(idx circle)} : Int Mode Color -> Image</code><br>
|
||||
to create a circle using the given radius, mode, and color
|
||||
|
||||
<li><code>{(idx ellipse)} : Int Int Mode Color -> Image </code><br>
|
||||
to create an ellipse using the given width, height, and color
|
||||
|
||||
<li><code>{(idx triangle)} : Int Mode Color -> Image</code><br>
|
||||
to create an upward pointing equilateral triangle using the given edge size and color
|
||||
|
||||
<li><code>{(idx star)} : Int[>=2] Int[>=1] Int[>=1] Mode Color -> Image</code><br>
|
||||
to create a multi-pointed star; the first number specifies
|
||||
the number of points, the second specifies the radius where
|
||||
the points begin and the third specifies the radius where they end.
|
||||
|
||||
<li><code>{(idx line)} : 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>{(idx add-line)} : 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>{(idx text)} : 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>{(idx pinhole-x)}</code> : Image -> Int </code><br>
|
||||
to determine the x coordinate of the pinhole, measuring from
|
||||
the left of the image
|
||||
|
||||
<li><code>{(idx pinhole-y)} : Image -> Int </code><br>
|
||||
to determine the y coordinate of the pinhole, measuring down from
|
||||
the top of the image
|
||||
|
||||
<li><code>{(idx put-pinhole)} : 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>{(idx move-pinhole)} : 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>{(idx overlay)} : 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>{(idx overlay/xy)} : 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>{(idx image-inside?)} : 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>{(idx find-image)}</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>{(idx image-width)} : Image -> Int </code><br>
|
||||
to obtain an Image's width in pixels
|
||||
<li><code>{(idx image-height)} : 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>{(idx image->color-list)} : Image -> List-of-color </code><br>
|
||||
to convert an image to a list of colors
|
||||
|
||||
<li><code>{(idx color-list->image)} : 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>{(idx shrink-tl)} : 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>{(idx shrink-tr)} : 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>{(idx shrink-bl)} : 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>{(idx shrink-br)} : 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>{(idx shrink)} : 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>{(idx image->alpha-color-list)} : image -> list-of-alpha-color </code><br>
|
||||
to convert an image to a list of alpha colors
|
||||
<li><code>{(idx alpha-color-list->image)} : 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>{(idx make-alpha-color)} : int int int int -> color </code><br>
|
||||
to construct an alpha color
|
||||
<li><code>{(idx alpha-color?)} : anything -> boolean </code><br>
|
||||
to determine if its input is a color
|
||||
<li><code>{(idx alpha-color-alpha)} : color -> int </code><br>
|
||||
to extract the alpha value of a color
|
||||
<li><code>{(idx alpha-color-red)} : color -> int </code><br>
|
||||
to extract the red component of a color
|
||||
<li><code>{(idx alpha-color-green)} : color -> int </code><br>
|
||||
to extract the green component of a color
|
||||
<li><code>{(idx alpha-color-blue)} : color -> int </code><br>
|
||||
to extract the blue component of a color"
|
||||
</menu>
|
||||
|
||||
{(include "image-content.tinc")}
|
||||
|
||||
{(include "foot.tinc")}
|
||||
|
||||
|
|
|
|||
|
|
@ -127,7 +127,17 @@ students to simulate a small world of animated drawings and games:
|
|||
shows the list of images in loi, time-delayed
|
||||
</menu></p>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Image Manipulation</h3>
|
||||
|
||||
<p>Finally, the teachpack provides all the functions that image.ss provides
|
||||
except <code>add-line</code>, which has a slightly different functionality.</p>
|
||||
except <code>add-line</code>, which has a slightly different
|
||||
functionality. For completeness, the documentation of this teackpack is
|
||||
included here:
|
||||
|
||||
{(include "image-content.tinc")}
|
||||
|
||||
</p>
|
||||
|
||||
{(include "foot.tinc")}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user