HTML5 Canvas 3D WebGL (TM) js Library
 

Accelerated Motion - taccGL Tutorial

Sample HTML / CSS Text

Dummy text to replace by a text of your choice.

taccgl™ can simulate the physical concept of accelerated motion with a constant acceleration. With a positive acceleration, the motion starts with an initial velocity and accelerates, with a negative acceleration the motion decelerates. See the following 3 examples with no, positive, and negative acceleration.

Alternatively you can give the initial or the final velocity with vBegin or vEnd, the acceleration is then determined automatically.

taccgl.actor("sample9"). to({oy:500}). dur(5). start()
RUN
taccgl.actor("sample9"). to({oy:500}). dur(2.5) . acceleration(40) . start()
RUN
taccgl.actor("sample9"). to({oy:500}). dur(5) . acceleration(40) . start()
RUN
taccgl.actor("sample9"). to({oy:500}). dur(10) . acceleration(40) . start()
RUN
taccgl.actor("sample9"). to({oy:500}). dur(2.5) . acceleration(0,40,0) . start()
RUN
taccgl.actor("sample9"). to({oy:500}). dur(5) . acceleration(0,40,0) . start()
RUN
taccgl.actor("sample9"). to({oy:500}). dur(10) . acceleration(0,40,0) . start()
RUN
taccgl.actor("sample9"). to({oy:500}). dur(5) . acceleration(-40) . start()
RUN
taccgl.actor("sample9"). to({oy:500}). vBegin(0) . dur(5). start()
RUN
taccgl.actor("sample9"). to({oy:500}). vEnd(0) . dur(5). start()
RUN
taccgl.actor("sample9"). to({oy:500}). vBegin(1000) . dur(1). start()
RUN
taccgl.actor("sample9"). to({oy:500}). vBegin(1000) . dur(5). start()
RUN
taccgl.actor("sample9"). from({oy:-300}). dur(1). start();
taccgl.actor("sample9"). startTime(1). to({oy:500}). dur(5). vBegin(300) . start()
RUN
taccgl.actor("sample9"). to({oy:500}). vBegin(0,1000,0) . dur(5). start()
RUN
taccgl.actor("sample9"). to({oy:500}). vBegin(-1000) . dur(5). start()
RUN

Acceleration and velocity can as well be given in vector form. The examples below show various values and directions for the initial velocity and the acceleration.

taccgl.actor("sample9b"). dur(2). vBegin(0,-500,0). start()
RUN
taccgl.actor("sample9b"). to({ox:-500}). dur(2). vBegin(0,-500,0). start()
RUN
taccgl.actor("sample9b"). to({ox:-500}). dur(2). vBegin(500,-500,0). start()
RUN
taccgl.actor("sample9b"). to({ox:-500}). dur(2). vBegin(-500,-500,0). start()
RUN
taccgl.actor("sample9b"). to({ox:-500}). dur(2). acceleration (0,500,0). start()
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Colors and Textures
Previous Page: Simple Rotation