bezier

This file needs a local server if run locally.

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: Bezier curves are based on 4 points. 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 curve 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 symmetric to the control point for the last anchor point. The second is 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 and 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!

An alternative: You can get a pretty good heart another way. Refresh the canvas, if needed. Pull the last blue point down to the bottom heart tip and adjust the control points. Switch to the corners mode. Form the right side of the heart using symmetry. The last point will have to be on top of the very first point but that causes problems. So click a near miss and then drag the last point to the correct position.