8.8 - Chained Bezier Paths — Learn Computer Graphics using WebGL

Mathematical Proof¶

The criteria to sync two Bezier paths is easily derived from the Bezier parametric equations.

Bezier parametric equation

p = (1-t)³ * p0 + 3*(1-t)²*t* p1 + 3*(1-t)*t²* p2 + t³* p3;

Using derivatives we have:

speed = d(p)/dt = 3*[(1-t)^2(p1-p0) + 2(1-t)(t)(p2-p1) + (t^2)(p3-p2)]
acceleration = d(speed)/dt = 6*[(-1+t)(p1-p0) + (1-2t)(p2-p1) + t(p3-p2)]

To synchronize two paths we need to know the speed and acceleration at the end-points of the path. This is easily calculated by setting t to 0.0 and 1.0 respectively.

	path starts when `t===0.0`	path ends when `t===1.0`
speed =	`<3*(p1-p0)>`	`<3*(p3-p2)>`
acceleration =	`<6(-1)(p1-p0) + 6(p2-p1)>`	`<6(-1)(p2-p1) + 6(p3-p2)>`

A WebGL Program¶

The following WebGL program defines a complex path using four connected Bezier parametric equations. A class named BezierPath defines a path using four control points along with a starting and ending frame to define when the motion occurs. You can experiment with the animation by changing the control points and the frame intervals in the bezier_chained_scene.js code, lines 81-101. A new class called BezierSeries implements functionality to track a frame counter over the various Bezier paths. It is defined in the bezier_chained.js file in lines 204-262.

Please experiment with this WebGL program and then study the comments below.

Show: Code Canvas Run Info

bezier_chained.js
bezier_chained_scene.js

/**
 * bezier_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 defined by four control points.
 * @param control_points {Array} of four glPoint4 locations
 * @param start_frame {number} the frame to start the path animation
 * @param end_frame {number} the frame to end the path animation
 * @param color {Array} RGBA color for displaying the path
 * @constructor
 */
