Sewing Splines

This is a small tutorial that describes how to join any layers based on the BLine object by their edges. Such layers include the Region Layers, Outline Layers, Plant Layer and Curve Gradient Layer.

Problem Definition

It is not always possible to link the edges of the BLines, because they may have been constructed in opposite directions (clockwise and counter clockwise), causing the tangents not to be appropriate for linking to each other.

If you're lucky you can link the tangents and the Regions will display properly. In the following example the direction of region construction is shown by the red arrow. You can see that the yellow tangent ducks are on the same side of the vertex (the orange ducks). Similarly with the red ducks. It is not so obvious when the tangents are not parallel.

Select the vertex ducks and right click and select the context menu "Link"

Then repeat the same procedure with the tangents (only one of the pairs of tangents needs linking unless the tangents are split)

Now watch this situation. The Regions are constructed with the same clockwise direction. The result is that the shared edge become incompatible for linking properly. The tangents are opposite each other (its yellow or red ducks are not at the same side of the vertex duck).

Repeat the same steps as before. First link the vertex ducks and then link the tangent ducks. No matter what tangent ducks you link together (same color or different color), it always gives the same result:

Solution

To solve this problem there is a smart solution. Since the tangents of each Bline are placed opposite each other, the solution comes from converting one of the tangents to a scaled one. The scale should be exactly -1. This allows us to link opposite tangents together since we are going to link one of the tangents to the other tangent, but this last one would be displayed as its inverse by the scale conversion (so the Bline has not the loop when rendered).

(Recently has been commited a new convert type Reverse Tangent which might allow simplification of this task, but it's not yet clear whether that's the case.)

In the example, let's chose to make the right Region the one that we are going to modify with the scale conversion. Here are the steps you should perform before you link the tangents. You can do it later but should repeat the linking operations.

1. Select the vertex from the vertices list in the Parameter Dialog. It will be marked with a red square around it in the workarea.
2. Open the Vertex definition and search for the tangent you want to modify. If they are merged you can do it with either of them.
3. Right click and select Convert->Scale
4. Open the converted tangent and see that there are two new parameters: Link and Scale.
5. Right click over the Link parameter and Export it giving a proper name (for example 't4' if it is the vertex number 4)
6. Go to the Child list and Select the Value node you just have exported.
7. Now go to the other layer and search the tangent you want to link to.
8. Select it, right click, and select the Connect option.
9. Now you have obtained the same result as before!! :(. The Regions are looped at that point!!. Here comes the trick. :)
10. Go to the converted and exported tangent, find the Scale parameter you have obtained from the Scale conversion, and set it to -1. Voila! the tangents match each other!

Alternatively, instead of converting to Scale and exporting the Link you could convert to Reverse Tangent and link it directly. I have not tested yet.

Notice that the other vertex ducks (of the other vertices) show how they have opposite colors.

Drawbacks

The converted tangents lose the ability to being manipulated by tangents ducks since the tangent is no longer a Radial Composite value node which is the type of conversion that Synfig knows how manage internally with ducks interface.

You should modify the tangent of the vertex of that Region using the ducks of the other Region layer or by the numerical input of the x,y values.

Sewing more than two Blines

Sewing more than two Blines is much the same as the case described because locally you are only going to stitch two tangents each time. If you need to sew more than one vertex at the same place just repeat the steps making the proper change of tangent sign as appropriate.

Sewing corners

One not obvious situation happen when you have to sew two corners. In that case the tangents (almost one of them) must be split. It can happen two clearly different situations:

1. The outside tangents are linked. Usually you link them to obtain an smooth surface. It is like a 180 DEG corner.
2. The outside tangents aren't linked. Then you want to create a real corner with control of each tangent. This case is a particular case of the above.

So lets study the case where the outside tangents are going to be linked having opposite values (they are always 180 DEG separated).

That case can be reached by two regions with same clockwise construction or opposite. Let start with the simple one.

Creating a smooth corner for compatible Blines

When you want to link two vertices that are going to create a smooth corner (a 180 DEG one) you have to do the following (I assume that the vertices are already linked, if not you can do it now or later):

1. As well as the regions are tangent compatible (see the first previous example) the tangent ducks have same color on same side of the vertex. First is to split the tangents of both vertices. Right click on vertex and "Split Tangents".
2. Then you should directly link the two tangents ducks for the inner par of the corner. It is the tangent that points down in the following figure (the red ones)
3. If you link the other two tangents (the yellow ones) you would obtain two identical tangents. That's not what we ant to achieve we want that both tangents have the opposite direction so they match smoothly.
4. Repeat the steps of Convert->Scale, export Link parameter and Link the exported to the other tangent. It would allow obtain this figure.

There you can see that the one of the two ducks of the upper tangent is greyed. It means that it cannot be manipulated due it is the one what was converted to Scale. To manipulate that tangent you must use the left side duck.

The red ones ducks of the other tangent are overlapping and you can manage one of them at a time.

If you don't want to create an smooth corner just don't make the link of the yellow tangent ducks in this case. Set them free and make the corner you want.

Creating a smooth corner for not compatible Blines

If the BLines are not compatible (second example of above) you should make now only one conversion too. The inner tangent still not being compatible, so it need a conversion to scale, an export and a link to the other tangent like in the previous example. But the outer one is compatible now because they are already two inverted tangents and can be linked to create a 180 DEG corner.

So after you have split the tangents you should obtain something like this:

Then you should link the red ducks but they are opposite. Then convert one of them to scale, export the Link parameter, link it to the other (red) tangent duck and make the scale parameter to be -1. It will make both regions have same rendered tangent on the sharing edge.

Once done you simply need to join the two yellow ducks. As well they are opposite they are compatible for a 180 DEG corner. The result should be this:

Dead End Corner

(If anyone has a better name for this kind of meeting of vertices please change it freely)

I gave this name to a a vertex that is completely surrounded by BLines so that it doesn't have any outside tangent. The inner vertex of a shared edge is the extreme example of the most general case of a Dead End Corner vertex. It has only two tangents.

Here is an example of a preparation of a Dead End Corner. The three Regions are going to be joined at the central vertex.

If you have a look at the tangent ducks you can see that they match in pairs except the two upper ones. If you have followed the tutorial you can easily imagine that the tangent ducks that have matching colors can be linked directly and the ones that mismatch should be converted to scale, have their Link parameter exported, linked to the other tangent, and set the Scale parameter to -1. Like this:

So making the direct linking of the lower tangent ducks and making a reversed link to the upper pair of tangent ducks the Dead End Corner is properly created. Please try it for yourself. If you have problems, please ask here in this article's Talk page.

Here is the result: