{ (define LIBNAME "Animated Images, Simulating Worlds")
  (include "head.tinc") }

<p>The teachpack provides two kinds of functions. The first five allow
students to simulate a small world of animated drawings and games: 
<menu>
<li><code>{(idx run-simulation)} : Nat Nat Number [Nat -> Image] -> 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><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>

<p>
 The <code>Stop</code> button on the frame allows users to stop the clock
 and thus the simulation. It also enables the <code>Images</code> button,
 which then allows users to create images of all the steps taken since the
 beginning of time. 
</p>

<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 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)</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.  </menu></p>

<p>The rest are functions for creating scenes:
<menu>
<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 Scence -> 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 add-line)} : Scene Number Number Number Number Color -> Scene</code><br>
   <code>(add-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, 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. For completeness, the documentation of this teackpack is
included here: 

{(include "image-content.tinc")}

</p>

{(include "foot.tinc")}