Chapter 8. Live Path Effects (LPEs)

Live Path Effects は Inkscape 独自のシステムであり、他の SVG ビューワーで表示されないことがある。最終結果パスは SVG パスとして表現される:

Live Path Effects, or LPEs for short, is a system for applying some kind of effect to a path. Inkscape stores the original path data in the Inkscape Name Space so that it can be modified at a later time (it will not be displayed by other SVG renderers). If the original path is modified, the LPE will be regenerated. The resulting path is stored as a normal SVG path.

拡張フィルターにあるパス効果を LPE に移行する計画がある:

Inkscape includes a handful of LPEs. With a solid framework in place, it is planned to migrate most of the path effects found under the Extensions menu to LPEs.

LPE 使用手順が述べられている:

To use an LPE, select a path (the skeleton path), call up the Path Effect Editor dialog (Path ‣ Path Effect Editor… Shift + Ctrl + 7), select the desired effect from the drop-down menu in the dialog, and then click the Add button.

Inkscape 1.2 では UI が変化しており、効果はダイアログ下部の + を押すことで表示される Live Path Effects Selector ウィンドウに一覧が現れる。

パス効果は「重ね掛け」可能だ。重ねる順序の変更や、効果のオンオフを指示する UI がある:

Multiple effects can be chained (stacked) together. The order in which each effect is applied can be changed using the arrow icons. Each effect can be temporarily “turned off” by clicking on the icon next to the effect name. This is handy if you want to edit the skeleton path (or a Group of skeleton paths).

LPE が生成したオブジェクトを選択し、Node Tool がアクティブならば元パスも表示される:

When an object is selected that was generated by an LPE and the Node Tool is enabled, the original skeleton path nodes are displayed.

効果の中には追加的に制御パスを要求するものもある。その場合、必要パスは自動的に生成される(緑の直線):

To see these paths, either click on the node editing icon in the dialog or press 7 while the object is selected and the Node Tool is active.

この次の記述が今のところわからない:

A control path is fully editable like any other path. The path can be replaced by another through pasting from the clipboard using the paste icon in the dialog. You may need to translate the control path (select all nodes then drag with the Node Tool). The path can also be copied to the clipboard by using the copy icon in the dialog.

制御パスはすでに持っているパスを使ってもよい:

An existing path can be used as a control path through linking. To create a link, first copy the path (Edit ‣ Copy (Ctrl + C)) to the clipboard and then click the link icon. Note that the linked path must be copied and not cut.

通常、LPE はグループ内のオブジェクトすべてに対して再帰的に適用される。しかし例外が二つは知られている:

LPEs are normally applied recursively to all objects in a Group. The Bend and Deformation LPEs, however, are applied to the whole Group once.

LPE を通常パスに変換することができる。Path ‣ Object to Path, Shift + Ctrl + C でいい。

LPE を消し去るには Path ‣ Remove Path Effect を実行する。

LPE はあるオブジェクトから別のオブジェクトに複製することが可能だ:

An LPE can be copied from one object to another using the Path ‣ Paste Path Effect (Ctrl + 7) command. To do so, first copy the object with the LPE you wish to paste using the Edit ‣ Copy (Ctrl + C) command.

LPE はある種の不具合が多い:

The implementation of LPEs has many bugs, especially if removing effects from a path or chaining LPEs. Paths can be left with LPE cruft in their attributes and without a valid SVG path.

予防策は、編集中の図面をこまめに上書き保存したり、クリーンコマンドで余分な定義を削除したりするしかない。

Bend

曲線をさらに曲げるコマンドは CAD でも見かけられる操作だ:

This effect takes an existing path (skeleton) and allows one to “bend” it in a well-defined way via a control path. The control path is automatically created. The style of the bent path is taken from the style of the original path.

Bend の実行手順を見ていこう:

To apply the effect, with the source path selected, and using the Node Tool select the Bend option from the drop-down menu in the Path Effect Editor dialog. Click on the Add button.

