svn: r9413
This commit is contained in:
Matthias Felleisen
parent
ecec80fc8c
commit
68dd06713a
29
collects/teachpack/htdp/Docs/htdp.scrbl
Normal file
29
collects/teachpack/htdp/Docs/htdp.scrbl
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
#lang scribble/doc
|
||||
|
||||
@(require scribble/manual
|
||||
(for-label scheme))
|
||||
|
||||
@title[#:style '(toc) #:tag "htdp"]{HtDP Teachpacks}
|
||||
|
||||
@local-table-of-contents[]
|
||||
|
||||
@include-section["image.scrbl"]
|
||||
@include-section["world.scrbl"]
|
||||
@;include-section["testing.scrbl"
|
||||
@;include-section["convert.scrbl"]
|
||||
@;include-section["guess.scrbl"]
|
||||
@;include-section["mastermind.scrbl"]
|
||||
@;include-section["draw.scrbl"]
|
||||
@;include-section["hangman.scrbl"]
|
||||
@;include-section["arrows.scrbl"]
|
||||
@;include-section["documents.scrbl"]
|
||||
@;include-section["files-directories.scrbl"]
|
||||
@;include-section["graphing.scrbl"]
|
||||
@;include-section["gui.scrbl"]
|
||||
@;include-section["lookup-gui.scrbl"]
|
||||
@;include-section["arrows-gui.scrbl"]
|
||||
@;include-section["guess-gui.scrbl"]
|
||||
@;include-section["elevator.scrbl"]
|
||||
@;include-section["Simplified Scheme Web Servlets"
|
||||
@;include-section["Scheme Web Servlets"
|
||||
@;include-section["queen.scrbl"]
|
||||
|
|
@ -1,216 +0,0 @@
|
|||
<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 green blue))
|
||||
;; A CS is a structure: (make-color N N N)
|
||||
;; where N is between 0 and 255 (inclusive).
|
||||
|
||||
;; <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)} : Number Number Mode Color -> Image </code><br>
|
||||
to create a rectangle using the given width, height, mode, and color
|
||||
|
||||
<li><code>{(idx circle)} : Number Mode Color -> Image</code><br>
|
||||
to create a circle using the given radius, mode, and color
|
||||
|
||||
<li><code>{(idx ellipse)} : Number Number Mode Color -> Image </code><br>
|
||||
to create an ellipse using the given width, height, and color
|
||||
|
||||
<li><code>{(idx triangle)} : Number Mode Color -> Image</code><br>
|
||||
to create an upward pointing equilateral triangle using the given edge size and color
|
||||
|
||||
<li><code>{(idx star)} : Number[>=2] Number[>=1] Number[>=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)} : Number Number 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 Number Number -> 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 Number Number -> 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 Number Number -> 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 Number Number -> 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 Number Number Number Number -> 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>
|
||||
|
|
@ -1,54 +1,54 @@
|
|||
#lang scribble/doc
|
||||
|
||||
@(require scribble/manual
|
||||
(for-label scheme/base
|
||||
"../image.ss"))
|
||||
(for-label scheme
|
||||
teachpack/htdp/image
|
||||
lang/private/imageeq))
|
||||
|
||||
@title[#:tag "image"]{Manipulating Images: image.ss}
|
||||
|
||||
@declare-exporting[teachpack/htdp/image]
|
||||
|
||||
The 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.
|
||||
The teachpack provides primitives for constructing and manipulating
|
||||
images. Basic, colored images are created as outlines or solid
|
||||
shapes. Additional primitives allow for the composition of images.
|
||||
|
||||
@schemeblock[
|
||||
(code:comment #, @t{@scheme[Mode] is one of the following two symbols or strings:})
|
||||
(code:comment #, @t{ -- @scheme['solid]})
|
||||
(code:comment #, @t{ -- @scheme['outline]})
|
||||
(code:comment #, @t{ -- @scheme["solid"]})
|
||||
(code:comment #, @t{ -- @scheme["outline"]})
|
||||
]
|
||||
@;-----------------------------------------------------------------------------
|
||||
@section{Images}
|
||||
|
||||
Interpretation: @scheme['solid] is used for creating solid basic
|
||||
shapes; @scheme['outline] is used for creating outlines of basic
|
||||
shapes. Strings are used in an analogous manner.
|
||||
@declare-exporting[lang/private/imageeq]
|
||||
|
||||
@(begin
|
||||
#reader scribble/comment-reader
|
||||
(schemeblock
|
||||
(define-struct color (red blue green))
|
||||
@defproc[(image? [x any/c]) boolean?]{Is @scheme[x] an image?}
|
||||
|
||||
;; A CS is a structure: @scheme[(make-color _N _N _N)]
|
||||
;; where @scheme[_N] is between 0 and 255.
|
||||
@;-----------------------------------------------------------------------------
|
||||
@section[#:tag "modes-colors"]{Modes and Colors}
|
||||
|
||||
;; @scheme[Color] is one of:
|
||||
;; -- a color symbol, e.g., @scheme['blue]
|
||||
;; -- a color string, e.g., @scheme["blue"]
|
||||
;; -- a CS, e.g., @scheme[(make-color 0 0 255)], which also denotes blue.
|
||||
@defthing[Mode (one-of/c 'solid 'outline "solid" "outline")]{A @scheme[Mode]
|
||||
is used to specify whether painting a shape fills or outlines the form.}
|
||||
|
||||
;; Interpretation: @scheme[Color] arguments are used to paint the shapes
|
||||
;; or their outlines. See below for more information about color
|
||||
;; structs.
|
||||
))
|
||||
@deftogether[(
|
||||
@defthing[Color (or/c symbol? string? color?)]
|
||||
@defstruct[color [(red (and/c natural-number/c (<=/c 255)))
|
||||
(green (and/c natural-number/c (<=/c 255)))
|
||||
(blue (and/c natural-number/c (<=/c 255)))]]
|
||||
@defthing[RGB color?])]{
|
||||
A @scheme[Color] is a color-symbol (e.g.,
|
||||
@scheme['blue]) or a color-string (e.g., @scheme["blue"]) or an RGB structure.
|
||||
|
||||
The following predicate specifies what a valid image color is:
|
||||
An @scheme[RGB] describes a color via share of red,
|
||||
blue, and green colors (e.g., @scheme[(make-color 100 200 30)]).
|
||||
}
|
||||
|
||||
@defproc[(image-color? [x any]) boolean?]{
|
||||
Determines if the input is a valid image color.}
|
||||
|
||||
@;-----------------------------------------------------------------------------
|
||||
@section[#:tag "creational"]{Creating Basic Shapes}
|
||||
|
||||
In DrScheme, you can insert images from your file system. Use PNG images
|
||||
instead whenever possible for insertions. In addition, you can create basic
|
||||
shapes with the following functions.
|
||||
|
||||
@defproc[(rectangle [w number?] [h number?] [m Mode] [c Color]) image?]{
|
||||
Creates a @scheme[w] by @scheme[h] rectangle, filled in according to
|
||||
@scheme[m] and painted in color @scheme[c]}
|
||||
|
|
@ -75,6 +75,13 @@ The following predicate specifies what a valid image color is:
|
|||
radius for the max distance of the points to the center, and
|
||||
an @scheme[inner] radius for the min distance to the center. }
|
||||
|
||||
@defproc[(regular-polygon [s side] [r number?] [m Mode] [c Color] [angle real? 0]) image?]{
|
||||
Creates a regular polygon with @scheme[s] sides inscribed in
|
||||
a circle of radius @scheme[r], using mode @scheme[m] and
|
||||
color @scheme[c]. If an angle is specified, the polygon is rotated by that
|
||||
angle.
|
||||
}
|
||||
|
||||
@defproc[(line [x number?][y number?] [c Color]) image?]{
|
||||
Creates a line colored @scheme[c] from (0,0) to @scheme[(x,y)].
|
||||
See @scheme[add-line] below.
|
||||
|
|
@ -84,7 +91,46 @@ The following predicate specifies what a valid image color is:
|
|||
Creates an image of the text @scheme[s] at point size @scheme[f]
|
||||
and painted in color @scheme[c].}
|
||||
|
||||
@section[#:tag "composition"]{Composing Shapes}
|
||||
@;-----------------------------------------------------------------------------
|
||||
@section[#:tag "properties"]{Basic Image Properties}
|
||||
|
||||
To understand how images are manipulated, you need to understand the
|
||||
basic properties of images.
|
||||
|
||||
@defproc[(image-width [i image?]) integer?]{
|
||||
Obtain @scheme[i]'s width in pixels}
|
||||
|
||||
@defproc[(image-height [i image?]) integer?]{
|
||||
Obtain @scheme[i]'s height in pixels}
|
||||
|
||||
For the composition of images, you must know about @emph{pinholes}. Each
|
||||
image, including primitive ones, come with a pinhole. For images created
|
||||
with the above primitives, the pinhole is at the center of the shape except
|
||||
for those created from @scheme[line] and @scheme[text], which have pinholes
|
||||
at the top left. The pinhole can be moved, of course, and compositions
|
||||
locate pinholes according to their own rules. When in doubt you can always
|
||||
find out where the pinhole is and place it where convenient.
|
||||
|
||||
@defproc[(pinhole-x [i image?]) integer?]{Determines the @scheme[x]
|
||||
coordinate of the pinhole, measuring from the left of the image.}
|
||||
|
||||
@defproc[(pinhole-y [i image?]) integer?]{Determines the @scheme[y]
|
||||
coordinate of the pinhole, measuring from the top (down) of the image.}
|
||||
|
||||
@defproc[(put-pinhole [i image?] [x number?] [y number?]) image?]{
|
||||
Creates a new image with the pinhole in the location specified by
|
||||
@scheme[x] and @scheme[y], counting from the left and top (down),
|
||||
respectively.}
|
||||
|
||||
@defproc[(move-pinhole [i image?] [delta-x number?] [delta-y number?]) image?]{
|
||||
Creates a new image with the pinhole moved down and right by
|
||||
@scheme[delta-x] and @scheme[delta-y] with respect to its current
|
||||
location. Use negative numbers to move it up or left.}
|
||||
|
||||
@;-----------------------------------------------------------------------------
|
||||
@section[#:tag "composition"]{Composing Images}
|
||||
|
||||
Images can be composed, and images can be found within compositions.
|
||||
|
||||
@defproc[(add-line [i image?]
|
||||
[x number?]
|
||||
|
|
@ -92,16 +138,113 @@ The following predicate specifies what a valid image color is:
|
|||
[z number?]
|
||||
[u number?]
|
||||
[c Color]) image?]{
|
||||
Add a line from @scheme[(x,y)] to @scheme[(z,u)] to image @scheme[i] and
|
||||
paints it color @scheme[c].}
|
||||
Creates an image by adding a line (colored @scheme[c]) from @scheme[(x,y)]
|
||||
to @scheme[(z,u)] to image @scheme[i].}
|
||||
|
||||
@defproc[(overlay [img image?] [img2 image?] [img* image?] ...) image?]{
|
||||
Overlays all images on their pinhole (see below).
|
||||
Creates an image by overlaying all images on their pinholes.
|
||||
The pinhole of the resulting image is the same place as the pinhole in the
|
||||
first image.
|
||||
}
|
||||
|
||||
@defproc[(regular-polygon [s side] [r number?] [m Mode] [c Color] [angle real? 0]) image?]{
|
||||
Creates a regular polygon with @scheme[s] sides inscribed in
|
||||
a circle of radius @scheme[r], using mode @scheme[m] and
|
||||
color @scheme[c]. If an angle is specified, the polygon is rotated by that
|
||||
angle.
|
||||
}
|
||||
@defproc[(overlay/xy [img image?] [delta-x number?] [delta-y number?] [other image?]) image?]{
|
||||
Creates an image by adding the pixels of @scheme[other] to
|
||||
@scheme[img]. Instead of lining up on the pinhole, @scheme[other]'s pinhole
|
||||
is lined up with an offset of (@scheme[delta-x],@scheme[delta-y]) from the
|
||||
pinhole of @scheme[img]. The pinhole of the resulting image is the same
|
||||
place as the pinhole in the first image.}
|
||||
|
||||
@defproc[(image-inside? [img image?] [other image?]) boolean?]{
|
||||
Determines whether the pixels of the second image appear in the first.
|
||||
|
||||
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,
|
||||
@scheme[image-inside?] does not recognize the cropped image, due to
|
||||
standard compression applied to JPEG images.}
|
||||
|
||||
@defproc[(find-image [img image?] [other image?]) posn?]{
|
||||
Determines where the pixels of the second image appear in the first, with
|
||||
respect to the pinhole of the first image. If @scheme[(image-inside? img
|
||||
other)] isn't true, @scheme[find-image] signals an error.}
|
||||
|
||||
@;-----------------------------------------------------------------------------
|
||||
@section[#:tag "manipulation"]{Manipulating Images}
|
||||
|
||||
Images can also be shrunk. These ``shrink'' functions trim an image by
|
||||
eliminating extraneous pixels.
|
||||
|
||||
@defproc[(shrink-tl [img image?][width number?][height number?]) image?]{
|
||||
Shrinks the image to a @scheme[width] by @scheme[height] image, starting
|
||||
from the @emph{top-left} corner. The pinhole of the resulting image is in
|
||||
the center of the image.}
|
||||
|
||||
@defproc[(shrink-tr [img image?][width number?][height number?]) image?]{
|
||||
Shrinks the image to a @scheme[width] by @scheme[height] image, starting
|
||||
from the @emph{top-right} corner. The pinhole of the resulting image is in
|
||||
the center of the image.}
|
||||
|
||||
@defproc[(shrink-bl [img image?][width number?][height number?]) image?]{
|
||||
Shrinks the image to a @scheme[width] by @scheme[height] image, starting
|
||||
from the @emph{bottom-left} corner. The pinhole of the resulting image is in
|
||||
the center of the image.}
|
||||
|
||||
@defproc[(shrink-br [img image?][width number?][height number?]) image?]{
|
||||
Shrinks the image to a @scheme[width] by @scheme[height] image, starting
|
||||
from the @emph{bottom-right} corner. The pinhole of the resulting image is in
|
||||
the center of the image.}
|
||||
|
||||
@defproc[(shrink [img image?][left number?][above number?][right number?][below number?]) image?]{
|
||||
Shrinks 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.}
|
||||
|
||||
@;-----------------------------------------------------------------------------
|
||||
@section[#:tag "pixel-lists"]{Miscellaneous Image Manipulation and Creation}
|
||||
|
||||
The last group of functions extracts the constituent colors from an image
|
||||
and converts a list of colors into an image.
|
||||
|
||||
@defthing[List-of-color list?]{is one of:}
|
||||
@(begin
|
||||
#reader scribble/comment-reader
|
||||
(schemeblock
|
||||
;; -- @scheme[empty]
|
||||
;; -- @scheme[(cons Color List-of-color)]
|
||||
;; Interpretation: represents a list of colors.
|
||||
))
|
||||
|
||||
@defproc[(image->color-list [img image?]) List-of-color]{
|
||||
Converts an image to a list of colors.}
|
||||
|
||||
@defproc[(color-list->image [l List-of-color]
|
||||
[width natural-number/c]
|
||||
[height natural-number/c]
|
||||
[x natural-number/c]
|
||||
[y natural-number/c]) image?]{
|
||||
Converts a list of colors @scheme[l] to an image with the given
|
||||
@scheme[width] and @scheme[height] and pinhole (@scheme[x],@scheme[y])
|
||||
coordinates, specified with respect to the top-left of the image.}
|
||||
|
||||
The remaining functions provide alpha-channel information as well. Alpha
|
||||
channels are a measure of transparency; 0 indicates fully opaque and 255
|
||||
indicates fully transparent.
|
||||
|
||||
|
||||
@defstruct[alpha-color [(alpha (and/c natural-number/c (<=/c 255)))
|
||||
(red (and/c natural-number/c (<=/c 255)))
|
||||
(green (and/c natural-number/c (<=/c 255)))
|
||||
(blue (and/c natural-number/c (<=/c 255)))]]{
|
||||
A structure representing an alpha color.}
|
||||
|
||||
@defproc[(image->alpha-color-list [img image?]) (list-of alpha-color?)]{
|
||||
to convert an image to a list of alpha colors}
|
||||
|
||||
@defproc[(alpha-color-list->image
|
||||
[l (list-of alpha-color?)]
|
||||
[width integer?]
|
||||
[height integer?]
|
||||
[x integer?]
|
||||
[y integer?]) image? ]{
|
||||
Converts a list of @scheme[alpha-color]s @scheme[l] to an image with the given
|
||||
@scheme[width] and @scheme[height] and pinhole (@scheme[x],@scheme[y])
|
||||
coordinates, specified with respect to the top-left of the image.}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
{ (define LIBNAME "Images")
|
||||
(include "head.tinc") }
|
||||
|
||||
<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>
|
||||
|
||||
{(include "image-content.tinc")}
|
||||
|
||||
{(include "foot.tinc")}
|
||||
|
||||
|
||||
{(include "foot.tinc")}
|
||||
|
|
@ -1,16 +1,42 @@
|
|||
#lang scribble/doc
|
||||
|
||||
@(require scribble/manual
|
||||
(for-label scheme/base
|
||||
(only-in "../world.ss" run-simulation)
|
||||
"../image.ss"))
|
||||
(for-label scheme
|
||||
teachpack/htdp/image
|
||||
teachpack/htdp/world
|
||||
lang/private/imageeq))
|
||||
|
||||
@title[#:tag "world"]{Simulations and Animations: world.ss}
|
||||
|
||||
@;[May I suggest that in the docs, you give a simple world, and then translate it into a classical class.ss/GUI code, with timers, etc. ?]
|
||||
|
||||
@declare-exporting[teachpack/htdp/world]
|
||||
|
||||
The teachpack provides two kinds of functions. The first five allow
|
||||
students to simulate a small world of animated drawings and games:
|
||||
The teachpack provides two sets of tools. The first allows students to
|
||||
create and display a series of animated scenes, i.e., a simulation. The
|
||||
second one generalizes the first by adding interactive GUI features.
|
||||
|
||||
@section[#:tag "basics"]{Basics}
|
||||
|
||||
The teachpack assumes working knowledge of the basic image manipulation
|
||||
primitives and introduces a special kind of image: a scene.
|
||||
|
||||
@deftogether[(
|
||||
@defthing[Image image?]
|
||||
@defthing[Scene (and/c image? (lambda (i)
|
||||
(and (= (pinhole-x i) 0) (= (pinhole-y i) 0))))])]{
|
||||
For image creation and manipulation, see @secref["image"].
|
||||
|
||||
A @scheme[Scene] is an image whose pinhole is at position @scheme[(0,0)]}
|
||||
|
||||
@defproc[(empty-scene [width natural-number/c][height natural-number/c]) Scene]{Creates a @scheme[width] x @scheme[height] Scene.}
|
||||
|
||||
@defproc[(place-image [img image?] [x number?][y number?][s Scene]) Scene]{
|
||||
Creates a scene by placing @scheme[img] at @scheme[(x,y)] into @scheme[s];
|
||||
@scheme[(x,y)] are comp. graph. coordinates, i.e., they count left and
|
||||
down from the upper-left corner.}
|
||||
|
||||
@section[#:tag "simulations"]{Simple Simulations}
|
||||
|
||||
@defproc[(run-simulation
|
||||
[w natural-number/c]
|
||||
|
|
@ -44,3 +70,14 @@ In addition,
|
|||
|
||||
(run-simulation 100 100 (/ 1 28) create-UFO-scene)
|
||||
]
|
||||
|
||||
@;-----------------------------------------------------------------------------
|
||||
@section[#:tag "interactive"]{Interactions}
|
||||
|
||||
@defthing[World any/c]{For animated worlds and games, using the teachpack
|
||||
requires that you provide a data definition for @scheme[World]. In
|
||||
principle, there are no constraints on this data definition.}
|
||||
|
||||
Given a data definition for worlds, the following functions create worlds,
|
||||
visualize it, make the clock tick, and provide feedback about the mouse
|
||||
and keyboard actions that the program's users perform.
|
||||
|
|
|
|||
|
|
@ -1,57 +1,6 @@
|
|||
{ (define LIBNAME "Animated Images, Simulating Worlds")
|
||||
(include "head.tinc") }
|
||||
|
||||
<p>The teachpack provides the tools to write simple animations and
|
||||
interactive games. The first and simplest approach is to set up a
|
||||
simulation:
|
||||
|
||||
<blockquote>
|
||||
<code>{(idx run-simulation)} : Nat Nat Number [Nat -> Scene] -> true</code><br>
|
||||
<code>(run-simulation width height r create-image)</code>
|
||||
creates and shows a <code>width</code> x <code>height</code> canvas,
|
||||
starts a clock, ticking every <code>r</code> (usually fractional) seconds,
|
||||
and, every time the clock ticks, it applies <code>create-image</code> to
|
||||
the number of ticks passed since this function call.
|
||||
|
||||
<p>In addition, the function pops up a frame and displays the pictures that
|
||||
<code>create-image</code> generates. The result is a simple animation.</p>
|
||||
|
||||
<p>Optional: the function consumes an optional fifth argument, a
|
||||
boolean. If this argument is <code>false</code> or missing,
|
||||
<code>run-simulation</code> acts as described; if it is present and
|
||||
<code>true</code>, the function can create an animated GIF of the
|
||||
simulation after you stop it.</p>
|
||||
|
||||
<p><b>Example:</b>
|
||||
<pre>
|
||||
<code>
|
||||
(define (create-UFO-scene height)
|
||||
(place-image UFO 50 height (empty-scene 100 100)))
|
||||
|
||||
(define UFO (overlay (circle 10 'solid 'green) (rectangle 40 4 'solid 'green)))
|
||||
|
||||
(run-simulation 100 100 (/ 1 28) create-UFO-scene)
|
||||
</code>
|
||||
</pre>
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p>For animated worlds and games, using the teachpack requires that you
|
||||
provide a data definition for <code>World</code>. In principle, there are
|
||||
no constraints on this data definition. </p>
|
||||
|
||||
<p>The teachpack works with two basic forms of data for visualizing the world:
|
||||
<ul>
|
||||
<li><code>Image</code>, which are either inserted into DrScheme via the
|
||||
"Special" menu or constructed from the functions below; and </li>
|
||||
<li><code>Scene</code>, which are created from <code>Image</code>s.
|
||||
Specifically, a scene is an image whose pinhole is at position (0,0).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
Given a data definition for worlds, the following functions create worlds,
|
||||
visualize it, make the clock tick, and provide feedback about the mouse and
|
||||
keyboard actions that the program's users perform:
|
||||
|
||||
<ol>
|
||||
<li><code>{(idx big-bang)} : Nat Nat Number World -> true</code><br>
|
||||
|
|
@ -132,13 +81,6 @@ plus the functions on images below:
|
|||
creates a width x height rectangle, solid or outlined,
|
||||
with its anchor in the NW corner
|
||||
|
||||
<li><code>{(idx empty-scene)} : Nat Nat -> Scene</code><br>
|
||||
<code>(empty-scene width height)</code>
|
||||
creates a width x height "scene" (frame with origin in NW)
|
||||
|
||||
<li><code>{(idx place-image)} : Image Number Number Scene -> Scene</code><br>
|
||||
<code>(place-image image x y scene)</code>
|
||||
places image at (x,y) into scene; (x,y) are comp. graph. coordinates
|
||||
|
||||
<li><code>{(idx scene+line)} : Scene Number Number Number Number Color -> Scene</code><br>
|
||||
<code>(scene+line scene x0 y0 x1 y1 c)</code>
|
||||
|
|
|
|||
|
|
@ -4,55 +4,6 @@
|
|||
;; reporting in the teaching languages.
|
||||
|
||||
(module image mzscheme
|
||||
(require htdp/image
|
||||
(lib "prim.ss" "lang"))
|
||||
|
||||
|
||||
(provide-primitives
|
||||
image-width
|
||||
image-height
|
||||
overlay
|
||||
overlay/xy
|
||||
|
||||
pinhole-x
|
||||
pinhole-y
|
||||
move-pinhole
|
||||
put-pinhole
|
||||
|
||||
rectangle
|
||||
circle
|
||||
ellipse
|
||||
triangle
|
||||
line
|
||||
star
|
||||
regular-polygon
|
||||
add-line
|
||||
text
|
||||
|
||||
shrink
|
||||
shrink-tl
|
||||
shrink-tr
|
||||
shrink-bl
|
||||
shrink-br
|
||||
|
||||
image-inside?
|
||||
find-image
|
||||
|
||||
image->color-list
|
||||
color-list->image
|
||||
|
||||
image->alpha-color-list
|
||||
alpha-color-list->image
|
||||
|
||||
image-color?
|
||||
make-color
|
||||
color-red
|
||||
color-green
|
||||
color-blue
|
||||
color?
|
||||
make-alpha-color
|
||||
alpha-color-alpha
|
||||
alpha-color-red
|
||||
alpha-color-green
|
||||
alpha-color-blue
|
||||
alpha-color?))
|
||||
(require htdp/image (lib "prim.ss" "lang"))
|
||||
(provide-primitives (all-from htdp/image))
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
#cs(module world mzscheme
|
||||
(module world mzscheme
|
||||
(provide (all-from htdp/world))
|
||||
(require htdp/world))
|
||||
|
|
|
|||
|
|
@ -3,26 +3,22 @@
|
|||
@(require scribble/manual
|
||||
(for-label scheme/base))
|
||||
|
||||
@title{Teachpacks}
|
||||
@title[#:style '(toc)]{Teachpacks}
|
||||
|
||||
Teaching languages are small subsets of a full programming language. While
|
||||
such restrictions simplify error diagnosis and the construction of tools,
|
||||
they also make it impossible (or at least difficult) to write some
|
||||
interesting programs. To circumvent this restriction, it is possible to
|
||||
import teachpacks into programs written in a teaching language.
|
||||
such restrictions simplify error diagnosis and the construction of tools,
|
||||
they also make it impossible (or at least difficult) to write some
|
||||
interesting programs. To circumvent this restriction, it is possible to
|
||||
import teachpacks into programs written in a teaching language.
|
||||
|
||||
In principle, a teachpack is just a library. Like any other Scheme library,
|
||||
it may export values, functions, and even new constructs. In contrast to an
|
||||
ordinary library, however, a teachpack must enforce the contracts of the
|
||||
"lowest" teaching language into which it is exported and signal errors in a
|
||||
way with which students are familiar.
|
||||
In principle, a teachpack is just a library written in the full language,
|
||||
not the teaching subset. Like any other library, it may export values,
|
||||
functions, etc. In contrast to an ordinary library, however, a teachpack
|
||||
must enforce the contracts of the "lowest" teaching language into which it
|
||||
is imported and signal errors in a way with which students are familiar at
|
||||
that level.
|
||||
|
||||
All but the last section describe the teachpacks that are available for
|
||||
"How to Design Programs" and that will remain around for the second
|
||||
edition. The last section describes how to create your own
|
||||
teachpacks.
|
||||
This chapter covers the teachpacks for ``How to Design Programs'' and ``How
|
||||
to Design Classes.''
|
||||
|
||||
@include-section["htdp/Docs/testing.scrbl"]
|
||||
@include-section["htdp/Docs/image.scrbl"]
|
||||
@include-section["htdp/Docs/world.scrbl"]
|
||||
@include-section["htdp/Docs/questions.scrbl"]
|
||||
@include-section["htdp/Docs/htdp.scrbl"]
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user