pixelsrc 0.2.0

Pixelsrc - GenAI-native pixel art format and compiler
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!-- Generated by scripts/generate-demos.sh -->
<!-- Do not edit manually - regenerate with: ./scripts/generate-demos.sh -->

# palette_cycle Demos

## Single Palette Cycle

Single color cycling through a sequence of values (classic water/fire shimmer).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "gradient", "colors": {"{_}": "#00000000", "{c1}": "#1E3A5F", "{c2}": "#2E5A8F", "{c3}": "#4E7ABF", "{c4}": "#7E9ADF"}}
{"type": "sprite", "name": "wave", "palette": "gradient", "grid": ["{c1}{c2}{c3}{c4}", "{c2}{c3}{c4}{c1}", "{c3}{c4}{c1}{c2}", "{c4}{c1}{c2}{c3}"]}
{"type": "animation", "name": "wave_cycle", "frames": ["wave"], "duration": 200, "palette_cycle": [{"tokens": ["{c1}", "{c2}", "{c3}", "{c4}"], "duration": 200}]}
```

</div>

<div class="demo-container" data-demo="single">
</div>

## Multiple Independent Cycles

Multiple palette cycles running simultaneously at different speeds (water + fire).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "scene", "colors": {"{_}": "#00000000", "{w1}": "#1E90FF", "{w2}": "#00BFFF", "{w3}": "#87CEEB", "{f1}": "#FF4500", "{f2}": "#FF6347", "{f3}": "#FFA07A"}}
{"type": "sprite", "name": "waterfire", "palette": "scene", "grid": ["{w1}{w2}{_}{f1}{f2}", "{w2}{w3}{_}{f2}{f3}", "{w3}{w1}{_}{f3}{f1}", "{w1}{w2}{_}{f1}{f2}"]}
{"type": "animation", "name": "dual_cycle", "frames": ["waterfire"], "duration": 100, "palette_cycle": [{"tokens": ["{w1}", "{w2}", "{w3}"], "duration": 300}, {"tokens": ["{f1}", "{f2}", "{f3}"], "duration": 200}]}
```

</div>

<div class="demo-container" data-demo="multiple">
</div>

## Cycle Timing Control

Controlling cycle speed with duration field (fast vs slow cycling).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "timing_demo", "colors": {"{_}": "#00000000", "{a}": "#FF0000", "{b}": "#00FF00", "{c}": "#0000FF"}}
{"type": "sprite", "name": "fast_tile", "palette": "timing_demo", "grid": ["{a}{b}{c}", "{b}{c}{a}", "{c}{a}{b}"]}
{"type": "sprite", "name": "slow_tile", "palette": "timing_demo", "grid": ["{a}{b}{c}", "{b}{c}{a}", "{c}{a}{b}"]}
{"type": "animation", "name": "fast_cycle", "frames": ["fast_tile"], "duration": 50, "palette_cycle": [{"tokens": ["{a}", "{b}", "{c}"], "duration": 50}]}
{"type": "animation", "name": "slow_cycle", "frames": ["slow_tile"], "duration": 500, "palette_cycle": [{"tokens": ["{a}", "{b}", "{c}"], "duration": 500}]}
```

</div>

<div class="demo-container" data-demo="timing">
</div>

## Ping-Pong Cycling

Reverse direction cycling using duplicated tokens pattern (forward then backward).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "pulse", "colors": {"{_}": "#00000000", "{p1}": "#200020", "{p2}": "#400040", "{p3}": "#800080", "{p4}": "#C000C0", "{p5}": "#FF00FF"}}
{"type": "sprite", "name": "glow", "palette": "pulse", "grid": ["{_}{p1}{p2}{p3}{p4}{p5}{p4}{p3}{p2}{p1}{_}", "{p1}{p2}{p3}{p4}{p5}{p5}{p5}{p4}{p3}{p2}{p1}", "{p2}{p3}{p4}{p5}{p5}{p5}{p5}{p5}{p4}{p3}{p2}", "{p3}{p4}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p4}{p3}", "{p4}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p4}", "{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p5}", "{p4}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p4}", "{p3}{p4}{p5}{p5}{p5}{p5}{p5}{p5}{p5}{p4}{p3}", "{p2}{p3}{p4}{p5}{p5}{p5}{p5}{p5}{p4}{p3}{p2}", "{p1}{p2}{p3}{p4}{p5}{p5}{p5}{p4}{p3}{p2}{p1}", "{_}{p1}{p2}{p3}{p4}{p5}{p4}{p3}{p2}{p1}{_}"]}
{"type": "animation", "name": "ping_pong_glow", "frames": ["glow"], "duration": 100, "palette_cycle": [{"tokens": ["{p1}", "{p2}", "{p3}", "{p4}", "{p5}", "{p4}", "{p3}", "{p2}"], "duration": 100}]}
```

</div>

<div class="demo-container" data-demo="ping_pong">
</div>