Synfig Studio :: Documentation - User contributions [en]

Advanced Outline Layer

2016-07-28T09:34:00Z

Erubin: /* Width Point List */ Reference to "Homogenous" parameter above.

{{Title|Advanced Outline Layer}}
{{Category|Layers}}
{{NewTerminology}}
{{TOCright}}

Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]

== About Advanced Outline Layers ==

To create an Advanced Outline Layer use the Spline Tool and check {{literal|Create Advanced Outline}} in the {{l|Tool Options Panel}}. Once you finish the definition of the geometry of your outline and after pressing the {{literal|Make Spline}} button (or selecting another tool or state) you create the Advanced Outline Layer with the {{l|New_Layer_Defaults#Brush_Colors|current}} {{literal|Outline Color}}.

Depending on the options you choose in the {{l|Tool Options Panel}} other {{l|Category:Tools|Tools}} like {{l|Star Tool}} or {{l|Circle Tool}} can also create Advanced Outline Layers.

Using the {{l|Canvas Layer Menu|Layer Menu}} {{Literal|Make Advanced Outline}}, {{Literal|Make Outline}} or {{Literal|Make Region}} commands you can also create those layers.

=== Differences with Outline Layer: Outline width ===

The '''width''' [[Handle]] define the outline width at particular place.

In the regular [[Outline Layer]], each width Handle is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[Spline]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.

Practice shows that most of the time the user wants to specify the width independently from the placement of [[Spline]] vertices. Such functionality is available in the Advanced Outline layer, which Handles its width in a different way: the width Handles are freely moved around the Spline and define its width at any point.

== Features ==

Advanced Outline introduces some features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:

<gallery widths="490px" heights="300px" perrow="2">
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the Spline constructed of many vertices
File:Different-types of tips.png | Different types of tips : Rounded, Squared, Peak, Flat.
File: Segments of outlines.png | Segmented outline
File:Different cusps types.png | Three global cusps types : Sharp, Rounded, Bevel.
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)
</gallery>

==Parameters of Advanced Outline Layers==

The parameters of the Advanced Outline Layers are:

{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:silver"
|'''Name'''||'''Value'''||'''Type'''
|-
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]
||0.000000
||real

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]
||1.000000
||real

|-
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]
||Composite
||integer

|-style="background:#eeeeee"
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]
||
{| style="width:95%; height:16px; background:black; color:black" border="1"
|-
|}
||color

|-style="background:#"
||[[Image:Type_vector_icon.png|16px]] [[Origin Parameter|Origin]]
||0.000000u,0.000000u
||vector

|-style="background:#eeeeee"
||[[Image:Type_bool_icon.png|16px]] [[Invert Parameter|Invert]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_bool_icon.png|16px]] [[Antialiasing Parameter|Antialiasing]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Feather Parameter|Feather]]
||0.000000pt
||real

|-
||[[Image:Type_integer_icon.png|16px]] [[Feather_Parameter#Type_of_Feather|Type of Feather]]
||Fast Gaussian Blur
||integer

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Winding Style Parameter|Winding Style]]
||Non Zero
||integer

|-
||[[Image:Type_list_icon.png|16px]] Vertices
||List
||list (Spline)

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Outline_Layer#Outline_width|Outline Width]]
||2.000000pt
||real

|-
||[[Image:Type_real_icon.png|16px]] [[Outline_Layer#Expand|Expand]]
||0.000000pt
||real

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Tip_type_at_start_.2F_end|Tip Type at Start]]
||Rounded Stop
||integer

|-
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Tip_type_at_start_.2F_end|Tip Type at End]]
||Rounded Stop
||integer

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Cusps_Type|Cusps Type]]
||Sharp
||integer

|-
||[[Image:Type_real_icon.png|16px]] [[Advanced_Outline_Layer#Smoothness|Smoothness]]
||0.500000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} [[Advanced_Outline_Layer#Homogeneous|Homogeneous]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_list_icon.png|16px]] [[Advanced_Outline_Layer#Width_Point_List|Width Point List]]
||List
||list(WPList)

|-style="background:#eeeeee"
||[[Image:Type_bool_icon.png|16px]] [[Advanced_Outline_Layer#Fast|Fast]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_bool_icon.png|16px]] [[Advanced_Outline_Layer#Dashed_Outline|Dashed Outline]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||[[Image:Type_list_icon.png|16px]] Dash Item List
||List
||list(WPList)

|-
||[[Image:Type_real_icon.png|16px]] Dash Items Offset
||0.000000u
||real

|}

==Specific parameters for Advanced Outline Layer==

This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].

* Tip Type at start
* Tip Type at end
* Cusps type
* Smoothness
* Width Point List

=== Tip type at start / end ===

As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.

Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.

The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:

Parameters:
{| border="1"
|-
! Tip Type
! Example
|-
| Rounded
| [[File:Avanced-Outline-Layer-TipType-Rounded.png]]
|-
| Squared
| [[File:Avanced-Outline-Layer-TipType-Squared.png]]
|-
| Peak
| [[File:Avanced-Outline-Layer-TipType-Peak.png]]
|-
| Flat
| [[File:Avanced-Outline-Layer-TipType-Flat.png]]
|}

=== Cusps type ===

There are three types of cusps in the Advanced Outline:

Parameters:
{| border="1"
|-
! Cusp Type
! Example
|-
| Sharp
|[[File:Avanced-Outline-Layer-Cups-Sharp.png]]
|-
| Rounded
| [[File:Avanced-Outline-Layer-Cups-Rounded.png]]
|-
| Bevel
| [[File:Avanced-Outline-Layer-Cups-Bevel.png]]
|}

The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.

=== Smoothness ===

The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is '''zero''' interpolation is lineal, when smoothness is '''1.0''' interpolation is given by a 5th degree smooth Spline.

=== Homogeneous ===

Enabling {{literal|Homogeneous}} changes the way the position of the widthpoints change according modification of the outline.
* When false, the "Position" parameter for a widthpoint is equally distributed '''among the vertices'''. For example, in a spline with five vertices, "Position" values of 0, 0.25, 0.5, 0.75, and 1 correspond to the first, second, third, fourth, and fifth vertex, respectively, regardless of how close or far apart those vertices are. Between vertices, the "Position" parameter is based on spline length.
* When true, the "Position" parameter increases smoothly from the start to the end of the spline '''based on the length of the entire spline'''. This means a "Position" of 0.5 will always correspond to the halfway point of the spline, not to a particular vertex.

=== Width Point List ===
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:

* '''Position''' (Real number): represents the position of the width point along the Spline. Although it is allowed to be any real number, its meaning is only from '''0.0''' to '''1.0'''. 0.0 corresponds to the start of the Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline. The point on the spline corresponding to a particular "Position" value is affected by the "Homogeneous" parameter, explained above.
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values:
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is {{Literal|Interpolate}} on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than {{Literal|Interpolate}} then the segment between those two width points is empty. See examples to understand it fully.
** '''Squared''': Same as Rounded but using square tip.
** '''Peak''': Same as Rounded but using peak tip.
** '''Flat''': Same as Rounded but using flat tip.

The Width Point list has one internal non-animatable parameter called {{Literal|loop}}. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.

=== Fast ===
...

=== Dashed Outline ===
...

== Working with the Avdanced Outline ==

=== Creation of the Advanced Outline ===

You can create Advanced Outlines by various ways:
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).
* Using a {{l|Layers#Geometry|Geometry Layer}} (check ''Create Advanced Outline'' in the tool options).
* With the menu {{c|<Insert>|<Layer>|Geometry|Advanced Outline}}.

=== Change the width of the Width Points ===

Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.

=== Change the position of the Width Points ===

When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.

{{Note|Change the position of the Width Points|This may change in the future}}

The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.

=== Adding or removing width points ===
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select {{literal|Add Item (smart)}} here to create more width points entries. The width points are created this way:

In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.

The newly added width point will have the interpolated width at the position where it is created.

=== Specific actions for Width Points ===

Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:

* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.
* Export: See {{l|Export}}.
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].
* Rotate Order: Doesn't do anything.
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).

Advanced Outline Layer

2016-07-28T09:30:53Z

Erubin: /* Homogeneous */ Forgot a word: "correspond"

{{Title|Advanced Outline Layer}}
{{Category|Layers}}
{{NewTerminology}}
{{TOCright}}

Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]

== About Advanced Outline Layers ==

To create an Advanced Outline Layer use the Spline Tool and check {{literal|Create Advanced Outline}} in the {{l|Tool Options Panel}}. Once you finish the definition of the geometry of your outline and after pressing the {{literal|Make Spline}} button (or selecting another tool or state) you create the Advanced Outline Layer with the {{l|New_Layer_Defaults#Brush_Colors|current}} {{literal|Outline Color}}.

Depending on the options you choose in the {{l|Tool Options Panel}} other {{l|Category:Tools|Tools}} like {{l|Star Tool}} or {{l|Circle Tool}} can also create Advanced Outline Layers.

Using the {{l|Canvas Layer Menu|Layer Menu}} {{Literal|Make Advanced Outline}}, {{Literal|Make Outline}} or {{Literal|Make Region}} commands you can also create those layers.

=== Differences with Outline Layer: Outline width ===

The '''width''' [[Handle]] define the outline width at particular place.

In the regular [[Outline Layer]], each width Handle is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[Spline]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.

Practice shows that most of the time the user wants to specify the width independently from the placement of [[Spline]] vertices. Such functionality is available in the Advanced Outline layer, which Handles its width in a different way: the width Handles are freely moved around the Spline and define its width at any point.

== Features ==

Advanced Outline introduces some features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:

<gallery widths="490px" heights="300px" perrow="2">
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the Spline constructed of many vertices
File:Different-types of tips.png | Different types of tips : Rounded, Squared, Peak, Flat.
File: Segments of outlines.png | Segmented outline
File:Different cusps types.png | Three global cusps types : Sharp, Rounded, Bevel.
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)
</gallery>

==Parameters of Advanced Outline Layers==

The parameters of the Advanced Outline Layers are:

{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:silver"
|'''Name'''||'''Value'''||'''Type'''
|-
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]
||0.000000
||real

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]
||1.000000
||real

|-
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]
||Composite
||integer

