546 lines
29 KiB
Text
546 lines
29 KiB
Text
// Phone-first session-0 document. All dimensions are logical points: Android
|
|
// dp = pixels / (densityDpi / 160), desktop points = pixels / backing scale.
|
|
// The host supplies real work, measured phase durations and the shell environment.
|
|
use mod.pod.*
|
|
use mod.math.*
|
|
use mod.shader.*
|
|
|
|
let rounded = fn(p: vec2, size: vec2, radius: float) -> float {
|
|
let q = abs(p - size * 0.5) - size * 0.5 + vec2(radius)
|
|
return length(max(q, vec2(0.0))) + min(max(q.x, q.y), 0.0) - radius
|
|
}
|
|
// A triangular dither of +-1 step of an 8-bit target (two taps of interleaved gradient noise at
|
|
// pixel `px`), added to every smooth gradient before the target quantises it: no bands at 8 bpp.
|
|
let dither = fn(px: vec2) -> float {
|
|
let k = vec2(0.06711056, 0.00583715)
|
|
let a = fract(52.9829189 * fract(dot(px, k)))
|
|
let b = fract(52.9829189 * fract(dot(px.yx + vec2(47.0, 19.0), k)))
|
|
return (a + b - 1.0) / 255.0
|
|
}
|
|
// ---- the Ignition Field: every star, dust grain and flare is one instance of one pipeline.
|
|
// Instance: rect = (angle, radius, size, born), info = (kind, arm or dust order, twinkle + 1, 0).
|
|
// kinds: 0 star, 1 dust, 2 O3 star, 3 main() glow, 4 swap ring, 5 corner brackets, 6 backdrop,
|
|
// 7 warm-up arc. A star twinkles (a short white glint) each time a function of it is compiled:
|
|
// info.z is that moment + 1 (0: never).
|
|
// Colours are the concept's tokens: ink #ece6ff, base #9d8cff, O3 #ffcf6a, dim #6e6593, bg #08060f;
|
|
// failure is ember #ff7a5c. A halted field (`fault` 1: compile errors, a parked panic) stops
|
|
// turning, its stars cool to dim, the core glows ember and the frame's brackets turn ember.
|
|
let project = fn(a: float, r: float, view: vec4, spin: float) -> vec2 {
|
|
return vec2(view.x + cos(a + spin) * r * view.z, view.y + sin(a + spin) * r * view.z * view.w)
|
|
}
|
|
// coverage of an axis-aligned square of half-size h (points) around the origin, anti-aliased at pixel scale
|
|
let box_cov = fn(d: vec2, h: float, dp: float) -> float {
|
|
let q = vec2(h * dp + 0.5) - abs(d) * dp
|
|
return clamp(q.x, 0.0, 1.0) * clamp(q.y, 0.0, 1.0)
|
|
}
|
|
// coverage of a one-pixel stroke along a segment of the x axis [-l, l]
|
|
let bar = fn(d: vec2, l: float, dp: float) -> float {
|
|
let e = length(vec2(d.x - clamp(d.x, -l, l), d.y))
|
|
return clamp((0.5 - e) * dp + 0.5, 0.0, 1.0)
|
|
}
|
|
let star_px = fn(d: vec2, size: float, age: float, hot: float, scale: float, dp: float, fault: float, twinkle: float) -> vec4 {
|
|
let body = box_cov(d, size * scale * 0.5, dp) * mix(mix(0.42, 0.8, hot), 0.34, fault)
|
|
let f = clamp(1.0 - age / 0.16, 0.0, 1.0) * (1.0 - fault)
|
|
let flash = box_cov(d, 1.1 * scale, dp) * 0.45 * f
|
|
// a compile's glint: a four-point sparkle that shrinks away in 0.45 s
|
|
let t = clamp(1.0 - twinkle / 0.45, 0.0, 1.0) * step(0.0, twinkle) * (1.0 - fault)
|
|
let tl = (4.5 * t + 1.0) * scale
|
|
let spark = max(bar(d, tl, dp), bar(vec2(d.y, d.x), tl, dp)) * t * t * 0.85
|
|
let core = box_cov(d, 0.9 * scale, dp) * t * 0.7
|
|
// over, not additive: a dense arm tends to the arm colour instead of burning to white;
|
|
// the birth flash and the glint are the only additive parts
|
|
let c = mix(#9d8cff, #8a7fb8, fault) * body + #ffffff * (flash + max(spark, core))
|
|
return vec4(c.rgb, body)
|
|
}
|
|
let dust_px = fn(d: vec2, landed: float, fade: float, dp: float) -> vec4 {
|
|
let cover = box_cov(d, 0.6, dp) * fade
|
|
let c = mix(#ece6ff * 0.5, #6e6593 * 0.22, landed)
|
|
return vec4(c.rgb * cover, 0.0)
|
|
}
|
|
let o3_px = fn(d: vec2, age: float, scale: float, dp: float, fault: float) -> vec4 {
|
|
let f = clamp(1.0 - age / 0.5, 0.0, 1.0) * (1.0 - fault)
|
|
let l = (6.0 * f + 2.0) * scale
|
|
let arms = max(bar(d, l, dp), bar(vec2(d.y, d.x), l, dp)) * f
|
|
let core = box_cov(d, scale, dp) * 0.85
|
|
let c = #ffcf6a * max(arms, core)
|
|
return vec4(c.rgb, 0.0)
|
|
}
|
|
// main()'s ignition glow; a halted field glows ember at its core instead
|
|
let glow_px = fn(d: vec2, main_age: float, radius: float, fault: float, px: vec2) -> vec4 {
|
|
let f = clamp(main_age / 0.5, 0.0, 1.0)
|
|
let reach = radius * (0.15 + 0.4 * f)
|
|
let g = clamp(1.0 - length(d) / max(reach, 1.0), 0.0, 1.0)
|
|
let a = (0.5 * (1.0 - f) + 0.12) * g * step(0.0, main_age) * (1.0 - fault)
|
|
let e = clamp(1.0 - length(d) / max(radius * 0.42, 1.0), 0.0, 1.0)
|
|
let ea = e * e * 0.55 * fault
|
|
let c = mix(#9d8cff, #ffffff, g) * a + mix(#ff7a5c, #ffd2c4, e * e) * ea
|
|
let alpha = max(a, ea)
|
|
return vec4(c.rgb + vec3(dither(px) * step(0.0001, alpha)), alpha)
|
|
}
|
|
let ring_px = fn(d: vec2, swap_age: float, view: vec4, px: vec2) -> vec4 {
|
|
let f = clamp(swap_age, 0.0, 1.0)
|
|
let rr = view.z * (0.9 + f * 0.6)
|
|
let e = length(vec2(d.x, d.y / view.w))
|
|
let grad = length(vec2(d.x, d.y / (view.w * view.w))) / max(e, 0.001)
|
|
let dist = abs(e - rr) / max(grad, 0.001)
|
|
let a = clamp(1.0 - (dist - 0.75) / 0.75, 0.0, 1.0) * (1.0 - f) * 0.7 * step(0.0, swap_age)
|
|
let c = #ece6ff * a
|
|
return vec4(c.rgb + vec3(dither(px) * step(0.0001, a)), 0.0)
|
|
}
|
|
// the warm-up arc around the galaxy: the share of the functions queued to build ahead after the
|
|
// first present that are built, from the top clockwise over a faint track; at `resolve` >= 0 (s
|
|
// since the app is ready) it closes, flares and widens away
|
|
let arc_px = fn(d: vec2, view: vec4, progress: float, resolve: float, dp: float, px: vec2) -> vec4 {
|
|
let r = clamp(resolve, 0.0, 1.0) * step(0.0, resolve)
|
|
let rr = view.z * (1.16 + 0.10 * r * r)
|
|
let e = length(vec2(d.x, d.y / view.w))
|
|
let grad = length(vec2(d.x, d.y / (view.w * view.w))) / max(e, 0.001)
|
|
let dist = abs(e - rr) / max(grad, 0.001)
|
|
let line = clamp(1.0 - (dist * dp - 0.6) / 1.2, 0.0, 1.0)
|
|
let soft = clamp(1.0 - dist / 7.0, 0.0, 1.0)
|
|
let f = fract(atan2(d.x, -d.y / view.w) / 6.2831853 + 1.0)
|
|
let p = max(progress, r * 4.0)
|
|
let done = clamp((p - f) * 400.0, 0.0, 1.0)
|
|
let head = clamp(1.0 - abs(f - p) * 30.0, 0.0, 1.0) * (1.0 - step(1.0, p))
|
|
let flare = (1.0 - r) * step(0.0, resolve)
|
|
let a = (line * (0.10 + 0.62 * done + 0.28 * head) + soft * soft * (0.10 * head + 0.35 * flare * done)) * (1.0 - r * r) * step(0.0, progress)
|
|
let c = mix(#9d8cff, #ece6ff, max(head, flare)) * a
|
|
return vec4(c.rgb + vec3(dither(px) * step(0.0001, a)), 0.0)
|
|
}
|
|
// corner brackets of the frame (half size `half`), ember when the field is halted
|
|
let brackets_px = fn(d: vec2, half: vec2, dp: float, fault: float) -> vec4 {
|
|
let e = half - vec2(10.0) - abs(d)
|
|
let l = 16.0
|
|
let ex = length(vec2(e.x - clamp(e.x, 0.0, l), e.y))
|
|
let ey = length(vec2(e.x, e.y - clamp(e.y, 0.0, l)))
|
|
let a = clamp((0.5 - min(ex, ey)) * dp + 0.5, 0.0, 1.0) * 0.8
|
|
let c = mix(#6e6593, #ff7a5c, fault) * a
|
|
return vec4(c.rgb, 0.0)
|
|
}
|
|
// the deep field behind everything: a faint haze around the galaxy (ember when halted), rounded
|
|
// to `corner` points (0: the halted view takes the whole window, over the app too); dithered, it
|
|
// is the one large gradient of the window
|
|
let backdrop_px = fn(d: vec2, half: vec2, rel: vec2, view: vec4, fault: float, corner: float, dp: float, px: vec2) -> vec4 {
|
|
let q = length(vec2(rel.x, rel.y / max(view.w, 0.3))) / max(view.z * 1.7, 1.0)
|
|
let h = exp(-2.4 * q * q)
|
|
let haze = mix(#150f2c, #2a0d12, fault) * h
|
|
let c = #08060f + haze
|
|
let cover = clamp(0.5 - rounded(d + half, half * 2.0, corner) * dp, 0.0, 1.0)
|
|
return vec4((c.rgb + vec3(dither(px))) * cover, cover)
|
|
}
|
|
// a window button of the caption, drawn as the stock caption's (widgets' DesktopButton): the
|
|
// glyph a one-pixel line in a 9-point square, the face lit on hover and press; close lights red.
|
|
// glyph: 0 minimise, 1 maximise / restore, 2 close
|
|
// stock: 1 on the app's caption ground (under a makepad WM): drawn as the app's own stock
|
|
// buttons there (widgets' window.rs `windows_buttons`): glyph in `tint` at rest, hover face
|
|
// #e9e9e9 (pressed #cccccc) with a black glyph, close #e81123 (pressed #f1707a) with a white one.
|
|
let caption_button_px = fn(p: vec2, s: vec2, glyph: float, hover: float, down: float, stock: float, tint: vec4, dp: float, px: vec2) -> vec4 {
|
|
let d = p - s * 0.5
|
|
let h = 4.5
|
|
let minimise = bar(d, h, dp)
|
|
let q = abs(d)
|
|
let outline = clamp((0.5 - abs(max(q.x, q.y) - h)) * dp + 0.5, 0.0, 1.0) * box_cov(d, h + 1.0, dp)
|
|
let r = vec2(d.x + d.y, d.x - d.y) * 0.70710678
|
|
let cross = max(bar(r, h * 1.41421356, dp), bar(vec2(r.y, r.x), h * 1.41421356, dp))
|
|
let close = step(1.5, glyph)
|
|
let g = mix(mix(minimise, outline, step(0.5, glyph)), cross, close)
|
|
let lit = max(hover, down)
|
|
let field_a = mix(mix(0.0, 0.10, hover), 0.18, down) * (1.0 - close) + mix(mix(0.0, 1.0, hover), 0.75, down) * close
|
|
let face_a = mix(field_a, lit, stock)
|
|
let face = mix(mix(#ece6ff, mix(#e9e9e9, #cccccc, down), stock), mix(#e81123, #f1707a, down), close)
|
|
let field_ink = mix(#ece6ff * 0.85, #ffffff, close * lit)
|
|
let stock_ink = mix(tint, mix(#000000, #ffffff, close), lit)
|
|
let ink = mix(field_ink, stock_ink, stock)
|
|
var col = face.rgb * face_a
|
|
var alpha = face_a
|
|
col = col * (1.0 - g) + ink.rgb * g
|
|
alpha = alpha * (1.0 - g) + g
|
|
return vec4(col + vec3(dither(px) * step(0.001, alpha)), alpha)
|
|
}
|
|
// a traffic light of the caption under a macOS-like window manager, drawn as the app's own
|
|
// caption draws it there (widgets' DesktopButton MacClose / MacMin / MacMax in a 20-point
|
|
// square): a disc of radius 6 in its colour, darker pressed, grey in a window without focus
|
|
// unless hovered; its glyph (1.1-point strokes) shows on hover. glyph: 3 close, 4 minimise,
|
|
// 5 maximise. focus: the window has focus. Premultiplied.
|
|
let caption_light_px = fn(p: vec2, s: vec2, glyph: float, hover: float, down: float, focus: float, dp: float) -> vec4 {
|
|
let d = p - s * 0.5
|
|
// the soft edge of Sdf2d with `aa * 3` (widgets' DesktopButton)
|
|
let aa = dp * 2.12132034
|
|
let disc = clamp((6.0 - length(d)) * aa, 0.0, 1.0)
|
|
let close = 1.0 - step(3.5, glyph)
|
|
let maxi = step(4.5, glyph)
|
|
let mini = 1.0 - close - maxi
|
|
let lit = mix(#ff5f57, #e0443e, down) * close + mix(#febc2e, #d9a020, down) * mini + mix(#28c840, #1fa733, down) * maxi
|
|
let face = mix(#b5b5b5, lit, max(focus, hover))
|
|
let ink = #4d0000 * close + #985700 * mini + #006500 * maxi
|
|
let r = vec2(d.x + d.y, d.x - d.y) * 0.70710678
|
|
let l = 2.6 * 1.41421356
|
|
let cross = min(length(vec2(r.x - clamp(r.x, -l, l), r.y)), length(vec2(r.y - clamp(r.y, -l, l), r.x)))
|
|
let dash = length(vec2(d.x - clamp(d.x, -3.2, 3.2), d.y))
|
|
let plus = min(length(vec2(d.x - clamp(d.x, -3.0, 3.0), d.y)), length(vec2(d.y - clamp(d.y, -3.0, 3.0), d.x)))
|
|
let e = cross * close + dash * mini + plus * maxi
|
|
let g = clamp((1.1 - e) * aa, 0.0, 1.0) * hover
|
|
let col = ink.rgb * g + face.rgb * disc * (1.0 - g)
|
|
return vec4(col, g + disc * (1.0 - g))
|
|
}
|
|
// the JIT ring in the running app's caption (makepad run; ring.rs), in its 24 pt badge: a ring
|
|
// 14 pt across that moves whenever the JIT builds. A head with a fading tail turns around it
|
|
// (spin: its turn so far) over a faint track; under it a progress arc from the top covers `fill`
|
|
// of the ring (0: none). mode 0: work the program waits for -- bright, a 2 pt stroke; 1:
|
|
// background tier-up -- the same motion, dimmer and 1.6 pt (0..1 blends them); 2 / 3: the program
|
|
// is stopped on invalidated code / a panic -- a solid amber / red dot. hover 0..1 lifts it on a
|
|
// faint disc. ink 1: on a dark caption, 0: on a light one. a: opacity. Premultiplied. GPU-only.
|
|
let jit_ring_px = fn(p: vec2, s: vec2, fill: float, mode: float, a: float, spin: float, hover: float, ink: float, dp: float, px: vec2) -> vec4 {
|
|
let d = p - s * 0.5
|
|
let r = length(d)
|
|
let dot = step(1.5, mode)
|
|
let back = clamp(mode, 0.0, 1.0) * (1.0 - dot)
|
|
// the ring's centre line and stroke
|
|
let rad = 6.0
|
|
let w = mix(2.0, 1.6, back)
|
|
let band = clamp((w * 0.5 - abs(r - rad)) * dp + 0.5, 0.0, 1.0)
|
|
// where this pixel is on the ring: turns clockwise from the top
|
|
let t = fract(atan2(d.x, 0.0 - d.y) / 6.2831853 + 1.0)
|
|
let arc_px = 6.2831853 * rad * dp
|
|
// the progress arc: from the top to `fill` (quiet: the head is what says busy)
|
|
let f = clamp(fill, 0.0, 1.0)
|
|
let on_fill = clamp((f - t) * arc_px + 0.5, 0.0, 1.0) * step(0.004, f)
|
|
// the head and its tail: full at the head, fading over `tail` turns behind it, a little
|
|
// wider than the stroke
|
|
let tail = 0.35
|
|
let behind = fract(fract(spin) - t + 1.0)
|
|
let head_in = clamp(behind * arc_px + 0.5, 0.0, 1.0)
|
|
let fade = clamp(1.0 - behind / tail, 0.0, 1.0)
|
|
let head = head_in * fade * fade
|
|
let head_band = clamp(((w + 0.8) * 0.5 - abs(r - rad)) * dp + 0.5, 0.0, 1.0)
|
|
let ink_c = mix(#2a2638, #ece6ff, ink)
|
|
let arc_c = mix(#5b4fd0, #b8acff, ink)
|
|
let head_c = mix(#4433d6, #d4ccff, ink)
|
|
let track_a = mix(0.10, 0.13, ink)
|
|
let fill_a = mix(mix(0.26, 0.3, ink), mix(0.18, 0.22, ink), back)
|
|
let head_a = mix(1.0, 0.8, back)
|
|
var col = ink_c.rgb * track_a * band
|
|
var alpha = track_a * band
|
|
let fa = band * on_fill * fill_a
|
|
col = col * (1.0 - fa) + arc_c.rgb * fa
|
|
alpha = alpha * (1.0 - fa) + fa
|
|
let ha = head_band * head * head_a
|
|
col = col * (1.0 - ha) + head_c.rgb * ha
|
|
alpha = alpha * (1.0 - ha) + ha
|
|
// the dot (replaces the ring)
|
|
col = col * (1.0 - dot)
|
|
alpha = alpha * (1.0 - dot)
|
|
let dot_c = mix(#f5a524, #e5484d, step(2.5, mode))
|
|
let disc = clamp((5.0 - r) * dp + 0.5, 0.0, 1.0) * dot
|
|
let rim = clamp((0.6 - abs(r - 4.6)) * dp, 0.0, 1.0) * dot * (1.0 - ink) * 0.35
|
|
col = col + dot_c.rgb * (1.0 - rim) * disc
|
|
alpha = alpha + disc
|
|
// the hover disc under it all
|
|
let lift = clamp((10.5 - r) * dp + 0.5, 0.0, 1.0) * hover * mix(0.09, 0.14, ink)
|
|
col = col + ink_c.rgb * lift * (1.0 - alpha)
|
|
alpha = alpha + lift * (1.0 - alpha)
|
|
return vec4(col * a, alpha * a)
|
|
}
|
|
// the JIT ring's tooltip plate (its line is drawn over it): a rounded plate with a hairline.
|
|
let jit_tip_px = fn(p: vec2, s: vec2, a: float, ink: float, dp: float) -> vec4 {
|
|
let e = rounded(p, s, 5.0)
|
|
let inside = clamp(0.5 - e * dp, 0.0, 1.0)
|
|
let hair = clamp(1.0 - abs(e + 0.5) * dp, 0.0, 1.0)
|
|
let plate = mix(#ffffff, #1f1b2e, ink)
|
|
let line = mix(vec4(0.0, 0.0, 0.0, 0.16), vec4(1.0, 1.0, 1.0, 0.14), ink)
|
|
let pa = inside * mix(0.97, 0.95, ink)
|
|
var col = plate.rgb * pa
|
|
var alpha = pa
|
|
let h = hair * line.w
|
|
col = col * (1.0 - h) + line.rgb * h
|
|
alpha = alpha * (1.0 - h) + h
|
|
return vec4(col * a, alpha * a)
|
|
}
|
|
let Quad = {
|
|
geom: vertex_buffer(vec2f)
|
|
rect: instance(vec4(0.0))
|
|
clip_rect: instance(vec4(0.0))
|
|
viewport: uniform(vec2(1.0))
|
|
dpi: uniform(1.0)
|
|
pos: varying(vec2f)
|
|
vertex_pos: vertex_position(vec4f)
|
|
fb0: fragment_output(0, vec4f)
|
|
vertex: fn() {
|
|
self.pos = self.geom
|
|
let p = self.rect.xy + self.geom * self.rect.zw
|
|
self.vertex_pos = vec4(p.x / self.viewport.x * 2.0 - 1.0, 1.0 - p.y / self.viewport.y * 2.0, 0.0, 1.0)
|
|
}
|
|
fragment: fn() {
|
|
let p = self.rect.xy + self.pos * self.rect.zw
|
|
let clip = if self.clip_rect.z > 0.0 { self.clip_rect } else { vec4(0.0, 0.0, self.viewport.x, self.viewport.y) }
|
|
let inside = step(clip.x, p.x) * step(clip.y, p.y)
|
|
* step(p.x, clip.x + clip.z) * step(p.y, clip.y + clip.w)
|
|
self.fb0 = self.pixel() * inside
|
|
}
|
|
}
|
|
{
|
|
// the halted view's card sizes, in the boot window and over the app (Overlay: the halted
|
|
// view takes the whole window too); margin / max_width / max_height / corner are not read
|
|
boot: {margin: 22 max_width: 0 max_height: 0 corner: 0 card_padding: 12 action_height: 48 action_width: 152 action_gap: 8}
|
|
overlay: {margin: 16 max_width: 900 max_height: 560 corner: 14 card_padding: 12 action_height: 48 action_width: 152 action_gap: 8}
|
|
lines: [
|
|
{role: @app size: 10 height: 14 gap: 0 color: #6e6593}
|
|
{role: @status size: 10 height: 14 gap: 6 color: #ff7a5c}
|
|
{role: @current size: 13 height: 18 gap: 0 color: #ece6ff}
|
|
{role: @domain size: 22 height: 28 gap: 4 color: #ece6ff}
|
|
{role: @location size: 11 height: 16 gap: 4 color: #9d8cff}
|
|
{role: @errors size: 14 height: 20 gap: 4 color: #ece6ff}
|
|
{role: @panic size: 15 height: 21 gap: 4 color: #ffd2c4}
|
|
{role: @hints size: 10 height: 15 gap: 0 color: #8a80b4}
|
|
]
|
|
hints: {
|
|
tap_restart: "Restart"
|
|
tap_copy: "Copy"
|
|
tap_open: "Open on dev machine"
|
|
tap_dismiss: "Dismiss"
|
|
tap_submit: "Submit"
|
|
tap_cancel: "Cancel"
|
|
tap_resume: "Resume"
|
|
input_label: "Return value"
|
|
paused: "Paused after a panic"
|
|
halted: "Compile halted"
|
|
follow_on: "follow-on"
|
|
root_cause: "root cause"
|
|
resolve: "Resolving dependencies"
|
|
parse: "Reading source"
|
|
typecheck: "Checking types"
|
|
codegen: "Compiling"
|
|
link: "Linking"
|
|
first_frame: "Opening your app"
|
|
restart: "R restart"
|
|
retry: "R retry compile"
|
|
copy: "C copy error"
|
|
open: "E open in editor"
|
|
dismiss: "Esc dismiss"
|
|
errors: "↑/↓ select error"
|
|
scroll: "PgUp/PgDn scroll"
|
|
return_value: "Return value: "
|
|
submit: "Enter submit · Esc cancel"
|
|
}
|
|
// a card of the halted view, a row of a collapsed group, a touch button, or a window button
|
|
// of the caption. accent: 0 follow-on card, 1 root cause / panic card, 2 member row, 3 button,
|
|
// 4 caption window button (action: its glyph, 3..5 a traffic light; selected: hover;
|
|
// block: the window has focus), 7 the caption's ground (tint), 5 the JIT ring (selected:
|
|
// its fill, block: its mode, pressed: opacity, action: its spin, beat: hover, ink: on a dark
|
|
// caption), 6 the ring's tooltip plate (pressed: opacity, ink)
|
|
error_band: Quad{
|
|
time: uniform(0.0)
|
|
reduce_motion: uniform(0.0)
|
|
selected: instance(0.0)
|
|
action: instance(0.0)
|
|
pressed: instance(0.0)
|
|
accent: instance(0.0)
|
|
block: instance(0.0)
|
|
beat: instance(0.0)
|
|
ink: instance(0.0)
|
|
tint: instance(vec4(0.0))
|
|
pixel: fn() {
|
|
let s = self.rect.zw
|
|
let p = self.pos * s
|
|
let dp = max(self.dpi, 1.0)
|
|
let px = (self.rect.xy + p) * dp
|
|
if self.accent > 6.5 {
|
|
// the caption's ground: the app's caption bar colour (`tint`, opaque)
|
|
return vec4(self.tint.rgb * self.tint.a, self.tint.a)
|
|
}
|
|
if self.accent > 5.5 {
|
|
return jit_tip_px(p, s, self.pressed, self.ink, dp)
|
|
}
|
|
if self.accent > 4.5 {
|
|
return jit_ring_px(p, s, self.selected, self.block, self.pressed, self.action, self.beat, self.ink, dp, px)
|
|
}
|
|
if self.accent > 3.5 {
|
|
if self.action > 2.5 {
|
|
return caption_light_px(p, s, self.action, self.selected, self.pressed, self.block, dp)
|
|
}
|
|
return caption_button_px(p, s, self.action, self.selected, self.pressed, self.beat, self.tint, dp, px)
|
|
}
|
|
let row = step(1.5, self.accent) * (1.0 - step(2.5, self.accent))
|
|
let button = step(2.5, self.accent)
|
|
let root = step(0.5, self.accent) * (1.0 - step(1.5, self.accent))
|
|
let edge = min(min(p.x, s.x - p.x), min(p.y, s.y - p.y))
|
|
let hair = clamp(1.0 - edge * dp, 0.0, 1.0)
|
|
let c = min(p, s - p)
|
|
let tick = clamp(1.6 - edge * dp, 0.0, 1.0) * step(c.x, 9.0) * step(c.y, 9.0)
|
|
let bar = clamp((2.0 - p.x) * dp, 0.0, 1.0) * (1.0 - button)
|
|
// fill
|
|
let fill_a = mix(mix(mix(0.80, 0.90, self.selected), 0.10 * self.selected, row), mix(0.06, 0.24, self.pressed), button)
|
|
let fill = mix(mix(mix(#0d0a1a, #171030, self.selected), #ece6ff, row), mix(#ece6ff, #9d8cff, self.pressed), button)
|
|
var col = fill.rgb * fill_a
|
|
var alpha = fill_a
|
|
// hairline frame (cards and buttons), corner ticks on the selected card and buttons
|
|
let line_a = hair * mix(mix(0.10, 0.20, self.selected), 0.0, row) + hair * button * 0.35
|
|
let tick_a = tick * max(self.selected * (1.0 - row), button)
|
|
let accent = mix(#6e6593, #ff7a5c, max(root, self.selected * row))
|
|
col = col * (1.0 - line_a) + #ece6ff.rgb * line_a
|
|
alpha = alpha * (1.0 - line_a) + line_a
|
|
col = col * (1.0 - tick_a) + mix(#ece6ff, #ff7a5c, root).rgb * tick_a
|
|
alpha = alpha * (1.0 - tick_a) + tick_a
|
|
// the accent bar on the left: ember for a root cause, dim for follow-on, a selected row
|
|
let bar_a = bar * mix(mix(0.9, 1.0, self.selected), self.selected, row)
|
|
col = col * (1.0 - bar_a) + accent.rgb * bar_a
|
|
alpha = alpha * (1.0 - bar_a) + bar_a
|
|
return vec4(col + vec3(dither(px) * step(0.001, alpha)), alpha)
|
|
}
|
|
}
|
|
ignition: {
|
|
geom: vertex_buffer(vec2f)
|
|
rect: instance(vec4(0.0))
|
|
info: instance(vec4(0.0))
|
|
viewport: uniform(vec2(1.0))
|
|
dpi: uniform(1.0)
|
|
reduce_motion: uniform(0.0)
|
|
time: uniform(0.0)
|
|
view: uniform(vec4(0.0))
|
|
field_params: uniform(vec4(0.0))
|
|
field_fall: uniform(vec4(0.0))
|
|
// the frame the backdrop and brackets fill (points; zero: the window) and
|
|
// (fault, corner radius, caption strip height, 0)
|
|
field_frame: uniform(vec4(0.0))
|
|
field_fault: uniform(vec4(0.0))
|
|
// over a running app (the window layer): (on: 1, galaxy opacity, backdrop opacity, arc
|
|
// progress or -1); zero: the boot window
|
|
field_layer: uniform(vec4(0.0))
|
|
d: varying(vec2f)
|
|
px: varying(vec2f)
|
|
vertex_pos: vertex_position(vec4f)
|
|
fb0: fragment_output(0, vec4f)
|
|
vertex: fn() {
|
|
let k = self.info.x
|
|
let dust = step(0.5, k) * step(k, 1.5)
|
|
let fall = clamp((self.field_fall.x - self.info.y) / 0.03, 0.0, 1.0)
|
|
let eased = fall * fall * (3.0 - 2.0 * fall)
|
|
let r = mix(self.rect.y, 0.92, eased * dust)
|
|
let a = self.rect.x + dust * self.time * 0.07 * r * (1.0 - self.reduce_motion) * (1.0 - self.field_fault.x)
|
|
let at = project(a, r, self.view, self.field_params.x)
|
|
let vp = self.viewport
|
|
let frame = if self.field_frame.z > 0.0 { self.field_frame } else { vec4(0.0, 0.0, vp.x, vp.y) }
|
|
let center = if k < 2.5 { at } else if k < 4.5 { self.view.xy } else if k < 6.5 { frame.xy + frame.zw * 0.5 } else { self.view.xy }
|
|
// a twinkling star reaches out to its glint; a layer's backdrop it does not draw is empty
|
|
let twinkling = step(0.5, self.info.z) * step(self.time - self.info.z + 1.0, 0.45)
|
|
let gone = step(0.5, self.field_layer.x) * (1.0 - step(0.001, self.field_layer.z)) * step(5.5, k) * (1.0 - step(6.5, k))
|
|
let arc = vec2(self.view.z * 1.45 + 10.0, self.view.z * 1.45 * self.view.w + 10.0) * step(-0.5, self.field_layer.w) * step(0.5, self.field_layer.x)
|
|
let extent = if k < 0.5 { vec2(mix(3.5, 7.0 * self.field_params.y + 1.0, twinkling)) } else if k < 1.5 { vec2(2.0) } else if k < 2.5 { vec2(10.0 * self.field_params.y) } else if k < 3.5 { vec2(self.view.z) } else if k < 4.5 { vec2(self.view.z * 1.7 + 6.0, self.view.z * 1.7 * self.view.w + 6.0) * (1.0 - gone) } else if k < 6.5 { frame.zw * 0.5 * (1.0 - gone) } else { arc }
|
|
let p = center + (self.geom * 2.0 - vec2(1.0)) * extent
|
|
self.d = p - center
|
|
self.px = p * self.dpi
|
|
self.vertex_pos = vec4(p.x / vp.x * 2.0 - 1.0, 1.0 - p.y / vp.y * 2.0, 0.0, 1.0)
|
|
}
|
|
fragment: fn() {
|
|
let k = self.info.x
|
|
let dp = max(self.dpi, 1.0)
|
|
let age = self.time - self.rect.w
|
|
let scale = self.field_params.y
|
|
let fault = self.field_fault.x
|
|
let fall = clamp((self.field_fall.x - self.info.y) / 0.03, 0.0, 1.0)
|
|
let hot = (1.0 - step(0.5, abs(self.info.y - self.field_fall.z))) * (1.0 - fault)
|
|
let vp = self.viewport
|
|
let frame = if self.field_frame.z > 0.0 { self.field_frame } else { vec4(0.0, 0.0, vp.x, vp.y) }
|
|
let half = frame.zw * 0.5
|
|
let twinkle = if self.info.z > 0.5 { self.time - self.info.z + 1.0 } else { -1.0 }
|
|
let layer = self.field_layer
|
|
let on = step(0.5, layer.x)
|
|
// over the app: the galaxy at its opacity, the backdrop at its own
|
|
let opacity = if k > 5.5 && k < 6.5 { mix(1.0, layer.z, on) } else { mix(1.0, layer.y, on) }
|
|
self.fb0 = opacity * if k < 0.5 {
|
|
star_px(self.d, self.rect.z, age, hot, scale, dp, fault, twinkle)
|
|
} else if k < 1.5 {
|
|
dust_px(self.d, step(1.0, fall), self.field_fall.y, dp)
|
|
} else if k < 2.5 {
|
|
o3_px(self.d, age, scale, dp, fault)
|
|
} else if k < 3.5 {
|
|
glow_px(self.d, self.field_params.z, self.view.z, fault, self.px)
|
|
} else if k < 4.5 {
|
|
ring_px(self.d, self.field_params.w, self.view, self.px)
|
|
} else if k < 5.5 {
|
|
// the frame's brackets start below the caption strip (field_fault.z points)
|
|
let below = vec2(0.0, self.field_fault.z * 0.5)
|
|
brackets_px(self.d - below, half - below, dp, fault)
|
|
} else if k < 6.5 {
|
|
backdrop_px(self.d, half, frame.xy + half + self.d - self.view.xy, self.view, fault, self.field_fault.y, dp, self.px)
|
|
} else {
|
|
arc_px(self.d, self.view, layer.w, self.field_fall.w, dp, self.px)
|
|
}
|
|
}
|
|
}
|
|
// the running app's frame under the window layer (`image_texture`: the app image, or a blur
|
|
// stage of it). mode 0: shown at `opacity`, `dim` darkens it towards the field's deep violet;
|
|
// mode 1 / 2: one direction of the separable Gaussian (sigma `sigma` texels of the target
|
|
// along `dir`, the source's texel size), the first from the full image at quarter size
|
|
layer: Quad{
|
|
image_texture: texture_2d(float)
|
|
opacity: instance(1.0)
|
|
mode: instance(0.0)
|
|
dim: instance(0.0)
|
|
dir: instance(vec2(0.0))
|
|
sigma: instance(4.0)
|
|
pixel: fn() {
|
|
let uv = self.pos
|
|
if self.mode < 0.5 {
|
|
let c = self.image_texture.sample(uv)
|
|
let px = (self.rect.xy + self.pos * self.rect.zw) * max(self.dpi, 1.0)
|
|
let tone = mix(c.rgb, #0c0918.rgb * 0.6 + c.rgb * 0.4, self.dim)
|
|
let n = vec3(dither(px) * step(0.001, self.dim))
|
|
return vec4((tone + n) * self.opacity, self.opacity)
|
|
}
|
|
let s = self.dir
|
|
let q = 1.0 / (2.0 * self.sigma * self.sigma)
|
|
let w1 = exp(-1.0 * q)
|
|
let w2 = exp(-4.0 * q)
|
|
let w3 = exp(-9.0 * q)
|
|
let w4 = exp(-16.0 * q)
|
|
let w5 = exp(-25.0 * q)
|
|
let w6 = exp(-36.0 * q)
|
|
let w7 = exp(-49.0 * q)
|
|
let w8 = exp(-64.0 * q)
|
|
var c = self.image_texture.sample(uv)
|
|
c = c + (self.image_texture.sample(uv + s) + self.image_texture.sample(uv - s)) * w1
|
|
c = c + (self.image_texture.sample(uv + s * 2.0) + self.image_texture.sample(uv - s * 2.0)) * w2
|
|
c = c + (self.image_texture.sample(uv + s * 3.0) + self.image_texture.sample(uv - s * 3.0)) * w3
|
|
c = c + (self.image_texture.sample(uv + s * 4.0) + self.image_texture.sample(uv - s * 4.0)) * w4
|
|
c = c + (self.image_texture.sample(uv + s * 5.0) + self.image_texture.sample(uv - s * 5.0)) * w5
|
|
c = c + (self.image_texture.sample(uv + s * 6.0) + self.image_texture.sample(uv - s * 6.0)) * w6
|
|
c = c + (self.image_texture.sample(uv + s * 7.0) + self.image_texture.sample(uv - s * 7.0)) * w7
|
|
c = c + (self.image_texture.sample(uv + s * 8.0) + self.image_texture.sample(uv - s * 8.0)) * w8
|
|
let total = 1.0 + 2.0 * (w1 + w2 + w3 + w4 + w5 + w6 + w7 + w8)
|
|
return vec4(c.rgb / total, 1.0)
|
|
}
|
|
}
|
|
icon: Quad{
|
|
image_texture: texture_2d(float)
|
|
pixel: fn() {
|
|
let c = self.image_texture.sample(self.pos)
|
|
return vec4(c.rgb * c.a, c.a)
|
|
}
|
|
}
|
|
glyph: Quad{
|
|
..mod.glyph_coverage.AtlasCoverage
|
|
uv: instance(vec4(0.0))
|
|
atlas_plane: instance(0.0)
|
|
color_glyph: instance(0.0)
|
|
color: instance(#fff)
|
|
grayscale_texture: texture_2d(float)
|
|
radius: uniform(8.0)
|
|
cutoff: uniform(0.25)
|
|
sdf_sharpness: uniform(1.0)
|
|
sdf_luma_bias: uniform(0.03)
|
|
pixel: fn() {
|
|
let t = mix(self.uv.xy, self.uv.zw, self.pos)
|
|
let tex_size = self.grayscale_texture.size()
|
|
let half_texel = vec2(0.5) / tex_size
|
|
let p = clamp(t, self.uv.xy + half_texel, self.uv.zw - half_texel)
|
|
if self.color_glyph > 0.5 {
|
|
let c = self.grayscale_texture.sample(p)
|
|
return vec4(c.rgb * c.a, c.a)
|
|
}
|
|
let scale = (length(dFdx(t) * tex_size) + length(dFdy(t) * tex_size)) * 0.5
|
|
let coverage = self.sdf(scale, p, self.color)
|
|
return coverage * vec4(self.color.rgb * self.color.a, self.color.a)
|
|
}
|
|
}
|
|
}
|