bezierTangent() \ Language (API) \ Processing 1.0
Author: Casey Reas & Ben Fry
Description: Processing is an electronic sketchbook for developing ideas. It is a context for learning fundamentals of computer programming within the context of the electronic arts.
Keywords: Processing, Processing, Interactive Media, Electronic Arts, Programming, Java, Ben Fry, Casey Reas

Reference for Processing version 1.5. If you have a previous version, use the reference included with your software. If you see any errors or have suggestions, please let us know. If you prefer a more technical reference, visit the Processing Javadoc.

Name | ### bezierTangent()
Examples |
    noFill();
    bezier(85, 20, 10, 10, 90, 90, 15, 80);
    int steps = 6;
    fill(255);
    for (int i = 0; i <= steps; i++) {
      float t = i / float(steps);
      // Get the location of the point
      float x = bezierPoint(85, 10, 90, 15, t);
      float y = bezierPoint(20, 10, 90, 80, t);
      // Get the tangent points
      float tx = bezierTangent(85, 10, 90, 15, t);
      float ty = bezierTangent(20, 10, 90, 80, t);
      // Calculate an angle from the tangent points
      float a = atan2(ty, tx);
      a += PI;
      stroke(255, 102, 0);
      line(x, y, cos(a)*30 + x, sin(a)*30 + y);
      // This follwing line of code makes a line
      // inverse of the above line
      //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);
      stroke(0);
      ellipse(x, y, 5, 5);
    }
    noFill();
    bezier(85, 20, 10, 10, 90, 90, 15, 80);
    stroke(255, 102, 0);
    int steps = 16;
    for (int i = 0; i <= steps; i++) {
      float t = i / float(steps);
      float x = bezierPoint(85, 10, 90, 15, t);
      float y = bezierPoint(20, 10, 90, 80, t);
      float tx = bezierTangent(85, 10, 90, 15, t);
      float ty = bezierTangent(20, 10, 90, 80, t);
      float a = atan2(ty, tx);
      a -= HALF_PI;
      line(x, y, cos(a)*8 + x, sin(a)*8 + y);
    }
Description | Calculates the tangent of a point on a Bezier curve. There is a good definition of "tangent" at Wikipedia: http://en.wikipedia.org/wiki/Tangent
Syntax |
    bezierTangent(a, b, c, d, t)
Parameters |
a | int or float: coordinate of first point on the curve
b | int or float: coordinate of first control point
c | int or float: coordinate of second control point
d | int or float: coordinate of second point on the curve
t | float: value between 0 and 1
Usage | Web & Application
Related | bezier() bezierVertex() curvePoint()

Updated on August 30, 2010 04:29:39pm EDT