|-style="background:#eeeeee"
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]
||
{| style="width:95%; height:16px; background:black; color:black" border="1"
|-
|}
||color

|-style="background:#"
||[[Image:Type_vector_icon.png|16px]] [[Origin Parameter|Origin]]
||0.000000u,0.000000u
||vector

|-style="background:#eeeeee"
||[[Image:Type_bool_icon.png|16px]] [[Invert Parameter|Invert]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_bool_icon.png|16px]] [[Antialiasing Parameter|Antialiasing]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Feather Parameter|Feather]]
||0.000000pt
||real

|-
||[[Image:Type_integer_icon.png|16px]] [[Feather_Parameter#Type_of_Feather|Type of Feather]]
||Fast Gaussian Blur
||integer

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Winding Style Parameter|Winding Style]]
||Non Zero
||integer

|-
||[[Image:Type_list_icon.png|16px]] Vertices
||List
||list (Spline)

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Outline_Layer#Outline_width|Outline Width]]
||2.000000pt
||real

|-
||[[Image:Type_real_icon.png|16px]] [[Outline_Layer#Expand|Expand]]
||0.000000pt
||real

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Tip_type_at_start_.2F_end|Tip Type at Start]]
||Rounded Stop
||integer

|-
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Tip_type_at_start_.2F_end|Tip Type at End]]
||Rounded Stop
||integer

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Cusps_Type|Cusps Type]]
||Sharp
||integer

