Vivio50 © 2004 [email protected] - 1 19/11/04 Tock Tick - Running Interactive E-Learning Animations Backwards Jeremy Jones Dept. Computer Science Trinity

Vivio50 © 2004 [email protected] - 1

19/11/04

Tock Tick - Running Interactive E-LearningAnimations Backwards

Jeremy Jones

Dept. Computer ScienceTrinity College

Dublin 2Ireland


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


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


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]


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


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, ...


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


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!)


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(…)


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


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


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]


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


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


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


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


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)


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


19/11/04


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


19/11/04


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


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?


19/11/04

Thank you for listening.

Any Questions?

Documents

Vivio50 © 2004 [email protected] - 1 19/11/04 Tock Tick - Running Interactive E-Learning Animations Backwards Jeremy Jones Dept. Computer Science Trinity