Bezier curves. Bezier curves are used in computer graphics to produce curves which appear reasonably smooth at all scales (as opposed to polygonal lines, which will not scale nicely).
Left: Click 4 points on canvas and the Bezier curve will be drawn. The first and last points are called anchor points (shown in blue circles) and are the first and last points on the curve. The 2nd and 3rd points are control points (shown in green squares). The control point can be considered to pull the curve towards them. The Bezier curve at the end points is tangent to the line from the anchor point to the corresponding control point.
Yellow is the fill color. The stroke is red.
To use the top canvas: You can drag any of the four points by putting the cursor over the point and moving the mouse while holding the button down. To start a new curve, click "Clear" and then click 4 points on the canvas.
Options: If you click the "Show points" box, 10 points along the curve will be plotted and their coordinates are displayed. Selecting the "Show tangents" options will draw the tangent to the curve at the 10 points. "Show generate" shows a "mechanical" way to draw the curve. The orange points move along their respective lines in such a way that the distance between the end points of the lines are always proportional.
Sometimes it takes more than one curve for a particular situation. For example, if you want to form a heart (check "Show heart", if needed), there is clearly no way to get one smooth curve to make the heart shape. The canvas on the right illustrates two ways of extending a Bezier curve by adding additional points. "Smooth" extends the curve in a smooth manner. The first time you click following a complete Bezier curve, you actually get two control points. The first is symmetric to the control point for the last anchor and the second one is at the mouse click point. Click another time for the new anchor point. Using this option you get a new curve every two clicks. When you use the "Corners" option, after a curve is drawn, the first two clicks set control points and the third sets the new anchor point.
You can drag the existing anchor and control points. If you accidentally click the canvas, you can click "Delete last point" to delete the unwanted point.
Practice making a heart. If needed, refresh the sketch so that the heart and the first 7 points and two Bezier curves are drawn. The anchors are on heart shape. but notice the control points are on the "outside" or convex side of the curve so they pull the curve in that direction. With "Smooth" checked, click above and to the left of the bottom heart point just a little inside the heart to get another control point that will pull the heart slightly to right. Then click the bottom point of the heart to get an anchor. Carefully adjust the last two points to get a good left side of the heart. Now switch to the "Corners" mode so you can get a point at the bottom of the heart. Start clicking up the right side of the heart paying attention to the symmetrical points on the left side. Optionally switch back to the "Smooth" mode. Continue clicking on the right side watching symmetry with the left side. (If you switched back to the "Smooth" mode remember that it will insert the control point following the anchor point for you. When you get to the last point that should be on the top of the very first point on the initial curve, you will have to "miss" it a little then drag it to its correct position. Adjust points as needed. When you happy with you curve, Unclick "Show Heart", "Hide Controls" and "Hide Anchors" and you should have a really nice heart shape!
bezier(x1, y1, x2, y2, x3, y3, x4, y4) | Used in both canvases. (x1, y1) is the starting point, (x4, y4) is the ending point. (x2, y2) and (x3, y3) are control points. The curve is "pulled" toward them. The curve is tangent to the line through (x1, y1) and (x2, y2) as well as the line through (x4, y4) and (x3, y3). If fill is on, the space between the curve and the line joining the end points is filled. |
bezierPoint(a, b, c, d, t) | Used separately for x and y. To determine the x coordinate of a point, use the x1, x2, x3, and x4 for a, b, c, and d. To determine the y coordinate of a point, use the y1, y2, y3, and y4 for a, b, c, and d and the same value of t which can range from 0 to 1. |
bezierTangent(a, b, c, d, t) | To determine the slope of the
tangent at some point along the curve, calculate bezierTangent for both
x (call it tx) and y (call it ty) as done for bezierPoint. The slope
of the tangent (in radians) is determined by atan2(ty, tx). The slope
of perpendicular to the tangent is the negative reciprocal of the slope
of the tangent. That is, if the slope tangent is slopeTangent, then
slopePerpendicular = -1/slopeTangent. |
This application uses numerous MyCanvas methods: createMyCanvas, parent, stroke, noStroke, fill, noFill, ellipse, rect, line, mouseX, mouseY, text, textSize, and image. It also uses the events handlers mousePressed, mouseReleased, and mouseMoved.
The p5.js file: bezier.pjs
James Brink, 5/12/2020