171 lines
6.6 KiB
Plaintext
171 lines
6.6 KiB
Plaintext
{ (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>
|
|
<code>(big-bang width height n w)</code>
|
|
creates and shows a <code>width</code> x <code>height</code> canvas,
|
|
starts the clock,
|
|
makes it tick every n seconds,
|
|
and makes w the first world
|
|
|
|
<li><code>{(idx big-bang)} : Nat Nat Number World Boolean -> true</code><br>
|
|
<code>big-bang</code> takes an optional fifth argument. If it is
|
|
<code>true</code>, the world allows the generation of images from the
|
|
animation, including an animated GIF image
|
|
|
|
<li><code>{(idx on-tick-event)} : (World -> World) -> true</code><br>
|
|
<code>(on-tick-event tock)</code> means that DrScheme must call <code>tock</code>
|
|
on the current world every time the clock ticks; it uses the result as the next world
|
|
|
|
<li><code>{(idx on-key-event)} : (World KeyEvent -> World) -> true</code><br>
|
|
<code>(on-key-event change)</code> means that DrScheme must call
|
|
<code>change</code> on the current world and a (representation of the)
|
|
keyevent for every keystroke the programmer (user of the computer) makes; it uses
|
|
the result as the next world
|
|
|
|
<pre>
|
|
<code>
|
|
;; A KeyEvent is one of:
|
|
;; -- Char (char?)
|
|
;; -- Symbol (symbol?)
|
|
</code>
|
|
When the Keyevent is a char, the programmer (user of the computer) has hit an
|
|
alphanumeric key. Symbols such as <code>'left</code>, <code>'right</code>,
|
|
<code>'up</code>, <code>'down</code>, <code>'release</code> denote arrow keys
|
|
or the events of releasing a key on the keypad.
|
|
</pre>
|
|
|
|
<li><code>{(idx on-mouse-event)} : (World Nat Nat MouseEvent ->
|
|
World) -> true</code><br> <code>(on-mouse-event clack)</code> means that
|
|
DrScheme must call <code>clack</code> on the current world, the current
|
|
<code>x</code> and <code>y</code> coordinates of the mouse, and and a
|
|
(representation of the) mouse event for every action of the mouse the
|
|
programmer (user of the computer) makes; it uses the result as the next
|
|
world
|
|
|
|
<pre>
|
|
<code>
|
|
;; A MouseEvent is one of:
|
|
;; - 'button-down
|
|
;; - 'button-up
|
|
;; - 'drag
|
|
;; - 'move
|
|
;; - 'enter
|
|
;; - 'leave
|
|
</code>
|
|
The symbols denote the appropriate action with the mouse and (any of)
|
|
its button(s).
|
|
</pre>
|
|
|
|
<li><code>{(idx on-redraw)} : (World -> Scene) -> true</code><br>
|
|
<code>(on-redraw world->scene)</code> means that DrScheme calls
|
|
<code>world->image</code> whenever the canvas must be redrawn (usually
|
|
after a tick event/a keyboard event/a mouse event has occurred);
|
|
the function consumes the current world and produces a scene, which is
|
|
then displayed in the teachpack's canvas
|
|
|
|
<li><code>{(idx end-of-time)} : String u Symbol -> World</code><br> When DrScheme
|
|
evaluates <code>(end-of-time "the end")</code>, it stops the clock and displays the
|
|
given string or symbol; no further tick events, key events, or redraw events
|
|
take place until the world is created again.
|
|
</ol></p>
|
|
|
|
|
|
<p>For the creation of scenes from the world, use the following functions
|
|
plus the functions on images below:
|
|
<ol>
|
|
<li><code>{(idx nw:rectangle)} : Nat Nat Mode Color -> Image</code><br>
|
|
<code>(nw:rectangle width height mode color)</code>
|
|
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>
|
|
places a line of color <code>c</code> from <code>(x0,y0)</code> to
|
|
<code>(x1,y1)</code> into <code>scene</code>;
|
|
<code>(x,y)</code> are comp. graph. coordinates;
|
|
in contrast to the {(idx image.ss)} <code>add-line</code> function, this
|
|
one cuts off those portions of the line that go beyond the boundaries of
|
|
the given <code>Scene.</code>
|
|
|
|
<li><code>{(idx run-movie)} : (Listof Image) -> true </code><br>
|
|
<code>(run-movie loi)</code>
|
|
shows the list of images in loi in a time-delayed manner;
|
|
assume: all images are of the same size
|
|
</ol></p>
|
|
|
|
<hr />
|
|
|
|
<h3>Image Manipulation</h3>
|
|
|
|
<p>Finally, the teachpack provides all the functions that image.ss
|
|
provides. For completeness, the documentation of this teackpack is
|
|
included here:
|
|
|
|
{(include "image-content.tinc")}
|
|
|
|
</p>
|
|
|
|
{(include "foot.tinc")}
|