# Creating Smooth Curves: 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.

Our semicircle will go from **A1** through **A4** to **A3**.

Next, we will need a *construction point*.

This will help determine where the curve control points should be.

Next, we connect our construction point to the three *curve points*.

Next we choose the **Curved path** tool.

...and draw our curve.

(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.

...until we look at the detail of it. Ugh. (I wanted you to see how bad it looks when done manually.)

Now let's take a look at what can happen if one of the relative values changed.

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**.)

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 (P_{1} & P_{2} 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.

The results speak for themselves:

Just for fun, let's see what happens when we change the length of the line from **A2** to **A3**:

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**.

Adjusting the second and third curve points, we get

Let's see how it looks now.

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.

Let's see how **that** looks.

**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!

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 V 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.