|-
||[[Image:Type_real_icon.png|16px]] [[Advanced_Outline_Layer#Smoothness|Smoothness]]
||0.500000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} [[Advanced_Outline_Layer#Homogeneous|Homogeneous]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_list_icon.png|16px]] [[Advanced_Outline_Layer#Width_Point_List|Width Point List]]
||List
||list(WPList)

|-style="background:#eeeeee"
||[[Image:Type_bool_icon.png|16px]] [[Advanced_Outline_Layer#Fast|Fast]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_bool_icon.png|16px]] [[Advanced_Outline_Layer#Dashed_Outline|Dashed Outline]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||[[Image:Type_list_icon.png|16px]] Dash Item List
||List
||list(WPList)

|-
||[[Image:Type_real_icon.png|16px]] Dash Items Offset
||0.000000u
||real

|}

==Specific parameters for Advanced Outline Layer==

This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].

* Tip Type at start
* Tip Type at end
* Cusps type
* Smoothness
* Width Point List

=== Tip type at start / end ===

As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.

Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.

The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:

Parameters:
{| border="1"
|-
! Tip Type
! Example
|-
| Rounded
| [[File:Avanced-Outline-Layer-TipType-Rounded.png]]
|-
| Squared
| [[File:Avanced-Outline-Layer-TipType-Squared.png]]
|-
| Peak
| [[File:Avanced-Outline-Layer-TipType-Peak.png]]
|-
| Flat
| [[File:Avanced-Outline-Layer-TipType-Flat.png]]
|}

=== Cusps type ===

There are three types of cusps in the Advanced Outline:

Parameters:
{| border="1"
|-
! Cusp Type
! Example
|-
| Sharp
|[[File:Avanced-Outline-Layer-Cups-Sharp.png]]
|-
| Rounded
| [[File:Avanced-Outline-Layer-Cups-Rounded.png]]
|-
| Bevel
| [[File:Avanced-Outline-Layer-Cups-Bevel.png]]
|}

The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.

=== Smoothness ===

The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is '''zero''' interpolation is lineal, when smoothness is '''1.0''' interpolation is given by a 5th degree smooth Spline.

=== Homogeneous ===

Enabling {{literal|Homogeneous}} changes the way the position of the widthpoints change according modification of the outline.
* When false, the "Position" parameter for a widthpoint is equally distributed '''among the vertices'''. For example, in a spline with five vertices, "Position" values of 0, 0.25, 0.5, 0.75, and 1 correspond to the first, second, third, fourth, and fifth vertex, respectively, regardless of how close or far apart those vertices are. Between vertices, the "Position" parameter is based on spline length.
* When true, the "Position" parameter increases smoothly from the start to the end of the spline '''based on the length of the entire spline'''. This means a "Position" of 0.5 will always correspond to the halfway point of the spline, not to a particular vertex.

=== Width Point List ===
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:

* '''Position''' (Real number): represents the position of the width point along the Spline. Although it is allowed to be any real number, its meaning is only from '''0.0''' to '''1.0'''. 0.0 corresponds to the start of the Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline.
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values:
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is {{Literal|Interpolate}} on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than {{Literal|Interpolate}} then the segment between those two width points is empty. See examples to understand it fully.
** '''Squared''': Same as Rounded but using square tip.
** '''Peak''': Same as Rounded but using peak tip.
** '''Flat''': Same as Rounded but using flat tip.

The Width Point list has one internal non-animatable parameter called {{Literal|loop}}. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.

=== Fast ===
...

=== Dashed Outline ===
...

== Working with the Avdanced Outline ==

=== Creation of the Advanced Outline ===

You can create Advanced Outlines by various ways:
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).
* Using a {{l|Layers#Geometry|Geometry Layer}} (check ''Create Advanced Outline'' in the tool options).
* With the menu {{c|<Insert>|<Layer>|Geometry|Advanced Outline}}.

=== Change the width of the Width Points ===

Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.

=== Change the position of the Width Points ===

When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.

{{Note|Change the position of the Width Points|This may change in the future}}

The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.

=== Adding or removing width points ===
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select {{literal|Add Item (smart)}} here to create more width points entries. The width points are created this way:

In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.

The newly added width point will have the interpolated width at the position where it is created.

=== Specific actions for Width Points ===

Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:

* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.
* Export: See {{l|Export}}.
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].
* Rotate Order: Doesn't do anything.
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).

Advanced Outline Layer

2016-07-28T09:29:49Z

Erubin: /* Homogeneous */ I hope that the Homogeneous parameter is more clearly explained now. Please fix any formatting issues with my edit and consider adding a brief example.

{{Title|Advanced Outline Layer}}
{{Category|Layers}}
{{NewTerminology}}
{{TOCright}}

Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]

== About Advanced Outline Layers ==

To create an Advanced Outline Layer use the Spline Tool and check {{literal|Create Advanced Outline}} in the {{l|Tool Options Panel}}. Once you finish the definition of the geometry of your outline and after pressing the {{literal|Make Spline}} button (or selecting another tool or state) you create the Advanced Outline Layer with the {{l|New_Layer_Defaults#Brush_Colors|current}} {{literal|Outline Color}}.

Depending on the options you choose in the {{l|Tool Options Panel}} other {{l|Category:Tools|Tools}} like {{l|Star Tool}} or {{l|Circle Tool}} can also create Advanced Outline Layers.

Using the {{l|Canvas Layer Menu|Layer Menu}} {{Literal|Make Advanced Outline}}, {{Literal|Make Outline}} or {{Literal|Make Region}} commands you can also create those layers.

=== Differences with Outline Layer: Outline width ===

The '''width''' [[Handle]] define the outline width at particular place.

In the regular [[Outline Layer]], each width Handle is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[Spline]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.

Practice shows that most of the time the user wants to specify the width independently from the placement of [[Spline]] vertices. Such functionality is available in the Advanced Outline layer, which Handles its width in a different way: the width Handles are freely moved around the Spline and define its width at any point.

== Features ==

Advanced Outline introduces some features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:

<gallery widths="490px" heights="300px" perrow="2">
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the Spline constructed of many vertices
File:Different-types of tips.png | Different types of tips : Rounded, Squared, Peak, Flat.
File: Segments of outlines.png | Segmented outline
File:Different cusps types.png | Three global cusps types : Sharp, Rounded, Bevel.
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)
</gallery>

==Parameters of Advanced Outline Layers==

The parameters of the Advanced Outline Layers are:

{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:silver"
|'''Name'''||'''Value'''||'''Type'''
|-
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]
||0.000000
||real

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]
||1.000000
||real

|-
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]
||Composite
||integer

|-style="background:#eeeeee"
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]
||
{| style="width:95%; height:16px; background:black; color:black" border="1"
|-
|}
||color

|-style="background:#"
||[[Image:Type_vector_icon.png|16px]] [[Origin Parameter|Origin]]
||0.000000u,0.000000u
||vector

|-style="background:#eeeeee"
||[[Image:Type_bool_icon.png|16px]] [[Invert Parameter|Invert]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_bool_icon.png|16px]] [[Antialiasing Parameter|Antialiasing]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Feather Parameter|Feather]]
||0.000000pt
||real

|-
||[[Image:Type_integer_icon.png|16px]] [[Feather_Parameter#Type_of_Feather|Type of Feather]]
||Fast Gaussian Blur
||integer

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Winding Style Parameter|Winding Style]]
||Non Zero
||integer

|-
||[[Image:Type_list_icon.png|16px]] Vertices
||List
||list (Spline)

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Outline_Layer#Outline_width|Outline Width]]
||2.000000pt
||real

|-
||[[Image:Type_real_icon.png|16px]] [[Outline_Layer#Expand|Expand]]
||0.000000pt
||real

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Tip_type_at_start_.2F_end|Tip Type at Start]]
||Rounded Stop
||integer

|-
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Tip_type_at_start_.2F_end|Tip Type at End]]
||Rounded Stop
||integer

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Cusps_Type|Cusps Type]]
||Sharp
||integer

