HTML5 Canvas 3D WebGL (TM) js Library
 

borderFun1 Library Method

Short Description: Function defining border at end of animation

Signature: f.borderFun1 (x,y,z)
Class: taccglFlexiBorder Class
 

This function can be provided by the user. Alternatively one of the methods Flip1, Circle1, Rect1, Wave1, or ZWave1 can be used. If non is used and no user function is supplied, Rect1 is the default.

The function receives coordinates of a point, which is guranteed to sit on the original border of the animated object. Original border means the parallelogram of the object interpreted as a Transition Class object. The method must set this.resx, this.resy, and this.resz. If this.resx=x, this.resy=y, and this.resz=z then the flexiBorder object will look like the original parallelogram. By (slightly) modifying the coordinates, the parallelogram can be deformed

Examples

var a=taccgl.actor("testimg",taccgl.flexiBorder);
a.borderFun1 = function (x,y,z,rx,ry) {
this.resx=x; this.resy=y; this.resz=z - (rx-0.5)*(rx-0.5)*(ry-0.5)*(ry-0.5)*16*1200;}
a.circular().nparts(1000); a.start();
RUN
var a=taccgl.actor("testimg",taccgl.flexiBorder);
a.borderFun1 = function (x,y,z,rx,ry) {
this.resx=x; this.resz=z; this.resy=y;
var s=(rx-0.5)*2;
if (ry==1) this.resy += (1-s*s*(s-0.2))*500;
}
a.acceleration(-100,0,0).start();
RUN
var a=taccgl.actor("testimg",taccgl.flexiBorder);
a.borderFun1 = function (x,y,z,rx,ry) { rx=(1-ry*ry*0.8)*(rx-0.5)+0.5;
this.resx=this.x1+this.wx1*rx+this.hx1*ry; this.resy=this.y1+this.wy1*rx+this.hy1*ry; this.resz=this.z1+this.wz1*rx+this.hz1*ry; }
a.circular().nparts(1000); a.start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:taccglFlexiBorder.Flip
Previous Page: taccglFlexiBorder.borderFun0 - Function defining initial border