8.6 - Bezier Non-linear Path¶

If the control points of a Bezier parametric equation are not co-linear, the path it defines is non-linear. The path does not pass through the intermediate control points, but moves towards them. The path that is created is always inside the convex hull defined by the four control points.

Convex Hull

Given a set of points in 3D space, if you wrapped the points in cellophane and stretch the cellophane tight around the points, you would have the convex hull of the point set. It is the smalled area that contains all of the points and a line segment between any two of the points is totally contained inside the convex hull.

The following WebGL program defines a Bezier path using four non-linear control points. You can change the path by editing the point definitions in lines 46-49 of the code or by scaling the vectors defined by the intermediate control points. Experiment by modifying the path’s control points.

Show: Code Canvas Run Info

bezier_curve.js
bezier_curve_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 4 control points.
 * @param control_points {Array} of GlPoint4 locations
 * @param start_frame {number} the frame that starts the path animation
 * @param end_frame {number} the frame that ends the path animation
 * @constructor
 */
window.BezierCurvedPath = function (control_points, start_frame, end_frame) {

// Constructor
  let self = this;

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

// The points that define the path
  let p0 = control_points[0];
  let p1 = control_points[1];
  let p2 = control_points[2];
  let p3 = control_points[3];

self.control_points = control_points;
  self.start_frame = start_frame;
  self.end_frame = end_frame;

// Calculate speed and acceleration for display purposes
  let p1_temp = P.create();
  let p2_temp = P.create();
  self.path_points = null;
  self.speeds = null;
  self.accelerations = null;

// Remember the initial vectors defined by the control points so
  // they can be scaled for the demo.
  self.p1_p0 = V.createFrom2Points(p0, p1);
  self.p3_p2 = V.createFrom2Points(p2, p3);

/**----------------------------------------------------------------------
   * 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 number_deltas, t, t0, t1, t2, t3;

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

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 the speed and acceleration along the path.
   * This is for display purposes only - it is not needed to animate the path.
   * @param frame_rate {number} the number of frames per second.
   */
  self.calculateActualSpeeds = function (frame_rate) {

let which_frame = self.start_frame;
    let time_between_frames = 1.0 / frame_rate;

// Calculate the speeds and accelerations for display purposes only
    let number_frames = self.end_frame - self.start_frame + 1;
    self.path_points   = new Array(number_frames);
    self.speeds        = new Array(number_frames);
    self.accelerations = new Array(number_frames);

self.intermediatePoint(p1_temp, which_frame);
    self.path_points[0] = P.createFrom(p1_temp);
    self.speeds[0] = 0;

for (let index = 1; index < number_frames; index++) {
      which_frame += 1;
      self.intermediatePoint(p2_temp, which_frame);
      self.path_points[index] = P.createFrom(p2_temp);
      self.speeds[index] = P.distanceBetween(p1_temp, p2_temp) / time_between_frames;
      P.copy(p1_temp, p2_temp);
    }

self.accelerations[0] = 0;
    for (let index = 1; index < number_frames; index++) {
      self.accelerations[index] = (self.speeds[index] - self.speeds[index-1])
        / time_between_frames;
    }
  };
};

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

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

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 sphere, sphere_gpu;
  self.path_model = null;

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 base = 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;
  self.current_frame = 0;

// The points that define the path
  let P = new GlPoint4();
  self.control_points = [ P.create(-5, 0, 0),
                          P.create(-5, 0, 5),
                          P.create( 5, 0,-5),
                          P.create( 5, 0, 0) ];

self.path = new BezierCurvedPath(self.control_points, 30, 60);
  let p = P.create();
  self.display_path = true;

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

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

// Render the cubes models
    matrix.multiplySeries(transform, base, translate);
    _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 control points on the bezier path
    for (let j=0; j<4; j++) {
      matrix.translate(point_translate, self.path.control_points[j][0],
                                        self.path.control_points[j][1],
                                        self.path.control_points[j][2]);
      matrix.multiplySeries(transform, base, point_translate, point_scale);
      sphere.render(transform);
    }

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render the bezier path
    if (self.display_path) {
      self.path_model.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"]);

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

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

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

self.path.calculateActualSpeeds(self.events.frame_rate);
  self.path_model = new PathModel(gl, program, self.path.path_points, [0,0,0,1]);
};

Use a parametric equation to calculate points along a path.
Intermediate points influence acceleration and deceleration.

Calculated Animation Properties:
speed : ---
acceleration : ---
frames per second : ---

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

Control Points:
Show path
Scale <p1-p0> 1.0 : 0.0 3.0
---

Show: Process information Warnings Errors

Open this webgl program in a new tab or window

Summary

If the control points of a Bezier parametric equation are not co-linear, the resulting path will be curved, such that the path lies inside the convex hull defined by the four control points. The intermediate points, p1 and p2, “attract” the curve, but the path does not pass through them.

Glossary¶

Bezier parametric equation: A function of one variable, t, that calculates changes along a “path”.

Self Assessment¶

Only if the four points are co-linear.
Correct. If the four points do not define a straight line segment, only the first and last point are on the path.
true.
Incorrect. It only passes through the intermediate control points if all four points are co-linear.
false.
Partially correct, but the path does pass through the control points if they define a straight line segment.

true
Correct.
false
Incorrect.

Q-192: To create a Bezier parametric equation that defines constant speed (no acceleration) along a path requires which of the following criteria, even when the path is non-linear?

the length of the vectors < p1-p0 >, < p2-p1 >, and < p3-p2 > must be equal.
Correct. If the three vectors have the same length, the path defines constant speed.
the control points must be co-linear.
Incorrect. This makes the path linear, but there are many possibilities for the speed (as lesson 8.4 explains).
the length of the vectors < p1-p0 > and < p3-p2 > must be equal.
Incorrect. This makes the speed and acceleration symmetrical at the beginning and ending of the path, but it does not make the speed constant.
the number of frames must be equal to the number of changes in the parameter t.
Incorrect. This is a nonsensical statement.

Next Section - 8.7 - Bezier Path Orientation