Inkscape 1.2 ではドロップダウンメニューではなく、専用のウィンドウが表示される。そこで Bend アイコンの下三角をクリックすると、元ダイアログに項目が追加される。これがアクティブだと、制御 UI も下部に表示される。

Next, click on the node icon in the Path Effect Editor dialog. A green, horizontal path will appear in place of the red path. This path controls the bending. It can be manipulated in all the ways that a regular path can be including adding new nodes and dragging the path.

緑の制御用パスが表示される。このパスを変形させて曲がり具合を指示するのだ。

The effect assumes that the skeleton path is orientated in the horizontal direction. If it is in the vertical orientation, one can check the Original path is vertical box. This distorts the aspect ratio. Restore the aspect ratio by checking the Width in units of length box. The size of the bent path can be changed by changing the size of the control path.

骨格パスの縦横比によっては、UI チェックボックスをいくつか ON にする必要がある。

The width of the bent path can be altered with the Width entry box.

ここでの幅は制御パスの進行方向に対して直交する方向に計測する。

Construct Grid

作図平面のような格子パターンを生成するコマンドだ。

This effect uses the first three nodes of a path to define a two dimension grid. The center node defines the origin, the first and third nodes define the direction and length of the two adjacent sides of the first cell. If a path has more than three nodes, the other nodes are ignored. One can select the number of cells in the two orthogonal directions.

UI は単純なので見ればわかる。Size X および Size Y で格子数を制御する。

Envelope Deformation

福本伸行先生作品的ぐにゃあを再現するのに最適のパス効果だ。

This effect deforms a path by using four control paths, one for each side of the bounding box. Each control path can be edited individually by clicking on the corresponding icon.

初期状態だと制御パスが線分なので、ノードを一、二個追加して曲げるのが良い。

Gears

This effect draws a series of intermeshed gears. It is more of a toy effect, designed to demonstrate the possibilities of LPEs. The Gear extension can also be used to draw gears with a bit more control.

Gears コマンドはデモ用途で存在するものだ。実践的ではない。次へ急ぐ。

Hatches (Rough)

Hatches はペン画のハッチングを模した効果と思われる。

This effect fills the area inside a path with a squiggly line that simulates quick, hand-drawn shading. Shapes are automatically converted to paths.

しかし、メモリーも CPU も食う仕様であるようだ:

Note: the squiggly line is constructed like a calligraphic stroke, that is by two almost parallel lines. This allows for variations in line thickness. You may get better results by adding a Fill and removing the Stroke (not automatically done by the effect). Warning: this effect appears to make heavy demands on the CPU.

他のパス効果 UI と同様、Nodee Tool バーがアクティブなときに利用可能だ:

There are a great many options to control the way the hatches are drawn. The spacing, direction, and amount of bend are determined by on-canvas nodes, visible when the Node Tool is in use. The other options are controlled in the Path Effect Editor dialog.

一度その UI を見るとうんざりするほど入力項目が多い。この効果は乱数を多用する。

Many of the options have a random factor. One can “re-roll the dice” by clicking on the randomize icon.

本書の図解を Inkscape 本体に組み込んで欲しい。

設定項目の解説文は見慣れぬ言葉が多い。精選して引用する:

Growth: The change in spacing between wiggles from right to left. The last wiggle will be about a factor of the Growth term times wider than the first wiggle.

右から左への間の揺らぎ間隔の変化。最後の揺らぎは最初のそれよりも Growth で指定された値で乗算された幅くらいになる。

Magnitude jitter: 1st side: Magnitude of randomness of hatch bottom extents (in pixels).

ハッチ下部付近における線の震えのランダム性の大きさとでも解釈できようか。

Parallelism jitter: 1st side: Magnitude of randomness of hatch bottom positions left to right (in pixels).

ハッチ下部付近における左から右への位置のランダム性の大きさ。

Half-turns smoothness: 1st side, in: How straight or curved are the right side of the hatch bottoms (zero is straight).

