Patterned strokes

On this page, we build strokes that break one gesture into many small marks.

このページでは、ひとつの身振りをたくさんの小さなマークに分けるストロークを作ります。

Dashes, dots, strips

Strokes that build many small elements instead of one body: short rounded dashes stepped along the spine, uneven hand-drawn dots, and longer strips laid out roughly enough to overlap. The elements fill the stroke's width and follow its taper.

ひとつの本体ではなく、たくさんの小さな要素を組み立てるストロークです。スパインに沿って刻まれる短い丸みのあるダッシュ、手描きの不揃いな点、そして重なるほど粗く置かれた長めの帯。要素はストロークの幅を埋め、テーパーに従います。

Details

Dashes: Each dash is about 20 pixels, laid along the local spine direction and stepped by about three quarters of its own length, on rows spread across the width.

ダッシュ：各ダッシュは約20ピクセルで、その場所でのスパインの向きに沿って置かれ、自身の長さの約4分の3ずつ進みます。ダッシュは、幅方向に広がった複数の列の上に並びます。

Dots: Discs of 10 to 15 pixels, wobbled by seeded harmonics of the angle, so each reads as a circle drawn by hand rather than a stamp.

点：10から15ピクセルの円で、角度のシード付き倍音で揺らされます。そのため、それぞれがスタンプではなく手で描かれた円として読めます。

Strips: Longer and wider than the dashes, with more rotation and placement jitter and tighter rows, so neighbors sometimes overlap.

帯：ダッシュより長く幅広で、回転と配置の揺れが大きく、列が詰まっているため、隣同士がときどき重なります。

Stability: Each row across the width walks the arc from the start with its own seeded random sequence, so a growing stroke adds elements at the tip without reshuffling the ones already placed.

安定性：幅方向の各列は、固有のシード付き乱数列で始点から弧をたどります。そのため、伸びていくストロークは先端に要素を加えるだけで、すでに置かれたものを並べ直しません。

Wet patterns

open full size ↗

The same placement, with the elements as wet marks that drag the background. A dash or strip walks backward along its own direction and averages what it finds, dragging harder toward its tail, so each element reads as a short pull of wet paint; a dot pulls the surrounding color inward, so it reads as a blot. The picked-up background is tinted with the element's color.

同じ配置のまま、各要素を、背景を引きずる濡れた筆跡にしたものです。ダッシュと帯は自身の向きに沿って後方をたどり、そこにあるものを平均します。尾に向かうほど強く引きずるため、各要素は濡れた絵の具の短いひと引きとして読めます。点は周囲の色を内側へ引き込むため、しみとして読めます。拾われた背景は要素の色で染められます。

Fringe

open full size ↗

Small strokes sprouting from the spine to both sides, swept from the local direction by an angle (45 degrees by default). Their length follows the local width, so the sprouts fill the band the stroke was given and thin with the taper. Three looks: feather, where each left-right pair takes one color and the next pair the other, like a feather's bands; leaves, where the sprouts are tapered leaf shapes sized randomly from well below the width to well past it; and fringe, thinner and denser, with one color on each side of the spine.

スパインから両側へ生える小さなストロークです。局所的な向きから角度（既定では45度）だけ振られます。長さは局所的な幅に従うため、ストロークに与えられた帯を埋め、テーパーとともに細くなります。3つの見た目があります。featherは、左右のペアがひとつの色を取り、次のペアがもう一方の色を取って、羽の縞のようになります。leavesは先の尖った葉の形で、幅よりずっと小さいものから大きく超えるものまで、ランダムな大きさになります。fringeはより細く密で、スパインの左右で色が異なります。

Around strokes

open full size ↗

Paths derived from the base path (spiral, entangled, and scattered from top to bottom), drawn with the brush renderer. The count of sub-strokes and their offset from the base both follow the width.

元のパスから導いたパスです（上から順にspiral、entangled、scattered）。描画にはbrushレンダラを使います。サブストロークの本数と元のパスからのオフセットは、どちらも幅に従います。

Details

Spiral: The tip circles with sin and cos while its center moves along the base path, producing one continuous coil.

スパイラル：中心が元のパスに沿って進むあいだ、先端がsinとcosで円を描き、一本の連続したコイルになります。

Entangled: Copies of the path are offset by seeded low-frequency waves, and their endpoints pull back toward the base so the bundle reads as one gesture.

もつれ：パスの複製がシード付きの低周波の波でずらされます。端点は元のパスへ引き戻されるため、束はひとつの身振りとして読めます。

Scattered: Short strokes copy small segments of the base and move sideways by a seeded offset.

散布：短いストロークが元のパスの一部を写し取り、シード付きのオフセットで横へ移動します。

The generators return plain point arrays, documented on Path Effects, so any renderer can draw the result.

生成器は通常の点の配列を返すため（Path Effectsに記載）、どのレンダラでも結果を描画できます。

Graphic strokes

open full size ↗

Strokes that keep the path, the width, and the resampling and throw away the ribbon. Top to bottom: grid cells, large flat facets, and parallel lanes.

パス、幅、再サンプリングを保ったまま、リボンだけを捨てたストロークです。上から順に、グリッドのセル、大きな単色の面、平行なレーンです。

Details

The same StrokeDef drives all three; swapping the renderer is the only change.

3つとも同じStrokeDefで動き、変わるのはレンダラだけです。

Caps: Ends are closed by extending vertices along the tangent by a cap profile. For a rounded cap the profile is a circle, so outer lanes and facets stop short of the middle ones.

端点：終端は、接線方向に頂点を端点プロファイルの分だけ伸ばして閉じます。roundedではプロファイルが円になるため、外側のレーンや面は中央のものより手前で止まります。

Pixels: Cells are stamped from the spine outward, deduplicated by grid coordinate. The inside test uses signed distance across the spine, so the left and right widths stay independent.

ピクセル：セルはスパインから外向きにスタンプされ、グリッド座標で重複が除かれます。内外の判定にはスパインを挟んだ符号付きの距離を使うため、左右の幅は独立したままです。

Facets: The spine is resampled coarsely and each triangle takes one flat color. Vertices are jittered across the width, so the silhouette breaks along with the shading.

面：スパインは粗く再サンプリングされ、各三角形は単色を取ります。頂点は幅方向に揺らされるため、陰影だけでなく輪郭も崩れます。

Lanes: Each lane is its own thin ribbon offset across the width, so the lanes follow the curve.

レーン：各レーンは幅方向にずらされた独自の細いリボンなので、レーンは曲線に沿って進みます。

Seeded randomness: Colors and dropped cells come from a seeded generator, not Math.random, so the same settings redraw identically.

シード付きランダム：色の配置とセルの間引きはMath.randomではなくシード付きの生成器から得られるため、同じ設定からは同じ絵が描き直されます。

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ページと同じように動きます。しきい値より鋭く曲がると描いた線はそこで分割されるため、速いジグザグは別々のストロークとして焼き込まれます。各断片は向きが安定してから現れ、ストロークが太いほど曲がりは強く滑らかになります。ペンタブレットでは、筆圧が設定した幅を中心にストロークを伸縮させます。軽ければ細く、強ければ太く、その振れ幅はツールごとに異なります。マウスは設定した幅のまま描きます。