window.BezierPath = function (control_points,
                              start_frame, end_frame,
                              color) {
  // Constructor
  let self = this;

// Local references to the control points
  let p0 = control_points[0];
  let p1 = control_points[1];
  let p2 = control_points[2];
  let p3 = control_points[3];

// Objects needed for internal elements and calculations
  let P = new GlPoint4();
  let V = new GlVector3();

// Scratch objects for calculations
  let p = P.create();  // an intermediate point along the path;

// Vectors for calculating a speed vector
  let p0_p1 = V.create();
  let p1_p2 = V.create();
  let p2_p3 = V.create();

// The path vectors are constant, so calculate them once.
  V.subtract(p0_p1, p1, p0);
  V.subtract(p1_p2, p2, p1);
  V.subtract(p2_p3, p3, p2);

// Scratch vectors for calculating a speed vector.
  let p0_p1_scaled = V.create();
  let p1_p2_scaled = V.create();
  let p2_p3_scaled = V.create();
  let speed_vector = V.create();

// Vectors for the object's local coordinate system
  let u = V.create();
  let v = V.create();
  let n = V.create();
  let up = V.create(0, 1, 0);

// Global data
  self.start_frame = start_frame;
  self.end_frame = end_frame;
  self.control_points = control_points;

// The number of divisions in "time" along the path.
  let number_deltas = end_frame - start_frame;

/**----------------------------------------------------------------------
   * Calculate an intermediate point along a bezier path.
   * @param p {GlPoint4} the location along the path based on the frame number
   * @param frame {number} the frame to calculate the location along the path
   */
  self.intermediatePoint = function (p, frame) {

let t, t0, t1, t2, t3;

if (frame <= start_frame) {
      P.copy(p, p0);
    } else if (frame >= end_frame) {
      P.copy(p, p3);
    } else {
      t = (frame - start_frame) / number_deltas;

// p = (1-t)^3 * p0 + 3*(1-t)^2*t* p1 + 3*(1-t)*t^2* p2 + t^3* p3;
      t0 = Math.pow(1 - t, 3);
      t1 = 3.0 * t * Math.pow(1 - t, 2);
      t2 = 3.0 * Math.pow(t, 2) * (1 - t);
      t3 = Math.pow(t, 3);

p[0] = t0 * p0[0] + t1 * p1[0] + t2 * p2[0] + t3 * p3[0];
      p[1] = t0 * p0[1] + t1 * p1[1] + t2 * p2[1] + t3 * p3[1];
      p[2] = t0 * p0[2] + t1 * p1[2] + t2 * p2[2] + t3 * p3[2];
    }
  };

/**----------------------------------------------------------------------
   * Calculate a local coordinate system based on the speed vector
   * and an arbitrary "up vector"
   * @param frame {number} the frame to calculate the location along the path
   */
  self.calculateCoordinateSystem = function (frame) {

let t, t0, t1, t2;

if (frame <= start_frame) {
      t = 0.0;
    } else if (frame >= end_frame) {
      t = 1.0;
    } else {
      t = (frame - start_frame) / number_deltas;
    }

// Calculate the derivative, which gives the speed vector
    // speed_vector = 3*[(1-t)^2(p1-p0) + 2(1-t)(t)(p2-p1) + (t^2)(p3-p2)]
    t0 = 3 * (1 - t) * (1 - t);
    t1 = 3 * 2 * (1 - t) * t;
    t2 = 3 * t * t;

V.scale(p0_p1_scaled, p0_p1, t0);
    V.scale(p1_p2_scaled, p1_p2, t1);
    V.scale(p2_p3_scaled, p2_p3, t2);

V.add(speed_vector, p0_p1_scaled, p1_p2_scaled);
    V.add(speed_vector, speed_vector, p2_p3_scaled);

// If the speed_vector is zero, we need to use one of the vectors
    // defined by the control points. The location on the path determines
    // the best choice.
    if (V.length(speed_vector) === 0) {
      if (t < 0.33) {                  // beginning of path
        if (V.length(p0_p1) !== 0) {
          V.copy(speed_vector, p0_p1);
        } else if (V.length(p1_p2) !== 0) {
          V.copy(speed_vector, p1_p2);
        } else {
          V.copy(speed_vector, p1_p2);
        }
      } else if (t < 0.66) {           // middle of path
        if (V.length(p1_p2) !== 0) {
          V.copy(speed_vector, p1_p2);
        } else if (V.length(p0_p1) !== 0) {
          V.copy(speed_vector, p0_p1);
        } else {
          V.copy(speed_vector, p2_p3);
        }
      } else { // t > 0.66             // end of path
        if (V.length(p2_p3) !== 0) {
          V.copy(speed_vector, p2_p3);
        } else if (V.length(p1_p2) !== 0) {
          V.copy(speed_vector, p1_p2);
        } else {
          V.copy(speed_vector, p0_p1);
        }
      }
    }

V.copy(n, speed_vector);
    V.normalize(n);

V.crossProduct(u, up, n);
    V.crossProduct(v, n, u);
  };

/**----------------------------------------------------------------------
   * Calculate a transformation for the model along this path,
   * changing both the model's orientation and location.
   * @param m {Float32Array} the transform to fill in.
   * @param frame {number} which frame along the path.
   */
  self.transform = function (m, frame) {

self.intermediatePoint(p, frame);       // results in p
    self.calculateCoordinateSystem(frame);  // results in u,v,n vectors

m[0] = u[0]; m[4] = v[0]; m[8]  = n[0]; m[12] = p[0];
    m[1] = u[1]; m[5] = v[1]; m[9]  = n[1]; m[13] = p[1];
    m[2] = u[2]; m[6] = v[2]; m[10] = n[2]; m[14] = p[2];
    m[3] = 0;    m[7] = 0;    m[11] = 0;    m[15] = 1;
  };
};

//=========================================================================

/**------------------------------------------------------------------------
 * A complex path represented by a series of Bezier paths.
 * @param {...BezierPath} one_or_more_paths - a series of paths, the order matters
 * @constructor
 */
