Difference between revisions of "Sewing Splines"

From Synfig Studio :: Documentation
Jump to: navigation, search
m (Solution)
m (workarea)
 
(27 intermediate revisions by 6 users not shown)
Line 1: Line 1:
<!--Categories-->
+
<!-- Page info -->
[[Category:Tutorials]]
+
{{Title|Sewing Splines}}
 +
{{Category|Tutorials}}
 +
{{Category|Tutorials Advanced}}
 +
{{Category|Data Linking}}
 +
{{NewTerminology}}
 +
<!-- Page info end -->
 +
Somes of the screenshots needs to be updated with 0.64.0
  
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 Layer|Region Layers]], [[Outline Layer|Outline Layers]], [[Plant Layer]] and [[Curve Gradient Layer]]).
+
This is a small tutorial that describes how to join any layers based on the Spline object by their edges. Such layers include the {{l|Region Layer|Region Layers}}, {{l|Outline Layer|Outline Layers}}, {{l|Plant Layer}} and {{l|Curve Gradient Layer}}.
  
 
==Problem Definition==
 
==Problem Definition==
It is not always possible to link the edges of the [[BLine|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.
+
It is not always possible to {{l|Linking|link}} the edges of the {{l|Spline|Splines}}, 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 the 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.
+
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 Handles are on the same side of the vertex (the orange Handles). Similarly with the red Handles. It is not so obvious when the tangents are not parallel.
  
[[Image:SewBlines1.png]]
+
{{l|Image:SewBlines1.png}}
  
Select the vertex ducks and right click and select the context menu "Link"
+
Select the vertex Handles, right click and select the context menu {{Literal|Link}}
  
[[Image:Link1.png]]
+
{{l|Image:Link1.png}}
  
[[Image:Link2.png]]
+
{{l|Image:Link2.png}}
  
 
Then repeat the same procedure with the tangents (only one of the pairs of tangents needs linking unless the tangents are split)
 
Then repeat the same procedure with the tangents (only one of the pairs of tangents needs linking unless the tangents are split)
  
[[Image:Link3.png]]
+
{{l|Image:Link3.png}}
  
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).
+
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 Handles are not at the same side of the vertex Handle).
  
[[Image:SewBlines2.png]]
+
{{l|Image:SewBlines2.png}}
  
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:
+
Repeat the same steps as before. First link the vertex Handles and then link the tangent Handles. No matter what tangent Handles you link together (same color or different color), it always gives the same result:
  
[[Image:Link4.png]]
+
{{l|Image:Link4.png}}
  
[[Image:Link5.png]]
+
{{l|Image:Link5.png}}
  
 
== Solution ==
 
== Solution ==
  
