JavaScript with Branching

JavaScript with Branching (JSB) is a prototype language based on JavaScript which allows you to use the branching technique. The principal of branching can be added to any language, but is easier to add to scripting languages. The current implemented is in C#, and uses the .Net Framework to do all that cool reflection stuff (thus it can also be used to animate any .Net object like WinForms and so forth). It is not however based on any pre-existing JScript API or what-have-you, I've completely written the compiler and interpreter from scratch as the changes which JSB required to the language model where too deep to do it otherwise. //Note: if you are interested in working on this project, fixing it up and making it into a final product, please give me a yell.

3D Animations	2D Animations
JSB_3D.zip Requires: .Net Framework and Managed DirectX 9 Note: Includes numerous examples and full source code	JSB_2D.zip Requires: .Net Framework Note: Includes numerous examples and full source code

for (var y=0; y<5; y++)
{
	branch for (var x=0; x<5; x++)
	{
		var b = new Block(x, y);
		
		branch
		{
			var sc = new TimeScale(Black, Green, 2000);
			while (sc.Going)
			{
				b.Color = sc.Value;
				sleepframe();
			}
		}

		sleep(300);
	}
	sleep(400);
}

for (var y=0; y<5; y++)
{
	branch for (var x=0; x<5; x++)
	{
		var b = new Block(x, y);
		sleep(300);
	}
	sleep(400);
}

Frame Based Animation
(a fairly advanced description of branching)

The principal of branching is "frame based rendering". Essentially how this works is some block of "app code" or "logic" is run, which changes the scene in some way, and then the scene is redrawn. So in the examples above, the script runs until it reaches a "sleep" command, at which time the script is paused, the scene is redrawn, and then the cycle repeats. This is generally how all animations are done.

Standard programming languages require a block of code to completely execute before control can pass to another point, also there is only one point of code being executed at a time. Both of these issues make it very hard to write animations, and especially simultaneous animations. If you don�t believe me, try writing the above "animating blocks onto a screen" example using a standard language (like C++, C#, etc.). The primary difficulty is that you have to save and restore the "state" of the animation, in this case what the x and y values are, how far along with the green animation you have gone and so on. The branching technique on the other hand simply transparently saves and restores the variables states so that you can focus on the import part, your animation! Here is a simple (quasi-fake) example of the difference between a simple animation with and without branching. Consider a simple function which has to count down from 10 to 0 counting down each second, and updating a text box with the current value.

//WITHOUT BRANCHING:
var countstate;
var counttimer;
function _onCountTick()
{
	textBox1.Text = countstate.ToString();
	countstate--;
	if (countstate < 0)
	{
		counttimer.Enable = false;
		counttimer = null;
		countstate = null;
	}
}
function StartCountDown()
{
	countstate = 10;
	counttimer = new Timer();
	counttimer.Duration = 1000;
	counttimer.Tick = _onCountTick();
	counttimer.Enable = true;	
	_onCountTick();
}

//WITH BRANCHING:
function StartCountDown()
{
	branch for (var t=10; t>=0; t--)
	{
		textBox1.Text = t.ToString();
		sleep(1000);
	}
}

function MySleep(duration)
{
	var endat = global.Time + duration;
	while (endat > global.Time)
	{
		sleepframe();
	}
}

Smoothing Animations

If you want animations to look good, you have to make them smooth, now in terms of real-time animations, "smooth" simply means "modified every frame". So if we go back to our first example we see this:

	var b = new Block(x, y);
	branch
	{
		var sc = new TimeScale(Black, Green, 2000);
		while (sc.Going)
		{
			b.Color = sc.Value;
			sleepframe();
		}
	}

var b = new Block(x, y);
branch
{
	var start = global.Time;
	var dur = 2000;
	while (start+dur > global.Time)
	{
		var t = (global.Time - start)/dur;
		b.Color = Black*(1-t) + Green*t;
		sleepframe();
	}
	b.Color = Green;
}

The Current Implementation

The current implementation comes with a 2D GDI+ based composition tree, and a 3D Managed DirectX based composition tree. Please note that both of these composition trees where implemented as standard .Net objects, and don�t contain any special code to make them animate. JSB naturally interacts with them creating the "illusion of animation" by modifying them over time. You can use JSB to animate any .Net based application from a WinForms app to whatever crazy interface you are creating for yourself. Please note however, that in it�s current form it is something of a throw together, so there are certain issues and it should not be consider a complete language. Hopefully someone out there with more time will find this project and clean it up, fix up a few of the performance issues, and hone it into a "real" language. However, in it�s current state you can defiantly play with it and see what you can get out of it.

Quasi-Conclusion

So there you have it, a simplified animation model which combines the easy and simplicity of linear programming, with a frame based rendering model, the functionality of multi-threading, without the hassles of real threads, and the beauty of flowing motion without the crappy meta-representations.

I hope you have found this project interesting and useful. Hopefully one of you will be a language programmer who would be willing to craft this app, and hone it into something which could be quite spectacular. If you do so, or would like talk more about to ask questions about this system, please feel free to email me at lewey@lewcid.com .
-Lewey