8.2 - Parametric Equations¶

Key frame animations require an animator to specify “key” properties of an object or a camera at “key” frames. Then the computer is required to calculate intermediate values for the specific properties between the key frames. Parametric equations are the ideal method for these calculations. A parametric equation is a function of a single variable, which we typically call t. Think of t as representing time. To be as generic as possible we assume that t varies between 0.0 and 1.0. You can always scale the results to match any particular time interval.

Let’s start off with a simple example that calculates points along a straight line between two points, p1 and p2. All intermediate points between p1 and p2 can be calculated using a fractional combination of the two points. The equation looks like this:

p = (1-t)*p1 + t*p2;  // where t varies from 0.0 to 1.0

Notice the following:

When t = 0.0, the equation becomes p = p1.
When t = 1.0, the equation becomes p = p2.
When t = 0.25, the equation becomes p = 0.75*p1 + 0.25*p2. The point p is 75% of p1’s value and 25% of p2’s value.
t + (1-t) is always equal to 1.0. This means we are always getting 100% of the two points. For any value of t, you are taking t% of p2 and the leftover percentage of p1.
For a straight line in 3D space, we are calculating 3 values but only varying a single parameter t:
- p_x = (1-t)*p1_x + t*p2_x
- p_y = (1-t)*p1_y + t*p2_y
- p_z = (1-t)*p1_z + t*p2_z

Animating Anything¶

You can vary any type of value using a parametric equation. For example, let’s vary the scale of a model from 3.0 to 5.0. The equation would be:

p = (1-t)*3.0 + t*5.0;  // where t varies from 0.0 to 1.0

Or, let’s vary a normal vector from a vector aligned with the x axis, <1,0,0>, to a vector aligned with the y axis, <0,1,0>. The equations would be:

nx = (1-t)*1.0 + t*0.0;  // where t varies from 0.0 to 1.0
ny = (1-t)*0.0 + t*1.0;  // where t varies from 0.0 to 1.0
nz = (1-t)*0.0 + t*0.0;  // where t varies from 0.0 to 1.0

Rotations Using Parametric Equations¶

Calculating intermediate points around a circular path that is centered about an arbitrary 3D point and about an arbitrary rotation vector is best done with a matrix transformation. Since all rotation is about the origin, you need to do the following three steps:

Translate the center point to the global origin.
Use a rotation transform to rotate about the axis of rotation.
Translate the center point back to its original position.

To vary the angle of rotation use a parametric equation. For example, to vary an angle between 10 and 55 degrees, the parametric equation would be:

angle = (1-t)*10.0 + t*55.0;  // where t varies from 0.0 to 1.0

WebGL Example Program¶

Study the code in path.js below. Notice that the parametric parameter t is calculated as a percentage between 0.0 and 1.0 of the total number of frames in the animation. The calculation is on line 66. Experiment with the program and the code.

Show: Code Canvas Run Info

path.js
animate_scene.js

/**
 * path.js, By Wayne Brown, Fall 2017
 */

/**
 * The MIT License (MIT)
 *
 * Copyright (c) 2015 C. Wayne Brown
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

"use strict";

/**------------------------------------------------------------------------
 * Store and manipulate a path between two points.
 * @param control_points {Array} of GlPoint4 locations
 * @param start_frame {number} which frame the animation starts on
 * @param end_frame {number} which frame the animation ends on
 * @constructor
 */
window.Path = function (control_points, start_frame, end_frame) {

// Constructor
  let self = this;

// The points that define the path
  self.control_points = control_points;
  self.start_frame    = start_frame;
  self.end_frame      = end_frame;
  self.number_frames  = (self.end_frame - self.start_frame) + 1;

/**----------------------------------------------------------------------
   * Calculate an intermediate point along a straight path between P1 and P2.
   * @param p {GlPoint4} the result of the intermediate point calculation
   * @param frame {number} which frame of an animation
   */
  self.intermediatePoint = function (p, frame) {

let p1, p2, t;

p1 = self.control_points[0];
    p2 = self.control_points[1];

if (frame <= self.start_frame) {
      t = 0.0;
    } else if (frame >= self.end_frame) {
      t = 1.0;
    } else {
      t = (frame - self.start_frame) / (self.number_frames - 1);
    }

p[0] = (1 - t) * p1[0] + t * p2[0];
    p[1] = (1 - t) * p1[1] + t * p2[1];
    p[2] = (1 - t) * p1[2] + t * p2[2];
  };

};

