Reference for Processing version 1.2. 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
example pic
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);
}
example pic
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 June 14, 2010 12:05:29pm EDT

Creative Commons License