window.BezierSeries = function (one_or_more_paths) {

let self = this;

let current_segment = 0;

// Create an array and remember the segments that compose this BezierSeries
  self.segments = new Array(arguments.length);

for (let j=0; j<arguments.length; j++) {
    self.segments[j] = arguments[j];
  }

/**----------------------------------------------------------------------
   * Given a frame number, determine which path segment it is on.
   * @param frame
   * @returns {*}
   */
  self.activePath = function(frame) {

// Test the current_segment because there is a good chance it has not changed.
    if (frame >= self.segments[current_segment].start_frame &&
        frame <= self.segments[current_segment].end_frame) {
      return self.segments[current_segment];
    }

if (frame < self.segments[0].start_frame) {
      current_segment = 0;
    } else {
      current_segment = self.segments.length-1;
      for (let j=0; j<self.segments.length; j++) {
        if (frame >= self.segments[j].start_frame &&
            frame <= self.segments[j].end_frame) {
          current_segment = j;
          break;
        }
      }
    }

return self.segments[current_segment];
  };

/**----------------------------------------------------------------------
   * Create an appropriate transform for an object on a path based on which
   * frame to render.
   * @param transform {Float32Array} the transform to define.
   * @param frame {number} with frame is the animation on.
   */
  self.transform = function(transform, frame) {
    let path = self.activePath(frame);
    path.transform(transform, frame);
  };

};

