Plugins
Distribution
Element distribution patterns — scatter, pack, and flow.
Distribution layers that control how elements are arranged across the canvas using algorithmic placement strategies.
npm install @genart-dev/plugin-distribution
| Type ID | Display Name | Description |
|---|
distribution:scatter | Scatter | Random or seeded distribution of points |
distribution:pack | Pack | Circle-packing or space-filling layout |
distribution:flow | Flow | Flow-field based element placement |
| Property | Type | Default | Description |
|---|
count | number | 100 | Number of scatter points |
minDistance | number | 10 | Minimum distance between points |
margin | number | 0.05 | Canvas edge margin (0-0.5 normalized) |
seed | number | 0 | Random seed (0 = use sketch seed) |
color | color | "#00aaff40" | Point marker color |
showPoints | boolean | true | Show distribution points |
| Property | Type | Default | Description |
|---|
count | number | 50 | Number of circles to pack |
minRadius | number | 5 | Minimum circle radius |
maxRadius | number | 80 | Maximum circle radius |
padding | number | 2 | Space between circles |
iterations | number | 500 | Packing algorithm iterations |
color | color | "#00aaff40" | Circle outline color |
| Property | Type | Default | Description |
|---|
resolution | number | 20 | Flow field grid resolution |
noiseScale | number | 0.005 | Perlin noise scale |
lineCount | number | 200 | Number of flow lines |
lineLength | number | 50 | Maximum line segment length |
color | color | "#00aaff40" | Flow line color |
seed | number | 0 | Random seed (0 = use sketch seed) |
| Tool | Description |
|---|
design_add_scatter | Add a scatter distribution layer |
design_add_pack | Add a circle-packing distribution layer |
design_add_flow | Add a flow-field distribution layer |
{
"tool": "design_add_layer",
"arguments": {
"type": "distribution:pack",
"properties": {
"count": 80,
"minRadius": 8,
"maxRadius": 60,
"padding": 4,
"color": "#e6394650"
}
}
}