Strokes

On this page, we build the stroke class that turns a path and a width into drawable geometry, and the renderers that shade it.

このページでは、パスと幅を描けるジオメトリに変えるストロークのクラスと、それに陰影を与えるレンダラを作ります。

Every demo below draws the same path at the same three positions, so the only change between them is the renderer. Each row is rounded, square, and ragged from top to bottom.

以下のデモはすべて、同じパスを同じ3つの位置に描いており、デモ間で変わるのはレンダラだけです。各行は上から順にrounded、square、raggedです。

The classes are documented on Stroke Definition and Renderers.

各クラスについてはStroke DefinitionとRenderersに記載しています。

Common to every demo

Depth ordering, sampling, and color selection are shared across every demo on this page. Each demo section covers only what its renderer adds.

深度の順序付け、サンプリング、色の選択は、このページのすべてのデモで共通です。各デモのセクションでは、そのレンダラが加える部分だけを説明します。

Details

Depth: Strokes are 2D: they move in X and Y, and their Z sits just above the paper. Z slightly elevates along the stroke to avoid z-fighting.

深度：ストロークは2Dです。XとY方向にだけ動き、Zは紙のすぐ上に配置されます。zファイティングを避けるため、Zはストロークに沿って少しずつ上がっていきます。

Sampling: Sample count (number of vertices) is derived from measured arc length, not from how many control points the path was authored with.

サンプリング：サンプル数（頂点数）は、パスを描いた際の制御点の数ではなく、実測した弧長から求められます。

Color: Every demo draws its colors from one generated Palette.

色：どのデモも、生成されたひとつのパレットから色を取ります。

Basic strokes

open full size ↗

A flat ribbon along the path, filled with one color and closed at both ends by a cap. This is the shape every other renderer starts from.

パスに沿った平らなリボンを単色で塗り、両端を端点で閉じたものです。他のすべてのレンダラは、この形から始まります。

Details

Cap styles: All three strokes share one renderer class, with the cap as an option. Square adds no geometry: the ribbon stops at its last sample. Rounded sweeps a triangle fan from the left edge, through the outward tangent, to the right edge. Ragged pushes a strip of spikes past the end at varying depths.

端点のスタイル：3本のストロークはひとつのレンダラクラスを共有し、端点はそのオプションです。squareはジオメトリを追加せず、リボンは最後のサンプルで終わります。roundedは左端から外向きの接線を通って右端までトライアングルファンを掃引します。raggedは終端の先へ、深さの異なるスパイクの帯を押し出します。

Rounded cap: Radius interpolates from the left width to the right width across the sweep, so an asymmetric stroke ends in a half-ellipse that meets both edges. Resolution scales with radius.

roundedの端点：半径は掃引に沿って左の幅から右の幅へ補間されるため、左右非対称なストロークは左右の縁に接する半楕円で終わります。分割数は半径に応じて決まります。

Ragged cap: Spike depths come from two sine samples offset by the stroke's seed, so the same seed always tears the same way.

raggedの端点：スパイクの深さはストロークのシードでずらした2つの正弦波のサンプルから求められるため、同じシードからは常に同じ裂け方になります。

Brush strokes

open full size ↗

The same ribbon, shaded per pixel as bristles rather than filled. Each stroke carries two pigments instead of one.

同じリボンを、塗りつぶすのではなくピクセルごとに毛の筋として陰影付けしたものです。各ストロークは1色ではなく2色の顔料を持ちます。

Details

Shading: The ribbon is handed to a fragment shader that computes a color per pixel, so the texture follows the mark instead of repeating on top of it.

陰影付け：リボンはフラグメントシェーダに渡され、ピクセルごとに色が計算されます。そのためテクスチャは、線の上で繰り返されるのではなく、線に沿って流れます。

Bristle noise: One noise field draws the bristle lanes, erodes the edge, and decides which pigment shows at each point.

毛のノイズ：ひとつのノイズが、毛の筋を描き、輪郭を削り、各点でどちらの顔料が表に出るかを決めます。

Two pigments: The stroke mixes two colors along the bristle noise, with a slow drift along the mark. The two come from different hues of one palette.

2つの顔料：ストロークは2色を毛のノイズに沿って混ぜ、線に沿ってゆっくりと変化させます。2色はひとつのパレットの異なる色相から選ばれます。

Shadow strokes

open full size ↗

Effects around the mark: a drop shadow, a debossed bevel, and a glow from top to bottom.

線のまわりの効果です。上から順にドロップシャドウ、デボス、グローです。

Details

Drop shadow: A blurred silhouette of the stroke, offset and drawn beneath, so the mark reads as floating.

ドロップシャドウ：ストロークのぼかしたシルエットをずらして下に描くため、線は浮いて見えます。

Deboss: A band inside the boundary darkens where its outward direction faces a fixed light, the shadow a cutout's lit rim casts onto its floor. There is no highlight, so the stroke reads as cut out of the paper.

デボス：輪郭の内側の帯は、外向きの方向が固定光源を向く場所で暗くなります。これは、切り抜きの光の当たる縁が底面に落とす影にあたります。ハイライトはないため、ストロークは紙から切り抜かれたように見えます。

Glow: The same silhouette blurred wider, in the most saturated bright color of the palette.

グロー：同じシルエットをより広くぼかし、パレットの中で最も彩度の高い明るい色で描いたものです。

The shadow and the glow are one class, StrokeHalo. It renders the stroke into a private low-resolution target and blurs there, so the softness cannot fold with the path.

シャドウとグローは、StrokeHaloというひとつのクラスです。ストロークを専用の低解像度ターゲットに描いてそこでぼかすため、ぼかしがパスとともに折り重なることはありません。

Try drawing

open full size ↗

Draw with the strokes on this page, in the drawing tool: the settings panel picks the tool, its colors, and its parameters exactly, the floating dials reroll the palette, set the width, and walk a trail of rolled tools, and Clear, Replay, and recording work as on the Drawing Tool Demo page. A turn sharper than a threshold splits the drawn line, so a fast zigzag bakes as separate strokes; each piece appears once its direction settles, and the wider the stroke, the harder its turns smooth. With a pen tablet, pressure scales the stroke around the set width, light thinner and heavy wider, each tool by its own amount; a mouse draws at the set width.

このページのストロークを使って、描画ツールの中で描いてみてください。設定パネルでは、ツールとその色、パラメータを正確に選べます。浮かぶ3つのダイヤルでは、パレットを引き直したり、幅を変えたり、ロールしてきたツールの列をたどったりできます。Clear、Replay、録画はDrawing Tool Demoページと同じように動きます。しきい値より鋭く曲がると描いた線はそこで分割されるため、速いジグザグは別々のストロークとして焼き込まれます。各断片は向きが安定してから現れ、ストロークが太いほど曲がりは強く滑らかになります。ペンタブレットでは、筆圧が設定した幅を中心にストロークを伸縮させます。軽ければ細く、強ければ太く、その振れ幅はツールごとに異なります。マウスは設定した幅のまま描きます。