/**
 * animate_scene.js, By Wayne Brown, Fall 2017
 */

"use strict";

/** -----------------------------------------------------------------------
 * Create a WebGL 3D scene, store its state, and render its models.
 *
 * @param id {string} The id of the webglinteractive directive
 * @param download {SceneDownload} An instance of the SceneDownload class
 * @param vshaders_dictionary {object} A dictionary of vertex shaders.
 * @param fshaders_dictionary {object} A dictionary of fragment shaders.
 * @param models {object} A dictionary of models.
 * @constructor
 */
window.AnimateScene = function (id, download, vshaders_dictionary,
                                fshaders_dictionary, models) {

// Private variables
  let self = this;

let my_canvas;
  let gl = null;
  let program = null;
  let textx, texty, textz, cubex, cubey, cubez, cube_center;
  let textx_gpu, texty_gpu, textz_gpu, cubex_gpu, cubey_gpu,
      cubez_gpu, cube_center_gpu;

let x_axis_gpu, y_axis_gpu, z_axis_gpu;
  let x_axis, y_axis, z_axis;

let matrix = new window.GlMatrix4x4();
  let translate = matrix.create();
  let transform = matrix.create();
  let projection;
  let camera = matrix.create();
  let rotate_x_matrix = matrix.create();
  let rotate_y_matrix = matrix.create();
  let scale_axes = matrix.create();

let P = new GlPoint4();
  let p = P.create();

// Public variables that will possibly be used or changed by event handlers.
  self.angle_x = 0.0;
  self.angle_y = 0.0;
  self.out = download.out;

let control_points = [ P.create(-5, 0, 0),
                         P.create( 5, 0, 0) ];
  self.path = new Path(control_points, 30, 60);
  self.events = null;
  self.current_frame = 0;

//-----------------------------------------------------------------------
  function _renderCubes(transform) {
    textx.render(transform);
    texty.render(transform);
    textz.render(transform);
    cubex.render(transform);
    cubey.render(transform);
    cubez.render(transform);
    cube_center.render(transform);
  }

//-----------------------------------------------------------------------
  self.render = function () {

// Build individual transforms
    matrix.setIdentity(transform);
    matrix.rotate(rotate_x_matrix, self.angle_x, 1, 0, 0);
    matrix.rotate(rotate_y_matrix, self.angle_y, 0, 1, 0);

self.path.intermediatePoint(p, self.current_frame);
    matrix.translate(translate, p[0], p[1], p[2]);

// Render the cubes models
    matrix.multiplySeries(transform, projection, camera, rotate_x_matrix, rotate_y_matrix, translate);
    _renderCubes(transform);

// Render the global axes
    matrix.multiplySeries(transform, projection, camera, rotate_x_matrix, rotate_y_matrix, scale_axes);
    x_axis.render(transform);
    y_axis.render(transform);
    z_axis.render(transform);
  };

//-----------------------------------------------------------------------
  self.delete = function () {

// Clean up shader programs
    gl.deleteShader(program.vShader);
    gl.deleteShader(program.fShader);
    gl.deleteProgram(program);

// Delete each model's VOB
    textx.delete(gl);
    texty.delete(gl);
    textz.delete(gl);
    cubex.delete(gl);
    cubey.delete(gl);
    cubez.delete(gl);
    cube_center.delete(gl);
    x_axis.delete(gl);
    y_axis.delete(gl);
    z_axis.delete(gl);
    x_axis.delete(gl);
    y_axis.delete(gl);
    z_axis.delete(gl);

self.events.removeAllEventHandlers();
  };

//-----------------------------------------------------------------------
  // Object constructor. One-time initialization of the scene.

// Get the rendering context for the canvas
  my_canvas = download.getCanvas(id + "_canvas");  // by convention
  if (my_canvas) {
    gl = download.getWebglContext(my_canvas);
  }
  if (!gl) {
    return;
  }

// Set up the rendering program and set the state of webgl
  program = download.createProgram(gl, vshaders_dictionary["color_per_vertex"], fshaders_dictionary["color_per_vertex"]);

gl.useProgram(program);

gl.enable(gl.DEPTH_TEST);

gl.clearColor(0.98, 0.98, 0.98, 1.0);

projection = matrix.createPerspective(45.0, 1.0, 1.0, 100.0);
  matrix.lookAt(camera, 0, 0, 24, 0, 0, 0, 0, 1, 0);

// Create Vertex Object Buffers for the cubes models and
  // pre-processing for rendering.
  textx_gpu = new ModelArraysGPU(gl, models.textx, self.out);
  textx = new RenderColorPerVertex(gl, program, textx_gpu, self.out);

texty_gpu = new ModelArraysGPU(gl, models.texty, self.out);
  texty = new RenderColorPerVertex(gl, program, texty_gpu, self.out);

textz_gpu = new ModelArraysGPU(gl, models.textz, self.out);
  textz = new RenderColorPerVertex(gl, program, textz_gpu, self.out);

cubex_gpu = new ModelArraysGPU(gl, models.cubex, self.out);
  cubex = new RenderColorPerVertex(gl, program, cubex_gpu, self.out);

cubey_gpu = new ModelArraysGPU(gl, models.cubey, self.out);
  cubey = new RenderColorPerVertex(gl, program, cubey_gpu, self.out);

cubez_gpu = new ModelArraysGPU(gl, models.cubez, self.out);
  cubez = new RenderColorPerVertex(gl, program, cubez_gpu, self.out);

cube_center_gpu = new ModelArraysGPU(gl, models.cube_center, self.out);
  cube_center = new RenderColorPerVertex(gl, program, cube_center_gpu, self.out);

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  // Setup of models to render the global axes
  x_axis_gpu = new ModelArraysGPU(gl, models.x_axis, self.out);
  y_axis_gpu = new ModelArraysGPU(gl, models.y_axis, self.out);
  z_axis_gpu = new ModelArraysGPU(gl, models.z_axis, self.out);

x_axis = new RenderColorPerVertex(gl, program, x_axis_gpu, self.out);
  y_axis = new RenderColorPerVertex(gl, program, y_axis_gpu, self.out);
  z_axis = new RenderColorPerVertex(gl, program, z_axis_gpu, self.out);

// Set the scaling for the global axes.
  matrix.scale(scale_axes, 0.4, 0.4, 0.4);

// Set up callbacks for user and timer events
  self.events = new AnimateEvents(id, self);
};

