HTML5 Canvas 3D WebGL (TM) js Library
 

Accelerated Motion - taccGL Tutorial

In addition to the with contsant velocity taccgl™ can perform motions with constant acceleration. I.e. the object becomes slower or faster during the motion whereby the acceleration is contant.

There are various ways to specify such a motion. In every possibility you need to specify starting and end point as with the . Then you can either

  1. specify the velocity at begin of the motion vBegin
  2. specify the velocity at end of the motion vEnd
  3. directly specify the acceleration acceleration
  4. specify the acceleration in Scalar form scalarAcceleration
  5. use contAccel to continue a previous motion to specified coordinates (this basically defines the begin-velocity implicitly as the end-velocity of a previous transition)

Very common examples set the velocity at the begin or end of the motion to zero for a motion that smoothly stops or smoothly starts:

var a=taccgl.actor("testimg") .from(0,1000,0).vEnd(0,0,0) .start();RUN
var a=taccgl.actor("testimg") .to(0,1000,0).vBegin(0,0,0) .start();RUN
var a=taccgl.actor("testimg"); a.to(a.x,a.y+300,0) .vBegin(0,0,0) .start();a .contAccel(a.x,a.y+600,0,1) .start()RUN
var a=taccgl.actor("testimg") .to(0,500,0) .vBegin(0,0,0) .start();
var b=a.contAccel(0,500,0,1) .start(); b.contAccel(a.x,a.y,0,1) .start();
RUN

Acceleration is a vector which is not necessarily in parallel to the direction from the starting to the end point.

var a=taccgl.a("logoimg").paint(); a.from(0,1000,0).to(500,1000,0).vBegin(0,0,0).start();
var b=a.contAccel(1000,1500,0,1).start().start();
RUN
var a=taccgl.a("logoimg").paint(); a.from(0,1000,0).to(1000,1000,0) .acceleration(0,1000,0).start();RUN
var a=taccgl.a("logoimg").paint(); a.from(0,1000,0).to(1000,1000,0) .acceleration(0,-1000,0).start();RUN
var a=taccgl.a("logoimg").paint(); a.from(0,1000,0).to(1000,1000,0) .acceleration(1000,0,0).start();RUN
var a=taccgl.a("logoimg").paint(); a.from(0,1000,0).to(1000,1000,0) .acceleration(-1000,0,0).start();RUN
var a=taccgl.a("logoimg").paint(); a.from(0,1000,0).to(1000,1000,0) .acceleration(5000,0,0).start();RUN
var a=taccgl.a("logoimg").paint(); a.from(0,1000,0).to(1000,1000,0) .acceleration(-5000,0,0).start();RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Colors and Textures
Previous Page: Simple Rotation
Please Add a Comment or Question, click here!