|-
||[[Image:Type_real_icon.png|16px]] [[Advanced_Outline_Layer#Smoothness|Smoothness]]
||0.500000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} [[Advanced_Outline_Layer#Homogeneous|Homogeneous]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_list_icon.png|16px]] [[Advanced_Outline_Layer#Width_Point_List|Width Point List]]
||List
||list(WPList)

|-style="background:#eeeeee"
||[[Image:Type_bool_icon.png|16px]] [[Advanced_Outline_Layer#Fast|Fast]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_bool_icon.png|16px]] [[Advanced_Outline_Layer#Dashed_Outline|Dashed Outline]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||[[Image:Type_list_icon.png|16px]] Dash Item List
||List
||list(WPList)

|-
||[[Image:Type_real_icon.png|16px]] Dash Items Offset
||0.000000u
||real

|}

==Specific parameters for Advanced Outline Layer==

This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].

* Tip Type at start
* Tip Type at end
* Cusps type
* Smoothness
* Width Point List

=== Tip type at start / end ===

As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.

Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.

The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:

Parameters:
{| border="1"
|-
! Tip Type
! Example
|-
| Rounded
| [[File:Avanced-Outline-Layer-TipType-Rounded.png]]
|-
| Squared
| [[File:Avanced-Outline-Layer-TipType-Squared.png]]
|-
| Peak
| [[File:Avanced-Outline-Layer-TipType-Peak.png]]
|-
| Flat
| [[File:Avanced-Outline-Layer-TipType-Flat.png]]
|}

=== Cusps type ===

There are three types of cusps in the Advanced Outline:

Parameters:
{| border="1"
|-
! Cusp Type
! Example
|-
| Sharp
|[[File:Avanced-Outline-Layer-Cups-Sharp.png]]
|-
| Rounded
| [[File:Avanced-Outline-Layer-Cups-Rounded.png]]
|-
| Bevel
| [[File:Avanced-Outline-Layer-Cups-Bevel.png]]
|}

The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.

=== Smoothness ===

The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is '''zero''' interpolation is lineal, when smoothness is '''1.0''' interpolation is given by a 5th degree smooth Spline.

=== Homogeneous ===

Enabling {{literal|Homogeneous}} changes the way the position of the widthpoints change according modification of the outline.
* When false, the "Position" parameter for a widthpoint is equally distributed '''among the vertices'''. For example, in a spline with five vertices, "Position" values of 0, 0.25, 0.5, 0.75, and 1 correspond to the first, second, third, fourth, and fifth vertex, respectively, regardless of how close or far apart those vertices are. Between vertices, the "Position" parameter is based on spline length.
* When true, the "Position" parameter increases smoothly from the start to the end of the spline '''based on the length of the entire spline'''. This means a "Position" of 0.5 will always to the halfway point of the spline, not to a particular vertex.

=== Width Point List ===
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:

* '''Position''' (Real number): represents the position of the width point along the Spline. Although it is allowed to be any real number, its meaning is only from '''0.0''' to '''1.0'''. 0.0 corresponds to the start of the Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline.
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values:
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is {{Literal|Interpolate}} on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than {{Literal|Interpolate}} then the segment between those two width points is empty. See examples to understand it fully.
** '''Squared''': Same as Rounded but using square tip.
** '''Peak''': Same as Rounded but using peak tip.
** '''Flat''': Same as Rounded but using flat tip.

The Width Point list has one internal non-animatable parameter called {{Literal|loop}}. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.

=== Fast ===
...

=== Dashed Outline ===
...

== Working with the Avdanced Outline ==

=== Creation of the Advanced Outline ===

You can create Advanced Outlines by various ways:
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).
* Using a {{l|Layers#Geometry|Geometry Layer}} (check ''Create Advanced Outline'' in the tool options).
* With the menu {{c|<Insert>|<Layer>|Geometry|Advanced Outline}}.

=== Change the width of the Width Points ===

Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.

=== Change the position of the Width Points ===

When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.

{{Note|Change the position of the Width Points|This may change in the future}}

The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.

=== Adding or removing width points ===
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select {{literal|Add Item (smart)}} here to create more width points entries. The width points are created this way:

In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.

The newly added width point will have the interpolated width at the position where it is created.

=== Specific actions for Width Points ===

Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:

* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.
* Export: See {{l|Export}}.
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].
* Rotate Order: Doesn't do anything.
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).

Doc talk:Reuse Animations

2015-12-05T01:59:32Z

Erubin: /* Need new sample file */ new section

Hey dooglus! Thanks for correct my language errors. I did the page in one shot and did not review the grammar or the spelling. --[[User:Genete|Genete]] 03:45, 29 September 2007 (EDT)

----

''There is a problem with this technique. You are making copies of the entire animation poses that you have stored in the first keyframes of the time (frames 2 and 4 of the sample) and therefore you have made copies of all the other objects existing in the scene (following the example, the eyeball).''

: Is this true? You only make copies of any waypoints that happen to exist at that particular frame I thought? [[User:Dooglus|dooglus]] 21:04, 29 September 2007 (EDT)

:: It is true. Keyframe duplication affects all the existing objects of the scene even if they don't have any waypoints at the duplicated keyframe. See [http://www.darthfurby.com/genete/synfig/keycopy.sifz this] file. There are two circles. The red one has its own animation at frames 12f, 1s and 2s. The black circle has its own animation at 0f, 1f and 12 f. If you go to frame 2s12f for example and duplicate the keyframe at frame 1 (called "black up") you will see that the red circle goes to the position it has at frame 1 although it doesn't have any waypoint there.--[[User:Genete|Genete]] 05:00, 30 September 2007 (EDT)

::: Ah yes, so I see. That is surprising. I suppose that is what keyframes are for though. [[User:Dooglus|dooglus]] 07:44, 30 September 2007 (EDT)

----

I am considering changing the title to "Creating a Sample Animation from Two Poses" [a more general tutorial would have more examples than just the blinking eye and perhaps be titled Creating Animations from Poses]. The current title, "Reuse Animations", is misleading. It gives the impression you are cutting and pasting some bit of animation that appears over X frames into another (possibly overlapping) set of X frames. Eg, a mouth movement that is first captured in 6 frames gets reused elsewhere to look the same. However, here we simply create poses and then create many new distinct animations as we vary when we call each pose and how far apart. [I am assuming "reusing an animation" would be understood by a noob to be something fixed and that gets reused identically.] I am a noob, and I had trouble understanding this tutorial until I started playing with the download file and looking at the xml. If there are no objections, I may make some minor changes to the article later on this week. [[User:Jose X|Jose X]] 03:43, 20 May 2010 (UTC)

== Need new sample file ==

The sample file appears to be very old and so far I have not been able to load it in the latest version of Synfig. I may try to reproduce the animation, then offer my own version, but that might take a while. If anyone else would like to do so, please be my guest.--[[User:Erubin|Erubin]] ([[User talk:Erubin|talk]]) 20:59, 4 December 2015 (EST)

Doc:Brushes

2015-12-04T14:57:19Z

Erubin: /* The procedure */ "may" -> "many"

{{Title|Brushes}}
{{Category|Manual}}
{{NewTerminology}}


== Introduction ==

The Outlines that you can draw with Synfig are formed by a rounded brush. The brush is defined by a radius that you can modify by its brush editor widget. This tutorial explains how to make brushed outlines that would improve sustantially your artwork.

== What do I need to use brushes? ==

=== A brush image ===
Well, for the moment Synfig hasn't any brush image included so you'll need to do them by your self or grab from the free resources (insert link here to those resources).

Here are some examples of brushes:

{{l|Image:Soft-wheezy-asymetric-brush.png}}
{{l|Image:Wool-ball-brush.png}}
{{l|Image:Soft-triangle-brush.png}}
{{l|Image:Tictactoe-brush.png}}
{{l|Image:Rhomb-fuzzy-brush.png}}
{{l|Image:Big-soft-brush.png|128px}}

These pictures are all licensed as public domain. Feel free to use them in your projects.

Brush images can just be any kind of image file that allows transparency (PNG, TIFF, GIF). The more resolution your image has, the bigger your brush size can be without pixelisation. Huge file sizes would take synfig more time to render,though. Find the balance between both options of quality and speed.

Anyway, you can use anything that is visible under synfig as a brush. See below.

=== A combinaison of feature ===

Brushes are not a primary feature of Synfig. They are obtained from the combination of the following features:

* {{l|Duplicate Layer}}
* Link to Spline (what uses the following convert types):
** {{l|Convert#Spline Vertex|Spline Vertex}}
** {{l|Convert#Spline Tangent|Spline Tangent}}
** {{l|Convert#Spline Width|Spline Width}}

Strictly the Link to Spline feature is not needed but it would help on make several conversion types and linking.

== The Idea ==

The idea of brushes is to use the Duplicate layer feature with the Link to Spline (automatic or manual) feature given by the conversion types.

When you link a vertex to a spline (or a tangent or a width) it converts your parameter to the following sub-parameters.

* spline "Spline"
* bool "Loop"
* real "Amount"

There are other particular parameters for tangent or width that will be revised in other section.

spline "Spline" is the spline where the parameter (vertex, tangent or width) is linked to. In the case of the vertex it means that the vertex lies on the spline given by its "Amount" parameter. When Amount is 0.0 the vertex position is the Spline begin. When Amount is 1.0 the vertex position is the Spline end. When Loop is "on" values outside the [0.0, 1.0] range are forced to be in that range by eliminating the integer part of the number. <tt>(It needs a better explanation)</tt>

On the other hand the Duplicate layer allows duplicate the render of everything that is below it as many times as the Index value node indicates. Also if you link any parameter to that Index one the parameter is modified according to the index before it is multiple rendered by the Duplicate layer. It allows apply some kind of transformation to the layers at the same time you duplicate them.

Combining those two features (Link to Spline and Duplicate) you can achieve the emulation of brushes in synfig.

== The procedure ==
As of Synfig 1.0.2 (November 27, 2015), much of the process for creating a brushtroke effect has been simplified because scale and rotate functions have been integrated into group layers. The following steps will guide you through the process:

# If you have not already done so, create an outline (path) for the brush to follow.
## Click on the {{l|Spline Tool}}.
## Under the {{l|Tool Options Panel}}, select "Create Outline" if it is not already selected. You may wish to de-select all other "Layer Type" options as well.
## Lay as many or as few vertices as you wish.
## In the bottom-left corner of the {{l|Tool Options Panel}}, click "Make Spline" (gears icon).
## Edit the spline to your content by adding or removing vertices and moving tangent handles.
# Import the "brush" you would like to copy by clicking '''File->Import...''', then selecting the corresponding image file.
#*Alternatively, you may use an existing shape within your project, although this may require an additional step. Place the object(s) to be used as a brush in a {{l|Group Layer}} or {{l|Switch Group Layer}}. If you want your brush to rotate to follow the contour of the path, it is necessary that the objects be in a group layer or switch group layer because most objects do not have a rotation (Angle) parameter but groups do. (Some objects also lack an origin parameter.) After creating the group layer, move the origin handle to the object's center (ctrl-click and drag the origin handle) so that they both move together. These steps are not necessary if you import an image because imported images are created within a switch group layer.
# Select both the group layer containing your brush and the spline layer. Click the group's origin handle (green circle), then right-click on the spline (not on a handle) and select '''Link to Spline'''. To test that you have done this correctly, move the group's origin handle and it should be confined to the spline and rotate so that it is always tangent to it. You are still free to rotate the group layer and it will continue to correspondingly rotate as you move the origin along the spline's path.
# Put the group layer with your brush inside another group layer. Call this new group layer "Clones" or something similar for easy reference.
# With the group layer ("Clones") selected, adjust the scale handle (orange circle in the {{l|Group Transformation Widget}}) so that the brush is as large or as small as you desire. You can also return to this step later.
# Click the group layer containing your brush (not the "Clones" layer). Right-click it and select '''New Layer->Other->Duplicate'''. (Alternatively, click in the menu bar '''Layer->New Layer->Other->Duplicate'''.) This creates a {{l|Duplicate Layer}}, which is ''not the same as duplicating the layer''. Do not simply click "Duplicate Layer" below the Layers Panel.
# Click the Duplicate Layer you just created. Under the parameters, expand "Index (Index 1)" and edit the values "From", "To", and "Step". These correspond to the portion of the spline to be traversed as well as the density of the brushstroke. For the "From" and "To" parameters, 0 corresponds to the start of the spline and 1 corresponds to its end. The number of duplicates to be made is equal to floor((To-From)/Step). A smaller "Step" parameter corresponds to a denser brushstroke while a larger one makes it more sparse (and possibly easier to render). For this tutorial, it is suggested you use From=0, To=1, and Step=0.02, which will create 50 copies along the entire length of the spline, although you are encouraged to modify these values to see their effects.
# Open the {{l|Library Panel}}. Expand "ValueBase Nodes" and select "Index 1", which should correspond to the value node you just edited in the Duplicate Layer. Make sure "Index 1" remains selected throughout the following step.
# Click the group layer containing your brush (not "Clones"). Within the {{l|Parameters Panel}}, expand '''Transformation->Offset'''. Right-click "Amount" and select "Connect". (Note that the Transformation and Offset parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer. This should create many copies of the brush along the length of the spline. You will notice that these copies are not rotated, which will be accomplished in the next and final step. If you do not wish for the brush to rotate as it traverses the path, you are done.
# Still within the group layer's Parameters Panel, expand '''Transformation->Angle'''. Right-click "Amount" and select "Connect" (make sure "Index 1" is still selected in the Library Panel). (Note that the Transformation and Angle parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This automatically associates the duplicates' angle with the tangent to the spline. If you have done all of the above steps correctly, your brush will follow the spline and its angle will change with it.

At this point, you can modify any parameters and the brushstroke will update dynamically. You can turn off the Spline Layer to hide it, add vertices, modify tangent handles, and change the "From", "To", and "Step" parameters.

== Further steps ==

It is possible to make more fancy things with this procedure like make random angled brushes or random spread brushes stamps along the outline. But this is part of an Advanced uses of Brushes tutorial.

== Examples ==

{{l|Image:Test1-1.png}}

A Star layer.
You can see that seems to be a bug there with the feather and zoom in and out combinations.

{{l|Image:Test1-2.png}}

A simple stroke.

{{l|Image:Test1-3.png}}

A angled pen.
And this is the brush image:

{{l|Image:Brush002.png}}

{{l|Image:Test1-4.png}}

The same but not rotated.

{{l|Image:Test1-5.png}}

Other brush example. And this is the brush image:

{{l|Image:Brush001.png|128px}}

This is the sifz file used to render the examples:

{{l|Media:Test1.sifz|Sample file link}}

You need to modify the zoom parameter in the group layer and the b-amount value node to modify the density of the brush to achieve same values than in the examples.

Doc:Brushes

2015-12-03T12:31:42Z

Erubin: /* The procedure */ "the"-- hope I'm done.

{{Title|Brushes}}
{{Category|Manual}}
{{NewTerminology}}


== Introduction ==

The Outlines that you can draw with Synfig are formed by a rounded brush. The brush is defined by a radius that you can modify by its brush editor widget. This tutorial explains how to make brushed outlines that would improve sustantially your artwork.

== What do I need to use brushes? ==

=== A brush image ===
Well, for the moment Synfig hasn't any brush image included so you'll need to do them by your self or grab from the free resources (insert link here to those resources).

Here are some examples of brushes:

{{l|Image:Soft-wheezy-asymetric-brush.png}}
{{l|Image:Wool-ball-brush.png}}
{{l|Image:Soft-triangle-brush.png}}
{{l|Image:Tictactoe-brush.png}}
{{l|Image:Rhomb-fuzzy-brush.png}}
{{l|Image:Big-soft-brush.png|128px}}

These pictures are all licensed as public domain. Feel free to use them in your projects.

Brush images can just be any kind of image file that allows transparency (PNG, TIFF, GIF). The more resolution your image has, the bigger your brush size can be without pixelisation. Huge file sizes would take synfig more time to render,though. Find the balance between both options of quality and speed.

Anyway, you can use anything that is visible under synfig as a brush. See below.

=== A combinaison of feature ===

Brushes are not a primary feature of Synfig. They are obtained from the combination of the following features:

* {{l|Duplicate Layer}}
* Link to Spline (what uses the following convert types):
** {{l|Convert#Spline Vertex|Spline Vertex}}
** {{l|Convert#Spline Tangent|Spline Tangent}}
** {{l|Convert#Spline Width|Spline Width}}

Strictly the Link to Spline feature is not needed but it would help on make several conversion types and linking.

== The Idea ==

The idea of brushes is to use the Duplicate layer feature with the Link to Spline (automatic or manual) feature given by the conversion types.

When you link a vertex to a spline (or a tangent or a width) it converts your parameter to the following sub-parameters.

* spline "Spline"
* bool "Loop"
* real "Amount"

There are other particular parameters for tangent or width that will be revised in other section.

spline "Spline" is the spline where the parameter (vertex, tangent or width) is linked to. In the case of the vertex it means that the vertex lies on the spline given by its "Amount" parameter. When Amount is 0.0 the vertex position is the Spline begin. When Amount is 1.0 the vertex position is the Spline end. When Loop is "on" values outside the [0.0, 1.0] range are forced to be in that range by eliminating the integer part of the number. <tt>(It needs a better explanation)</tt>

On the other hand the Duplicate layer allows duplicate the render of everything that is below it as many times as the Index value node indicates. Also if you link any parameter to that Index one the parameter is modified according to the index before it is multiple rendered by the Duplicate layer. It allows apply some kind of transformation to the layers at the same time you duplicate them.

Combining those two features (Link to Spline and Duplicate) you can achieve the emulation of brushes in synfig.

== The procedure ==
As of Synfig 1.0.2 (November 27, 2015), much of the process for creating a brushtroke effect has been simplified because scale and rotate functions have been integrated into group layers. The following steps will guide you through the process:

# If you have not already done so, create an outline (path) for the brush to follow.
## Click on the {{l|Spline Tool}}.
## Under the {{l|Tool Options Panel}}, select "Create Outline" if it is not already selected. You may wish to de-select all other "Layer Type" options as well.
## Lay as many or as few vertices as you wish.
## In the bottom-left corner of the {{l|Tool Options Panel}}, click "Make Spline" (gears icon).
## Edit the spline to your content by adding or removing vertices and moving tangent handles.
# Import the "brush" you would like to copy by clicking '''File->Import...''', then selecting the corresponding image file.
#*Alternatively, you may use an existing shape within your project, although this may require an additional step. Place the object(s) to be used as a brush in a {{l|Group Layer}} or {{l|Switch Group Layer}}. If you want your brush to rotate to follow the contour of the path, it is necessary that the objects be in a group layer or switch group layer because most objects do not have a rotation (Angle) parameter but groups do. (Some objects also lack an origin parameter.) After creating the group layer, move the origin handle to the object's center (ctrl-click and drag the origin handle) so that they both move together. These steps are not necessary if you import an image because imported images are created within a switch group layer.
# Select both the group layer containing your brush and the spline layer. Click the group's origin handle (green circle), then right-click on the spline (not on a handle) and select '''Link to Spline'''. To test that you have done this correctly, move the group's origin handle and it should be confined to the spline and rotate so that it is always tangent to it. You are still free to rotate the group layer and it will continue to correspondingly rotate as you move the origin along the spline's path.
# Put the group layer with your brush inside another group layer. Call this new group layer "Clones" or something similar for easy reference.
# With the group layer ("Clones") selected, adjust the scale handle (orange circle in the {{l|Group Transformation Widget}}) so that the brush is as large or as small as you desire. You can also return to this step later.
# Click the group layer containing your brush (not the "Clones" layer). Right-click it and select '''New Layer->Other->Duplicate'''. (Alternatively, click in the menu bar '''Layer->New Layer->Other->Duplicate'''.) This creates a {{l|Duplicate Layer}}, which is ''not the same as duplicating the layer''. Do not simply click "Duplicate Layer" below the Layers Panel.
# Click the Duplicate Layer you just created. Under the parameters, expand "Index (Index 1)" and edit the values "From", "To", and "Step". These correspond to the portion of the spline to be traversed as well as the density of the brushstroke. For the "From" and "To" parameters, 0 corresponds to the start of the spline and 1 corresponds to its end. The number of duplicates to be made is equal to floor((To-From)/Step). A smaller "Step" parameter corresponds to a denser brushstroke while a larger one makes it more sparse (and possibly easier to render). For this tutorial, it is suggested you use From=0, To=1, and Step=0.02, which will create 50 copies along the entire length of the spline, although you are encouraged to modify these values to see their effects.
# Open the {{l|Library Panel}}. Expand "ValueBase Nodes" and select "Index 1", which should correspond to the value node you just edited in the Duplicate Layer. Make sure "Index 1" remains selected throughout the following step.
# Click the group layer containing your brush (not "Clones"). Within the {{l|Parameters Panel}}, expand '''Transformation->Offset'''. Right-click "Amount" and select "Connect". (Note that the Transformation and Offset parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer. This should create may copies of the brush along the length of the spline. You will notice that these copies are not rotated, which will be accomplished in the next and final step. If you do not wish for the brush to rotate as it traverses the path, you are done.
# Still within the group layer's Parameters Panel, expand '''Transformation->Angle'''. Right-click "Amount" and select "Connect" (make sure "Index 1" is still selected in the Library Panel). (Note that the Transformation and Angle parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This automatically associates the duplicates' angle with the tangent to the spline. If you have done all of the above steps correctly, your brush will follow the spline and its angle will change with it.

At this point, you can modify any parameters and the brushstroke will update dynamically. You can turn off the Spline Layer to hide it, add vertices, modify tangent handles, and change the "From", "To", and "Step" parameters.

== Further steps ==

It is possible to make more fancy things with this procedure like make random angled brushes or random spread brushes stamps along the outline. But this is part of an Advanced uses of Brushes tutorial.

== Examples ==

{{l|Image:Test1-1.png}}

A Star layer.
You can see that seems to be a bug there with the feather and zoom in and out combinations.

{{l|Image:Test1-2.png}}

A simple stroke.

{{l|Image:Test1-3.png}}

A angled pen.
And this is the brush image:

{{l|Image:Brush002.png}}

{{l|Image:Test1-4.png}}

The same but not rotated.

{{l|Image:Test1-5.png}}

Other brush example. And this is the brush image:

{{l|Image:Brush001.png|128px}}

This is the sifz file used to render the examples:

{{l|Media:Test1.sifz|Sample file link}}

You need to modify the zoom parameter in the group layer and the b-amount value node to modify the density of the brush to achieve same values than in the examples.

Doc:Brushes

2015-12-03T12:24:44Z

Erubin: /* The procedure */ Three minor edits to clarify some steps. Resizing the brush, clarifying the group layer to be selected, and distinguishing the Amount parameters all added.

{{Title|Brushes}}
{{Category|Manual}}
{{NewTerminology}}


== Introduction ==

The Outlines that you can draw with Synfig are formed by a rounded brush. The brush is defined by a radius that you can modify by its brush editor widget. This tutorial explains how to make brushed outlines that would improve sustantially your artwork.

== What do I need to use brushes? ==

=== A brush image ===
Well, for the moment Synfig hasn't any brush image included so you'll need to do them by your self or grab from the free resources (insert link here to those resources).

Here are some examples of brushes:

{{l|Image:Soft-wheezy-asymetric-brush.png}}
{{l|Image:Wool-ball-brush.png}}
{{l|Image:Soft-triangle-brush.png}}
{{l|Image:Tictactoe-brush.png}}
{{l|Image:Rhomb-fuzzy-brush.png}}
{{l|Image:Big-soft-brush.png|128px}}

These pictures are all licensed as public domain. Feel free to use them in your projects.

Brush images can just be any kind of image file that allows transparency (PNG, TIFF, GIF). The more resolution your image has, the bigger your brush size can be without pixelisation. Huge file sizes would take synfig more time to render,though. Find the balance between both options of quality and speed.

Anyway, you can use anything that is visible under synfig as a brush. See below.

=== A combinaison of feature ===

Brushes are not a primary feature of Synfig. They are obtained from the combination of the following features:

* {{l|Duplicate Layer}}
* Link to Spline (what uses the following convert types):
** {{l|Convert#Spline Vertex|Spline Vertex}}
** {{l|Convert#Spline Tangent|Spline Tangent}}
** {{l|Convert#Spline Width|Spline Width}}

Strictly the Link to Spline feature is not needed but it would help on make several conversion types and linking.

== The Idea ==

The idea of brushes is to use the Duplicate layer feature with the Link to Spline (automatic or manual) feature given by the conversion types.

When you link a vertex to a spline (or a tangent or a width) it converts your parameter to the following sub-parameters.

* spline "Spline"
* bool "Loop"
* real "Amount"

There are other particular parameters for tangent or width that will be revised in other section.

spline "Spline" is the spline where the parameter (vertex, tangent or width) is linked to. In the case of the vertex it means that the vertex lies on the spline given by its "Amount" parameter. When Amount is 0.0 the vertex position is the Spline begin. When Amount is 1.0 the vertex position is the Spline end. When Loop is "on" values outside the [0.0, 1.0] range are forced to be in that range by eliminating the integer part of the number. <tt>(It needs a better explanation)</tt>

On the other hand the Duplicate layer allows duplicate the render of everything that is below it as many times as the Index value node indicates. Also if you link any parameter to that Index one the parameter is modified according to the index before it is multiple rendered by the Duplicate layer. It allows apply some kind of transformation to the layers at the same time you duplicate them.

Combining those two features (Link to Spline and Duplicate) you can achieve the emulation of brushes in synfig.

== The procedure ==
As of Synfig 1.0.2 (November 27, 2015), much of the process for creating a brushtroke effect has been simplified because scale and rotate functions have been integrated into group layers. The following steps will guide you through the process:

# If you have not already done so, create an outline (path) for the brush to follow.
## Click on the {{l|Spline Tool}}.
## Under the {{l|Tool Options Panel}}, select "Create Outline" if it is not already selected. You may wish to de-select all other "Layer Type" options as well.
## Lay as many or as few vertices as you wish.
## In the bottom-left corner of the {{l|Tool Options Panel}}, click "Make Spline" (gears icon).
## Edit the spline to your content by adding or removing vertices and moving tangent handles.
# Import the "brush" you would like to copy by clicking '''File->Import...''', then selecting the corresponding image file.
#*Alternatively, you may use an existing shape within your project, although this may require an additional step. Place the object(s) to be used as a brush in a {{l|Group Layer}} or {{l|Switch Group Layer}}. If you want your brush to rotate to follow the contour of the path, it is necessary that the objects be in a group layer or switch group layer because most objects do not have a rotation (Angle) parameter but groups do. (Some objects also lack an origin parameter.) After creating the group layer, move the origin handle to the object's center (ctrl-click and drag the origin handle) so that they both move together. These steps are not necessary if you import an image because imported images are created within a switch group layer.
# Select both the group layer containing your brush and the spline layer. Click group's origin handle (green circle), then right-click on the spline (not on a handle) and select '''Link to Spline'''. To test that you have done this correctly, move the group's origin handle and it should be confined to the spline and rotate so that it is always tangent to it. You are still free to rotate the group layer and it will continue to correspondingly rotate as you move the origin along the spline's path.
# Put the group layer with your brush inside another group layer. Call this new group layer "Clones" or something similar for easy reference.
# With the group layer ("Clones") selected, adjust the scale handle (orange circle in the {{l|Group Transformation Widget}}) so that the brush is as large or as small as you desire. You can also return to this step later.
# Click the group layer containing your brush (not the "Clones" layer). Right-click it and select '''New Layer->Other->Duplicate'''. (Alternatively, click in the menu bar '''Layer->New Layer->Other->Duplicate'''.) This creates a {{l|Duplicate Layer}}, which is ''not the same as duplicating the layer''. Do not simply click "Duplicate Layer" below the Layers Panel.
# Click the Duplicate Layer you just created. Under the parameters, expand "Index (Index 1)" and edit the values "From", "To", and "Step". These correspond to the portion of the spline to be traversed as well as the density of the brushstroke. For the "From" and "To" parameters, 0 corresponds to the start of the spline and 1 corresponds to its end. The number of duplicates to be made is equal to floor((To-From)/Step). A smaller "Step" parameter corresponds to a denser brushstroke while a larger one makes it more sparse (and possibly easier to render). For this tutorial, it is suggested you use From=0, To=1, and Step=0.02, which will create 50 copies along the entire length of the spline, although you are encouraged to modify these values to see their effects.
# Open the {{l|Library Panel}}. Expand "ValueBase Nodes" and select "Index 1", which should correspond to the value node you just edited in the Duplicate Layer. Make sure "Index 1" remains selected throughout the following step.
# Click the group layer containing your brush (not "Clones"). Within the {{l|Parameters Panel}}, expand '''Transformation->Offset'''. Right-click "Amount" and select "Connect". (Note that the Transformation and Offset parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer. This should create may copies of the brush along the length of the spline. You will notice that these copies are not rotated, which will be accomplished in the next and final step. If you do not wish for the brush to rotate as it traverses the path, you are done.
# Still within the group layer's Parameters Panel, expand '''Transformation->Angle'''. Right-click "Amount" and select "Connect" (make sure "Index 1" is still selected in the Library Panel). (Note that the Transformation and Angle parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This automatically associates the duplicates' angle with the tangent to the spline. If you have done all of the above steps correctly, your brush will follow the spline and its angle will change with it.

At this point, you can modify any parameters and the brushstroke will update dynamically. You can turn off the Spline Layer to hide it, add vertices, modify tangent handles, and change the "From", "To", and "Step" parameters.

== Further steps ==

It is possible to make more fancy things with this procedure like make random angled brushes or random spread brushes stamps along the outline. But this is part of an Advanced uses of Brushes tutorial.

== Examples ==

{{l|Image:Test1-1.png}}

A Star layer.
You can see that seems to be a bug there with the feather and zoom in and out combinations.

{{l|Image:Test1-2.png}}

A simple stroke.

{{l|Image:Test1-3.png}}

A angled pen.
And this is the brush image:

{{l|Image:Brush002.png}}

{{l|Image:Test1-4.png}}

The same but not rotated.

{{l|Image:Test1-5.png}}

Other brush example. And this is the brush image:

{{l|Image:Brush001.png|128px}}

This is the sifz file used to render the examples:

{{l|Media:Test1.sifz|Sample file link}}

You need to modify the zoom parameter in the group layer and the b-amount value node to modify the density of the brush to achieve same values than in the examples.

Doc:Brushes

2015-12-03T03:01:05Z

Erubin: /* The procedure */ I've edited this tutorial to be up-to-date with the latest version of Synfig. Many steps have been simplified. This is the only edit I wish to make at this point and you are welcome to revert to the old version or merge the two.

{{Title|Brushes}}
{{Category|Manual}}
{{NewTerminology}}


== Introduction ==

The Outlines that you can draw with Synfig are formed by a rounded brush. The brush is defined by a radius that you can modify by its brush editor widget. This tutorial explains how to make brushed outlines that would improve sustantially your artwork.

== What do I need to use brushes? ==

=== A brush image ===
Well, for the moment Synfig hasn't any brush image included so you'll need to do them by your self or grab from the free resources (insert link here to those resources).

Here are some examples of brushes:

{{l|Image:Soft-wheezy-asymetric-brush.png}}
{{l|Image:Wool-ball-brush.png}}
{{l|Image:Soft-triangle-brush.png}}
{{l|Image:Tictactoe-brush.png}}
{{l|Image:Rhomb-fuzzy-brush.png}}
{{l|Image:Big-soft-brush.png|128px}}

These pictures are all licensed as public domain. Feel free to use them in your projects.

Brush images can just be any kind of image file that allows transparency (PNG, TIFF, GIF). The more resolution your image has, the bigger your brush size can be without pixelisation. Huge file sizes would take synfig more time to render,though. Find the balance between both options of quality and speed.

Anyway, you can use anything that is visible under synfig as a brush. See below.

=== A combinaison of feature ===

Brushes are not a primary feature of Synfig. They are obtained from the combination of the following features:

* {{l|Duplicate Layer}}
* Link to Spline (what uses the following convert types):
** {{l|Convert#Spline Vertex|Spline Vertex}}
** {{l|Convert#Spline Tangent|Spline Tangent}}
** {{l|Convert#Spline Width|Spline Width}}

Strictly the Link to Spline feature is not needed but it would help on make several conversion types and linking.

== The Idea ==

The idea of brushes is to use the Duplicate layer feature with the Link to Spline (automatic or manual) feature given by the conversion types.

When you link a vertex to a spline (or a tangent or a width) it converts your parameter to the following sub-parameters.

* spline "Spline"
* bool "Loop"
* real "Amount"

There are other particular parameters for tangent or width that will be revised in other section.

spline "Spline" is the spline where the parameter (vertex, tangent or width) is linked to. In the case of the vertex it means that the vertex lies on the spline given by its "Amount" parameter. When Amount is 0.0 the vertex position is the Spline begin. When Amount is 1.0 the vertex position is the Spline end. When Loop is "on" values outside the [0.0, 1.0] range are forced to be in that range by eliminating the integer part of the number. <tt>(It needs a better explanation)</tt>

On the other hand the Duplicate layer allows duplicate the render of everything that is below it as many times as the Index value node indicates. Also if you link any parameter to that Index one the parameter is modified according to the index before it is multiple rendered by the Duplicate layer. It allows apply some kind of transformation to the layers at the same time you duplicate them.

Combining those two features (Link to Spline and Duplicate) you can achieve the emulation of brushes in synfig.

== The procedure ==
As of Synfig 1.0.2 (November 27, 2015), much of the process for creating a brushtroke effect has been simplified because scale and rotate functions have been integrated into group layers. The following steps will guide you through the process:

# If you have not already done so, create an outline (path) for the brush to follow.
## Click on the {{l|Spline Tool}}.
## Under the {{l|Tool Options Panel}}, select "Create Outline" if it is not already selected. You may wish to de-select all other "Layer Type" options as well.
## Lay as many or as few vertices as you wish.
## In the bottom-left corner of the {{l|Tool Options Panel}}, click "Make Spline" (gears icon).
## Edit the spline to your content by adding or removing vertices and moving tangent handles.
# Import the "brush" you would like to copy by clicking '''File->Import...''', then selecting the corresponding image file.
#*Alternatively, you may use an existing shape within your project, although this may require an additional step. Place the object(s) to be used as a brush in a {{l|Group Layer}} or {{l|Switch Group Layer}}. If you want your brush to rotate to follow the contour of the path, it is necessary that the objects be in a group layer or switch group layer because most objects do not have a rotation (Angle) parameter but groups do. (Some objects also lack an origin parameter.) After creating the group layer, move the origin handle to the object's center (ctrl-click and drag the origin handle) so that they both move together. These steps are not necessary if you import an image because imported images are created within a switch group layer.
# Select both the group layer containing your brush and the spline layer. Click group's origin handle (green circle), then right-click on the spline (not on a handle) and select '''Link to Spline'''. To test that you have done this correctly, move the group's origin handle and it should be confined to the spline and rotate so that it is always tangent to it. You are still free to rotate the group layer and it will continue to correspondingly rotate as you move the origin along the spline's path.
# Put the group layer with your brush inside another group layer. Call this new group layer "Clones" or something similar for easy reference.
# Click the group layer containing your brush (not the "Clones" layer). Right-click it and select '''New Layer->Other->Duplicate'''. (Alternatively, click in the menu bar '''Layer->New Layer->Other->Duplicate'''.) This creates a {{l|Duplicate Layer}}, which is ''not the same as duplicating the layer''. Do not simply click "Duplicate Layer" below the Layers Panel.
# Click the Duplicate Layer you just created. Under the parameters, expand "Index (Index 1)" and edit the values "From", "To", and "Step". These correspond to the portion of the spline to be traversed as well as the density of the brushstroke. For the "From" and "To" parameters, 0 corresponds to the start of the spline and 1 corresponds to its end. The number of duplicates to be made is equal to floor((To-From)/Step). A smaller "Step" parameter corresponds to a denser brushstroke while a larger one makes it more sparse (and possibly easier to render). For this tutorial, it is suggested you use From=0, To=1, and Step=0.02, which will create 50 copies along the entire length of the spline, although you are encouraged to modify these values to see their effects.
# Open the {{l|Library Panel}}. Expand "ValueBase Nodes" and select "Index 1", which should correspond to the value node you just edited in the Duplicate Layer. Make sure "Index 1" remains selected throughout the following step.
# Click the group layer containing your brush. Within the {{l|Parameters Panel}}, expand '''Transformation->Offset'''. Right-click "Amount" and select "Connect". This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer. This should create may copies of the brush along the length of the spline. You will notice that these copies are not rotated, which will be accomplished in the next and final step. If you do not wish for the brush to rotate as it traverses the path, you are done.
# Still within the group layer's Parameters Panel, expand '''Transformation->Angle'''. Right-click "Amount" and select "Connect" (make sure "Index 1" is still selected in the Library Panel). This automatically associates the duplicates' angle with the tangent to the spline. If you have done all of the above steps correctly, your brush will follow the spline and its angle will change with it.

At this point, you can modify any parameters and the brushstroke will update dynamically. You can turn off the Spline Layer to hide it, add vertices, modify tangent handles, and change the "From", "To", and "Step" parameters.

== Further steps ==

It is possible to make more fancy things with this procedure like make random angled brushes or random spread brushes stamps along the outline. But this is part of an Advanced uses of Brushes tutorial.

== Examples ==

{{l|Image:Test1-1.png}}

A Star layer.
You can see that seems to be a bug there with the feather and zoom in and out combinations.

{{l|Image:Test1-2.png}}

A simple stroke.

{{l|Image:Test1-3.png}}

A angled pen.
And this is the brush image:

{{l|Image:Brush002.png}}

{{l|Image:Test1-4.png}}

The same but not rotated.

{{l|Image:Test1-5.png}}

Other brush example. And this is the brush image:

{{l|Image:Brush001.png|128px}}

This is the sifz file used to render the examples:

{{l|Media:Test1.sifz|Sample file link}}

You need to modify the zoom parameter in the group layer and the b-amount value node to modify the density of the brush to achieve same values than in the examples.