git-hash-art 0.3.0 → 0.4.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/ALGORITHM.md +81 -15
- package/CHANGELOG.md +7 -0
- package/dist/browser.js +247 -62
- package/dist/browser.js.map +1 -1
- package/dist/main.js +250 -63
- package/dist/main.js.map +1 -1
- package/dist/module.js +250 -63
- package/dist/module.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/canvas/colors.ts +59 -38
- package/src/lib/canvas/draw.ts +134 -3
- package/src/lib/render.ts +156 -51
package/ALGORITHM.md
CHANGED
|
@@ -9,22 +9,27 @@ Hash String
|
|
|
9
9
|
│
|
|
10
10
|
├─► Seed (mulberry32 PRNG)
|
|
11
11
|
│
|
|
12
|
-
├─► Color Scheme (
|
|
12
|
+
├─► Color Scheme (hash-driven variation + scheme type selection)
|
|
13
13
|
│
|
|
14
14
|
└─► Rendering Pipeline
|
|
15
15
|
│
|
|
16
|
-
1.
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
1. Background Layer (radial gradient)
|
|
17
|
+
1b. Layered Background (faint shapes + concentric rings)
|
|
18
|
+
2. Composition Mode Selection
|
|
19
|
+
3. Focal Points + Void Zones (negative space)
|
|
20
|
+
4. Flow Field Initialization
|
|
21
|
+
5. Shape Layers (× N layers)
|
|
22
|
+
│ ├─ Blend Mode (per-layer compositing)
|
|
23
|
+
│ ├─ Render Style (fill+stroke, wireframe, dashed, watercolor, etc.)
|
|
24
|
+
│ ├─ Position (composition mode + focal bias + density check)
|
|
22
25
|
│ ├─ Shape Selection (layer-weighted)
|
|
26
|
+
│ ├─ Atmospheric Depth (desaturation on later layers)
|
|
23
27
|
│ ├─ Styling (transparency, glow, gradients, color jitter)
|
|
28
|
+
│ ├─ Organic Edges (~15% watercolor bleed)
|
|
24
29
|
│ └─ Recursive Nesting (~15% of large shapes)
|
|
25
|
-
6.
|
|
26
|
-
7.
|
|
27
|
-
8.
|
|
30
|
+
6. Flow-Line Pass (tapered brush strokes)
|
|
31
|
+
7. Noise Texture Overlay
|
|
32
|
+
8. Organic Connecting Curves
|
|
28
33
|
```
|
|
29
34
|
|
|
30
35
|
## 1. Deterministic RNG
|
|
@@ -44,22 +49,47 @@ The `SacredColorScheme` class derives three harmonious palettes from the hash:
|
|
|
44
49
|
|
|
45
50
|
| Palette | Method | Purpose |
|
|
46
51
|
|---------|--------|---------|
|
|
47
|
-
| Base
|
|
48
|
-
| Complementary
|
|
52
|
+
| Base | `color-scheme` lib, hue = seed % 360, hash-driven scheme type | Primary shape colors |
|
|
53
|
+
| Complementary | hue = seed + 180°, contrasting variation | Contrast accents |
|
|
49
54
|
| Triadic | hue = seed + 120° | Additional variety |
|
|
50
55
|
|
|
51
56
|
These are merged and deduplicated into a single 6-8 color palette. Background colors are darkened variants (65% and 55% brightness) of the base scheme.
|
|
52
57
|
|
|
58
|
+
### Hash-Driven Color Variation
|
|
59
|
+
|
|
60
|
+
The hash deterministically selects both a **scheme type** and a **color variation**, producing dramatically different palettes from the same hue:
|
|
61
|
+
|
|
62
|
+
| Variation | Character |
|
|
63
|
+
|-----------|-----------|
|
|
64
|
+
| `soft` | Muted, gentle tones |
|
|
65
|
+
| `hard` | High saturation, vivid |
|
|
66
|
+
| `pastel` | Light, airy |
|
|
67
|
+
| `light` | Bright, open |
|
|
68
|
+
| `dark` | Deep, moody |
|
|
69
|
+
| `default` | Balanced, neutral |
|
|
70
|
+
|
|
71
|
+
Scheme types also vary: `analogic`, `mono`, `contrast`, `triade`, `tetrade`. The complementary palette uses a contrasting variation (e.g., if base is `soft`, complementary uses `hard`) to create intentional color tension.
|
|
72
|
+
|
|
53
73
|
### Color Utilities
|
|
54
74
|
|
|
55
75
|
- **`hexWithAlpha(hex, alpha)`** — converts hex to `rgba()` for transparency
|
|
56
76
|
- **`jitterColor(hex, rng, amount)`** — applies ±amount RGB jitter per channel for organic variation
|
|
77
|
+
- **`desaturate(hex, amount)`** — blends toward luminance gray for atmospheric depth
|
|
57
78
|
- **Positional blending** — shape fill color is biased by canvas position, creating smooth color flow across the image
|
|
58
79
|
|
|
59
80
|
## 3. Background
|
|
60
81
|
|
|
61
82
|
A radial gradient fills the canvas from center to corners using two darkened base-scheme colors. This creates depth before any shapes are drawn.
|
|
62
83
|
|
|
84
|
+
### Layered Background
|
|
85
|
+
|
|
86
|
+
After the gradient, a second pass adds visual texture to the background:
|
|
87
|
+
|
|
88
|
+
- **Faint shapes** — 3-7 large, very low-opacity circles (3-8% alpha) drawn with `soft-light` blending, creating subtle color pools
|
|
89
|
+
- **Concentric rings** — 2-4 rings emanating from center at ~2-5% opacity, adding structure without competing with foreground shapes
|
|
90
|
+
|
|
91
|
+
This prevents the background from feeling flat and gives the image depth before the main shape layers begin.
|
|
92
|
+
|
|
63
93
|
## 4. Composition Modes
|
|
64
94
|
|
|
65
95
|
The hash deterministically selects one of five composition strategies that control how shapes are positioned on the canvas:
|
|
@@ -74,10 +104,18 @@ The hash deterministically selects one of five composition strategies that contr
|
|
|
74
104
|
|
|
75
105
|
Each mode produces fundamentally different visual character from the same shape set.
|
|
76
106
|
|
|
77
|
-
## 5. Focal Points
|
|
107
|
+
## 5. Focal Points & Negative Space
|
|
78
108
|
|
|
79
109
|
1-2 focal points are placed on the canvas (kept away from edges). Every shape position is pulled toward the nearest focal point by a strength factor (30-70%), creating areas of visual density and intentional-looking composition rather than uniform scatter.
|
|
80
110
|
|
|
111
|
+
### Void Zones (Negative Space)
|
|
112
|
+
|
|
113
|
+
1-2 void zones are generated at random positions. Shapes that land inside a void zone have an 85% chance of being skipped, creating deliberate areas of breathing room. A few shapes bleed through (15%) to keep the edges organic rather than hard-cut.
|
|
114
|
+
|
|
115
|
+
### Density Awareness
|
|
116
|
+
|
|
117
|
+
Before placing each shape, the renderer checks how many shapes already exist nearby. If local density exceeds ~15% of the per-layer shape count, there's a 60% chance the shape is skipped. This prevents areas from becoming an opaque blob and creates natural visual rhythm.
|
|
118
|
+
|
|
81
119
|
## 6. Shape Layers
|
|
82
120
|
|
|
83
121
|
The image is built in N layers (default: 4). Each layer has its own characteristics:
|
|
@@ -90,6 +128,32 @@ The image is built in N layers (default: 4). Each layer has its own characterist
|
|
|
90
128
|
| Size scale | Later layers use progressively smaller shapes (×0.85, ×0.70, ×0.55) |
|
|
91
129
|
| Shape weights | Early layers favor basic shapes; later layers favor complex/sacred |
|
|
92
130
|
| Per-shape opacity | Additional random jitter (50-100% of layer opacity) |
|
|
131
|
+
| Blend mode | Each layer gets a hash-derived `globalCompositeOperation` (see below) |
|
|
132
|
+
| Render style | Each layer has a dominant render style; 30% of shapes pick their own |
|
|
133
|
+
| Atmospheric depth | Later layers desaturate colors by up to 30%, simulating distance |
|
|
134
|
+
|
|
135
|
+
### Blend Modes (Per-Layer Compositing)
|
|
136
|
+
|
|
137
|
+
Each layer deterministically selects a `globalCompositeOperation` from: `source-over`, `screen`, `multiply`, `overlay`, `soft-light`, `color-dodge`, `color-burn`, `lighter`. There's a 40% chance of `source-over` (default) to keep some images clean, while the other modes create rich color interactions where shapes overlap — the kind of depth that makes output feel painterly rather than stacked.
|
|
138
|
+
|
|
139
|
+
### Render Styles (Per-Shape Treatment)
|
|
140
|
+
|
|
141
|
+
Instead of always `fill()` + `stroke()`, each shape gets a rendering treatment:
|
|
142
|
+
|
|
143
|
+
| Style | Description | Probability |
|
|
144
|
+
|-------|-------------|-------------|
|
|
145
|
+
| `fill-and-stroke` | Classic solid fill with outline | ~29% (weighted) |
|
|
146
|
+
| `fill-only` | Soft shapes with no outline | ~14% |
|
|
147
|
+
| `stroke-only` | Wireframe with ghost fill at 30% alpha | ~14% |
|
|
148
|
+
| `double-stroke` | Outer stroke at 2× width + inner stroke in fill color | ~14% |
|
|
149
|
+
| `dashed` | Dashed outline (5% size dash, 3% gap) | ~14% |
|
|
150
|
+
| `watercolor` | 3-4 slightly offset passes at low opacity for bleed effect | ~14% |
|
|
151
|
+
|
|
152
|
+
70% of shapes in a layer use the layer's dominant style; 30% pick independently. Additionally, ~15% of `fill-and-stroke` shapes are upgraded to `watercolor` for organic edge effects.
|
|
153
|
+
|
|
154
|
+
### Atmospheric Depth (Per-Layer Desaturation)
|
|
155
|
+
|
|
156
|
+
Later layers progressively desaturate their colors (0% on layer 0, up to 30% on the final layer). This simulates atmospheric perspective — distant shapes appear more muted, creating a sense of foreground/background depth.
|
|
93
157
|
|
|
94
158
|
### Shape Selection (Layer-Weighted)
|
|
95
159
|
|
|
@@ -124,14 +188,16 @@ Each shape receives:
|
|
|
124
188
|
- Sized at 15-40% of the parent
|
|
125
189
|
- More transparent than the parent layer
|
|
126
190
|
|
|
127
|
-
## 7. Flow-Line Pass
|
|
191
|
+
## 7. Flow-Line Pass (Tapered Brush Strokes)
|
|
128
192
|
|
|
129
193
|
6-16 flowing curves are drawn across the canvas, following the hash-derived vector field:
|
|
130
194
|
|
|
131
195
|
- Each line starts at a random position and takes 30-70 steps
|
|
132
196
|
- At each step, direction is determined by the flow field angle at that position plus slight random wobble
|
|
133
197
|
- Lines stop if they leave the canvas bounds
|
|
134
|
-
-
|
|
198
|
+
- **Tapered width** — each line starts at 1-4px and tapers to 20% of its starting width by the end, simulating a brush stroke that lifts off the canvas
|
|
199
|
+
- **Tapered opacity** — alpha also decays along the stroke, creating natural fade-out
|
|
200
|
+
- Individual segments are drawn with `lineCap: "round"` for smooth joins
|
|
135
201
|
|
|
136
202
|
The flow field is defined by:
|
|
137
203
|
```
|
package/CHANGELOG.md
CHANGED
|
@@ -4,9 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### [0.4.0](https://github.com/gfargo/git-hash-art/compare/0.3.0...0.4.0)
|
|
8
|
+
|
|
9
|
+
- feat: artistic enhancements for richer generative output [`#10`](https://github.com/gfargo/git-hash-art/pull/10)
|
|
10
|
+
|
|
7
11
|
#### [0.3.0](https://github.com/gfargo/git-hash-art/compare/0.2.0...0.3.0)
|
|
8
12
|
|
|
13
|
+
> 19 March 2026
|
|
14
|
+
|
|
9
15
|
- feat: evolve art generation with composition modes, flow fields, nesting, and texture [`#9`](https://github.com/gfargo/git-hash-art/pull/9)
|
|
16
|
+
- chore: release v0.3.0 [`ccceb41`](https://github.com/gfargo/git-hash-art/commit/ccceb41e8eec92fc1b7c857cfaa4ddb255b098e5)
|
|
10
17
|
- refactor(browser): simplify export statement [`dc193c9`](https://github.com/gfargo/git-hash-art/commit/dc193c972511c5b0eb9e6a781c423aa005453007)
|
|
11
18
|
|
|
12
19
|
#### [0.2.0](https://github.com/gfargo/git-hash-art/compare/0.1.0...0.2.0)
|