--------
For some time, when web creators were confronted with the problem of adding animation elements to their website, the answer boiled down to using Flash and/or Flash. However, thanks to recent advancements, javascript is becoming a more and more viable alternative to using Flash. Still, javascript still has a long path ahead before it can match the animative expressive power available in Flash. Our aim is to further javascript's animative abilities.
And we plan to do that by writing a jQuery plugin that will make expressive composable animations easy to do. For example, a rotating animation can be composed with a move operation to give the combined animation effect of something rolling across the screen. Another example is an animation of 6 rotating squares that can be composed together to build a pseudo 3D cube. We intend to have a heavy focus on 2D animation as well as some 3D elements (or rather animation that gives the illusion of 3D), an area that remains largely unexplored in java script.
For example, the following fragment of javascript code shows how to move a square, titled foo every 20 milli seconds.
function doMove() {
foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px
setTimeout(doMove,20); // call doMove() in 20 msec
}
doMove(); // animate object 1
This fragment of javascript code simulates movement by directly altering foo's x and y position variables. While functional, it is hard to read, and it is not immediately apparent what the function is doing. Furthermore, the user needs to specifically define how each jQuery object is going to move on its own.
We want to abstract those away into simple function calls that the object possesses on its own. For example,
foo = new animateObject
foo.moveX(10, 0, 0) // move foo on its x coordinates 10 pixels (by default every 20 msecs)
---------
In studying a language that solves a similar problem, we take a look at how openGL draws objects, a brief description of it is as follows.
In C++/openGL we implement polygons through the use of glBegin, where we specify the input type: polygon, points, or lines. After calling glBegin we specify the vertices that the polygon requires and afterwards make a call to glEnd. We want to achieve a similar effect in jQuery by using syntactic sugar. An example of openGL’s solution to our problem is this:
Suppose we want to draw a thin rectangle in openGL, we draw it on the openGL window as follows:
// let (x0,x1) be an edge whose first vertex is x0
// and second vertex is x1
vec3 x0 = particleSys->getPos(c.particleA);
vec3 x1 = particleSys->getPos(c.particleB);
// initialize the color of our rectangle to be black
glColor3f(0.0,0.0,0.0);
// call glBegin
// since we want to create a rectangle in openGL,
// but we only have two points
// what we do is we create four points from two points
// these are our four vertices:
// 1. x0[0]-0.2,x0[1]-0.2,x0[2]-0.2
// 2. x0[0]-0.2,x0[1]+0.2,x0[2]-.1
// 3. x1[0]+0.2,x1[1]-0.2,x1[2]-0.2
// 4. x1[0]+0.2,x1[1]+0.2,x1[2]-.1
glBegin(GL_QUADS);
// let x1,y1,z1 coordinates be the x,y,z
// components of our vertices
// glVertex3f(x1,y1,z1)
glVertex3f(x0[0]-0.2,x0[1]-0.2,x0[2]-0.2);
glVertex3f(x1[0]+0.2,x1[1]-0.2,x1[2]-0.2);
glVertex3f(x1[0]+0.2,x1[1]+0.2,x1[2]-.1);
glVertex3f(x0[0]-0.2,x0[1]+0.2,x0[2]-.1);
// end drawing
glEnd();
For our implementation in jQuery, we want to do something similar to openGL. In jQuery we want to implement the creation of dots, lines and polygons.
In openGL, there are a few pre-processing steps that need to be taken cared of before drawing on an openGL window. Here is a snippet of what it looks like:
int main(int argc, char *argv[])
{
cout << "Loading..." << w =" 1024;" h =" 768;">
For the implementation of our final project, we can use css style sheets and manipulate those in jQuery to simulate rectangles, and use a few rotating techniques to create cubes, and spheres from those rectangles. An example of what we have found online that does these kinds of tricks is the experiment google sphere, and the rotate 3d navlist demo. links here and here.
Part 3.
jQuery library/plugin
We will specifically support primitive drawings which include: dots, lines, rectangles, triangles, circles. After we have these primitives, we should be able to use them as building blocks for richer and more complex drawings. For example, we are going to be able to create 3D objects by composing animations of primitives. Furthermore, we want to make the movement and animation of these primitives and their combined counterparts easy to program.
Domain:
Our domain consist of CSS (Cascading Style Sheets) that can represent objects. We intend to make animations easy to manipulate, and at the same time easy to implement in the least amount of code possible. Moreover, we will try to give the users of the library maximum control over the animations and the drawings. Examples of programs that we intend to write in our language include but are not limited to the following:
1. create a primitive and move it around.
2. create a 3D object like a sphere and rotate it.
3. use the primitives as building blocks for more
complicated drawings.
4. rotations, translations (moving objects) of 3D objects.
5. create more complicated animations trying to somehow imitate
flash.
Programming model:
The perfect programming model for our domain would consist of a combination of event-driven programming and object oriented programming. The objects in our extension will be the drawings e.g.: dots, lines, rectangles, triangles, circles which can be combined and used as building blocks to create richer and more complex animations. One of the main reasons for which we'll use object oriented is because of its inheritance and modularity properties. On the other hand, we'll use event-driven programming to create interactive animations.
Optionally, we may use parsing techniques (syntax-directed translation and/or grammars) to create abstraction layers for the implementation of objects. e.g. Representing a square and its animation in a two lines of code:
var Square = new square(vec2 v1,vec2 v2,vec2 v3,vec2 v4)
// where animate will receive +10 to it's old coordinate
Square.moveX(10,0,0)
Instead of having to initialize a css explicitly, we can hide it under the hood.
Alternative Implementations for Animation in jQuery:
In the case that building nice illusory 3D composable animations using jQuery and javascript proves to be too difficult (or impossible), we can alternatively try other implementations:
1) When creating our animations, we can use a parser and interpreter to parse our specific plugin function calls, and ultimately transform it into javascript. The internal representation will be an AST where the root node is the scene, and the children are the objects in the scene. Each children will have its own description of its type.
2) Another approach to sidestepping the problem of creating animations is to use an interpreter/parser to translate our animation function calls into actionscript code that will then be compiled into .swf flash files. These files can then be embedded into the webpage.
