Ajax Girl

Kris Zyp has written an article discussing the demonstration using continuations in JavaScript to facilitate writing animations with straightforward linear code.

The example is a bunch of bouncing gears that animate up and down as they bounce.

Explanation

When you click on the button, this calls the addGear function and starts a new “thread” of execution. This execution then carries out the steps of the animation in a natural linear coding sequence.

The Narrative JavaScript framework creates the ability to have multiple threads. Each time you click the button, you are effectively creating a new thread of execution. Of course the underlying JS VM is single threaded, but cooperative multithreading is possible as threads suspend execution through the continuation system.

PLAIN TEXT

JAVASCRIPT:

1.  
2. function addGear() {
3.  
4.  var self = this;
5.  
6.  function makeGear() { // create the DOM img element for the gear
7.  
8.   var gear = document.createElement(”img”);
9.  
10.   gear.src=”images/Configurator.gif”;
11.  
12.   gear.style.position=”absolute”;
13.  
14.   self.gearArea.appendChild(gear);
15.  
16.   return gear;
17.  
18.  }
19.  
20.  function bounceGear(gear, positionX, velocityY) { // do a single bounce
21.  
22.   var y = 0;
23.  
24.   gear.style.left = positionX + “px”;
25.  
26.   do {
27.  
28.    velocityY = velocityY - 0.4; // make a parabolic bounce
29.  
30.    y += velocityY;
31.  
32.    gear.style.bottom = y + “px”;
33.  
34.    sleep(20); // pause for 20 milliseconds
35.  
36.   } while (y> 0);
37.  
38.  }
39.  
40.  function waitForClick(gear) {
41.  
42.   var notifier = gear.onclick = new EventNotifier();
43.  
44.   notifier.wait(); // pause until the click happens
45.  
46.   gear.onclick = null;
47.  
48.  }
49.  
50.  function doBouncingGear() { // this carries out the overall animation
51.  
52.    var gear = makeGear(); // create the gear element
53.  
54.    var x = Math.random() * 400; // random x position
55.  
56.    var bounceVelocity = 15;
57.  
58.    do { // do a decaying bounce
59.  
60.     bounceGear(gear,x,bounceVelocity); // do one bounce
61.  
62.     bounceVelocity = bounceVelocity/1.3; // the bounce/velocity decreases each time
63.  
64.    } while (bounceVelocity> 1) // gotta stop sometime
65.  
66.    // finished bouncing
67.  
68.    waitForClick(gear); // wait for the user to click on it
69.  
70.    // next in the sequence is to roll it away
71.  
72.    var velocityX = 0;
73.  
74.    do { // now we will roll it away
75.  
76.     velocityX += 0.2;
77.  
78.     x += velocityX;
79.  
80.     gear.style.left = x + “px”;
81.  
82.     sleep(30);
83.  
84.    } while (x <400);
85.  
86.    // now we will remove it
87.  
88.    gear.parentNode.removeChild(gear);
89.  
90.  }
91.  
92.  doBouncingGear(); // execute the animation
93.  
94. }
95.  

Source: Ajaxian
Original Article: http://ajaxian.com/archives/animation-with-continuations