Creating Smooth Curves: The Kolson Method
.png) |
Tutorial for creating smooth curves using the Kolson method |
To explain how the Kolson method works, let's imagine we want to cut out two pieces of material to make a circular tablecloth.
To begin, we need to create a framework for our piece.
.png)
Our semicircle will go from A through A4 to A3.
Next, we will need a construction point.
.png)
This will help determine where the curve control points should be.
Next, we connect our construction point to the three curve points.
.png)
Next we choose the Curved path tool.
.png)
...and draw our curve.
.png)
(Don't worry about it not looking like a curve; we will be dealing with that.)
A (somewhat sloppy) manual attempt looks not too bad.
.png)
...until we look at the detail of it. Ugh. (I wanted you to see how bad it looks when done manually.)
.png)
Now let's take a look at what can happen if one of the relative values changed.
.png)
.png)
Yuck, right? See how the right half of the curve now goes above the line? That is because the manually-set control points use absolute values and therefore can't change as the situation changes. (To access the details of an object, right-click on it and select Options.)
.png)
.png)
.png)
Okay, so now we are going to get serious. 'Bezier curves' which is what Seamly2D uses for the 'Curve path' tool, use four 'control points' to define them; one at either end of the curve, and two to define the curve itself. In our example, two joined bezier curves are used, one from A to A4, and another from A4 to A3. (The angles of the two control points based around A4 are permanently set at 180 degrees from one another to assure a smooth transition.)
Here is an animation of how they are actually formed, if you are interested:
What we need to do is to figure out how to set the control points (P1 & P2 in the animation) relatively, so that they will
- create a smooth, straight-line join across adjoining pieces. (In our circle example, as when doing neck and arm curves, we need the angle to be 90 degrees. (90 + 90 = 180 degrees - a straight line)
- scale properly, so that whatever measurements are used, the shape will stay (relatively) the same.
To meet the first criteria, we need to make sure that the angle for our curve's first and last control points are at right angles (90 degrees) to the base line.
The question, then, is what length to set? Well, I did a little research and found that the best result occurs when you multiply the length of the line by 0.551915024494. (Yeah, I know; overkill, much? If you are curious about where it comes from, here is the article about it.) Practically speaking, '0.55' is plenty. I usually use a variable I call #bz and set it to '0.551915024494' because if I just see '0.55' in a formula, I don't know for sure why that particular value is being used.
Below I've changed the curve path control point values to reflect 'the perfect curve'. You can see that all I'm doing is (for the first control point) multiplying the length of the line from the previous curve point to the previous construction point, and (for the second control point) multiplying the length of the line from the next curve point to the next construction point.
.png)
.png)
.png)
The results speak for themselves:
.png)
.png)
Just for fun, let's see what happens when we change the length of the line from A2 to A3:
.png)
.png)
Ummm... That doesn't look quite right. Yes, it's smooth, but it breaks both of our rules: the angles at the ends of the curves are not at 90 degrees, and the shape of the right side of the curve is definitely not the same as the left side. What's the deal?
The issue is that, as I previously mentioned, a 'curved path' is made up of multiple Bezier curves, and each needs its own construction point. As our semi-circle is symetrical, it technically doesn't need a second one, but if for some reason you might need to change one side or the other, we had better add in another, X2.
.png)
Adjusting the second and third curve points, we get
.png)
.png)
.png)
Let's see how it looks now.
.png)
.png)
Well... the curve looks much better, but the angles are still off. Hmmm... what to do...
The issue is that we have been using an absolute baseline of 0 degrees, when we need a relative one, so when we raised one endpoint, that broke our nice semi-circle. Darn. Well, the solution is an easy one; just make a construction line between the two ends, and use the angle of that.
.png)
.png)
.png)
.png)
Let's see how that looks.
.png)
Much better! (I left an error in there. Can you find it? In truth, in another application, it would just be a design decision, but to make a true semi-circle, it is a mistake.)
Let's stress-test this puppy and see how it handles some 'really' out-in-left-field values!
.png)
.png)
Wow! That curve looks decidedly strange as only two sections should never be used on a path this odd, but it is still fairly smooth, and the end angles are correct.
Success!!!
Now, as Seamly2D is still in development, there are a few 'gotchas' to keep in mind:
- Always do curves last. They depend on control/reference points and lines that must be in place before you place your curves. It’s an issue with the software itself, which needs to be dealt with at some point.
- If you have created a Detail for a pattern piece, you will need to delete it before you can delete components of it, because of its dependencies.