To solve this problem there is a smart solution. Since the tangents are not split, they are exactly 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 reverse of the other tangent.
+
To solve this problem there is a smart solution. Since the tangents of each Spline 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 Spline has not the loop when rendered).
  (Recently has been commited a new convert type [[Convert#Reverse Tangent|Reverse Tangent]] which might allow simplification of this task, but it's not yet clear whether that's the case.)
+
  (Recently has been commited a new convert type {{l|Convert#Reverse Tangent|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.
 
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.
  
# Select the vertex from the vertices list in the Parameter Dialog. It will be marked with a red square around it in the workarea.
+
# Select the vertex from the vertices list in the {{l|Parameter Panel}}. It will be marked with a red square around it in the {{l|WorkArea}}.
 
# 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.
 
# 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.
 
# Right click and select Convert->Scale
 
# Right click and select Convert->Scale
# Open the converted tangent and see that there are two new parameters: Link and Scale.
+
# Open the converted tangent and see that there are two new parameters: {{Literal|Link}} and {{Literal|Scale}}.
# Right click over the Link parameter and Export it giving a proper name (for example t4 if it is the vertex number 4)
+
# Right click over the {{Literal|Link}} parameter and {{L|Export}} it giving a proper name (for example 't4' if it is the vertex number 4)
# Go to the Child list and Select the Value node you just have exported.
+
# Go to the {{l|Library Panel}} and select the Value node you just have exported.
 
# Now go to the other layer and search the tangent you want to link to.
 
# Now go to the other layer and search the tangent you want to link to.
# Select it, right click, and select the Connect option.
+
# Select it, right click, and select the {{Literal|Connect}} option.
# Now you have obtained the same result as before :(. The Regions are looped at that point. Here comes the trick.
+
# Now you have obtained the same result as before!! :(. The Regions are looped at that point!!. Here comes the trick. :)
# 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!
+
# Go to the converted and exported tangent, find the {{Literal|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.
+
  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.
+
Notice that the other vertex Handles (of the other vertices) show how they have opposite colors.
  
[[Image:Link6.png]]
+
{{l|Image:Link6.png}}
  
 
== Drawbacks ==
 
== Drawbacks ==
  
The converted tangent loose the ability of being manipulated by tangents ducks as usual. It is due to the fact that the tangent is not a Radial Composited which is the type of conversion that Synfig knows how manage internally with ducks interface.
+
The converted tangents lose the ability to being manipulated by tangents Handles since the tangent is no longer a Radial Composite value node which is the type of conversion that Synfig knows how manage internally with Handles 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.
+
You should modify the tangent of the vertex of that Region using the Handles of the other Region Layer or by the numerical input of the x,y values.
  
== Sewing more than two Blines ==
+
== Sewing more than two Splines ==
  
Sewing more than two Blines is mainly the same problem than described because locally you are going to stitch only 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 for the appropriated.
+
Sewing more than two Splines 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 ==
 
== Sewing corners ==
Line 75: Line 83:
 
That case can be reached by two regions with same clockwise construction or opposite. Let start with the simple one.
 
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===
+
===Creating a smooth corner for compatible Splines===
  
 
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):
 
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):
  
# 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".
+
# As well as the regions are tangent compatible (see the first previous example) the tangent Handles have same color on same side of the vertex. First is to split the tangents of both vertices. Right click on vertex and {{Literal|Split Tangents}}.
# 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)
+
# Then you should directly link the two tangents Handles for the inner par of the corner. It is the tangent that points down in the following figure (the red ones)
 
# 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.
 
# 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.
# Repeat the steps of Convert->Scale, export Link parameter and Link the exported to the other tangent. It would allow obtain this figure.
+
# Repeat the steps of Convert->Scale, export {{Literal|Link}} parameter, link the exported to the other tangent and set {{Literal|Scale}} parameter to be '''-1'''. It would allow obtain this figure.
  
[[Image:Link7.png]]
+
{{l|Image:Link7.png}}
  
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.  
+
There you can see that the one of the two Handles of the upper tangent is greyed. It means that it cannot be manipulated due it is the one what was converted to {{Literal|Scale}}. To manipulate that tangent you must use the left side Handle.  
  
The red ones ducks of the other tangent are overlapping and you can manage one of them at a time.
+
The red ones Handles 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.
+
If you don't want to create an smooth corner just don't make the link of the yellow tangent Handles in this case. Set them free and make the corner you want.
  
 +
===Creating a smooth corner for not compatible Splines===
  
===Creating a smooth corner for not compatible Blines===
+
If the SpLines 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, a link to the other tangent and a Sсale set to '''-1''', 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.
 
+
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:
 
So after you have split the tangents you should obtain something like this:
  
[[Image:Link10.png]]
+
{{l|Image:Link10.png}}
  
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.
+
Now, you should link the left red Handle with the right yellow one but they are opposite tangents (opposite colors). Then convert one of them (the yellow one in the example) to scale, export the {{Literal|Link}} parameter, link it to the other (red) tangent Handle 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:
+
Once done, you simply need to join the two upper Handles (yellow left and red right). As well they are opposite they are compatible for a 180 DEG corner. The result should be this:
  
[[Image:Link11.png]]
+
{{l|Image:Link11.png}}
  
 
== Dead End Corner ==
 
== Dead End Corner ==
  
  (If someone have a better name for this kind of vertices please change it freely)
+
  (If anyone has a better name for this kind of meeting of vertices please change it freely)
  
I call this to a a vertex completely rounded by BLines and not have any outside tangent. The inner vertex of a shared edge is the extreme example of the most eneral case of a Dead End Corner vertex. It has only two tangents.
+
I gave this name to a a vertex that is completely surrounded by Splines 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 in the central vertex.
+
Here is an example of a preparation of a Dead End Corner. The three Regions are going to be joined at the central vertex.
  
[[Image:Link12.png]]
+
{{l|Image:Link12.png}}
  
If you have a look to 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 match its colors can be linked directly and the one that has the mismatch should be converted to scale, exported the Link parameter, linked to the other tangent and set the Scale parameter to -1. Like this:
+
If you have a look at the tangent Handles 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 Handles that have matching colors can be linked directly and the ones that mismatch should be converted to scale, have their {{Literal|Link}} parameter exported, linked to the other tangent, and set the Scale parameter to '''-1'''. Like this:
  
[[Image:Link13.png]]
+
{{l|Image:Link13.png}}
  
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 by your self. If not success please ask here in the Discuss area.
+
So making the direct linking of the lower tangent Handles and making a reversed link to the upper pair of tangent Handles 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:
 
Here is the result:
  
[[Image:Link15.png]]
+
{{l|Image:Link15.png}}
 +
 
 +
== Removing thin line bug ==
 +
 
 +
[[File:Sewing Spline tutorial Bugehavior.png|300px|thumb|right]]There is a not solved [http://www.synfig.org/issues/thebuggenie/synfig/issues/36 "bug"] that makes thin lines when you sew regions with same color. It is only a pixel thick. This is "not really" a bug. Such behaviour is caused by the way how anti-aliasing works in the Synfig's rendering engine.
 +
 
 +
To workaround this "not really" bug meanwhile it is solved you can do one of the following:
 +
 
 +
*For each layer is affected, create a outline layer using same color than the region. Then select both layers and make right click over the {{Literal|Vertices}} paramter (greyed) then select {{Literal|Link}}. Set the outline width to '''1.0'''. It will be enough to remove the think line.
 +
*Add a {{l|Super Sample Layer|super sample layer}} and set its value to '''3x3''' or '''4x4''' to eliminate the thin line.
 +
*If the regions are outlined but not in the area of the thin line, you can uncheck the {{l|Antialiasing Parameter|antialiasing parameter}} and the thin line would disappear.

Latest revision as of 15:10, 3 July 2015

Languages Language: 

English • español • română


Somes of the screenshots needs to be updated with 0.64.0

This is a small tutorial that describes how to join any layers based on the Spline 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 Splines, 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 Handles are on the same side of the vertex (the orange Handles). Similarly with the red Handles. It is not so obvious when the tangents are not parallel.

Image:SewBlines1.png

Select the vertex Handles, right click and select the context menu "Link"

Image:Link1.png

Image:Link2.png

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

Image:Link3.png

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 Handles are not at the same side of the vertex Handle).

Image:SewBlines2.png

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

Image:Link4.png

Image:Link5.png

Solution

To solve this problem there is a smart solution. Since the tangents of each Spline 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 Spline 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 Panel. 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 Library Panel 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 Handles (of the other vertices) show how they have opposite colors.

Image:Link6.png

Drawbacks

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

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

Sewing more than two Splines

Sewing more than two Splines 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 Splines

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 Handles 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 Handles 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, link the exported to the other tangent and set "Scale" parameter to be -1. It would allow obtain this figure.

Image:Link7.png

There you can see that the one of the two Handles 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 Handle.

The red ones Handles 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 Handles in this case. Set them free and make the corner you want.

Creating a smooth corner for not compatible Splines

If the SpLines 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, a link to the other tangent and a Sсale set to -1, 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:

Image:Link10.png

Now, you should link the left red Handle with the right yellow one but they are opposite tangents (opposite colors). Then convert one of them (the yellow one in the example) to scale, export the "Link" parameter, link it to the other (red) tangent Handle 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 upper Handles (yellow left and red right). As well they are opposite they are compatible for a 180 DEG corner. The result should be this:

Image:Link11.png

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

Image:Link12.png

If you have a look at the tangent Handles 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 Handles 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:

Image:Link13.png

So making the direct linking of the lower tangent Handles and making a reversed link to the upper pair of tangent Handles 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:

Image:Link15.png

Removing thin line bug

Sewing Spline tutorial Bugehavior.png
There is a not solved "bug" that makes thin lines when you sew regions with same color. It is only a pixel thick. This is "not really" a bug. Such behaviour is caused by the way how anti-aliasing works in the Synfig's rendering engine.

To workaround this "not really" bug meanwhile it is solved you can do one of the following:

  • For each layer is affected, create a outline layer using same color than the region. Then select both layers and make right click over the "Vertices" paramter (greyed) then select "Link". Set the outline width to 1.0. It will be enough to remove the think line.
  • Add a super sample layer and set its value to 3x3 or 4x4 to eliminate the thin line.
  • If the regions are outlined but not in the area of the thin line, you can uncheck the antialiasing parameter and the thin line would disappear.


Languages Language: 

English • español • română