/**
 * bezier_scene.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";

/** -----------------------------------------------------------------------
 * 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.BezierChainedScene = function (id, download, vshaders_dictionary,
                                fshaders_dictionary, models) {

// Private variables
  let self = this;
  let my_canvas = null;

let gl = null;
  let program = null;
  let uniform_program;
  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 sphere, sphere_gpu;
  let path_models = null;

let matrix = new window.GlMatrix4x4();
  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 base = matrix.create();
  let path_transform = matrix.create();

let point_translate = matrix.create();
  let point_scale = matrix.create();
  matrix.scale(point_scale, 0.1, 0.1, 0.1);

// 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 P = new GlPoint4();
  let path1_points = [P.create(-5, 0, 0),
                      P.create(-5, 0, 0),
                      P.create(-5, 0, 5),
                      P.create( 0, 0.5, 5)];
  let path2_points = [P.create( 0, 0.5, 5),
                      P.create( 5, 1, 5),
                      P.create( 5, 2,-5),
                      P.create( 0, 2.2,-5)];
  let path3_points = [P.create( 0, 2.2,-5),
                      P.create(-7, 3,-5),
                      P.create(-7, 4, 0),
                      P.create(-3, 5, 4)];
  let path4_points = [P.create(-3, 5, 4),
                      P.create( 2, 4.5,2.5),
                      P.create( 0, 4, 0),
                      P.create( 0, 4, 0)];
  let path1 = new BezierPath(path1_points, 0, 30);
  let path2 = new BezierPath(path2_points, 30, 60);
  let path3 = new BezierPath(path3_points, 60, 90);
  let path4 = new BezierPath(path4_points, 90, 120);
  let path = new BezierSeries(path1, path2, path3, path4);

let path_colors = [[0,0,0,1], [1,0,0,1], [0,1,0,1], [0,0,1,1]];
  self.path_segment_visible = [true, true, true, true];

self.current_frame = 0;
  self.frame_rate = 16; // 1/60 second in milliseconds.

//-----------------------------------------------------------------------
  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);
    matrix.multiplySeries(base, projection, camera, rotate_x_matrix, rotate_y_matrix);

// Render the cubes models
    path.transform(path_transform, self.current_frame);
    matrix.multiplySeries(transform, base, path_transform);
    _renderCubes(transform);

// Render the global axes
    matrix.multiplySeries(transform, base, scale_axes);
    x_axis.render(transform);
    y_axis.render(transform);
    z_axis.render(transform);

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render the paths:
    // Render the control points on the bezier path
    for (let k=0; k<path.segments.length; k++) {

if (self.path_segment_visible[k]) {
        let segment = path.segments[k];

for (let j = 0; j < 4; j++) {
          matrix.translate(point_translate, segment.control_points[j][0],
                                            segment.control_points[j][1],
                                            segment.control_points[j][2]);
          matrix.multiplySeries(transform, base, point_translate, point_scale);
          sphere.render(transform, path_colors[k]);
        }

path_models[k].render(base);
      }
    }
  };

//-----------------------------------------------------------------------
  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);

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"]);
  uniform_program = download.createProgram(gl, vshaders_dictionary["uniform_color"], fshaders_dictionary["uniform_color"]);

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);

// Create a small sphere to render the path control points
  sphere_gpu = new ModelArraysGPU(gl, models.Sphere, self.out);
  sphere = new RenderUniformColor(gl, uniform_program, sphere_gpu, self.out);

path_models = new Array(path.segments.length);
  for (let j=0; j<path_models.length; j++) {
    path_models[j] = new PathModel(gl, uniform_program, path.segments[j], path_colors[j]);
  }

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

A series of connected Bezier paths.

Timing:
current frame 0 : 0 120

Path segments:
Show path 0 (in black)
Show path 1 (in red)
Show path 2 (in green)
Show path 3 (in blue)

Show: Process information Warnings Errors

Open this webgl program in a new tab or window

Please note the following characteristics of the above demonstration program:

The first segment of the path sets p0 and p1 at the same location. This makes the initial speed zero, which means the object starts from a stationary position. The same technique is used for p2 and p3 of the last path segment so that the speed is zero at the end of the motion.
The starting and ending vectors defined by the control-points of each segment are deliberately set to make the speed and acceleration consistent over the transition from one path segment to the next, except in the last transition, where the speed vector makes a hard turn in direction. There is a visible “jump” or “jerk” in the animation at this transition point. (Try to change the definition of the last segment to remove this discontiuity.)
If you drag or click on the HTML slider that manipulates the frame counter, it becomes the active input element and it will accept keyboard commands. Use the arrow keys on the keyboard to step through the animation sequence one frame at a time to see the detailed motion of the object along the path.

Summary

A series of connected Bezier paths can describe complex motion by giving an animator control over the location, speed, and acceleration of an animated object. Careful design and placement of the control points is required to achieve control of all three path characteristics at the same time.

Glossary¶

Bezier parametric equation: A function of one variable, t, that calculates changes along a “path”.
Speed vector: The first derivative of an equation of motion. Speed always has a direction and a magnitude.

Self Assessment¶

Q-355: What is required for a Bezier path to have a speed of zero at its starting location?

control-points p0 and p1 must be equal.
Correct. This make the vector <p1-p0> be zero, which is the vector that controls speed when t=0.
the control-points must be co-linear.
Incorrect. Co-linear points make the path a straight line segment, but this does not control the speed of motion.
control-points p2 and p3 must be equal.
Incorrect. This is how you would make the speed zero at the end of the path.
control-points p1 and p2 must be equal.
Incorrect. This makes the acceleration zero at the mid-point of the path, but does not control speed.

u

n

v

n x u (cross product of n and u)
Correct. Using the "right-hand-rule," align your thumb with n, your index finder with u, and your middle finder will point in the direction of v.
u x n (cross product of u and n)
Incorrect. This calculates -v because the order of the cross-product is wrong.
v x n (cross product of v and n)
Incorrect. You can't use v to calculate v.
u x v (cross product of u and v)
Incorrect. You can't use v to calculate v.

increase the number of frames used for the motion.
Correct. Speed is distance divided by time. Increasing the time lowers the speed.
adjust the intermediate control points.
Incorrect. This will change the speed and acceleration but also the path's location.
adjust the starting and ending control points.
Incorrect. This will change the speed and acceleration but also the path's location.
make the path non-linear.
Incorrect. Not relevant.

8.8 - Chained Bezier Paths¶

Mathematical Proof¶

A WebGL Program¶

Glossary¶

Self Assessment¶