Processing: Shape Curves

Front 1

bezier() (part 1 of 2)

Back 1

Description Draws a Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point. The middle parameters specify the control points which define the shape of the curve. Bezier curves were developed by French engineer Pierre Bezier. Using the 3D version requires rendering with P3D (see the Environment reference for more information).

Example

http://processing.org/reference/bezier_.html

Front 2

bezier() (part 2 of 2)

Back 2

Syntax

bezier(x1, y1, x2, y2, x3, y3, x4, y4)
bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

Parameters

x1 float: coordinates for the first anchor point
y1 float: coordinates for the first anchor point
z1 float: coordinates for the first anchor point
x2 float: coordinates for the first control point
y2 float: coordinates for the first control point
z2 float: coordinates for the first control point
x3 float: coordinates for the second control point
y3 float: coordinates for the second control point
z3 float: coordinates for the second control point
x4 float: coordinates for the second anchor point
y4 float: coordinates for the second anchor point
z4 float: coordinates for the second anchor point

Front 3

bezierDetail()

Back 3

Sets the resolution at which Beziers display. The default value is 20. This function is only useful when using the P3D renderer; the default P2D renderer does not use this information.

Example

// Move the mouse left and right to see the detail change

void setup() {
size(100, 100, P3D);
noFill();
}

void draw() {
background(204);
int d = int(map(mouseX, 0, 100, 1, 20));
bezierDetail(d);
bezier(85, 20, 10, 10, 90, 90, 15, 80);
}


Syntax

bezierDetail(detail)

Parameters

detail int: resolution of the curves

Front 4

bezierPoint()

Back 4

Evaluates the Bezier at point t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are points on the curve, and b and c are the control points. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a bezier curve at t.

Example

http://processing.org/reference/bezierPoint_.html

noFill();
bezier(85, 20, 10, 10, 90, 90, 15, 80);
fill(255);
int steps = 10;
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);
ellipse(x, y, 5, 5);
}

Syntax

bezierPoint(a, b, c, d, t)

Parameters

a float: coordinate of first point on the curve
b float: coordinate of first control point
c float: coordinate of second control point
d float: coordinate of second point on the curve
t float: value between 0 and 1

Front 5

bezierTangent()

Back 5

Calculates the tangent of a point on a Bezier curve.

Example
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);
The following 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);
}
Syntax
bezierTangent(a, b, c, d, t)
Parameters
a float: coord of first point on the curve
b float: coord of first control point
c float: coord of second control point
d float: coord of second point on the curv
t float: value 0 - 1

Front 6

curve() (part 1 of 2)

Back 6

Draws a curved line on the screen. The first and second parameters specify the beginning control point and the last two parameters specify the ending control point. The middle parameters specify the start and stop of the curve. Longer curves can be created by putting a series of curve() functions together or using curveVertex(). An additional function called curveTightness() provides control for the visual quality of the curve. The curve() function is an implementation of Catmull-Rom splines. Using the 3D version requires rendering with P3D (see the Environment reference for more information).

Example

http://processing.org/reference/curve_.html

noFill();
stroke(255, 102, 0);
curve(5, 26, 5, 26, 73, 24, 73, 61);
stroke(0);
curve(5, 26, 73, 24, 73, 61, 15, 65);
stroke(255, 102, 0);
curve(73, 24, 73, 61, 15, 65, 15, 65);

Front 7

curve() (part 2 of 2)

Back 7

Syntax

curve(x1, y1, x2, y2, x3, y3, x4, y4)
curve(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

Parameters

x1 float: coordinates for the beginning control point
y1 float: coordinates for the beginning control point
x2 float: coordinates for the first point
y2 float: coordinates for the first point
x3 float: coordinates for the second point
y3 float: coordinates for the second point
x4 float: coordinates for the ending control point
y4 float: coordinates for the ending control point
z1 float: coordinates for the beginning control point
z2 float: coordinates for the first point
z3 float: coordinates for the second point
z4 float: coordinates for the ending control point

Front 8

curveDetail()

Back 8

Sets the resolution at which curves display. The default value is 20. This function is only useful when using the P3D renderer as the default P2D renderer does not use this information.

Example
void setup() {
size(100, 100, P3D);
noFill();
noLoop();
}

void draw() {
curveDetail(1);
drawCurves(-15);
stroke(126);
curveDetail(2);
drawCurves(0);
stroke(255);
curveDetail(4);
drawCurves(15);
}

void drawCurves(float y) {
curve( 5, 28+y, 5, 28+y, 73, 26+y, 73, 63+y);
curve( 5, 28+y, 73, 26+y, 73, 63+y, 15, 67+y);
curve(73, 26+y, 73, 63+y, 15, 67+y, 15, 67+y);
}

Syntax

curveDetail(detail)

Parameters

detail int: resolution of the curves

Front 9

curvePoint()

Back 9

Evaluates the curve at point t for points a, b, c, d. The parameter t may range from 0 (the start of the curve) and 1 (the end of the curve). a and d are points on the curve, and b and c are the control points. This can be used once with the x coordinates and a second time with the y coordinates to get the location of a curve at t.

Example
noFill();
curve(5, 26, 5, 26, 73, 24, 73, 61);
curve(5, 26, 73, 24, 73, 61, 15, 65);
fill(255);
ellipseMode(CENTER);
int steps = 6;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = curvePoint(5, 5, 73, 73, t);
float y = curvePoint(26, 26, 24, 61, t);
ellipse(x, y, 5, 5);
x = curvePoint(5, 73, 73, 15, t);
y = curvePoint(26, 24, 61, 65, t);
ellipse(x, y, 5, 5);
}

Syntax
curvePoint(a, b, c, d, t)
Parameters
a float: coord of first point on the curve
b float: coord of second point on the curve
c float: coord of third point on the curve
d float: coord of fourth point on the curve
t float: value 0-1

Front 10

curveTangent()

Back 10

Calculates the tangent of a point on a curve.

Example

http://processing.org/reference/curveTangent_.html

noFill();
curve(5, 26, 73, 24, 73, 61, 15, 65);
int steps = 6;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = curvePoint(5, 73, 73, 15, t);
float y = curvePoint(26, 24, 61, 65, t);
//ellipse(x, y, 5, 5);
float tx = curveTangent(5, 73, 73, 15, t);
float ty = curveTangent(26, 24, 61, 65, t);
float a = atan2(ty, tx);
a -= PI/2.0;
line(x, y, cos(a)*8 + x, sin(a)*8 + y);
}

Syntax

curveTangent(a, b, c, d, t)

Parameters

a float: coordinate of first point on the curve
b float: coordinate of first control point
c float: coordinate of second control point
d float: coordinate of second point on the curve
t float: value between 0 and 1

Front 11

curveTightness()

Back 11

Modifies the quality of forms created with curve() and curveVertex(). The parameter tightness determines how the curve fits to the vertex points. The value 0.0 is the default value for tightness (this value defines the curves to be Catmull-Rom splines) and the value 1.0 connects all the points with straight lines. Values within the range -5.0 and 5.0 will deform the curves but will leave them recognizable and as values increase in magnitude, they will continue to deform.

Example

// Move the mouse left and right to see the curve change

void setup() {
size(100, 100);
noFill();
}

void draw() {
background(204);
float t = map(mouseX, 0, width, -5, 5);
curveTightness(t);
beginShape();
curveVertex(10, 26);
curveVertex(10, 26);
curveVertex(83, 24);
curveVertex(83, 61);
curveVertex(25, 65);
curveVertex(25, 65);
endShape();
}


Syntax

curveTightness(tightness)

Parameters

tightness float: amount of deformation from the original vertices