1 / 22

Vivio: Interactive E-Learning Animations for Computer Science Students

Discover Vivio, a tool created by Jeremy Jones from Trinity College Dublin, to enhance learning outcomes for Computer Science students. Learn how Vivio works, its features, and how it helps engage students with interactive and reversible animations.

scarollo
Download Presentation

Vivio: Interactive E-Learning Animations for Computer Science Students

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tock Tick - Running Interactive E-LearningAnimations Backwards Jeremy Jones Dept. Computer Science Trinity College Dublin 2 Ireland

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

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

  4. Example Vivio Animations • may be embedded in a PowerPoint presentation, … [image rather than Vivio ActiveX control] • but easier to demonstrate inside a browser

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

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

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

  8. Vivio IDE Viviosource code compiler vcode ActiveX player* (runtime) * may be hosted in a webpage, Word, PowerPoint, … How does it work? • 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!)

  9. Vivio Language Basics • normal • int, real, string, class • arrays, associative arrays • functions, while, for, … • animation specific • graphical objects (rectangles, ellipse, polygon, …) • groups, layers • animation clock • animated functions • fork(…)

  10. tick n+1 tick n+2 tick 0 tick 1 tick n x x x x r r x r x x r 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

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

  12. Running Backwards 1 tick 0 tick n animate forward at normal speed save state(SS) tick n-1 • 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]

  13. tick n tick 0 tick n-1 SS SS SS SS 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

  14. Running Backwards 3 tick n tick 0 tick n-1 tick n-2 SS SS SS SS • restore last saved state • fast forward by re-executing events until tick n-2 • render changes

  15. tick = 5000 tick = 4000 tick = 1000 tick = 0 state state state state Saving State 1 • incremental state saving (snapshots) • save changes only • technique also applied to non graphical objects graphical object created tick = 0 last updated tick = 0 current state rendered state snapshots

  16. Saving State 2 tick n tick 0 tick n-1 4 sub intervals SS SS 3t+3t/4 3t+t/4 0 t 2t 3t 3t+t/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

  17. redraw region going forward tick n to tick n+1 redraw region going backwards from tick n to tick n-1 Playing Forward vs Backwards • 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)

  18. Some Performance Measurements 1 • 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. Some Performance Measurements 2 • 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

  20. Some Performance Measurements 3 • "avg exe" time vs save state parameters for DLX/MIPS animation • conditions as per previous slide

  21. Conclusions • How frequently are the Vivio animations used? • installation/portability issues • Are the animations beneficial educationally? • survey results • How long does it take to create an animation? • took 3 months for Edsko De Vries (JS BA) to create the MIPS/DLX animation • What next?

  22. Thank you for listening. Any Questions?

More Related