HTML5 Canvas 2D Library
 

borderFun0 Library Method

Short Description: Function defining initial border

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

This function can be provided by the user. Alternatively one of the methods , , , , or can be used. If non is used and no user function is supplied, 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.borderFun0 = 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.borderFun0 = 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.borderFun0 = function (x,y,z,rx,ry) { rx=(1-ry*ry*0.8)*(rx-0.5)+0.5;
this.resx=this.x0+this.wx0*rx+this.hx0*ry; this.resy=this.y0+this.wy0*rx+this.hy0*ry; this.resz=this.z0+this.wz0*rx+this.hz0*ry; }
a.circular().nparts(1000); a.start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:taccglFlexiBorder.borderFun1 - Function defining border at end of animation
Previous Page: taccglFlexiBorder.test2 - Show test pattern