Animate an object along a path between two points.

Timing:
current frame 0 : 0 120
animation: start frame: end frame:

Show: Process information Warnings Errors

Open this webgl program in a new tab or window

You might experiment with values for t that are less than 0.0 or greater than 1.0. In path.js, remove the cascading if statement that makes sure the value for t is between 0.0 and 1.0. The positions calculated along the path are still along a straight line, but outside the initial starting and ending locations. (You will have to click and drag the scene to rotate the view to see the model.)

Glossary¶

parametric equation: Calculate an intermediate value based on a starting and ending value. Any particular intermediate value is defined by a single parameter t, which varies between 0.0 and 1.0.

Self Assessment¶

t

"time"
Correct. The answer is in quotes because the t value is normalized to a range from 0.0 to 1.0.
distance
Incorrect. You could think of t as a percentage of distance, but it is more related to time.
speed
Incorrect. Speed is the distance traveled over a set unit of time.
acceleration
Incorrect. Acceleration is the change in speed.

p1

(0,0,0)

p2

(10,0,0)

t=0.0

(0, 0, 0)
Correct. You always get the starting point when t === 0.0.
(10,0,0)
Incorrect. You get the ending point when t === 1.0.
(0.5, 0, 0);
Incorrect. You would get the mid-point when t === 0.5.
(0, 0, 0.5)
Incorrect. This location is not on the path for any value of t.

p1

(0,0,0)

p2

(10,0,0)

t=1.0

(10,0,0)
Correct. You always get the ending point when t === 1.0.
(0, 0, 0)
Incorrect. You get the starting point when t === 0.0.
(0.5, 0, 0);
Incorrect. You would get the mid-point when t === 0.5.
(0, 0, 0.5)
Incorrect. This location is not on the path for any value of t.

p1

(0,0,0)

p2

(10,0,0)

t=0.2

(2, 0, 0)
Correct.
(2, 2, 2)
Incorrect. Make sure you use the correct component value for each point.
(0.2, 0.4, 0.6)
Incorrect.
(0, 0, 2)
Incorrect. Make sure you use the correct component value for each point.

Next Section - 8.3 - Basis Functions