openAgent

1import { OptimizedBuffer, RGBA, TextAttributes } from "@opentui/core"
2import { go } from "../logo"
3 
4const PERIOD = 4600
5const RINGS = 3
6const WIDTH = 3.8
7const TAIL = 9.5
8const AMP = 0.55
9const TAIL_AMP = 0.16
10const BREATH_AMP = 0.05
11const BREATH_SPEED = 0.0008
12// Offset so the bg ring emits from the estimated GO center when the logo shimmer peaks.
13const PHASE_OFFSET = 0.29
14const LOGO_GAP = 1
15const LOGO_TOP_BIAS = -1
16const LOGO_LEFT_WIDTH = go.left[0]?.length ?? 0
17const LOGO_LINES = go.left.map((line, index) => line + " ".repeat(LOGO_GAP) + go.right[index])
18const LOGO_WIDTH = LOGO_LINES[0]?.length ?? 0
19const LOGO_HEIGHT = LOGO_LINES.length
20const SPACE = " ".codePointAt(0)!
21const TOP_HALF = "▀".codePointAt(0)!
22const FULL_BLOCK = "█".codePointAt(0)!
23const RING_SCALE = 1 / RINGS
24const TAIL_SCALE = 1 / TAIL
25const LOGO_REACH = Math.hypot(LOGO_WIDTH, LOGO_HEIGHT * 2) + 3
26 
27const enum LogoCellKind {
28  Background,
29  Top,
30  ShadowTop,
31  Solid,
32  Char,
33}
34 
35type LogoTemplateCell = {
36  x: number
37  y: number
38  kind: LogoCellKind
39  charCode: number
40  attributes: number
41  topDist: number
42  bottomDist: number
43}
44 
45const LOGO_TEMPLATE: LogoTemplateCell[] = LOGO_LINES.flatMap((line, y) =>
46  Array.from(line)
47    .map((char, x) => {
48      if (char === " ") return
49      const kind =
50        char === "_"
51          ? LogoCellKind.Background
52          : char === "^"
53            ? LogoCellKind.Top
54            : char === "~"
55              ? LogoCellKind.ShadowTop
56              : char === "█"
57                ? LogoCellKind.Solid
58                : LogoCellKind.Char
59      return {
60        x,
61        y,
62        kind,
63        charCode: char.codePointAt(0) ?? SPACE,
64        attributes: x > LOGO_LEFT_WIDTH ? TextAttributes.BOLD : 0,
65        topDist: Math.hypot(x + 0.5 - LOGO_WIDTH / 2, y * 2 - LOGO_HEIGHT),
66        bottomDist: Math.hypot(x + 0.5 - LOGO_WIDTH / 2, y * 2 + 1 - LOGO_HEIGHT),
67      }
68    })
69    .filter((cell): cell is LogoTemplateCell => !!cell),
70)
71 
72export type Rgb = [number, number, number]
73 
74export type GoUpsellArtRenderOptions = {
75  deltaTime?: number
76  rgb?: boolean
77  cache?: boolean
78}
79 
80const CACHE_FRAME_COUNT = Math.round(PERIOD / (1000 / 30))
81const CACHE_FRAMES_PER_RENDER = 1
82 
83export function toRgb(color: RGBA): Rgb {
84  const [r, g, b] = color.toInts()
85  return [r, g, b]
86}
87 
88function clamp(n: number) {
89  return Math.max(0, Math.min(1, n))
90}
91 
92function writeRgb(buffer: Uint16Array, offset: number, r: number, g: number, b: number, a = 255) {
93  buffer[offset] = r
94  buffer[offset + 1] = g
95  buffer[offset + 2] = b
96  buffer[offset + 3] = a
97}
98 
99function mixChannel(base: number, overlay: number, alpha: number) {
100  return Math.round(base + (overlay - base) * clamp(alpha))
101}
102 
103function writeLogoTint(
104  buffer: Uint16Array,
105  offset: number,
106  base: Rgb,
107  primary: Rgb,
108  primaryMix: number,
109  peakMix: number,
110) {
111  const p = clamp(primaryMix)
112  const q = clamp(peakMix)
113  const r = mixChannel(mixChannel(base[0], primary[0], p), 255, q)
114  const g = mixChannel(mixChannel(base[1], primary[1], p), 255, q)
115  const b = mixChannel(mixChannel(base[2], primary[2], p), 255, q)
116  writeRgb(buffer, offset, r, g, b)
117}
118 
119function sameRgb(a: Rgb, b: Rgb) {
120  return a[0] === b[0] && a[1] === b[1] && a[2] === b[2]
121}
122 
123export class GoUpsellArtPainter {
124  private panelRgb: Rgb = [0, 0, 0]
125  private primaryRgb: Rgb = [255, 255, 255]
126  private logoBaseRgb: Rgb = [180, 180, 180]
127  private elapsed = 0
128  private distances = new Float32Array(0)
129  private edgeFalloff = new Float32Array(0)
130  private geometryWidth = 0
131  private geometryHeight = 0
132  private reach = 1
133  private logoX = 0
134  private logoY = 0
135  private logoIndexes = new Int32Array(0)
136  private logoRgb: boolean | undefined
137  private pulsePeak = 0
138  private pulsePrimary = 0
139  private cacheDirty = true
140  private frameCache: Array<{ fg: Uint16Array; bg: Uint16Array }> = []
141  private cacheBuildIndex = 0
142 
143  setBackgroundPanel(value: RGBA | Rgb | undefined) {
144    if (!value) return false
145    const next = value instanceof RGBA ? toRgb(value) : value
146    if (sameRgb(this.panelRgb, next)) return false
147    this.panelRgb = next
148    this.invalidateCache()
149    return true
150  }
151 
152  setLogoBase(value: RGBA | Rgb | undefined) {
153    if (!value) return false
154    const next = value instanceof RGBA ? toRgb(value) : value
155    if (sameRgb(this.logoBaseRgb, next)) return false
156    this.logoBaseRgb = next
157    this.invalidateCache()
158    return true
159  }
160 
161  setPrimary(value: RGBA | Rgb | undefined) {
162    if (!value) return false
163    const next = value instanceof RGBA ? toRgb(value) : value
164    if (sameRgb(this.primaryRgb, next)) return false
165    this.primaryRgb = next
166    this.invalidateCache()
167    return true
168  }
169 
170  render(frameBuffer: OptimizedBuffer, options: GoUpsellArtRenderOptions = {}) {
171    const rgb = options.rgb === true
172    this.elapsed = (this.elapsed + (options.deltaTime ?? 0)) % PERIOD
173    this.rebuildGeometry(frameBuffer, rgb)
174    if (options.cache !== false) {
175      this.drawCached(frameBuffer, rgb)
176      return
177    }
178    this.drawBackground(frameBuffer, this.elapsed)
179    this.drawLogo(frameBuffer, this.elapsed, rgb)
180  }
181 
182  private invalidateCache() {
183    this.cacheDirty = true
184    this.cacheBuildIndex = 0
185    this.frameCache = []
186  }
187 
188  private rebuildGeometry(frameBuffer: OptimizedBuffer, rgb: boolean) {
189    const width = frameBuffer.width
190    const height = frameBuffer.height
191    const geometryChanged = width !== this.geometryWidth || height !== this.geometryHeight
192    const logoTemplateChanged = this.logoRgb !== rgb
193    if (!geometryChanged && !logoTemplateChanged) return
194 
195    if (geometryChanged) {
196      this.geometryWidth = width
197      this.geometryHeight = height
198      this.logoX = Math.max(0, Math.floor((width - LOGO_WIDTH) / 2))
199      this.logoY = Math.max(
200        0,
201        Math.min(Math.max(0, height - LOGO_HEIGHT), Math.round((height - LOGO_HEIGHT) / 2) + LOGO_TOP_BIAS),
202      )
203 
204      const centerX = this.logoX + LOGO_WIDTH / 2
205      const centerY = this.logoY + LOGO_HEIGHT / 2
206      this.reach = Math.hypot(Math.max(centerX, width - centerX), Math.max(centerY, height - centerY) * 2) + TAIL
207      this.distances = new Float32Array(width * height)
208      this.edgeFalloff = new Float32Array(width * height)
209 
210      for (let y = 0; y < height; y++) {
211        for (let x = 0; x < width; x++) {
212          const index = y * width + x
213          const dist = Math.hypot(x + 0.5 - centerX, (y + 0.5 - centerY) * 2)
214          this.distances[index] = dist
215          this.edgeFalloff[index] = Math.max(0, 1 - (dist / (this.reach * 0.85)) ** 2)
216        }
217      }
218    }
219 
220    this.logoRgb = rgb
221    this.invalidateCache()
222    this.rebuildCellTemplate(frameBuffer, rgb)
223  }
224 
225  private drawCached(frameBuffer: OptimizedBuffer, rgb: boolean) {
226    if (this.cacheDirty) this.startFrameCache(frameBuffer, rgb)
227    if (this.cacheBuildIndex < CACHE_FRAME_COUNT) {
228      this.buildFrameCache(frameBuffer, rgb)
229      this.drawBackground(frameBuffer, this.elapsed)
230      this.drawLogo(frameBuffer, this.elapsed, rgb)
231      return
232    }
233 
234    const frame = this.frameCache[Math.floor((this.elapsed / PERIOD) * CACHE_FRAME_COUNT) % CACHE_FRAME_COUNT]
235    if (frame) {
236      frameBuffer.buffers.fg.set(frame.fg)
237      frameBuffer.buffers.bg.set(frame.bg)
238    }
239  }
240 
241  private startFrameCache(frameBuffer: OptimizedBuffer, rgb: boolean) {
242    this.frameCache = []
243    this.cacheBuildIndex = 0
244    this.rebuildCellTemplate(frameBuffer, rgb)
245    this.cacheDirty = false
246  }
247 
248  private buildFrameCache(frameBuffer: OptimizedBuffer, rgb: boolean) {
249    const end = Math.min(CACHE_FRAME_COUNT, this.cacheBuildIndex + CACHE_FRAMES_PER_RENDER)
250    for (; this.cacheBuildIndex < end; this.cacheBuildIndex++) {
251      const t = (this.cacheBuildIndex / CACHE_FRAME_COUNT) * PERIOD
252      this.drawBackground(frameBuffer, t)
253      this.drawLogo(frameBuffer, t, rgb)
254      this.frameCache.push({
255        fg: new Uint16Array(frameBuffer.buffers.fg),
256        bg: new Uint16Array(frameBuffer.buffers.bg),
257      })
258    }
259  }
260 
261  private rebuildCellTemplate(frameBuffer: OptimizedBuffer, rgb: boolean) {
262    const buffers = frameBuffer.buffers
263    buffers.char.fill(SPACE)
264    buffers.attributes.fill(0)
265 
266    if (this.geometryWidth < LOGO_WIDTH || this.geometryHeight < LOGO_HEIGHT) {
267      this.logoIndexes = new Int32Array(0)
268      return
269    }
270 
271    this.logoIndexes = new Int32Array(LOGO_TEMPLATE.length)
272    for (let i = 0; i < LOGO_TEMPLATE.length; i++) {
273      const cell = LOGO_TEMPLATE[i]!
274      const index = (this.logoY + cell.y) * this.geometryWidth + this.logoX + cell.x
275      this.logoIndexes[i] = index
276      buffers.attributes[index] = cell.attributes
277      buffers.char[index] =
278        cell.kind === LogoCellKind.Background
279          ? SPACE
280          : cell.kind === LogoCellKind.Top || cell.kind === LogoCellKind.ShadowTop
281            ? TOP_HALF
282            : cell.kind === LogoCellKind.Solid
283              ? rgb
284                ? TOP_HALF
285                : FULL_BLOCK
286              : cell.charCode
287    }
288  }
289 
290  private drawBackground(frameBuffer: OptimizedBuffer, t: number) {
291    const buffers = frameBuffer.buffers
292    const fg = buffers.fg
293    const bg = buffers.bg
294    const distances = this.distances
295    const edgeFalloff = this.edgeFalloff
296    const baseR = this.panelRgb[0]
297    const baseG = this.panelRgb[1]
298    const baseB = this.panelRgb[2]
299    const deltaR = this.primaryRgb[0] - baseR
300    const deltaG = this.primaryRgb[1] - baseG
301    const deltaB = this.primaryRgb[2] - baseB
302    const breath = (0.5 + 0.5 * Math.sin(t * BREATH_SPEED)) * BREATH_AMP
303 
304    const phase0 = (t / PERIOD - PHASE_OFFSET + 1) % 1
305    const phase1 = (t / PERIOD + 1 / RINGS - PHASE_OFFSET + 1) % 1
306    const phase2 = (t / PERIOD + 2 / RINGS - PHASE_OFFSET + 1) % 1
307    const envelope0 = Math.sin(phase0 * Math.PI)
308    const envelope1 = Math.sin(phase1 * Math.PI)
309    const envelope2 = Math.sin(phase2 * Math.PI)
310    const eased0 = envelope0 * envelope0 * (3 - 2 * envelope0)
311    const eased1 = envelope1 * envelope1 * (3 - 2 * envelope1)
312    const eased2 = envelope2 * envelope2 * (3 - 2 * envelope2)
313    const head0 = phase0 * this.reach
314    const head1 = phase1 * this.reach
315    const head2 = phase2 * this.reach
316 
317    for (let index = 0; index < distances.length; index++) {
318      const dist = distances[index]
319      const delta0 = dist - head0
320      const abs0 = delta0 < 0 ? -delta0 : delta0
321      const crest0 = abs0 < WIDTH ? 0.5 + 0.5 * Math.cos((delta0 / WIDTH) * Math.PI) : 0
322      const tail0 = delta0 < 0 && delta0 > -TAIL ? (1 + delta0 * TAIL_SCALE) ** 2.3 : 0
323 
324      const delta1 = dist - head1
325      const abs1 = delta1 < 0 ? -delta1 : delta1
326      const crest1 = abs1 < WIDTH ? 0.5 + 0.5 * Math.cos((delta1 / WIDTH) * Math.PI) : 0
327      const tail1 = delta1 < 0 && delta1 > -TAIL ? (1 + delta1 * TAIL_SCALE) ** 2.3 : 0
328 
329      const delta2 = dist - head2
330      const abs2 = delta2 < 0 ? -delta2 : delta2
331      const crest2 = abs2 < WIDTH ? 0.5 + 0.5 * Math.cos((delta2 / WIDTH) * Math.PI) : 0
332      const tail2 = delta2 < 0 && delta2 > -TAIL ? (1 + delta2 * TAIL_SCALE) ** 2.3 : 0
333 
334      const level =
335        (crest0 * AMP + tail0 * TAIL_AMP) * eased0 +
336        (crest1 * AMP + tail1 * TAIL_AMP) * eased1 +
337        (crest2 * AMP + tail2 * TAIL_AMP) * eased2
338      const rawStrength = (level * RING_SCALE + breath) * edgeFalloff[index]
339      const strength = (rawStrength > 1 ? 1 : rawStrength) * 0.7
340      const offset = index * 4
341      const r = Math.round(baseR + deltaR * strength)
342      const g = Math.round(baseG + deltaG * strength)
343      const b = Math.round(baseB + deltaB * strength)
344      bg[offset] = fg[offset] = r
345      bg[offset + 1] = fg[offset + 1] = g
346      bg[offset + 2] = fg[offset + 2] = b
347      bg[offset + 3] = fg[offset + 3] = 255
348    }
349  }
350 
351  private setLogoPulse(dist: number, head0: number, eased0: number, head1: number, eased1: number) {
352    let peak = 0.04
353    let primary = 0
354 
355    const delta0 = dist - head0
356    const core0 = Math.exp(-(Math.abs(delta0 / 1.2) ** 1.8))
357    const soft0 = Math.exp(-(Math.abs(delta0 / 7) ** 1.6))
358    const tail0 = delta0 < 0 && delta0 > -7 ? (1 + delta0 / 7) ** 2.6 : 0
359    peak += core0 * 0.65 * eased0
360    primary += (soft0 * 0.16 + tail0 * 0.22) * eased0
361 
362    const delta1 = dist - head1
363    const core1 = Math.exp(-(Math.abs(delta1 / 1.2) ** 1.8))
364    const soft1 = Math.exp(-(Math.abs(delta1 / 7) ** 1.6))
365    const tail1 = delta1 < 0 && delta1 > -7 ? (1 + delta1 / 7) ** 2.6 : 0
366    peak += core1 * 0.65 * eased1
367    primary += (soft1 * 0.16 + tail1 * 0.22) * eased1
368 
369    this.pulsePeak = peak > 1 ? 1 : peak
370    this.pulsePrimary = primary > 1 ? 1 : primary
371  }
372 
373  private drawLogo(frameBuffer: OptimizedBuffer, t: number, rgb: boolean) {
374    if (this.logoIndexes.length === 0) return
375 
376    const buffers = frameBuffer.buffers
377    const fg = buffers.fg
378    const bg = buffers.bg
379    const shadow: Rgb = [
380      mixChannel(this.panelRgb[0], this.logoBaseRgb[0], 0.25),
381      mixChannel(this.panelRgb[1], this.logoBaseRgb[1], 0.25),
382      mixChannel(this.panelRgb[2], this.logoBaseRgb[2], 0.25),
383    ]
384    const phase0 = (t / PERIOD) % 1
385    const phase1 = (t / PERIOD + 0.5) % 1
386    const envelope0 = Math.sin(phase0 * Math.PI)
387    const envelope1 = Math.sin(phase1 * Math.PI)
388    const eased0 = envelope0 * envelope0 * (3 - 2 * envelope0)
389    const eased1 = envelope1 * envelope1 * (3 - 2 * envelope1)
390    const head0 = phase0 * LOGO_REACH
391    const head1 = phase1 * LOGO_REACH
392 
393    for (let i = 0; i < LOGO_TEMPLATE.length; i++) {
394      const cell = LOGO_TEMPLATE[i]!
395      const index = this.logoIndexes[i]!
396      const offset = index * 4
397      this.setLogoPulse(cell.topDist, head0, eased0, head1, eased1)
398      const topPeak = this.pulsePeak
399      const topPrimary = this.pulsePrimary
400      this.setLogoPulse(cell.bottomDist, head0, eased0, head1, eased1)
401      const bottomPeak = this.pulsePeak
402      const bottomPrimary = this.pulsePrimary
403 
404      if (cell.kind === LogoCellKind.Background) {
405        writeLogoTint(bg, offset, shadow, this.primaryRgb, 0, Math.max(topPeak, bottomPeak) * 0.18)
406        continue
407      }
408 
409      if (cell.kind === LogoCellKind.Top) {
410        writeLogoTint(fg, offset, this.logoBaseRgb, this.primaryRgb, topPrimary, topPeak)
411        writeLogoTint(bg, offset, shadow, this.primaryRgb, 0, bottomPeak * 0.18)
412        continue
413      }
414 
415      if (cell.kind === LogoCellKind.ShadowTop) {
416        writeLogoTint(fg, offset, shadow, this.primaryRgb, 0, topPeak * 0.18)
417        continue
418      }
419 
420      if (cell.kind === LogoCellKind.Solid && rgb) {
421        writeLogoTint(fg, offset, this.logoBaseRgb, this.primaryRgb, topPrimary, topPeak)
422        writeLogoTint(bg, offset, this.logoBaseRgb, this.primaryRgb, bottomPrimary, bottomPeak)
423        continue
424      }
425 
426      writeLogoTint(
427        fg,
428        offset,
429        this.logoBaseRgb,
430        this.primaryRgb,
431        (topPrimary + bottomPrimary) / 2,
432        (topPeak + bottomPeak) / 2,
433      )
434    }
435  }
436}
437