This short tutorial introduces you to the three types of curves in p5.js: arcs, spline curves, and Bézier curves.
Arcs are the simplest curves to draw, it is defined an arc as a section of an ellipse. You call the function with these parameters:
arc (x, y, w, h, start, stop, [mode])
The first four parameters (x,y,w,h) define the boundary box for your arc and the next two (start, stop), are the start and stop angles for the arc. These angles are given in radians and are measured clockwise with zero degrees pointing east and PI radians equals 180°.
Arcs are fine, but they’re plain. The next function, curve(), lets you draw curves that aren’t necessarily part of an arc. This function draws what is technically called a Rom-Catmull Spline. To draw the curve, you must specify the (x, y) coordinates of the points where the curve starts and ends. You must also specify two control points which determine the direction and amount of curvature. The first two and last two parameters are the control points of the curve. A call to curve() uses these parameters:
curve (cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);
How do the control points affect the way the curve looks?
The tangent to the curve at the start point is parallel to the line between control point one and the end of the curve. The tangent to the curve at the end point is parallel to the line between the start point and control point 2.
The following diagram shows a curve and the points can be dragged to show how the control point affects the curve:
Continuous Spline Curves
In isolation, a single curve() is not particularly appealing. To draw a continuous curve through several points, you are better off using the curveVertex() function. You can only use this function when you are creating a shape with the beginShape() and endShape() functions.In common usage, people use the first point of the curve as the first control point and the last point of the curve as the last control point.
Though better than arcs, spline curves don’t seem to have those graceful, swooping curves that say “art.” For those, you need to draw Bézier curves with the bezier() function. As with spline curves, the bezier() function has eight parameters, but the order is different. The first two and last two parameters are the start and end points while middle four points are the control points.
bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);
While it is difficult to visualize how the control points affect a curve(), it is slightly easier to see how the control points affect Bézier curves. Imagine two poles and several rubber bands. The poles connect the control points to the endpoints of the curve. A rubber band connects the tops of the poles. Two more rubber bands connect the midpoints of the poles to the midpoint of the first rubber band. One more rubber band connects their midpoints. The center of that last rubber band is tied to the curve. This diagram helps to explain, the points can be moved to change the curve.
Continuous Bézier Curves
Just as curveVertex() allows you to make continuous spline curves, bezierVertex() lets you make continuous Bézier curves. Again, you must be within a beginShape() / endShape() sequence. You must use vertex(startX, startY) to specify the starting anchor point of the curve. Subsequent points are specified with a call to:
bezierVertex(cpx1, cpy1, cpx2, cpy2, x, y);
Here is a continuous Bézier curve, but it doesn’t join smoothly. In order to make two curves A and B smoothly continuous, the last control point of A, the last point of A, and the first control point of B have to be on a straight line.
- Use arc() when you need a segment of a circle or an ellipse. You can’t make continuous arcs or use them as part of a shape.
- Use curve() when you need a small curve between two points. Use curveVertex() to make a continuous series of curves as part of a shape.
- Use bezier() when you need long, smooth curves. Use bezierVertex() to make a continuous series of Bézier curves as part of a shape.