 |
 |
 |
 |
Name |
|
bezierTangent() |
 |
|
|
Examples |
|
 |
bezier(85, 20, 10, 10, 90, 90, 15, 80);
ellipseMode(CENTER_DIAMETER);
int steps = 6;
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);
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);
}
|
 |
 |
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 += PI/2.0;
line(x, y, cos(a)*8 + x, sin(a)*8 + y);
}
|
 |
|
Description |
|
Calcuates 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 |
|
bezierPoint(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() |
|
|