Upload
caleb-popp
View
216
Download
2
Tags:
Embed Size (px)
Citation preview
Vivio50 © 2004 [email protected] - 1
19/11/04
Tock Tick - Running Interactive E-LearningAnimations Backwards
Jeremy Jones
Dept. Computer ScienceTrinity College
Dublin 2Ireland
Vivio50 © 2004 [email protected] - 2
19/11/04
Overview
Initial motivation for Vivio Some example Vivio animations How does it work? Conclusions
http://cs.tcd.ie/Jeremy.Jones/vivio google: "jones vivio" + I feel lucky
Vivio50 © 2004 [email protected] - 3
19/11/04
Initial Motivation
How best to explain the operation of cache-coherency protocols* to Computer Engineering students?
"I hear and I forget, I see and I remember, I do and I understand" [Confucius]
Envisaged some 2D web based interactive reversible animations to complement lectures
Students can use animations outside of lectures
Engage students, encourage active learning & critical thinking and consequently improve learning outcomes
Think before developing an interactive animation – NOT always appropriate
*IEEE/ACM Computing Curricula 2001 section AR7 core
Vivio50 © 2004 [email protected] - 4
19/11/04
Example Vivio Animations
may be embedded in a PowerPoint presentation, …
but easier to demonstrate inside a browser
[image rather than Vivio ActiveX control]
Vivio50 © 2004 [email protected] - 5
19/11/04
Animation Characteristics
interactive scalable reversible web based parallel smooth animation control animation speed (via mouse wheel) single step forward and backwards snap forward and backwards to key frames standard hardware
Vivio50 © 2004 [email protected] - 6
19/11/04
How can such animations be created?
interactive → execution of an underlying program
reversible → need to be able to execute program backwards (or give the appearance thereof)
very time consuming with existing technologies such as Java, Flash, SVG, ...
Vivio50 © 2004 [email protected] - 7
19/11/04
Vivio
A programming language / model that provides an appropriate level of abstraction for describing E-Learning animations
An efficient runtime which handles the low level detail e.g. repainting the screen and playing animations in reverse
Vivio50 © 2004 [email protected] - 8
19/11/04
How does it work?
Viviosource code
compiler
ActiveX player*
(runtime)
Vivio IDE
* may be hosted in a webpage, Word, PowerPoint, …
vcode
Vivio source code compiled and stored as compressed vcode files (most examples less than 4K)
ActiveX player downloads the vcode, JIT compiles it into x86 machine code and then executes the generated code
Runtime only for Windows and x86 (so far!)
Vivio50 © 2004 [email protected] - 9
19/11/04
Vivio Language Basics
normal– int, real, string, classint, real, string, class
– arrays, associative arraysarrays, associative arrays
– functions, while, for, …functions, while, for, … animation specific
– graphical objects (rectangles, ellipse, polygon, …)graphical objects (rectangles, ellipse, polygon, …)
– groups, layersgroups, layers
– animation clockanimation clock
– animated functionsanimated functions
– fork(…) fork(…)
Vivio50 © 2004 [email protected] - 10
19/11/04
Event Driven / Event Q
animation clock @ t ticks per second (tps) on each tick execute attached event code (x) and then… render changes (r) executed code can add events to the eventQ typical render time >> execute time aggressive code to minimise rendered screen area no point rendering at rates > 100 tps
x x r x r x x r
tick 0 tick 1 tick n
x x r
tick n+2tick n+1
Vivio50 © 2004 [email protected] - 11
19/11/04
Animated Functions
r = Rectangle(…..)r.setpos(x, y, steps, interval, wait)
setpos(…) sets position of r in steps steps with interval ticks between each step (linear interpolation from current position)
if wait = 1 execution waits until animation completes, otherwise execution continues immediately to the next statement
r.setpos(x, y) ≡ r.setpos(x, y, 0, 0, 0)
most functions, where it makes sense, exist in animated form
consider an example
Vivio50 © 2004 [email protected] - 12
19/11/04
Running Backwards 1
tick ntick 0
tick n-1save state(SS)
animate forward at normal speed
animate forward at normal speed
wish to go back one tick
NB. state saved at tick = 0 [in reality state saved when each object changes for the first time]
Vivio50 © 2004 [email protected] - 13
19/11/04
Running Backwards 2
restore saved state at tick = 0
fast forward by re-executing all events until tick n-1
save state at regular intervals – every t ticks or t ms of "execution" time
render changes
tick ntick 0
SS SS SS SS
tick n-1
Vivio50 © 2004 [email protected] - 14
19/11/04
Running Backwards 3
tick 0
SS SS SS SS
restore last saved state
fast forward by re-executing events until tick n-2
render changes
tick n-2tick n-1
tick n
Vivio50 © 2004 [email protected] - 15
19/11/04
Saving State 1
incremental state saving (snapshots) save changes only technique also applied to non graphical objects
created tick = 0
current state
rendered state
snapshots
tick = 5000
state
tick = 4000
state
tick = 1000
state
tick = 0
state
graphical object
last updated tick = 0
Vivio50 © 2004 [email protected] - 16
19/11/04
Saving State 2
reduce "execution" time by saving state more frequently and by saving state more frequently closer to target tick (t/N)
set save state parameters at runtime
setSSParameters(tickOrMS, interval, nsubintervals)
could use an alternative strategy e.g. binary
tick 0
0 t 2t
tick n
3t 3t+t/23t+t/4 3t+3t/4
SS SS
tick n-1
4 sub intervals
Vivio50 © 2004 [email protected] - 17
19/11/04
Playing Forward vs Backwards
redraw region going forward tick n to tick
n+1
redraw region going backwards from tick n to
tick n-1
same screen area rendered whether going forward or backwards – hence equal render times (not quite so easy to implement!)
more time spent in "execution" phase when playing backwards (set by frequency of state saves)
Vivio50 © 2004 [email protected] - 18
19/11/04
Some Performance Measurements 1
playing forwards playing backwards
vcode
size
(bytes)
#
frames
avg
exe
(ms)
avg
render
(ms)
#
frames
avg
exe
(ms)
avg
render
(ms)
ExchangeSort 1,904 2,993 0.02 4.15 2,990 1.12 4.09
WriteOnce 2,665 1005 0.04 9.31 963 2.94 9.37
DLX/MIPS 11,896 3,362 0.04 3.43 3,360 1.81 3.60
Vivio IDE instrumented to collect real time statistics using the Intel x86 hardware time stamp counter
measurements collected on a DELL Inspiron 8100 laptop with 1.13GHz mobile Pentium III and 256K DRAM (N.B. SpeedStep technology)
"avg exe (ms)" - everything apart from render time (i.e. executing event code, saving/restoring state, ...)
all animations displayed in an 800x600 32 bits per pixel window and run at 100 ticks/sec
save state every 1024 ticks with 0 subintervals except DLX every 512 ticks with 8 sub intervals
Note the "identical" render times playing forwards and backwards
Vivio50 © 2004 [email protected] - 19
19/11/04
Some Performance Measurements 2
playing forwards playing backwards
vcode
size
(bytes)
#
frames
avg
exe
(ms)
avg
render
(ms)
#
frames
avg
exe
(ms)
avg
render
(ms)
ExchangeSort 1,904 2,993 0.02 2.05 2,990 0.65 2.03
WriteOnce 2,665 1005 0.03 3.69 963 1.86 3.72
DLX/MIPS 11,896 3,362 0.03 2.74 3,360 0.99 2.74
Vivio IDE instrumented to collect real time statistics using the Intel x86 hardware time stamp counter
measurements collected on a DELL Dimension 8300 with 3.00GHz Pentium 4, 1GB DRAM and NVidia GeForce Fx 5200 graphics card
"avg exe (ms)" - everything apart from render time (i.e. executing event code, saving/restoring state, ...)
all animations displayed in an 800x600 32 bits per pixel window and run at 100 ticks/sec
saving state every 1024 ticks with 0 subintervals except DLX every 512ticks with 8 sub intervals
Note the "identical" render times playing forwards and backwards
Vivio50 © 2004 [email protected] - 20
19/11/04
Some Performance Measurements 3
playing backwards
interval nsubintervals avg exe (ms) avg render (ms)
1024 0 3.31 2.74
1024 4 1.52 2.74
1024 8 1.21 2.73
1024 16 1.06 2.74
512 0 2.23 2.75
512 4 1.27 2.74
512 8 1.09 2.73
512 16 0.99 2.74
conditions as per previous slide
"avg exe" time vs save state parameters for DLX/MIPS animation
Vivio50 © 2004 [email protected] - 21
19/11/04
Conclusions
How frequently are the Vivio animations used?– installation/portability issuesinstallation/portability issues
Are the animations beneficial educationally?– survey resultssurvey results
How long does it take to create an animation?– took 3 months for Edsko De Vries (JS BA) to create took 3 months for Edsko De Vries (JS BA) to create
the the MIPS/DLXMIPS/DLX animation animation
What next?