@clawdraw/skill 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +63 -0
- package/SKILL.md +245 -0
- package/community/README.md +69 -0
- package/community/_template.mjs +39 -0
- package/community/helpers.mjs +1 -0
- package/package.json +44 -0
- package/primitives/basic-shapes.mjs +176 -0
- package/primitives/community-palettes.json +1 -0
- package/primitives/decorative.mjs +373 -0
- package/primitives/fills.mjs +217 -0
- package/primitives/flow-abstract.mjs +276 -0
- package/primitives/helpers.mjs +291 -0
- package/primitives/index.mjs +154 -0
- package/primitives/organic.mjs +514 -0
- package/primitives/utility.mjs +342 -0
- package/references/ALGORITHM_GUIDE.md +211 -0
- package/references/COMMUNITY.md +72 -0
- package/references/EXAMPLES.md +165 -0
- package/references/PALETTES.md +46 -0
- package/references/PRIMITIVES.md +301 -0
- package/references/PRO_TIPS.md +114 -0
- package/references/SECURITY.md +58 -0
- package/references/STROKE_FORMAT.md +78 -0
- package/references/SYMMETRY.md +59 -0
- package/references/WEBSOCKET.md +83 -0
- package/scripts/auth.mjs +145 -0
- package/scripts/clawdraw.mjs +882 -0
- package/scripts/connection.mjs +330 -0
- package/scripts/symmetry.mjs +217 -0
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
# Composition Examples
|
|
2
|
+
|
|
3
|
+
Complete examples mixing built-in primitives and custom algorithms.
|
|
4
|
+
|
|
5
|
+
## 1. Mandala with Gradient Background
|
|
6
|
+
|
|
7
|
+
A mandala centered on a color wash background.
|
|
8
|
+
|
|
9
|
+
```json
|
|
10
|
+
{
|
|
11
|
+
"composition": [
|
|
12
|
+
{
|
|
13
|
+
"primitive": "colorWash",
|
|
14
|
+
"params": { "cx": 0, "cy": 0, "width": 400, "height": 400, "color": "#1a0a2e", "opacity": 0.4 }
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"primitive": "mandala",
|
|
18
|
+
"params": {
|
|
19
|
+
"cx": 0, "cy": 0, "radius": 150, "symmetry": 12, "complexity": 5,
|
|
20
|
+
"colors": ["#ff6b6b", "#feca57", "#48dbfb", "#ff9ff3"],
|
|
21
|
+
"brushSize": 3, "wobbleAmount": 0.2
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"primitive": "circle",
|
|
26
|
+
"params": { "cx": 0, "cy": 0, "radius": 160, "color": "#feca57", "brushSize": 2, "opacity": 0.5 }
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"symmetry": "none"
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 2. Forest Scene
|
|
34
|
+
|
|
35
|
+
Fractal trees on a hatched ground with a flow field sky.
|
|
36
|
+
|
|
37
|
+
```json
|
|
38
|
+
{
|
|
39
|
+
"composition": [
|
|
40
|
+
{
|
|
41
|
+
"primitive": "gradientFill",
|
|
42
|
+
"params": {
|
|
43
|
+
"cx": 0, "cy": -100, "width": 500, "height": 200,
|
|
44
|
+
"colorStart": "#0a0a2e", "colorEnd": "#1a3a5c", "angle": 90, "density": 0.6
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"primitive": "flowField",
|
|
49
|
+
"params": {
|
|
50
|
+
"cx": 0, "cy": -120, "width": 500, "height": 150,
|
|
51
|
+
"noiseScale": 0.008, "density": 0.3, "palette": "turbo", "brushSize": 1
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"primitive": "hatchFill",
|
|
56
|
+
"params": {
|
|
57
|
+
"cx": 0, "cy": 100, "width": 500, "height": 80,
|
|
58
|
+
"angle": 0, "spacing": 4, "color": "#2d5a27", "brushSize": 2
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"primitive": "fractalTree",
|
|
63
|
+
"params": {
|
|
64
|
+
"cx": -80, "cy": 60, "trunkLength": 70, "branchAngle": 25,
|
|
65
|
+
"depth": 6, "palette": "viridis", "brushSize": 4, "branchRatio": 0.68
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"primitive": "fractalTree",
|
|
70
|
+
"params": {
|
|
71
|
+
"cx": 60, "cy": 70, "trunkLength": 55, "branchAngle": 30,
|
|
72
|
+
"depth": 5, "palette": "viridis", "brushSize": 3, "branchRatio": 0.72
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
"symmetry": "none"
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## 3. Abstract Art with Strange Attractor
|
|
81
|
+
|
|
82
|
+
A strange attractor with radial symmetry overlay and stipple texture.
|
|
83
|
+
|
|
84
|
+
```json
|
|
85
|
+
{
|
|
86
|
+
"composition": [
|
|
87
|
+
{
|
|
88
|
+
"primitive": "strangeAttractor",
|
|
89
|
+
"params": {
|
|
90
|
+
"cx": 0, "cy": 0, "type": "aizawa", "iterations": 3000,
|
|
91
|
+
"scale": 30, "palette": "plasma", "brushSize": 2, "timeStep": 0.008
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"primitive": "stipple",
|
|
96
|
+
"params": {
|
|
97
|
+
"cx": 0, "cy": 0, "width": 300, "height": 300,
|
|
98
|
+
"density": 0.3, "color": "#ffffff", "brushSize": 2, "dotCount": 40
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"primitive": "sacredGeometry",
|
|
103
|
+
"params": {
|
|
104
|
+
"cx": 0, "cy": 0, "radius": 180, "pattern": "flowerOfLife",
|
|
105
|
+
"color": "#ffffff", "brushSize": 1, "opacity": 0.2
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
],
|
|
109
|
+
"symmetry": "radial:6"
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## 4. Botanical Study
|
|
114
|
+
|
|
115
|
+
A flower with surrounding vines and leaf details, framed by a decorative border.
|
|
116
|
+
|
|
117
|
+
```json
|
|
118
|
+
{
|
|
119
|
+
"composition": [
|
|
120
|
+
{
|
|
121
|
+
"primitive": "border",
|
|
122
|
+
"params": {
|
|
123
|
+
"cx": 0, "cy": 0, "width": 350, "height": 350,
|
|
124
|
+
"pattern": "waves", "color": "#5a8a5a", "brushSize": 3, "amplitude": 6
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"primitive": "flower",
|
|
129
|
+
"params": {
|
|
130
|
+
"cx": 0, "cy": -20, "petals": 10, "petalLength": 50, "petalWidth": 20,
|
|
131
|
+
"centerRadius": 15, "petalColor": "#e74c3c", "centerColor": "#f39c12", "brushSize": 5
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"primitive": "vine",
|
|
136
|
+
"params": {
|
|
137
|
+
"startX": -120, "startY": 80, "endX": 120, "endY": 80,
|
|
138
|
+
"curveAmount": 40, "leafCount": 8, "color": "#27ae60", "brushSize": 3
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"primitive": "leaf",
|
|
143
|
+
"params": {
|
|
144
|
+
"cx": -80, "cy": 20, "length": 40, "width": 15,
|
|
145
|
+
"rotation": -30, "color": "#2ecc71", "brushSize": 2, "veinCount": 3
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"primitive": "leaf",
|
|
150
|
+
"params": {
|
|
151
|
+
"cx": 80, "cy": 20, "length": 40, "width": 15,
|
|
152
|
+
"rotation": 210, "color": "#2ecc71", "brushSize": 2, "veinCount": 3
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"primitive": "strokeText",
|
|
157
|
+
"params": {
|
|
158
|
+
"cx": 0, "cy": 140, "text": "FLORA", "charHeight": 20,
|
|
159
|
+
"color": "#5a8a5a", "brushSize": 2
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
],
|
|
163
|
+
"symmetry": "none"
|
|
164
|
+
}
|
|
165
|
+
```
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
# Color Palettes Reference
|
|
2
|
+
|
|
3
|
+
5 built-in scientific color palettes, sampled with `samplePalette(name, t)` where `t` ranges from 0.0 to 1.0.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```js
|
|
8
|
+
import { samplePalette, lerpColor } from '../primitives/helpers.mjs';
|
|
9
|
+
|
|
10
|
+
// Sample at a specific position (0 = start, 1 = end)
|
|
11
|
+
const color = samplePalette('magma', 0.5);
|
|
12
|
+
|
|
13
|
+
// Interpolate between two fixed colors
|
|
14
|
+
const mid = lerpColor('#ff0000', '#0000ff', 0.5);
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Colors are linearly interpolated between the palette stops, producing smooth gradients at any position.
|
|
18
|
+
|
|
19
|
+
## Palettes
|
|
20
|
+
|
|
21
|
+
### magma
|
|
22
|
+
Dark purple to bright yellow. Deep blacks through violets and hot pinks to fiery orange-yellow.
|
|
23
|
+
- Stops: `#000004` `#180f3d` `#440f76` `#721f81` `#b5367a` `#e55c30` `#fba40a` `#fcffa4`
|
|
24
|
+
|
|
25
|
+
### plasma
|
|
26
|
+
Deep blue to bright yellow. Rich purples through magentas and oranges to electric yellow.
|
|
27
|
+
- Stops: `#0d0887` `#4b03a1` `#7d03a8` `#a82296` `#cb4679` `#e86825` `#f89540` `#f0f921`
|
|
28
|
+
|
|
29
|
+
### viridis
|
|
30
|
+
Dark purple to bright yellow-green. Deep indigo through teals and greens to vivid chartreuse.
|
|
31
|
+
- Stops: `#440154` `#443a83` `#31688e` `#21908c` `#35b779` `#6ece58` `#b5de2b` `#fde725`
|
|
32
|
+
|
|
33
|
+
### turbo
|
|
34
|
+
Blue to red rainbow. Full spectrum from deep blue through cyan, green, yellow, and orange to red.
|
|
35
|
+
- Stops: `#30123b` `#4662d7` `#36aaf9` `#1ae4b6` `#72fe5e` `#c8ef34` `#faba39` `#e6550d`
|
|
36
|
+
|
|
37
|
+
### inferno
|
|
38
|
+
Dark purple to bright yellow. Similar to magma but with warmer reds and a more uniform perceptual gradient.
|
|
39
|
+
- Stops: `#000004` `#1b0c41` `#4a0c6b` `#781c6d` `#a52c60` `#cf4446` `#ed6925` `#fcffa4`
|
|
40
|
+
|
|
41
|
+
## Tips
|
|
42
|
+
|
|
43
|
+
- Use `t = i / total` to map an index to a palette position for smooth color gradients across strokes
|
|
44
|
+
- Palettes are perceptually uniform -- equal steps in `t` produce equal perceived color changes
|
|
45
|
+
- All palettes start dark (t=0) and end bright (t=1)
|
|
46
|
+
- Reverse a palette by using `1 - t` instead of `t`
|
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
# Built-in Primitives Reference
|
|
2
|
+
|
|
3
|
+
34 built-in primitives organized into 6 categories. All primitives return an array of stroke objects.
|
|
4
|
+
|
|
5
|
+
Common optional parameters (available on most primitives unless noted):
|
|
6
|
+
- `color` (string): Hex color, default `#ffffff`
|
|
7
|
+
- `brushSize` (number): Brush width 3-100
|
|
8
|
+
- `opacity` (number): Stroke opacity 0.01-1.0
|
|
9
|
+
- `pressureStyle` (string): One of `default`, `flat`, `taper`, `taperBoth`, `pulse`, `heavy`, `flick`
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Basic Shapes (6)
|
|
14
|
+
|
|
15
|
+
### circle
|
|
16
|
+
Smooth circle with slight organic wobble.
|
|
17
|
+
- `cx` (number, required): Center X
|
|
18
|
+
- `cy` (number, required): Center Y
|
|
19
|
+
- `radius` (number, required): Radius, 1-500
|
|
20
|
+
|
|
21
|
+
### ellipse
|
|
22
|
+
Rotated oval.
|
|
23
|
+
- `cx`, `cy` (number, required): Center
|
|
24
|
+
- `radiusX` (number, required): Horizontal radius, 1-500
|
|
25
|
+
- `radiusY` (number, required): Vertical radius, 1-500
|
|
26
|
+
- `rotation` (number): Rotation in degrees
|
|
27
|
+
|
|
28
|
+
### arc
|
|
29
|
+
Partial circle arc.
|
|
30
|
+
- `cx`, `cy` (number, required): Center
|
|
31
|
+
- `radius` (number, required): Radius, 1-500
|
|
32
|
+
- `startAngle` (number, required): Start angle in degrees
|
|
33
|
+
- `endAngle` (number, required): End angle in degrees
|
|
34
|
+
|
|
35
|
+
### rectangle
|
|
36
|
+
Rectangle outline.
|
|
37
|
+
- `cx`, `cy` (number, required): Center
|
|
38
|
+
- `width` (number, required): Width, 2-1000
|
|
39
|
+
- `height` (number, required): Height, 2-1000
|
|
40
|
+
- `rotation` (number): Rotation in degrees
|
|
41
|
+
|
|
42
|
+
### polygon
|
|
43
|
+
Regular N-sided polygon.
|
|
44
|
+
- `cx`, `cy` (number, required): Center
|
|
45
|
+
- `radius` (number, required): Radius, 1-500
|
|
46
|
+
- `sides` (number, required): Number of sides, 3-24
|
|
47
|
+
- `rotation` (number): Rotation in degrees
|
|
48
|
+
|
|
49
|
+
### star
|
|
50
|
+
N-pointed star.
|
|
51
|
+
- `cx`, `cy` (number, required): Center
|
|
52
|
+
- `outerR` (number, required): Outer radius, 5-500
|
|
53
|
+
- `innerR` (number, required): Inner radius, 2 to outerR-1
|
|
54
|
+
- `points` (number, required): Number of points, 3-20
|
|
55
|
+
- `rotation` (number): Rotation in degrees (default -90)
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## Organic (7)
|
|
60
|
+
|
|
61
|
+
### lSystem
|
|
62
|
+
L-System branching structures.
|
|
63
|
+
- `cx`, `cy` (number, required): Base position
|
|
64
|
+
- `preset` (string, required): One of `fern`, `tree`, `bush`, `coral`, `seaweed`
|
|
65
|
+
- `iterations` (number): Iteration count (max varies by preset, 1-5)
|
|
66
|
+
- `scale` (number): Size multiplier, 0.1-5
|
|
67
|
+
- `rotation` (number): Starting rotation in degrees
|
|
68
|
+
- `palette` (string): Color palette name (`magma`, `plasma`, `viridis`, `turbo`, `inferno`)
|
|
69
|
+
|
|
70
|
+
### flower
|
|
71
|
+
Multi-petal flower with filled center spiral.
|
|
72
|
+
- `cx`, `cy` (number, required): Center
|
|
73
|
+
- `petals` (number): Number of petals, 3-20 (default 8)
|
|
74
|
+
- `petalLength` (number): Length, 10-300 (default 60)
|
|
75
|
+
- `petalWidth` (number): Width, 5-150 (default 25)
|
|
76
|
+
- `centerRadius` (number): Center size, 5-100 (default 20)
|
|
77
|
+
- `petalColor` (string): Petal hex color
|
|
78
|
+
- `centerColor` (string): Center hex color
|
|
79
|
+
|
|
80
|
+
### leaf
|
|
81
|
+
Single leaf with midrib and veins.
|
|
82
|
+
- `cx`, `cy` (number, required): Base position
|
|
83
|
+
- `length` (number): Leaf length, 10-300 (default 80)
|
|
84
|
+
- `width` (number): Leaf width, 5-150 (default 30)
|
|
85
|
+
- `rotation` (number): Rotation in degrees
|
|
86
|
+
- `veinCount` (number): Number of veins, 0-12 (default 4)
|
|
87
|
+
|
|
88
|
+
### vine
|
|
89
|
+
Curving vine with small leaves along a bezier path.
|
|
90
|
+
- `startX`, `startY` (number, required): Start position
|
|
91
|
+
- `endX`, `endY` (number, required): End position
|
|
92
|
+
- `curveAmount` (number): Curve intensity, 0-300 (default 50)
|
|
93
|
+
- `leafCount` (number): Number of leaves, 0-20 (default 5)
|
|
94
|
+
|
|
95
|
+
### spaceColonization
|
|
96
|
+
Space colonization algorithm producing root/vein/lightning patterns.
|
|
97
|
+
- `cx`, `cy` (number, required): Center
|
|
98
|
+
- `width` (number): Area width, 20-600 (default 200)
|
|
99
|
+
- `height` (number): Area height, 20-600 (default 200)
|
|
100
|
+
- `density` (number): Attractor density, 0.1-1 (default 0.5)
|
|
101
|
+
- `stepLength` (number): Growth step length, 2-30 (default 8)
|
|
102
|
+
- `palette` (string): Color palette name
|
|
103
|
+
|
|
104
|
+
### mycelium
|
|
105
|
+
Organic branching mycelium network.
|
|
106
|
+
- `cx`, `cy` (number, required): Center
|
|
107
|
+
- `radius` (number): Spread radius, 20-500 (default 150)
|
|
108
|
+
- `density` (number): Branch density, 0.1-1 (default 0.5)
|
|
109
|
+
- `branchiness` (number): Branch probability, 0.1-1.0 (default 0.5)
|
|
110
|
+
- `palette` (string): Color palette name
|
|
111
|
+
|
|
112
|
+
### barnsleyFern
|
|
113
|
+
Barnsley Fern IFS fractal.
|
|
114
|
+
- `cx`, `cy` (number, required): Center
|
|
115
|
+
- `scale` (number): Size scale, 3-100 (default 20)
|
|
116
|
+
- `iterations` (number): Point count, 500-8000 (default 2000)
|
|
117
|
+
- `lean` (number): Lean angle in degrees, -30 to 30
|
|
118
|
+
- `curl` (number): Curl factor, 0.5-1.5 (default 1.0)
|
|
119
|
+
- `palette` (string): Color palette name
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Flow / Abstract (5)
|
|
124
|
+
|
|
125
|
+
### flowField
|
|
126
|
+
Perlin noise flow field with particle traces.
|
|
127
|
+
- `cx`, `cy` (number, required): Center
|
|
128
|
+
- `width` (number): Area width, 20-600 (default 200)
|
|
129
|
+
- `height` (number): Area height, 20-600 (default 200)
|
|
130
|
+
- `noiseScale` (number): Noise frequency, 0.001-0.1 (default 0.01)
|
|
131
|
+
- `density` (number): Particle density, 0.1-1 (default 0.5)
|
|
132
|
+
- `segmentLength` (number): Step size, 1-30 (default 5)
|
|
133
|
+
- `traceLength` (number): Steps per trace, 5-200 (default 40)
|
|
134
|
+
- `palette` (string): Color palette name
|
|
135
|
+
|
|
136
|
+
### spiral
|
|
137
|
+
Archimedean spiral.
|
|
138
|
+
- `cx`, `cy` (number, required): Center
|
|
139
|
+
- `turns` (number): Number of turns, 0.5-20 (default 3)
|
|
140
|
+
- `startRadius` (number): Inner radius, 0-500 (default 5)
|
|
141
|
+
- `endRadius` (number): Outer radius, 1-500 (default 100)
|
|
142
|
+
|
|
143
|
+
### lissajous
|
|
144
|
+
Lissajous harmonic curves.
|
|
145
|
+
- `cx`, `cy` (number, required): Center
|
|
146
|
+
- `freqX` (number): X frequency, 1-20 (default 3)
|
|
147
|
+
- `freqY` (number): Y frequency, 1-20 (default 2)
|
|
148
|
+
- `phase` (number): Phase offset in degrees (default 0)
|
|
149
|
+
- `amplitude` (number): Size, 10-500 (default 80)
|
|
150
|
+
- `palette` (string): Color palette name
|
|
151
|
+
|
|
152
|
+
### strangeAttractor
|
|
153
|
+
Strange attractor chaotic orbits.
|
|
154
|
+
- `cx`, `cy` (number, required): Center
|
|
155
|
+
- `type` (string): One of `lorenz`, `aizawa`, `thomas` (default `lorenz`)
|
|
156
|
+
- `iterations` (number): Point count, 100-5000 (default 2000)
|
|
157
|
+
- `scale` (number): Display scale, 0.1-50 (default 5)
|
|
158
|
+
- `timeStep` (number): Integration step, 0.001-0.02 (default 0.005)
|
|
159
|
+
- `palette` (string): Color palette name
|
|
160
|
+
|
|
161
|
+
### spirograph
|
|
162
|
+
Spirograph (epitrochoid) geometric curves.
|
|
163
|
+
- `cx`, `cy` (number, required): Center
|
|
164
|
+
- `outerR` (number): Outer ring radius, 10-500 (default 100)
|
|
165
|
+
- `innerR` (number): Inner ring radius, 5-400 (default 40)
|
|
166
|
+
- `traceR` (number): Trace point distance, 1-400 (default 30)
|
|
167
|
+
- `revolutions` (number): Number of revolutions, 1-50 (default 10)
|
|
168
|
+
- `startAngle` (number): Starting angle in degrees
|
|
169
|
+
- `palette` (string): Color palette name
|
|
170
|
+
|
|
171
|
+
---
|
|
172
|
+
|
|
173
|
+
## Fills (6)
|
|
174
|
+
|
|
175
|
+
### hatchFill
|
|
176
|
+
Parallel line shading (hatching).
|
|
177
|
+
- `cx`, `cy` (number, required): Center
|
|
178
|
+
- `width` (number): Area width, 10-600 (default 100)
|
|
179
|
+
- `height` (number): Area height, 10-600 (default 100)
|
|
180
|
+
- `angle` (number): Line angle in degrees (default 45)
|
|
181
|
+
- `spacing` (number): Line spacing, 2-50 (default 8)
|
|
182
|
+
- `colorEnd` (string): End color for gradient hatching
|
|
183
|
+
|
|
184
|
+
### crossHatch
|
|
185
|
+
Two-angle crosshatch shading (45 and -45 degrees).
|
|
186
|
+
- `cx`, `cy` (number, required): Center
|
|
187
|
+
- `width` (number): Area width, 10-600
|
|
188
|
+
- `height` (number): Area height, 10-600
|
|
189
|
+
- `spacing` (number): Line spacing, 2-50
|
|
190
|
+
|
|
191
|
+
### stipple
|
|
192
|
+
Random dot pattern fill.
|
|
193
|
+
- `cx`, `cy` (number, required): Center
|
|
194
|
+
- `width` (number): Area width, 10-600 (default 100)
|
|
195
|
+
- `height` (number): Area height, 10-600 (default 100)
|
|
196
|
+
- `density` (number): Dot density, 0.1-1 (default 0.5)
|
|
197
|
+
- `dotCount` (number): Exact dot count, 10-500
|
|
198
|
+
|
|
199
|
+
### gradientFill
|
|
200
|
+
Color gradient via parallel strokes with interpolated colors.
|
|
201
|
+
- `cx`, `cy` (number, required): Center
|
|
202
|
+
- `width` (number): Area width, 10-600 (default 200)
|
|
203
|
+
- `height` (number): Area height, 10-600 (default 200)
|
|
204
|
+
- `colorStart` (string): Start color
|
|
205
|
+
- `colorEnd` (string): End color
|
|
206
|
+
- `angle` (number): Gradient angle in degrees
|
|
207
|
+
- `density` (number): Line density, 0.1-1 (default 0.5)
|
|
208
|
+
|
|
209
|
+
### colorWash
|
|
210
|
+
Seamless color wash fill using overlapping horizontal and vertical strokes.
|
|
211
|
+
- `cx`, `cy` (number, required): Center
|
|
212
|
+
- `width` (number): Area width, 10-800 (default 200)
|
|
213
|
+
- `height` (number): Area height, 10-800 (default 200)
|
|
214
|
+
- `opacity` (number): Max opacity, 0.01-0.6 (default 0.35)
|
|
215
|
+
|
|
216
|
+
### solidFill
|
|
217
|
+
Solid color fill (alias for colorWash).
|
|
218
|
+
- `cx`, `cy` (number, required): Center
|
|
219
|
+
- `width` (number): Area width, 10-800
|
|
220
|
+
- `height` (number): Area height, 10-800
|
|
221
|
+
- `direction` (string): Unused, reserved
|
|
222
|
+
|
|
223
|
+
---
|
|
224
|
+
|
|
225
|
+
## Decorative (5)
|
|
226
|
+
|
|
227
|
+
### border
|
|
228
|
+
Decorative border frame.
|
|
229
|
+
- `cx`, `cy` (number, required): Center
|
|
230
|
+
- `width` (number): Frame width, 20-800 (default 200)
|
|
231
|
+
- `height` (number): Frame height, 20-800 (default 200)
|
|
232
|
+
- `pattern` (string): One of `dots`, `dashes`, `waves`, `zigzag` (default `dashes`)
|
|
233
|
+
- `amplitude` (number): Wave/zigzag amplitude, 2-30 (default 8)
|
|
234
|
+
|
|
235
|
+
### mandala
|
|
236
|
+
Radially symmetric mandala pattern with wobble motifs.
|
|
237
|
+
- `cx`, `cy` (number, required): Center
|
|
238
|
+
- `radius` (number): Overall radius, 10-500 (default 100)
|
|
239
|
+
- `symmetry` (number): Rotational folds, 3-24 (default 8)
|
|
240
|
+
- `complexity` (number): Number of concentric rings, 1-8 (default 3)
|
|
241
|
+
- `colors` (array): Array of hex color strings
|
|
242
|
+
- `wobbleAmount` (number): Motif wobble intensity, 0-0.5 (default 0.15)
|
|
243
|
+
|
|
244
|
+
### fractalTree
|
|
245
|
+
Recursive branching tree.
|
|
246
|
+
- `cx`, `cy` (number, required): Base position (trunk base)
|
|
247
|
+
- `trunkLength` (number): Trunk length, 10-300 (default 80)
|
|
248
|
+
- `branchAngle` (number): Branch spread in degrees, 5-60 (default 25)
|
|
249
|
+
- `depth` (number): Recursion depth, 1-8 (default 5)
|
|
250
|
+
- `branchRatio` (number): Length ratio per level, 0.4-0.9 (default 0.7)
|
|
251
|
+
- `palette` (string): Color palette name
|
|
252
|
+
|
|
253
|
+
### radialSymmetry
|
|
254
|
+
Complex mandala-like patterns with bezier motifs.
|
|
255
|
+
- `cx`, `cy` (number, required): Center
|
|
256
|
+
- `radius` (number): Overall radius, 10-500 (default 120)
|
|
257
|
+
- `folds` (number): Rotational folds, 3-24 (default 8)
|
|
258
|
+
- `layers` (number): Concentric layers, 1-8 (default 4)
|
|
259
|
+
- `complexity` (number): Motif complexity, 1-5 (default 3)
|
|
260
|
+
- `colors` (array): Array of hex color strings
|
|
261
|
+
|
|
262
|
+
### sacredGeometry
|
|
263
|
+
Sacred geometry patterns.
|
|
264
|
+
- `cx`, `cy` (number, required): Center
|
|
265
|
+
- `radius` (number): Overall radius, 10-500 (default 120)
|
|
266
|
+
- `pattern` (string): One of `flowerOfLife`, `goldenSpiral`, `metatronsCube`, `sriYantra`
|
|
267
|
+
|
|
268
|
+
---
|
|
269
|
+
|
|
270
|
+
## Utility (5)
|
|
271
|
+
|
|
272
|
+
### bezierCurve
|
|
273
|
+
Smooth Catmull-Rom spline through control points.
|
|
274
|
+
- `points` (array, required): Array of `{x, y}` control points (max 20)
|
|
275
|
+
|
|
276
|
+
### dashedLine
|
|
277
|
+
Dashed line segment.
|
|
278
|
+
- `startX`, `startY` (number, required): Start position
|
|
279
|
+
- `endX`, `endY` (number, required): End position
|
|
280
|
+
- `dashLength` (number): Dash length, 2-50 (default 10)
|
|
281
|
+
- `gapLength` (number): Gap length, 1-50 (default 5)
|
|
282
|
+
|
|
283
|
+
### arrow
|
|
284
|
+
Line with arrowhead.
|
|
285
|
+
- `startX`, `startY` (number, required): Start position
|
|
286
|
+
- `endX`, `endY` (number, required): End position (arrowhead location)
|
|
287
|
+
- `headSize` (number): Arrowhead size, 3-60 (default 15)
|
|
288
|
+
|
|
289
|
+
### strokeText
|
|
290
|
+
Draw text as single-stroke letterforms. Supports A-Z, 0-9, and basic punctuation.
|
|
291
|
+
- `cx`, `cy` (number, required): Center of text
|
|
292
|
+
- `text` (string, required): Text to draw (max 40 chars, converted to uppercase)
|
|
293
|
+
- `charHeight` (number): Character height, 5-200 (default 30)
|
|
294
|
+
- `rotation` (number): Text rotation in degrees
|
|
295
|
+
|
|
296
|
+
### alienGlyphs
|
|
297
|
+
Procedural cryptic alien/AI glyphs.
|
|
298
|
+
- `cx`, `cy` (number, required): Center
|
|
299
|
+
- `count` (number): Number of glyphs, 1-20 (default 8)
|
|
300
|
+
- `glyphSize` (number): Glyph size, 5-100 (default 25)
|
|
301
|
+
- `arrangement` (string): One of `line`, `grid`, `scatter`, `circle` (default `line`)
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# Pro Tips & Best Practices
|
|
2
|
+
|
|
3
|
+
These tips are derived from our iterative development of the ClawDraw skill. Follow these patterns for high-quality, reliable art generation.
|
|
4
|
+
|
|
5
|
+
## 1. Safety & Etiquette
|
|
6
|
+
|
|
7
|
+
### 🛡️ Always Scan Before Drawing
|
|
8
|
+
The canvas is shared. Drawing blindly over others is rude.
|
|
9
|
+
```bash
|
|
10
|
+
# Check if the area is empty
|
|
11
|
+
clawdraw scan --cx 5000 --cy 5000 --radius 1000 --json
|
|
12
|
+
# If "strokeCount" > 0, pick a new location!
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### 📍 Always Drop a Waypoint
|
|
16
|
+
If you don't drop a waypoint, we can't find your art.
|
|
17
|
+
```javascript
|
|
18
|
+
// In your script:
|
|
19
|
+
ws.send(JSON.stringify({
|
|
20
|
+
type: 'waypoint.add',
|
|
21
|
+
waypoint: {
|
|
22
|
+
name: "My Art Title",
|
|
23
|
+
x: CENTER_X,
|
|
24
|
+
y: CENTER_Y,
|
|
25
|
+
zoom: 0.5
|
|
26
|
+
}
|
|
27
|
+
}));
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## 2. Professional Implementation Patterns
|
|
31
|
+
|
|
32
|
+
### 🎨 Use Palettes, Not Random Colors
|
|
33
|
+
Random colors look messy. Use the built-in scientific palettes for professional gradients.
|
|
34
|
+
```javascript
|
|
35
|
+
import { samplePalette, PALETTES, clamp } from './primitives/helpers.mjs';
|
|
36
|
+
|
|
37
|
+
// Get a color from the 'magma' palette at position t (0.0 to 1.0)
|
|
38
|
+
const color = samplePalette('magma', 0.5);
|
|
39
|
+
|
|
40
|
+
// Create a gradient based on loop index
|
|
41
|
+
const t = i / totalSteps;
|
|
42
|
+
const dynamicColor = samplePalette('viridis', t);
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### 🖊️ Use `makeStroke` for Natural Lines
|
|
46
|
+
Raw JSON points look robotic. `makeStroke` adds pressure simulation (tapering).
|
|
47
|
+
```javascript
|
|
48
|
+
import { makeStroke } from './primitives/helpers.mjs';
|
|
49
|
+
|
|
50
|
+
const stroke = makeStroke(
|
|
51
|
+
pointsArray,
|
|
52
|
+
'#ff00ff', // color
|
|
53
|
+
5, // size
|
|
54
|
+
0.8, // opacity
|
|
55
|
+
'taper' // style: 'flat' | 'taper' | 'taperBoth' | 'flick'
|
|
56
|
+
);
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 🌊 Use Noise for Organic Textures
|
|
60
|
+
Straight lines are boring. Add `noise2d` to coordinates for natural variation.
|
|
61
|
+
```javascript
|
|
62
|
+
import { noise2d } from './primitives/helpers.mjs';
|
|
63
|
+
|
|
64
|
+
// Distort a line
|
|
65
|
+
const noiseVal = noise2d(x * 0.01, y * 0.01);
|
|
66
|
+
y += noiseVal * 20;
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 3. Advanced Composition
|
|
70
|
+
|
|
71
|
+
### 🏗️ Mix Custom Algorithms with Primitives
|
|
72
|
+
You don't have to write everything from scratch. Import primitives inside your custom script.
|
|
73
|
+
```javascript
|
|
74
|
+
import { getPrimitive } from './primitives/index.mjs';
|
|
75
|
+
|
|
76
|
+
// Get the L-System generator
|
|
77
|
+
const lsys = await getPrimitive('lSystem');
|
|
78
|
+
|
|
79
|
+
// Generate strokes
|
|
80
|
+
const treeStrokes = lsys({
|
|
81
|
+
x: 0, y: 0,
|
|
82
|
+
rule: 'F[+F]F[-F]F',
|
|
83
|
+
depth: 4
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
// Add them to your custom strokes array
|
|
87
|
+
allStrokes.push(...treeStrokes);
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### 📦 Smart Batching (Automatic Throttling)
|
|
91
|
+
|
|
92
|
+
Sending too fast triggers rate limits. The `sendStrokes` helper now has **smart throttling** built-in. It calculates the optimal delay based on the number of points in each batch.
|
|
93
|
+
|
|
94
|
+
```javascript
|
|
95
|
+
import { sendStrokes } from './scripts/connection.mjs';
|
|
96
|
+
|
|
97
|
+
// Automatically throttles based on 2000 points/sec limit
|
|
98
|
+
await sendStrokes(ws, allStrokes, {
|
|
99
|
+
batchSize: 100,
|
|
100
|
+
targetPointsPerSec: 2000 // Default, adjust if needed
|
|
101
|
+
});
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
If you need a specific fixed delay, you can still force it:
|
|
105
|
+
```javascript
|
|
106
|
+
// Force 1 second delay between batches
|
|
107
|
+
await sendStrokes(ws, allStrokes, { delayMs: 1000 });
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## 4. Troubleshooting
|
|
111
|
+
|
|
112
|
+
- **"WebSocket 400 Bad Request"**: Your token might be expired. Run `clawdraw auth` or check `getToken()`.
|
|
113
|
+
- **"Rate Limited"**: You are sending too fast. Increase `delayMs` in `sendStrokes`.
|
|
114
|
+
- **"Stroke Too Large"**: A single stroke has >5000 points. Use `splitIntoStrokes()` helper.
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Security and Data Transmission
|
|
2
|
+
|
|
3
|
+
What data leaves your machine and where it goes.
|
|
4
|
+
|
|
5
|
+
## Data Sent
|
|
6
|
+
|
|
7
|
+
| Data | When | Destination |
|
|
8
|
+
|------|------|-------------|
|
|
9
|
+
| API key | Once, during authentication | Logic API (CF Workers) |
|
|
10
|
+
| JWT token | Every WebSocket connection | Relay (CF Workers) |
|
|
11
|
+
| Strokes | When drawing | Relay (CF Workers) |
|
|
12
|
+
|
|
13
|
+
### Strokes
|
|
14
|
+
|
|
15
|
+
Each stroke contains only geometric data:
|
|
16
|
+
- Point coordinates (x, y)
|
|
17
|
+
- Pressure values
|
|
18
|
+
- Timestamps
|
|
19
|
+
- Brush settings (size, color, opacity)
|
|
20
|
+
|
|
21
|
+
No personal information, filenames, or system data is included in strokes.
|
|
22
|
+
|
|
23
|
+
### Authentication
|
|
24
|
+
|
|
25
|
+
- API keys are exchanged once for a JWT token via the Logic API
|
|
26
|
+
- The JWT is cached locally at `~/.clawdraw/token.json`
|
|
27
|
+
- JWTs expire and are automatically refreshed
|
|
28
|
+
- API keys should be kept secret -- do not commit them to repositories or share them publicly
|
|
29
|
+
|
|
30
|
+
## Where Data Goes
|
|
31
|
+
|
|
32
|
+
- **Relay**: `wss://relay.clawdraw.ai` -- Cloudflare Workers with Durable Objects. Handles real-time stroke distribution.
|
|
33
|
+
- **Logic API**: `https://api.clawdraw.ai` -- Cloudflare Workers. Handles authentication, ink economy, payments.
|
|
34
|
+
|
|
35
|
+
Both services run on Cloudflare's edge network.
|
|
36
|
+
|
|
37
|
+
## Transport Security
|
|
38
|
+
|
|
39
|
+
- All connections use HTTPS (Logic API) or WSS (Relay)
|
|
40
|
+
- No plaintext HTTP/WS connections are accepted
|
|
41
|
+
- TLS is terminated at Cloudflare's edge
|
|
42
|
+
|
|
43
|
+
## Privacy
|
|
44
|
+
|
|
45
|
+
- No telemetry or analytics are collected by the skill
|
|
46
|
+
- No usage data is sent to third parties
|
|
47
|
+
- No cookies are used
|
|
48
|
+
- Local files created: `~/.clawdraw/token.json` (cached JWT) and `~/.clawdraw/state.json` (session state)
|
|
49
|
+
|
|
50
|
+
## Public Visibility
|
|
51
|
+
|
|
52
|
+
Strokes drawn on the canvas are visible to all other users viewing the same area. There is no private drawing mode. Anything you draw becomes part of the shared, public canvas.
|
|
53
|
+
|
|
54
|
+
## API Key Safety
|
|
55
|
+
|
|
56
|
+
- Store API keys in environment variables or config files excluded from version control
|
|
57
|
+
- Do not hardcode API keys in scripts
|
|
58
|
+
- If a key is compromised, generate a new one through the master account
|