折り返しの滑らかさ(入り)ハッチの下部右側がどのくらいまっすぐか、曲がっているか。ラベルの 1st side2nd side がそれぞれ下部と上部を表すようだ。以下同様。

Interpolate Sub-Paths

サブパス補間は compound パスが対象。パス二つをあらかじめ Ctrl + K しておく。

This effect creates additional paths by interpolating between two sub-paths. A Trajectory (control) path dictates where the additional paths are placed.

個人的には CAD の曲面スイープコマンドと仕様が酷似していることに注意したい。

The total number of paths (including the two sub-paths) can be specified by the Steps parameter. An additional option Equidistant spacing determines if the nodes of the Trajectory path are used in the interpolation. If the option Equidistant spacing is checked, the additional paths are spaced evenly along the Trajectory path. If it is not checked, the additional paths are divided between the intermediate nodes (see following figure).

本書の図解では等間隔にサブパスを生成するほうが自然に思えるが、制御パスのノードをきめ細かく追加、配列するような用例が考えられ、そのときは等間隔をオフにするだろう。

Knot

自己交差のあるパスを、結び目理論の教科書によくある図式風に表現するパス効果だ。

This effect attempts to turn a path into a knot. That is, at each point where the path crosses itself, part of the path is hidden so it appears that that part is below the other part. As one follows the path, the effect attempts to alternate between going above and below.

交差の調整を Switcher なるハンドルで指定する。クリックするたびに回転方向を示す矢印の向きが変わる。Switcher 自身を別の交差に配置することもできる。

You can set which path crosses the other or remove the gap completely by using the Switcher. The Switcher is visible when the Node Tool is active. It consists of a circular arrow centered around the crossing point. Clicking on the diamond node at the crossing point toggles between the three states. To change another crossing, drag the diamond node to that crossing; the Switcher will follow.

Pattern Along Path (LPE)

This effect puts one or more copies of one path (pattern) along a second, control or skeleton path. The resulting object takes the attributes (Fill, etc.) of the skeleton path.

同名のコマンドが Extensions にもある。本書では LPE 版を先に紹介している。

The advantage of using the LPE version is that both the pattern and the skeleton path can be edited at a later time. The disadvantages are that only paths can be used for the pattern and that there are fewer options.

この短所は手動で Path ‣ Object to Path を適用することでカバーすればいい。

操作手順。クリップボードがわかりにくい:

  1. Copy the pattern: Select the pattern and copy it to the clipboard (Edit ‣ Copy Ctrl + C). The pattern must be a single path.

  2. Select the skeleton path: Only one can be selected.

  3. Apply the effect to skeleton path: In the Path Effect Editor dialog, select Pattern Along Path and click on the Add button.

  4. Paste pattern: Click on the Paste icon in dialog.

本書のイラストだとトカゲをまずクリックして Ctrl + C する。次に線分に同相であるほうの曲線をクリックする。それからエディターダイアログ操作の順でいい。

The Pattern copies drop-down menu has options to stretch the pattern to the path length and/or to put multiple copies along the skeleton path.

Repeat 系オプションで複数複製すると面白い。

残りは間隔調整、オフセット調整、端点を融合させるかどうか、等のオプションだ。

Ruler

This effect turns a path into a ruler.

パスに定規よろしく目盛を付ける効果だ。パスの長さが図面から読み取れるということだ。以下、UI の意味をいくつか記しておく。

Unit

UI で指定可能なオプションすべてに適用される長さ単位。

Mark distance

隣接する目盛間の距離。

Major steps

何目盛おきに目盛を大きくするか。

Shift marks by

パス始点から何目盛目から大目盛にするか。パス端点の大目盛は例外扱い。

Offset

パス始点からの最初の目盛までのオフセット。

Mark direction

パスの方向から見て、パスの左右両側のどれに目盛を付けるか。

Border marks

パス端点における大目盛の処遇を指定する。

Sketch

手描きの線を模す効果だが、骨格パスに対する付加的線の引き方というか、付け方が二種類ある。

