gitbreathing

1import { STYLES, type StyleId } from './styles';
2 
3export type Background = 'transparent' | 'dark';
4export type RenderOptions = {
5  size: number;
6  styles: StyleId[];
7  power: number;
8  phase?: number;
9  background?: Background;
10  seed?: string;
11  styleWeights?: Partial<Record<StyleId, number>>;
12  styleColors?: Partial<Record<StyleId, string[]>>;
13  effects?: { glow?: boolean; particles?: boolean; secondaryCuts?: boolean; motion?: boolean; particleDensity?: number; strokeScale?: number };
14};
15 
16type RGB = [number, number, number];
17const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
18const rgb = (hex: string): RGB => {
19  const value = hex.replace('#', '');
20  const full = value.length === 3 ? value.split('').map((x) => x + x).join('') : value;
21  const n = Number.parseInt(full, 16);
22  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
23};
24const hash = (text: string) => {
25  let h = 2166136261;
26  for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 16777619);
27  return h >>> 0;
28};
29const randomAt = (seed: number, index: number) => {
30  let x = (seed + Math.imul(index + 1, 0x9e3779b1)) >>> 0;
31  x ^= x >>> 16; x = Math.imul(x, 0x7feb352d); x ^= x >>> 15; x = Math.imul(x, 0x846ca68b); x ^= x >>> 16;
32  return (x >>> 0) / 4294967296;
33};
34 
35export function renderSlash(options: RenderOptions): Uint8ClampedArray {
36  const size = clamp(Math.round(options.size), 8, 128);
37  const power = clamp(options.power, 0, 1);
38  const phase = options.phase ?? 0;
39  const effects = options.effects ?? {};
40  const particleDensity = clamp(effects.particleDensity ?? 1, 0, 3);
41  const strokeScale = clamp(effects.strokeScale ?? 1, 0.5, 3);
42  const background = options.background ?? 'transparent';
43  const styles: StyleId[] = options.styles.length ? options.styles : ['sun'];
44  const seed = hash(options.seed ?? 'gitbreathing');
45  const out = new Uint8ClampedArray(size * size * 4);
46  if (background === 'dark') {
47    for (let i = 0; i < size * size; i++) {
48      out[i * 4] = 9; out[i * 4 + 1] = 11; out[i * 4 + 2] = 18; out[i * 4 + 3] = 255;
49    }
50  }
51 
52  const put = (x: number, y: number, color: RGB, alpha = 255) => {
53    x = Math.round(x); y = Math.round(y);
54    if (x < 0 || y < 0 || x >= size || y >= size || alpha <= 0) return;
55    const i = (y * size + x) * 4;
56    const oldA = out[i + 3] / 255;
57    const a = clamp(alpha / 255, 0, 1);
58    const nextA = a + oldA * (1 - a);
59    if (nextA <= 0) return;
60    out[i] = Math.round((color[0] * a + out[i] * oldA * (1 - a)) / nextA);
61    out[i + 1] = Math.round((color[1] * a + out[i + 1] * oldA * (1 - a)) / nextA);
62    out[i + 2] = Math.round((color[2] * a + out[i + 2] * oldA * (1 - a)) / nextA);
63    out[i + 3] = Math.round(nextA * 255);
64  };
65  const line = (x0: number, y0: number, x1: number, y1: number, radius: number, color: RGB, alpha = 255) => {
66    const steps = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0)) * 1.5));
67    for (let i = 0; i <= steps; i++) {
68      const t = i / steps; const x = x0 + (x1 - x0) * t; const y = y0 + (y1 - y0) * t;
69      for (let yy = -radius; yy <= radius; yy++) for (let xx = -radius; xx <= radius; xx++) {
70        if (xx * xx + yy * yy <= radius * radius + 0.8) put(x + xx, y + yy, color, alpha);
71      }
72    }
73  };
74 
75  // The activity curve controls both the slash body and the amount of surrounding detail.
76  const bodyRadius = Math.max(1, Math.round((0.7 + power * size * 0.025) * strokeScale));
77  styles.forEach((id, layer) => {
78    const definition = STYLES[id];
79    if (!definition) return;
80    const palette = (options.styleColors?.[id]?.length ? options.styleColors[id]! : [...definition.colors]).map(rgb);
81    const weight = clamp(options.styleWeights?.[id] ?? 1, 0, 3);
82    if (weight === 0) return;
83    const layerScale = 1 / (1 + layer * 0.22);
84    const startX = size * (0.12 - layer * 0.012);
85    const endX = size * (0.88 + layer * 0.012);
86    const baseY = size * (0.78 - layer * 0.025);
87    const amplitude = size * (0.12 + 0.15 * power) * layerScale * weight;
88    const thickness = Math.max(1, Math.round(bodyRadius * layerScale * Math.min(1.35, weight)));
89    const point = (t: number): [number, number] => {
90      const diagonal = -t * size * 0.52;
91      const wave = Math.sin(t * Math.PI * (definition.shape === 'wave' ? 2.2 : 1.15) + layer * 0.7) * amplitude * 0.23;
92      const bend = Math.sin(t * Math.PI) * amplitude;
93      const motion = effects.motion === false ? 0 : Math.sin(t * 10 + phase * Math.PI * 2 + layer) * size * 0.012 * power;
94      return [startX + (endX - startX) * t, baseY + diagonal - bend + wave + motion];
95    };
96    const samples = Math.max(12, Math.round(size * (0.18 + power * 0.82)));
97    for (let i = 0; i < samples; i++) {
98      const a = point(i / samples); const b = point((i + 1) / samples);
99      if (effects.glow !== false) line(a[0], a[1], b[0], b[1], thickness + 1, palette[2] ?? palette[0], 65);
100      line(a[0], a[1], b[0], b[1], thickness, palette[0]);
101      if (power > 0.12) line(a[0], a[1] - 1, b[0], b[1] - 1, Math.max(1, thickness - 1), palette[1] ?? palette[0], 220);
102    }
103 
104    const particleCount = effects.particles === false ? 0 : Math.floor((2 + power * 46 * layerScale * weight) * particleDensity);
105    for (let i = 0; i < particleCount; i++) {
106      const r1 = randomAt(seed ^ hash(id), i + layer * 97);
107      const r2 = randomAt(seed ^ hash(id), i + 991 + layer * 97);
108      const t = 0.04 + r1 * 0.92;
109      const [x, y] = point(t);
110      const spread = size * (0.012 + power * 0.12);
111      const px = x + (r2 - 0.5) * spread * 1.8;
112      const py = y + (randomAt(seed, i + 1777 + layer * 31) - 0.5) * spread * 1.5;
113      const length = Math.max(1, size * (0.008 + power * (0.018 + r1 * 0.065)));
114      const radius = power > 0.72 && r2 > 0.72 ? 2 : 1;
115      if (definition.shape === 'crescent') line(px, py, px + length * 0.42, py - length, radius, palette[i % palette.length]);
116      else if (definition.shape === 'wave') line(px - length * 0.5, py + length * 0.15, px + length * 0.6, py - length * 0.2, radius, palette[i % palette.length]);
117      else if (definition.shape === 'mist') line(px - length * 0.35, py, px + length * 0.5, py - length * 0.12, radius, palette[i % palette.length], 180);
118      else line(px, py, px + length * 0.22, py - length, radius, palette[i % palette.length]);
119    }
120 
121    // Higher activity reveals secondary parallel cuts and detached sparks.
122    if (effects.secondaryCuts !== false && power > 0.35) {
123      const cuts = Math.floor(1 + power * 5 * weight);
124      for (let i = 0; i < cuts; i++) {
125        const t = 0.12 + randomAt(seed, i + layer * 211 + 4000) * 0.76;
126        const [x, y] = point(t);
127        const len = size * (0.025 + power * 0.055);
128        line(x - len * 0.35, y + len * 0.18, x + len * 0.45, y - len * 0.65, 1, palette[(i + 1) % palette.length], 210);
129      }
130    }
131  });
132  return out;
133}
134 
135export function pixelsToSvg(pixels: Uint8ClampedArray, size: number, title = 'GitBreathing generated slash'): string {
136  const rects: string[] = [];
137  for (let y = 0; y < size; y++) {
138    let x = 0;
139    while (x < size) {
140      const i = (y * size + x) * 4; const alpha = pixels[i + 3];
141      if (!alpha) { x++; continue; }
142      const r = pixels[i], g = pixels[i + 1], b = pixels[i + 2];
143      let end = x + 1;
144      while (end < size) {
145        const j = (y * size + end) * 4;
146        if (pixels[j + 3] !== alpha || pixels[j] !== r || pixels[j + 1] !== g || pixels[j + 2] !== b) break;
147        end++;
148      }
149      rects.push(`<rect x="${x}" y="${y}" width="${end - x}" height="1" fill="rgb(${r},${g},${b})"${alpha === 255 ? '' : ` opacity="${(alpha / 255).toFixed(3)}"`}/>`);
150      x = end;
151    }
152  }
153  return `<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" shape-rendering="crispEdges" role="img" aria-label="${title.replace(/[&<>\"]/g, '')}">\n<title>${title.replace(/[&<>]/g, '')}</title>\n${rects.join('\n')}\n</svg>\n`;
154}
155