The first are Strokes that follow the curvature of the path. The second are Construction lines that are straight and tangent to the path.

オプションが Stokes 系と Construction lines 系に大別されているということでもある。

Spiro Spline

曲線の(継ぎ目での)滑らかさを追求するための効果と考えられる:

This effect turns a series of nodes into a silky-smooth path defined entirely by the position of the nodes. The method was devised by Raph Levien for use in designing fonts. Spiro curves have splines that are joined together smoothly.

Spiro Spline LPE では三つのノード型を扱う:

Smooth node

ここにおいて曲率が連続するようなノード。両ハンドルが一直線上にある□または◇のノードで示される。

Corner node

異なるスプラインを角で接続するようなノード。ハンドルの一方または両方が引っ込んでいるか、ハンドルが一直線上にないノードで示される。

Tangent node (also called a left or right node)

線分を曲線に滑らかに接続する。接線ノードを作るには、その片側が直線で構成されていることを確認する(当該線分の両端点ノードを選択し、一例として Shift + L を押すことで線形化する)。

骨格パスの見てくれはあまり意味がない。描画させなくていい:

Visualization of the skeleton path is probably not very useful. It can be toggled off by clicking on the icon in the Tool Controls.

ハンドルは有用なので作業中は表示しておきたい:

It is sometimes useful to see the node handles. They can be toggled on by clicking on the icon. They are only shown for selected nodes and nodes adjacent to selected nodes.

ハンドルにせよ補助線にせよ、描画更新がおかしいときがあるのは確かに見たことがある:

Bug: If the handles are not visible when they should be, toggle off, then back on the node handles.

Spiro の急所:

Note that what is important for a Spiro spline is the collinearity of the handles with each other (smooth vs. corner node) or with a line segment (corner vs. tangent node). The actual directions of the handles for a smooth or corner node are irrelevant.

Spiro パッケージは図面を描くには必要以上に強力な機能を有しているが、Inkscape では G2 連続性まで対応している(それで十分):

For the technically inclined, in a Spiro curve, splines are joined such that the curve is smooth and the curvature is continuous. Although the Spiro package allows for G4 nodes (continuous to the fourth derivative), Inkscape uses only G2 nodes (continuous to the second derivative).

Stitch Sub-Paths

This effect draws a series of Stroke paths between points on sub-paths. Some of the things it is useful for are drawing hatched shading and for drawing hair.

手順:

  1. サブパス群を描く。パス群の向きを揃えてから Ctrl + K を押すなどして複合パスにする。

  2. 複合パスに対して Path Effect EditorStitch Sub-Paths を追加する。

  3. Stroke パスを補正する。

新しいパスは直線的にしかならない?

The Stitch Sub-Paths effect can be used to create the hatchings typically used in engravings as shown in the following example.

次の記述は実践的な作業手順中に現れる本ツールの用途だ:

By varying both the sub-paths and the Stroke path quite complicated hatchings can be created. The hatchings can be clipped to limit their range. The Tweak Tool could also be used to refine the hatchings if the hatchings are converted to stroked paths (see Chapter 11, Tweak Tool).

正多角形から完全グラフを描くようなツールとして用いる例が本書で示されている。

VonKoch

自己の部分が再帰的複製であるような曲線を生成する効果だ。

This effect creates fractals. The most classic fractal is perhaps the Von Koch snowflake. -略-

Applying this effect to a path creates two additional control paths: a Reference segment and a Generating path. The structure of the fractal is completely determined by these control paths. The first generation is created by placing copies of the skeleton path so that the Reference segment of each copy lies on top of one of the sub-path segments of the Generating path. Each additional generation is created in the same way, using the Generating path of each copy of the previous generation.

この後に比較的詳細な計算法が述べられているが、読んで理解できる性質のものではない。Sierpinski triangle を作図してみたり、本節後半のチュートリアルで修練するといい。

本文で言及されているが Nr of generations に大きい数を指定すると Inkscape が描画できない。