3329 lines
165 KiB
Text
3329 lines
165 KiB
Text
use mod.prelude.widgets_internal.*
|
|
use mod.sdf.Cap
|
|
|
|
// Bling: white Carrara marble set in polished gold, after the "marble / bling
|
|
// light" pictures. Every face is drawn in true points (one device pixel is
|
|
// `px`), and every shadow and light falls OUTSIDE the layout box: the quad
|
|
// is grown in `vertex`, the templates that throw a shadow stop clipping, and
|
|
// no padding is spent on either. Three materials make every control:
|
|
// MARBLE, a white stone with soft grey veins that meander, part and rejoin
|
|
// at several scales (broad soft clouds, veins of varied width, a few fine
|
|
// dark threads), calm under the content and stronger toward the window's
|
|
// frame; GOLD, polished, a round bead that catches a bright specular line on
|
|
// the side toward the light (from the top, a little from the left) and a
|
|
// warm darker band on the side away from it; and GEMS, cut stones with flat
|
|
// facets, a deep coloured interior and a few crisp star glints, set in gold.
|
|
// Lamps are LEDs as gems in gold settings. Small gold scrolls stand only in
|
|
// the corners of the surfaces and of the window, never over words.
|
|
|
|
// ---------------------------------------------------------------- helpers
|
|
|
|
// One device pixel in points.
|
|
let mb_px = fn(dpi: float) -> float {
|
|
return 1.0 / max(dpi, 0.5)
|
|
}
|
|
|
|
// An edge rounded to a whole device pixel in window space, handed back in
|
|
// box space: a hairline on it lands on one pixel row.
|
|
let mb_snap = fn(v: float, o: float, px: float) -> float {
|
|
return Finish.snap(o + v, px) - o
|
|
}
|
|
|
|
// Distance from p to the segment a..b, in points.
|
|
let mb_seg = fn(p: vec2, a: vec2, b: vec2) -> float {
|
|
let pa = p - a
|
|
let ba = b - a
|
|
let t = clamp(dot(pa, ba) / max(dot(ba, ba), 0.0001), 0.0, 1.0)
|
|
return length(pa - ba * t)
|
|
}
|
|
|
|
// Which way the outline of a rounded box faces at p.
|
|
let mb_normal = fn(p: vec2, c: vec2, h: vec2, r: float) -> vec2 {
|
|
let s = vec2(step(0.0, p.x - c.x) * 2.0 - 1.0, step(0.0, p.y - c.y) * 2.0 - 1.0)
|
|
let q = abs(p - c) - (h - vec2(r, r))
|
|
let qc = max(q, vec2(0.0, 0.0))
|
|
var n = vec2(0.0, s.y)
|
|
if q.x > q.y {
|
|
n = vec2(s.x, 0.0)
|
|
}
|
|
if q.x > 0.0 && q.y > 0.0 {
|
|
n = qc / max(length(qc), 0.0001) * s
|
|
}
|
|
return n
|
|
}
|
|
|
|
// Anything drawn in a grown quad fades out over its last points, so a soft
|
|
// shadow never ends on a hard edge where the quad stops.
|
|
let mb_fade = fn(pos: vec2, size: vec2, m: float) -> float {
|
|
let q = pos * (size + vec2(2.0 * m, 2.0 * m))
|
|
let e = min(min(q.x, q.y), min(size.x + 2.0 * m - q.x, size.y + 2.0 * m - q.y))
|
|
return smoothstep(0.0, 3.0, e)
|
|
}
|
|
|
|
// A seed from a box's size, so two faces of different sizes show different
|
|
// stone (never the position: a face that scrolls must not change).
|
|
let mb_seed = fn(size: vec2) -> vec2 {
|
|
return vec2(fract(size.x * 0.1373) * 997.0 + size.y * 3.7, fract(size.y * 0.2113) * 613.0 + size.x * 1.3)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- palette
|
|
|
|
// The stone's mean white (#efeee9), for a face that fades to it.
|
|
let mb_ground = fn() -> vec3 {
|
|
return vec3(0.937, 0.933, 0.914)
|
|
}
|
|
// The warm grey-brown every shadow is cast in; laid at a coverage.
|
|
let mb_shade = fn() -> vec3 {
|
|
return vec3(0.25, 0.20, 0.13)
|
|
}
|
|
// The ink, dark grey-brown (#3a2e1c).
|
|
let mb_ink = fn() -> vec3 {
|
|
return vec3(0.227, 0.180, 0.110)
|
|
}
|
|
// The key light in the screen plane, toward the light: from the top, a
|
|
// little from the left.
|
|
let mb_lv = fn() -> vec2 {
|
|
return vec2(-0.419, -0.908)
|
|
}
|
|
// The stones, measured on the pictures: emerald (#079846 lit, #0b5028 in
|
|
// the deep), ruby, a golden citrine, sapphire, amethyst, a white diamond,
|
|
// and the two smoky quartzes of the second and third buttons.
|
|
let mb_emerald = fn() -> vec3 {
|
|
return vec3(0.03, 0.56, 0.27)
|
|
}
|
|
let mb_ruby = fn() -> vec3 {
|
|
return vec3(0.76, 0.06, 0.16)
|
|
}
|
|
let mb_citrine = fn() -> vec3 {
|
|
return vec3(0.88, 0.55, 0.12)
|
|
}
|
|
// The citrine as a cut stone shows it: its body a golden yellow (what the
|
|
// gem renderer absorbs to).
|
|
let mb_citrine_gem = fn() -> vec3 {
|
|
return vec3(0.98, 0.78, 0.16)
|
|
}
|
|
let mb_sapphire = fn() -> vec3 {
|
|
return vec3(0.14, 0.32, 0.86)
|
|
}
|
|
let mb_amethyst = fn() -> vec3 {
|
|
return vec3(0.56, 0.26, 0.82)
|
|
}
|
|
let mb_diamond = fn() -> vec3 {
|
|
return vec3(0.86, 0.875, 0.905)
|
|
}
|
|
let mb_champagne = fn() -> vec3 {
|
|
return vec3(0.66, 0.53, 0.37)
|
|
}
|
|
let mb_smoky = fn() -> vec3 {
|
|
return vec3(0.40, 0.36, 0.30)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- gold
|
|
|
|
// Polished gold by the light it catches, 0..1, measured on the pictures'
|
|
// bars: the deep brown-gold of a face turned away (#2e2008), the warm darker
|
|
// band (#5a4214), the shade (#8a6a2c), the body (#b8964e), the bright
|
|
// (#e2c886) and the specular white-gold (#fff4cc).
|
|
let mb_gold = fn(l: float) -> vec3 {
|
|
let x = clamp(l, 0.0, 1.0)
|
|
var c = mix(vec3(0.180, 0.125, 0.031), vec3(0.353, 0.259, 0.078), smoothstep(0.0, 0.2, x))
|
|
c = mix(c, vec3(0.541, 0.416, 0.173), smoothstep(0.2, 0.4, x))
|
|
c = mix(c, vec3(0.722, 0.588, 0.306), smoothstep(0.4, 0.6, x))
|
|
c = mix(c, vec3(0.886, 0.784, 0.525), smoothstep(0.6, 0.8, x))
|
|
return mix(c, vec3(1.0, 0.957, 0.800), smoothstep(0.8, 1.0, x))
|
|
}
|
|
|
|
// What polished metal reflects, by how far a face is turned toward the key
|
|
// light (`e` -1..1, 0 facing the eye): the body flat on, a warm darker band
|
|
// just past flat on the side away, a narrow bright specular strip on the
|
|
// side toward it.
|
|
let mb_env = fn(e: float) -> float {
|
|
let x = clamp(e, -1.0, 1.0)
|
|
var l = 0.5 + 0.30 * x
|
|
l = l - 0.24 * exp(-(x + 0.42) * (x + 0.42) / 0.035)
|
|
l = l + 0.48 * exp(-(x - 0.55) * (x - 0.55) / 0.018)
|
|
return clamp(l, 0.0, 1.0)
|
|
}
|
|
|
|
// A round bead of gold: `u` 0 at its outer edge to 1 at its inner, `n` the
|
|
// way its outline faces. Its outer half faces out and its inner half in:
|
|
// the side toward the light carries the bright specular line, the side
|
|
// away the warm dark band; its crest always holds a polished streak, and
|
|
// both its edges roll away dark, so a wide rim reads chunky.
|
|
let mb_bead = fn(u: float, n: vec2) -> float {
|
|
let t = cos(clamp(u, 0.0, 1.0) * PI)
|
|
var l = mb_env(t * dot(n, mb_lv()) * 0.95)
|
|
l = l + 0.12 * exp(-t * t / 0.05)
|
|
return l - 0.20 * smoothstep(0.80, 1.0, abs(t))
|
|
}
|
|
|
|
// A gold rim `w` points wide inside the outline at distance `d` (negative
|
|
// inside), its light varied a little along its run so a long rim is never
|
|
// one flat colour.
|
|
let mb_rim = fn(d: float, w: float, n: vec2, p: vec2) -> vec3 {
|
|
let u = clamp(-d / max(w, 0.01), 0.0, 1.0)
|
|
let l = mb_bead(u, n) + 0.06 * (Finish.noise(p / 6.0) - 0.5)
|
|
return mb_gold(l)
|
|
}
|
|
|
|
// A DOUBLE RIM `w` points wide: a broad outer bead (0.6 of it), a dark
|
|
// groove, and a slimmer inner bead, as the pictures' field frames.
|
|
let mb_rim2 = fn(d: float, w: float, n: vec2, p: vec2, px: float) -> vec3 {
|
|
let wo = w * 0.60
|
|
let wg = max(w * 0.12, px)
|
|
let wi = max(w - wo - wg, 0.3)
|
|
let jit = 0.06 * (Finish.noise(p / 6.0) - 0.5)
|
|
let co = mb_gold(mb_bead(clamp(-d / wo, 0.0, 1.0), n) + jit)
|
|
let ci = mb_gold(mb_bead(clamp((-d - wo - wg) / wi, 0.0, 1.0), n) + jit)
|
|
var col = mix(co, mb_gold(0.06), Finish.cover(d + wo, px))
|
|
return mix(col, ci, Finish.cover(d + wo + wg, px))
|
|
}
|
|
|
|
// A gold face: a polished bar, flat in the middle with a soft reflection of
|
|
// a bright window across its upper third, its border `bw` rolling over to
|
|
// the outline (`d` its distance, `n` the way it faces).
|
|
let mb_goldface = fn(p: vec2, c: vec2, h: vec2, d: float, n: vec2, bw: float) -> vec3 {
|
|
let y = (p.y - c.y) / max(h.y, 1.0)
|
|
let edge = 1.0 - smoothstep(0.0, bw, -d)
|
|
var e = -0.16 * y
|
|
e = mix(e, dot(n, mb_lv()) * 0.85, edge)
|
|
var l = mb_env(e)
|
|
l = l + 0.11 * exp(-(y + 0.42) * (y + 0.42) / 0.04) * (1.0 - edge)
|
|
l = l + 0.04 * (Finish.noise(p / vec2(14.0, 3.0)) - 0.5)
|
|
return mb_gold(l)
|
|
}
|
|
|
|
// One gold wire of an ornament: its coverage and light from the signed
|
|
// distance `e` across its middle, `hw` half its width, `n` the way +e faces
|
|
// and `lv` the light in the wire's own frame.
|
|
let mb_wire = fn(e: float, hw: float, n: vec2, lv: vec2, px: float) -> vec2 {
|
|
let a = Finish.cover(abs(e) - hw, px)
|
|
let t = clamp(e / max(hw, 0.01), -1.0, 1.0)
|
|
return vec2(a, mb_env(t * dot(n, lv) * 0.95))
|
|
}
|
|
let mb_wire_max = fn(a: vec2, b: vec2) -> vec2 {
|
|
if b.x > a.x {
|
|
return b
|
|
}
|
|
return a
|
|
}
|
|
// A spiral wire about `c`, `pitch` apart, from radius `r0` to `r1`.
|
|
let mb_curl = fn(m: vec2, c: vec2, pitch: float, r0: float, r1: float, hw: float, lv: vec2, px: float) -> vec2 {
|
|
let q = m - c
|
|
let r = length(q)
|
|
let ang = atan2(q.y, q.x)
|
|
let e = (fract(r / pitch - ang / (2.0 * PI) + 0.5) - 0.5) * pitch
|
|
let w = smoothstep(r0 - 0.3, r0 + 0.5, r) * (1.0 - smoothstep(r1 - 0.6, r1 + 0.2, r))
|
|
let g = mb_wire(e, hw, q / max(r, 0.01), lv, px)
|
|
return vec2(g.x * w, g.y)
|
|
}
|
|
// A vine wire along an edge: a wave `amp` either side of `y0`, a wavelength
|
|
// `wl` long, from `x0` to `x1`, thinning and calming as it runs.
|
|
let mb_vine = fn(m: vec2, x0: float, x1: float, y0: float, amp: float, wl: float, hw: float, lv: vec2, px: float) -> vec2 {
|
|
let k = 2.0 * PI / wl
|
|
let run = clamp((m.x - x0) / max(x1 - x0, 1.0), 0.0, 1.0)
|
|
let fade = smoothstep(x0, x0 + 1.0, m.x) * (1.0 - smoothstep(x1 - 2.0, x1, m.x))
|
|
let A = amp * (1.0 - 0.5 * run)
|
|
let yc = y0 + A * sin((m.x - x0) * k)
|
|
let dy = A * k * cos((m.x - x0) * k)
|
|
let nl = sqrt(1.0 + dy * dy)
|
|
let g = mb_wire((m.y - yc) / nl, hw * mix(1.0, 0.65, run), vec2(-dy, 1.0) / nl, lv, px)
|
|
return vec2(g.x * fade, g.y)
|
|
}
|
|
// The scroll of one corner at scale `s`, in corner space (`m` points along
|
|
// the edges from the corner; folded about the diagonal, so both edges carry
|
|
// the same vine): a volute round the corner's eye (where a small stone is
|
|
// set), a vine along each edge with a curl hanging from each crest and a
|
|
// bud closing it, a short arc across the corner. `lv` the light in corner
|
|
// space. All of it within nine points of the edges and the corner.
|
|
let mb_corner = fn(m0: vec2, s: float, lv0: vec2, px: float) -> vec2 {
|
|
var m = m0
|
|
var lv = lv0
|
|
if m.y > m.x {
|
|
m = vec2(m0.y, m0.x)
|
|
lv = vec2(lv0.y, lv0.x)
|
|
}
|
|
var g = mb_curl(m, vec2(7.0, 7.0) * s, 1.45 * s, 2.0 * s, 4.4 * s, 0.48 * s, lv, px)
|
|
g = mb_wire_max(g, mb_vine(m, 11.0 * s, 40.0 * s, 5.9 * s, 1.3 * s, 9.0 * s, 0.50 * s, lv, px))
|
|
g = mb_wire_max(g, mb_curl(m, vec2(15.6 * s, 8.3 * s), 0.85 * s, 0.25 * s, 1.95 * s, 0.36 * s, lv, px))
|
|
g = mb_wire_max(g, mb_curl(m, vec2(24.6 * s, 4.3 * s), 0.75 * s, 0.25 * s, 1.5 * s, 0.32 * s, lv, px))
|
|
g = mb_wire_max(g, mb_curl(m, vec2(33.6 * s, 7.4 * s), 0.65 * s, 0.2 * s, 1.3 * s, 0.30 * s, lv, px))
|
|
// A bud at the vine's end.
|
|
let bd = length(m - vec2(41.0 * s, 5.9 * s)) - 0.95 * s
|
|
let bn = (m - vec2(41.0 * s, 5.9 * s)) / max(length(m - vec2(41.0 * s, 5.9 * s)), 0.01)
|
|
g = mb_wire_max(g, vec2(Finish.cover(bd, px), mb_env(dot(bn, lv) * 0.8)))
|
|
return g
|
|
}
|
|
|
|
// ---------------------------------------------------------------- marble
|
|
|
|
// THE VEINS' FIELD: value noise laid along the veins' general drift `dv`
|
|
// (a unit direction; the drift runs from the upper right down to the lower
|
|
// left), `sa` points along and `sb` across, the coordinates first warped by
|
|
// two more fields (`warp` how far), so its level lines wander, branch and
|
|
// rejoin like the veins of a stone rather than running as parallel strokes.
|
|
// Its value in .x and its gradient's size per point in .y, measured a point
|
|
// either way: a vein's distance in points is its value over that.
|
|
let mb_vf = fn(q: vec2, dv: vec2, sa: float, sb: float, warp: float, seed: vec2) -> float {
|
|
var s = vec2(dot(q, dv) / sa, dot(q, vec2(-dv.y, dv.x)) / sb) + seed
|
|
if warp > 0.001 {
|
|
let w = vec2(Finish.fbm(s * 0.55 + vec2(4.3, 1.7)), Finish.fbm(s * 0.55 + vec2(9.1, 6.2))) - vec2(0.5, 0.5)
|
|
s = s + w * warp
|
|
}
|
|
return Finish.fbm(s)
|
|
}
|
|
let mb_vfg = fn(q: vec2, dv: vec2, sa: float, sb: float, warp: float, seed: vec2) -> vec2 {
|
|
let f = mb_vf(q, dv, sa, sb, warp, seed)
|
|
let fx = mb_vf(q + vec2(1.0, 0.0), dv, sa, sb, warp, seed)
|
|
let fy = mb_vf(q + vec2(0.0, 1.0), dv, sa, sb, warp, seed)
|
|
return vec2(f, max(length(vec2(fx - f, fy - f)), 0.00015))
|
|
}
|
|
|
|
// THE GROUND'S MARBLE at `q` (points in window space), white Carrara:
|
|
// - a polished white with broad pale grey clouds drifting along the run;
|
|
// - the main veins, a level line of the warped field: where the field is
|
|
// flat they spread into a soft diffuse band, everywhere a darker inner
|
|
// band round a soft core of varied width broken into dabs, fading in and
|
|
// out along their run, grey with stretches warmed to an old gold;
|
|
// - forks, where the next level runs close by and parts from it;
|
|
// - a finer network that branches off them, and a few fine threads close
|
|
// by them.
|
|
// `k` the veins' strength: calm under the content, full at the frame.
|
|
let mb_marble = fn(q: vec2, px: float, k: float) -> vec3 {
|
|
let white = vec3(0.966, 0.963, 0.952)
|
|
let dv = vec2(-0.62, 0.785)
|
|
let cl = mb_vf(q, dv, 600.0, 260.0, 1.6, vec2(1.3, 8.2))
|
|
var col = mix(white, vec3(0.872, 0.868, 0.855), smoothstep(0.48, 0.82, cl) * (0.5 + 0.5 * k) * 0.6)
|
|
let cl2 = mb_vf(q, dv, 180.0, 90.0, 1.2, vec2(6.1, 2.4))
|
|
col = mix(col, vec3(0.900, 0.896, 0.884), smoothstep(0.55, 0.85, cl2) * 0.4 * k)
|
|
// The main veins.
|
|
let n1 = mb_vfg(q, dv, 430.0, 190.0, 2.2, vec2(0.0, 0.0))
|
|
let v = abs(n1.x - 0.5)
|
|
let d1 = v / n1.y
|
|
let pres = smoothstep(0.25, 0.7, mb_vf(q, dv, 160.0, 90.0, 0.8, vec2(21.0, 4.0)))
|
|
let tone = smoothstep(0.45, 0.75, Finish.noise(q / 380.0 + vec2(31.0, 7.0)))
|
|
let dab = 0.6 + 0.4 * Finish.noise(q / 7.0 + vec2(3.0, 1.0))
|
|
let vc = mix(vec3(0.52, 0.51, 0.48), vec3(0.66, 0.55, 0.32), tone)
|
|
col = mix(col, vec3(0.80, 0.795, 0.77), clamp(exp(-v / 0.020) * (0.25 + 0.75 * pres) * 0.6 * k, 0.0, 1.0))
|
|
col = mix(col, vec3(0.70, 0.685, 0.65), clamp(exp(-d1 / 3.5) * pres * 0.5 * k, 0.0, 1.0))
|
|
let wn = Finish.noise(q / 70.0 + vec2(1.7, 3.3))
|
|
let hw = 0.4 + 2.2 * smoothstep(0.3, 1.0, wn) * pres
|
|
let core = (1.0 - smoothstep(hw - 0.5, hw + 1.2, d1)) * pres * dab
|
|
col = mix(col, vc, clamp(core * 0.85 * k, 0.0, 1.0))
|
|
// A fork: the next level, close by, where the vein frays.
|
|
let dc = abs(n1.x - 0.53) / n1.y
|
|
let fray = smoothstep(0.5, 0.8, Finish.noise(q / 140.0 + vec2(8.0, 1.0))) * pres
|
|
col = mix(col, vec3(0.66, 0.65, 0.62), clamp((1.0 - smoothstep(0.0, 1.1, dc)) * fray * 0.55 * k, 0.0, 1.0))
|
|
// The branches: a finer network shown off the main veins and in a few
|
|
// patches of its own.
|
|
let n2 = mb_vfg(q, vec2(-0.3, 0.95), 210.0, 130.0, 1.4, vec2(7.3, 2.9))
|
|
let d2 = abs(n2.x - 0.5) / n2.y
|
|
let near = exp(-d1 / 40.0) * (0.3 + 0.7 * pres)
|
|
var m2 = clamp(near + smoothstep(0.66, 0.9, Finish.noise(q / 300.0 + vec2(11.0, 5.0))) * 0.5, 0.0, 1.0)
|
|
m2 = m2 * smoothstep(0.2, 0.6, mb_vf(q, dv, 90.0, 60.0, 0.6, vec2(2.0, 9.0)))
|
|
// Where a field is nearly flat its level lines close into small rings,
|
|
// which no marble has: a branch or a thread fades out there.
|
|
m2 = m2 * smoothstep(0.35 / 130.0, 0.9 / 130.0, n2.y)
|
|
col = mix(col, vec3(0.80, 0.795, 0.77), clamp(exp(-abs(n2.x - 0.5) / 0.015) * m2 * 0.35 * k, 0.0, 1.0))
|
|
col = mix(col, vec3(0.60, 0.59, 0.56), clamp((1.0 - smoothstep(-0.2, 1.0, d2 - 0.25)) * m2 * 0.55 * k * dab, 0.0, 1.0))
|
|
// The fine threads, close by the veins.
|
|
let n3 = mb_vfg(q, dv, 90.0, 60.0, 0.9, vec2(3.1, 17.7))
|
|
let d3 = abs(n3.x - 0.5) / n3.y
|
|
let m3 = clamp(exp(-d1 / 14.0) * 0.8 * pres, 0.0, 1.0) * smoothstep(0.3, 0.6, Finish.noise(q / 40.0 + vec2(5.0, 2.0))) * smoothstep(0.4 / 60.0, 1.0 / 60.0, n3.y)
|
|
col = mix(col, vec3(0.50, 0.49, 0.46), Finish.cover(d3 - 0.2, px) * m3 * 0.5 * k)
|
|
// The polish: a crystalline grain, a device pixel fine.
|
|
let g = Finish.grain(q / px, 0.006)
|
|
return col + vec3(g, g, g)
|
|
}
|
|
|
|
// THE STONE OF A FACE: the same marble, lighter work for a small face: a
|
|
// soft cloud, and now and then a soft vein with its diffuse band, fading
|
|
// in and out; `k` its strength, kept low under the words a face carries.
|
|
let mb_stone = fn(q: vec2, px: float, k: float) -> vec3 {
|
|
let white = vec3(0.968, 0.965, 0.955)
|
|
let dv = vec2(-0.62, 0.785)
|
|
let cl = mb_vf(q, dv, 260.0, 120.0, 1.2, vec2(2.3, 7.1))
|
|
var col = mix(white, vec3(0.895, 0.890, 0.875), smoothstep(0.5, 0.85, cl) * 0.6 * k)
|
|
let n = mb_vfg(q, dv, 300.0, 140.0, 1.6, vec2(4.1, 9.3))
|
|
let v = abs(n.x - 0.5)
|
|
let d = v / n.y
|
|
let pres = smoothstep(0.3, 0.7, Finish.noise(q / 90.0 + vec2(13.0, 2.0)))
|
|
col = mix(col, vec3(0.83, 0.825, 0.80), clamp(exp(-v / 0.02) * 0.5 * k, 0.0, 1.0))
|
|
let hw = 0.3 + 1.0 * Finish.noise(q / 40.0 + vec2(5.1, 1.2))
|
|
col = mix(col, vec3(0.62, 0.605, 0.57), (1.0 - smoothstep(hw - 0.4, hw + 1.0, d)) * pres * 0.6 * k)
|
|
let g = Finish.grain(q / px, 0.005)
|
|
return col + vec3(g, g, g)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- gems
|
|
|
|
// A stone's colour by the light a facet sends back, 0..1: its deep
|
|
// interior (the colour squared, darker), its body, a paler fire and white.
|
|
let mb_gemcol = fn(ink: vec3, v: float) -> vec3 {
|
|
let deep = ink * ink * 0.55
|
|
let bright = mix(ink, vec3(1.0, 1.0, 1.0), 0.5)
|
|
var c = mix(deep, ink, smoothstep(0.0, 0.5, v))
|
|
c = mix(c, bright, smoothstep(0.5, 0.86, v))
|
|
return mix(c, vec3(1.0, 1.0, 1.0), smoothstep(0.88, 1.0, v))
|
|
}
|
|
|
|
// A star glint: a hot white core and two crossed rays `s` points long, a
|
|
// device pixel thin, and a fainter diagonal pair.
|
|
let mb_glint = fn(q: vec2, s: float, px: float) -> float {
|
|
let ax = abs(q.x)
|
|
let ay = abs(q.y)
|
|
let w = max(0.045 * s, 0.35 * px)
|
|
let ray = exp(-ay / w) * max(1.0 - ax / s, 0.0) + exp(-ax / w) * max(1.0 - ay / s, 0.0)
|
|
let dg = vec2(abs(q.x + q.y), abs(q.x - q.y)) * 0.7071
|
|
let diag = exp(-dg.x / w) * max(1.0 - dg.y / (0.45 * s), 0.0) + exp(-dg.y / w) * max(1.0 - dg.x / (0.45 * s), 0.0)
|
|
let core = exp(-(ax * ax + ay * ay) / max(0.025 * s * s, px * px))
|
|
return clamp(ray * ray * 0.95 + diag * diag * 0.45 + core, 0.0, 1.0)
|
|
}
|
|
|
|
// A WHITE DIAMOND, a round brilliant seen from above, radius `R`, turned by
|
|
// `spin`. Its facets are flat planes with straight edges, each ONE tone out
|
|
// of four (near black, a grey-blue, a light grey, near white), set so that
|
|
// neighbours jump between them, nudged by the key light and a little
|
|
// chance: the regular octagonal table (about half the stone across), eight
|
|
// star facets standing on its edges, eight kites from the table's corners
|
|
// to the girdle, and sixteen upper girdle facets in pairs along the rim.
|
|
// The table is one flat facet too, a clear glass a breath under white. A
|
|
// few white facets flash a pale spectral colour (orange, blue or green);
|
|
// every facet edge is a crisp hairline (light on a dark facet, grey-blue on
|
|
// a light one) and the girdle a bright line. Laid out in one sector (an
|
|
// eighth, its middle on a table edge's middle) folded about that middle,
|
|
// so every edge is a straight line. A small stone keeps the table and eight
|
|
// crown facets.
|
|
let mb_dia_tone = fn(L: float) -> vec3 {
|
|
var c = vec3(0.13, 0.14, 0.18)
|
|
c = mix(c, vec3(0.44, 0.48, 0.57), step(0.25, L))
|
|
c = mix(c, vec3(0.79, 0.81, 0.86), step(0.5, L))
|
|
return mix(c, vec3(0.985, 0.99, 1.0), step(0.75, L))
|
|
}
|
|
// How much a facet facing the screen direction `d` turns to the key light.
|
|
let mb_facing = fn(d: float) -> float {
|
|
return cos(d) * mb_lv().x + sin(d) * mb_lv().y
|
|
}
|
|
let mb_brilliant_white = fn(q: vec2, R: float, spin: float, px: float) -> vec3 {
|
|
let st = PI / 4.0
|
|
let t2 = 0.41421356
|
|
let r = length(q) / max(R, 0.3)
|
|
let a = atan2(q.y, q.x) - spin + 8.0 * PI
|
|
let k = floor(a / st)
|
|
let am = (a - k * st) - st * 0.5
|
|
let side = step(0.0, am)
|
|
let par = k - 2.0 * floor(k * 0.5)
|
|
let th = k * st + st * 0.5 + spin
|
|
let x = r * cos(am)
|
|
let y = abs(r * sin(am))
|
|
// The table's edge (x = tc, its corner at vy), the star's apex at sx,
|
|
// the kite's foot on the girdle at (gx, gy).
|
|
let tc = 0.48965
|
|
let vy = 0.20282
|
|
let sx = 0.80
|
|
let gx = 0.92388
|
|
let gy = 0.38268
|
|
let ystar = vy * (sx - x) / (sx - tc)
|
|
let csg = (gx - sx) * y - gy * (x - sx)
|
|
let kb = k + side - 8.0 * floor((k + side) / 8.0)
|
|
let small = step(R, 6.0)
|
|
var L = 0.5
|
|
var fid = 0.0
|
|
var e = abs(x - tc) * R
|
|
if x < tc {
|
|
// The table: one flat facet, clear and bright.
|
|
L = 2.0
|
|
fid = 100.0
|
|
} else {
|
|
if small > 0.5 {
|
|
// A small stone: eight crown facets, alternately lit and dark.
|
|
L = mix(0.86, 0.30, par) + 0.15 * mb_facing(th)
|
|
fid = 20.0 + k
|
|
e = min(e, (st * 0.5 - abs(am)) * r * R)
|
|
} else {
|
|
if y < ystar {
|
|
// A star facet.
|
|
L = mix(0.86, 0.42, par) + 0.15 * mb_facing(th) + 0.12 * (Finish.hash(vec2(20.0 + k, 7.7)) - 0.5)
|
|
fid = 20.0 + k
|
|
} else {
|
|
if csg > 0.0 {
|
|
// A kite, its tone stepping round the stone.
|
|
let k4 = kb - 4.0 * floor(kb * 0.25)
|
|
var kbase = 0.16
|
|
kbase = mix(kbase, 0.66, step(0.5, k4))
|
|
kbase = mix(kbase, 0.40, step(1.5, k4))
|
|
kbase = mix(kbase, 0.88, step(2.5, k4))
|
|
L = kbase + 0.16 * mb_facing(kb * st + spin) + 0.12 * (Finish.hash(vec2(40.0 + kb, 3.3)) - 0.5)
|
|
fid = 40.0 + kb
|
|
} else {
|
|
// An upper girdle facet.
|
|
L = mix(0.30 + 0.2 * par, 0.80 - 0.25 * par, side) + 0.15 * mb_facing(th + (side * 2.0 - 1.0) * st * 0.25) + 0.2 * (Finish.hash(vec2(60.0 + 2.0 * k + side, 9.1)) - 0.5)
|
|
fid = 60.0 + 2.0 * k + side
|
|
e = min(e, y * R)
|
|
}
|
|
}
|
|
let nst = sqrt(vy * vy + (sx - tc) * (sx - tc))
|
|
e = min(e, abs((y - ystar) * (sx - tc)) / nst * R + 9.0 * step(sx + 0.02, x))
|
|
let nsg = sqrt((gx - sx) * (gx - sx) + gy * gy)
|
|
e = min(e, abs(csg) / nsg * R + 9.0 * step(y, ystar))
|
|
}
|
|
}
|
|
L = L + 0.03 * (r - 0.6)
|
|
var col = mb_dia_tone(L)
|
|
// The table's own tone: a clear glass a breath under white.
|
|
col = mix(col, vec3(0.915, 0.928, 0.962), step(1.5, L))
|
|
// Fire: a few lit facets flash orange, blue or green.
|
|
let hf = Finish.hash(vec2(fid, 13.3))
|
|
let hue = floor(Finish.hash(vec2(fid, 5.1)) * 3.0)
|
|
var fcol = vec3(1.0, 0.72, 0.42)
|
|
fcol = mix(fcol, vec3(0.55, 0.75, 1.0), step(0.5, hue))
|
|
fcol = mix(fcol, vec3(0.62, 0.95, 0.66), step(1.5, hue))
|
|
col = mix(col, col * (0.62 + 0.38 * fcol), step(0.93, hf) * step(0.75, L) * step(L, 1.5) * (1.0 - step(R, 6.0)))
|
|
// The facet edges: crisp hairlines, light along a dark facet and a
|
|
// grey-blue along a light one; the girdle a bright line.
|
|
let line = 1.0 - smoothstep(0.0, px * 0.9, e)
|
|
let lum = dot(col, vec3(0.3, 0.5, 0.2))
|
|
let ecol = mix(min(col + vec3(0.32, 0.32, 0.32), vec3(1.0, 1.0, 1.0)), vec3(0.56, 0.60, 0.69), step(0.7, lum))
|
|
col = mix(col, ecol, line * 0.6)
|
|
col = mix(col, vec3(1.0, 1.0, 1.0), smoothstep(0.955, 0.99, r) * 0.75)
|
|
return col
|
|
}
|
|
// The star glints of a white diamond, at facet corners that turn with it:
|
|
// a table corner, a star's apex and a kite's foot; one on a small stone.
|
|
let mb_dia_glints = fn(q: vec2, R: float, spin: float, px: float) -> float {
|
|
let st = PI / 4.0
|
|
let a1 = spin + 7.0 * st
|
|
let a2 = spin + 3.5 * st
|
|
let a3 = spin + 1.0 * st
|
|
var g = mb_glint(q - vec2(cos(a1), sin(a1)) * (0.53 * R), max(0.55 * R, 2.6), px)
|
|
if R > 6.0 {
|
|
g = g + mb_glint(q - vec2(cos(a2), sin(a2)) * (0.80 * R), 0.28 * R, px) * 0.85
|
|
g = g + mb_glint(q - vec2(cos(a3), sin(a3)) * (0.96 * R), 0.22 * R, px) * 0.7
|
|
}
|
|
return clamp(g, 0.0, 1.0)
|
|
}
|
|
|
|
// A ROUND BRILLIANT in colour (the emerald knobs): the octagonal table
|
|
// showing the pavilion through it as wedges that alternate dark and light,
|
|
// eight star facets, eight kites and sixteen upper girdle facets, each facet
|
|
// a flat light by how it tilts to the key light and a little chance;
|
|
// hairlines of light along the facet edges. A white stone is drawn as the
|
|
// diamond above. `q` from the centre. Colour only.
|
|
let mb_brilliant = fn(q: vec2, R: float, ink: vec3, spin: float, px: float) -> vec3 {
|
|
if max(ink.x, max(ink.y, ink.z)) - min(ink.x, min(ink.y, ink.z)) < 0.15 {
|
|
return mb_brilliant_white(q, R, spin, px)
|
|
}
|
|
let lv = mb_lv()
|
|
let r = length(q) / max(R, 0.5)
|
|
let a = atan2(q.y, q.x) - spin + 8.0 * PI
|
|
let st = PI / 4.0
|
|
let k = floor(a / st)
|
|
let am = (a - k * st) - st * 0.5
|
|
let fa = abs(am) / (st * 0.5)
|
|
let roct = r * cos(am) / cos(st * 0.5)
|
|
let rstar = mix(0.80, 0.53, fa)
|
|
let rug = mix(0.80, 1.0, fa)
|
|
// A white stone is all brilliance, light facets beside near black ones;
|
|
// a coloured one keeps its colour, its facets closer together.
|
|
let chroma = max(ink.x, max(ink.y, ink.z)) - min(ink.x, min(ink.y, ink.z))
|
|
let colored = smoothstep(0.15, 0.4, chroma)
|
|
let base = mix(0.64, 0.42, colored)
|
|
let amp = mix(0.62, 0.36, colored)
|
|
var v = 0.5
|
|
var edge = 10.0
|
|
var hid = 0.0
|
|
if roct < 0.53 {
|
|
// The pavilion seen through the table: sixteen wedges in three
|
|
// rings, alternating, each its own small chance.
|
|
let wk = floor(a / (st * 0.5))
|
|
let ring = floor(r / 0.18)
|
|
let alt = fract((wk + ring) * 0.5) * 2.0
|
|
hid = wk * 7.0 + ring
|
|
v = base + amp * ((alt - 0.5) * 0.95 + 0.4 * (Finish.hash(vec2(hid, 3.1)) - 0.5))
|
|
v = mix(v, base + 0.1, smoothstep(0.07, 0.0, r))
|
|
let ew = abs(fract(a / (st * 0.5) + 0.5) - 0.5) * (st * 0.5) * r * R
|
|
let er = abs(fract(r / 0.18 + 0.5) - 0.5) * 0.18 * R
|
|
edge = min(min((0.53 - roct) * R, ew), er)
|
|
} else {
|
|
var dir = k * st + st * 0.5
|
|
var tilt = 0.45
|
|
var id = 20.0 + k
|
|
if r >= rstar && r < rug {
|
|
let kb = k + step(0.0, am)
|
|
dir = kb * st
|
|
tilt = 0.62
|
|
id = 40.0 + kb
|
|
}
|
|
if r >= rug {
|
|
let side = step(0.0, am)
|
|
dir = k * st + st * 0.5 + (side * 2.0 - 1.0) * st * 0.25
|
|
tilt = 0.85
|
|
id = 60.0 + 2.0 * k + side
|
|
}
|
|
// The two halves of a facet pair either side of its middle line
|
|
// tilt apart a little, so the crown reads as a star of light and
|
|
// dark triangles.
|
|
let half = step(0.0, am) * 2.0 - 1.0
|
|
let face = tilt * dot(vec2(cos(dir + spin + half * st * 0.2), sin(dir + spin + half * st * 0.2)), lv)
|
|
hid = id * 2.0 + step(0.0, am)
|
|
v = base + amp * (0.95 * face + 0.22 * half + 0.5 * (Finish.hash(vec2(hid, 7.7)) - 0.5))
|
|
edge = min(min(abs(roct - 0.53), abs(r - rstar) * 0.85), abs(r - rug) * 0.85) * R
|
|
if r >= rug {
|
|
edge = min(edge, abs(am) * r * R)
|
|
}
|
|
}
|
|
v = clamp(v, 0.0, 1.0)
|
|
var col = mb_gemcol(ink, v)
|
|
// A white stone runs from a near black grey through a cool grey to white.
|
|
var wc = mix(vec3(0.17, 0.18, 0.22), vec3(0.60, 0.62, 0.68), smoothstep(0.0, 0.5, v))
|
|
wc = mix(wc, vec3(1.0, 1.0, 1.0), smoothstep(0.5, 0.92, v))
|
|
col = mix(wc, col, colored)
|
|
// A white stone's fire: a few bright facets throw a spectral tint.
|
|
let fh = Finish.hash(vec2(hid, 13.3))
|
|
let fire = mix(vec3(1.0, 0.86, 0.62), vec3(0.66, 0.80, 1.0), step(0.5, fract(fh * 7.0)))
|
|
col = mix(col, col * fire, (1.0 - colored) * step(0.86, fh) * smoothstep(0.55, 0.8, v) * 0.3)
|
|
let line = 1.0 - smoothstep(0.0, max(px * 0.9, 0.035 * R), edge)
|
|
col = mix(col, mix(col, vec3(1.0, 1.0, 1.0), 0.5), line * mix(0.4, 0.3, colored))
|
|
return col
|
|
}
|
|
|
|
// ---------------------------------------------------------------- the gem renderer
|
|
|
|
// THE GEMS ARE RAY TRACED. A cut stone is a convex polyhedron (every facet a
|
|
// plane n.p <= D), seen from above by an eye several stone radii over it. A
|
|
// view ray is refracted in at the crown (a diamond bends light by 2.42),
|
|
// bounces off the facets inside a few times by total internal reflection,
|
|
// and where it can leave it is refracted out with a slightly different index
|
|
// per colour channel, so the colours part a little: the stone's fire. What
|
|
// leaves is lit by a studio (below): soft boxes of varied brightness with
|
|
// dark seams, the key light brighter at the upper left, spokes of light and
|
|
// shade over the eye. A coloured stone takes its colour by absorbing along
|
|
// the path inside it (Beer's law). Each pass is bounded: a few bounces, each
|
|
// testing one folded wedge of planes. Units: the girdle's radius (a step
|
|
// cut's half its smaller side) is 1, z toward the eye.
|
|
|
|
// A ROUND BRILLIANT, eight-fold: a table 0.565 out at its corners; eight
|
|
// bezel facets at 34.5 degrees reaching the girdle; eight stars at 22.5
|
|
// degrees on the table's edges; sixteen upper girdle facets at 42 degrees;
|
|
// below, eight pavilion mains at 40.8 degrees and sixteen lower girdle
|
|
// facets at 42.5. Folded by its symmetry into one wedge (0 the middle of a
|
|
// bezel, 22.5 degrees the middle of a star), where one plane of each family
|
|
// is the one that counts, so a ray is tested against six planes and the
|
|
// girdle's cylinder, not fifty-seven.
|
|
let mb_gfold = fn(v: vec2) -> vec2 {
|
|
let st = PI / 4.0
|
|
let a = atan2(v.y, v.x)
|
|
let k = floor(a / st + 0.5)
|
|
return vec2(k, step(0.0, a - k * st) * 2.0 - 1.0)
|
|
}
|
|
let mb_gto = fn(v: vec3, f: vec2) -> vec3 {
|
|
let a = -f.x * PI / 4.0
|
|
let c = cos(a)
|
|
let s = sin(a)
|
|
return vec3(v.x * c - v.y * s, (v.x * s + v.y * c) * f.y, v.z)
|
|
}
|
|
let mb_gfrom = fn(v: vec3, f: vec2) -> vec3 {
|
|
let a = f.x * PI / 4.0
|
|
let c = cos(a)
|
|
let s = sin(a)
|
|
let y = v.y * f.y
|
|
return vec3(v.x * c - y * s, v.x * s + y * c, v.z)
|
|
}
|
|
// One plane's exit: kept in `best` (normal, distance) when it is nearer.
|
|
let mb_gplane = fn(best: vec4, p: vec3, d: vec3, n: vec3, dd: float) -> vec4 {
|
|
let nd = dot(n, d)
|
|
let t = (dd - dot(n, p)) / max(nd, 0.00001)
|
|
let take = step(0.00001, nd) * step(t, best.w)
|
|
return mix(best, vec4(n, t), take)
|
|
}
|
|
// The crown over (x, y): its outward normal and its height.
|
|
let mb_gcrown = fn(xy: vec2) -> vec4 {
|
|
let f = mb_gfold(xy)
|
|
let w = mb_gto(vec3(xy.x, xy.y, 0.0), f)
|
|
var best = vec4(0.0, 0.0, 1.0, 0.298967)
|
|
let zb = (0.566406 - 0.566406 * w.x) / 0.824126
|
|
best = mix(best, vec4(0.566406, 0.0, 0.824126, zb), step(zb, best.w))
|
|
let zs = (0.475967 - 0.353553 * w.x - 0.146447 * w.y) / 0.923880
|
|
best = mix(best, vec4(0.353553, 0.146447, 0.923880, zs), step(zs, best.w))
|
|
let zu = (0.669131 - 0.656273 * w.x - 0.130541 * w.y) / 0.743145
|
|
best = mix(best, vec4(0.656273, 0.130541, 0.743145, zu), step(zu, best.w))
|
|
return vec4(mb_gfrom(best.xyz, f), best.w)
|
|
}
|
|
// Where a ray inside the brilliant leaves it: the outward normal there and
|
|
// the distance. The wedge is taken where the ray is guessed to leave and
|
|
// the guess refined (`passes` in all); each pass can only shorten the
|
|
// distance.
|
|
// Every loop of the tracer counts to a number it is handed, not to one
|
|
// written in it: a counted loop is compiled once and run, where a written
|
|
// one is copied out pass by pass, and the copies made a page of stones take
|
|
// seconds to compile.
|
|
let mb_gexit = fn(p: vec3, d: vec3, passes: float) -> vec4 {
|
|
var best = vec4(0.0, 0.0, 1.0, 1000.0)
|
|
var g = p + d * 0.6
|
|
for i in 0..passes {
|
|
let f = mb_gfold(g.xy)
|
|
let pw = mb_gto(p, f)
|
|
let dw = mb_gto(d, f)
|
|
var loc = vec4(0.0, 0.0, 1.0, 1000.0)
|
|
loc = mb_gplane(loc, pw, dw, vec3(0.0, 0.0, 1.0), 0.298967)
|
|
loc = mb_gplane(loc, pw, dw, vec3(0.566406, 0.0, 0.824126), 0.566406)
|
|
loc = mb_gplane(loc, pw, dw, vec3(0.353553, 0.146447, 0.923880), 0.475967)
|
|
loc = mb_gplane(loc, pw, dw, vec3(0.656273, 0.130541, 0.743145), 0.669131)
|
|
loc = mb_gplane(loc, pw, dw, vec3(0.653421, 0.0, -0.756995), 0.653421)
|
|
loc = mb_gplane(loc, pw, dw, vec3(0.654071, 0.169154, -0.737277), 0.675590)
|
|
// The girdle, a cylinder of radius 1.
|
|
let a = max(dot(dw.xy, dw.xy), 0.000001)
|
|
let b = dot(pw.xy, dw.xy)
|
|
let c = dot(pw.xy, pw.xy) - 1.0
|
|
let tc = (sqrt(max(b * b - a * c, 0.0)) - b) / a
|
|
let hc = pw.xy + dw.xy * tc
|
|
let hn = hc / max(length(hc), 0.0001)
|
|
loc = mix(loc, vec4(hn.x, hn.y, 0.0, tc), step(0.000001, dot(dw.xy, dw.xy)) * step(tc, loc.w))
|
|
best = mix(best, vec4(mb_gfrom(loc.xyz, f), loc.w), step(loc.w, best.w))
|
|
g = p + d * best.w
|
|
}
|
|
return vec4(best.xyz, clamp(best.w, 0.0, 4.0))
|
|
}
|
|
|
|
// THE STUDIO, by the direction `e` leaving the stone (in the stone's frame,
|
|
// `spin` turning it back to the room's): rows of soft boxes from 18 degrees
|
|
// up to 72, nine degrees tall and fourteen wide, every row half a box
|
|
// along, each box dim, bright or very bright by chance, with dark seams; the
|
|
// key side (upper left) brighter; over 72 degrees a ceiling of spokes of
|
|
// light and shade radiating from the eye, the eye itself a small dark patch
|
|
// straight overhead (`eyed` how dark); below the boxes broad light and dark
|
|
// panels round the horizon, lighter where the light comes up from under the
|
|
// stone.
|
|
let mb_genv = fn(e: vec3, spin: float, eyed: float) -> float {
|
|
let d2r = PI / 180.0
|
|
let az = atan2(e.y, e.x) + spin
|
|
let el = atan2(e.z, length(e.xy))
|
|
let rf = (el - 18.0 * d2r) / (9.0 * d2r)
|
|
let ri = floor(rf)
|
|
let fe = rf - ri
|
|
let u = az / (14.0 * d2r) + ri * 0.5
|
|
let ci = floor(u)
|
|
let fa = u - ci
|
|
let seam = clamp((0.5 - abs(fa - 0.5) - 0.12) / 0.05, 0.0, 1.0) * clamp((0.5 - abs(fe - 0.5) - 0.10) / 0.06, 0.0, 1.0)
|
|
let h = Finish.hash(vec2(ci, ri + 3.0))
|
|
let key = 0.7 + 0.6 * clamp(cos(az + 135.0 * d2r), 0.0, 1.0)
|
|
var b = 0.3
|
|
b = mix(b, 1.4, step(0.22, h))
|
|
b = mix(b, 3.0, step(0.55, h))
|
|
var v = 0.47 + b * key * seam
|
|
// Below the boxes, broad panels round the horizon, light and dark.
|
|
let pl = az / (20.0 * d2r) + 0.25
|
|
let low = mix(0.35, 1.5, step(pl - floor(pl), 0.5)) * (0.8 + 0.4 * clamp(-e.z, 0.0, 1.0))
|
|
v = mix(v, low, step(el, 18.0 * d2r))
|
|
// The ceiling: spokes of light and shade radiating from the eye.
|
|
let sp = az / (15.0 * d2r)
|
|
let ceil = mix(0.55, 2.2, step(sp - floor(sp), 0.5))
|
|
v = mix(v, ceil, step(72.0 * d2r, el))
|
|
return mix(v, mix(v, 0.25, eyed), step(0.996, e.z))
|
|
}
|
|
|
|
// A direction refracted through a surface of normal `n` (facing against
|
|
// it), the indices' ratio `eta`; .w 0 where it cannot pass (total internal
|
|
// reflection).
|
|
let mb_grefr = fn(d: vec3, n: vec3, eta: float) -> vec4 {
|
|
let c = -dot(d, n)
|
|
let k = 1.0 - eta * eta * (1.0 - c * c)
|
|
let thru = step(0.0, k)
|
|
return vec4((eta * d + (eta * c - sqrt(max(k, 0.0))) * n) * thru, thru)
|
|
}
|
|
let mb_grefl = fn(d: vec3, n: vec3) -> vec3 {
|
|
return d - 2.0 * dot(d, n) * n
|
|
}
|
|
|
|
// What a stone of the colour `ink` absorbs per unit of path inside it: the
|
|
// channels its hue lacks, and evenly as much as it is dark (a smoky stone).
|
|
let mb_gabsorb = fn(ink: vec3) -> vec3 {
|
|
let mx = max(max(ink.x, ink.y), max(ink.z, 0.02))
|
|
let dk = -log(mx) * 0.5
|
|
return (vec3(1.0, 1.0, 1.0) - ink / mx) * 1.6 + vec3(dk, dk, dk)
|
|
}
|
|
|
|
// A stone's body colour for the renderer: a colourless ink (the sheet's
|
|
// diamond white) absorbs nothing.
|
|
let mb_gink = fn(ink: vec3) -> vec3 {
|
|
let ch = max(ink.x, max(ink.y, ink.z)) - min(ink.x, min(ink.y, ink.z))
|
|
return mix(vec3(1.0, 1.0, 1.0), ink, step(0.15, ch))
|
|
}
|
|
|
|
// A ROUND BRILLIANT at `q` (points from its centre), radius `R`, turned by
|
|
// `spin`; `ink` its body colour (white: a diamond, no absorption), `nb` the
|
|
// internal bounces followed (four for a big stone, two for a small one).
|
|
// Colour only, tone mapped.
|
|
let mb_gem = fn(q: vec2, R: float, ink: vec3, spin: float, nb: float) -> vec3 {
|
|
// Outside the girdle there is no stone: nothing is traced there, so no
|
|
// ray can run off to infinity in a pixel the stone does not cover.
|
|
var res = vec3(0.5, 0.5, 0.5)
|
|
if dot(q, q) < R * R * 1.1 {
|
|
let cs = cos(-spin)
|
|
let sn = sin(-spin)
|
|
let x = (q.x * cs - q.y * sn) / max(R, 0.3)
|
|
let y = (q.x * sn + q.y * cs) / max(R, 0.3)
|
|
let cr = mb_gcrown(vec2(x, y))
|
|
var p = vec3(x, y, cr.w)
|
|
let n = cr.xyz
|
|
// The eye eight radii over the stone and a little off its axis, in the
|
|
// stone's frame.
|
|
let eye = vec3(0.10 * cs + 0.18 * sn, 0.10 * sn - 0.18 * cs, 8.0)
|
|
var d = normalize(p - eye)
|
|
let f0 = 0.172395
|
|
let tint = step(0.15, max(ink.x, max(ink.y, ink.z)) - min(ink.x, min(ink.y, ink.z)))
|
|
let fi = (f0 + (1.0 - f0) * pow(1.0 - clamp(-dot(d, n), 0.0, 1.0), 5.0)) * mix(1.0, 0.4, tint)
|
|
var col = vec3(1.0, 1.0, 1.0) * (fi * mb_genv(mb_grefl(d, n), spin, 1.0))
|
|
var thr = vec3(1.0, 1.0, 1.0) * (1.0 - fi)
|
|
d = mb_grefr(d, n, 1.0 / 2.419).xyz
|
|
let absorb = mb_gabsorb(ink)
|
|
for b in 0..nb {
|
|
let h = mb_gexit(p, d, 2.0)
|
|
p = p + d * h.w
|
|
thr = thr * exp(-absorb * h.w)
|
|
let nh = h.xyz
|
|
let fe = f0 + (1.0 - f0) * pow(1.0 - clamp(dot(d, nh), 0.0, 1.0), 5.0)
|
|
let rr = mb_grefr(d, -nh, 2.414)
|
|
let rg = mb_grefr(d, -nh, 2.419)
|
|
let rb = mb_grefr(d, -nh, 2.425)
|
|
let lit = vec3(mb_genv(normalize(rr.xyz + vec3(0.0, 0.0, 0.00001)), spin, 1.0) * rr.w, mb_genv(normalize(rg.xyz + vec3(0.0, 0.0, 0.00001)), spin, 1.0) * rg.w, mb_genv(normalize(rb.xyz + vec3(0.0, 0.0, 0.00001)), spin, 1.0) * rb.w)
|
|
col = col + thr * (1.0 - fe) * lit
|
|
thr = thr * mix(1.0, fe, rg.w)
|
|
d = mb_grefl(d, nh)
|
|
}
|
|
col = col + thr * 0.6
|
|
res = vec3(1.0, 1.0, 1.0) - exp(-col * 1.5)
|
|
}
|
|
return res
|
|
}
|
|
// The same with `ns` samples along the device pixel's diagonal, for a big
|
|
// stone.
|
|
let mb_gem_aa = fn(q: vec2, R: float, ink: vec3, spin: float, px: float, nb: float, ns: float) -> vec3 {
|
|
var acc = vec3(0.0, 0.0, 0.0)
|
|
for k in 0..ns {
|
|
let t = (float(k) + 0.5) / max(ns, 1.0) - 0.5
|
|
acc = acc + mb_gem(q + vec2(t, t) * px, R, ink, spin, nb)
|
|
}
|
|
return acc / max(ns, 1.0)
|
|
}
|
|
|
|
// A STEP CUT (an emerald cut, or a baguette when long and narrow), its
|
|
// girdle the box `g` either side of its middle with its corners cut `cc`
|
|
// (units of its half height or width, whichever is less): round the table
|
|
// two crown steps, at 42 and 26 degrees, 0.22 and 0.18 wide; below, three
|
|
// pavilion steps at 55, 45 and 35 degrees, 0.25, 0.25 wide and the rest.
|
|
// Folded by its two mirrors into one quarter, where three directions count
|
|
// (its long side, its short side and the cut corner), six planes each.
|
|
// `dens` scales what the stone absorbs along its path (a pale quartz less
|
|
// than an emerald), `veil` darkens its table for words laid on it.
|
|
let mb_sdir = fn(best: vec4, p: vec3, d: vec3, u: vec2, gg: float) -> vec4 {
|
|
var b = best
|
|
// The girdle's side.
|
|
b = mb_gplane(b, p, d, vec3(u.x, u.y, 0.0), gg)
|
|
// The crown steps.
|
|
b = mb_gplane(b, p, d, vec3(u.x * 0.669131, u.y * 0.669131, 0.743145), 0.669131 * gg)
|
|
b = mb_gplane(b, p, d, vec3(u.x * 0.438371, u.y * 0.438371, 0.898794), 0.438371 * (gg - 0.22) + 0.898794 * 0.198089)
|
|
// The pavilion steps.
|
|
b = mb_gplane(b, p, d, vec3(u.x * 0.819152, u.y * 0.819152, -0.573576), 0.819152 * gg)
|
|
b = mb_gplane(b, p, d, vec3(u.x * 0.707107, u.y * 0.707107, -0.707107), 0.707107 * (gg - 0.25) + 0.707107 * 0.357037)
|
|
b = mb_gplane(b, p, d, vec3(u.x * 0.573576, u.y * 0.573576, -0.819152), 0.573576 * (gg - 0.5) + 0.819152 * 0.607037)
|
|
return b
|
|
}
|
|
// The crown's height over a quarter point `w` for one direction: the lower
|
|
// of its two steps.
|
|
let mb_scrown = fn(best: vec4, w: vec2, u: vec2, gg: float) -> vec4 {
|
|
var b = best
|
|
let s = dot(w, u)
|
|
let z1 = (0.669131 * gg - 0.669131 * s) / 0.743145
|
|
b = mix(b, vec4(u.x * 0.669131, u.y * 0.669131, 0.743145, z1), step(z1, b.w))
|
|
let z2 = (0.438371 * (gg - 0.22) + 0.898794 * 0.198089 - 0.438371 * s) / 0.898794
|
|
return mix(b, vec4(u.x * 0.438371, u.y * 0.438371, 0.898794, z2), step(z2, b.w))
|
|
}
|
|
// Where a ray inside the step cut leaves it: the quarter taken where it is
|
|
// guessed to leave, refined (`passes` in all).
|
|
let mb_sexit = fn(p: vec3, d: vec3, g: vec2, gd: float, passes: float) -> vec4 {
|
|
let ud = vec2(0.707107, 0.707107)
|
|
var best = vec4(0.0, 0.0, 1.0, 1000.0)
|
|
var gq = p + d * 0.6
|
|
for i in 0..passes {
|
|
let s2 = vec2(step(0.0, gq.x) * 2.0 - 1.0, step(0.0, gq.y) * 2.0 - 1.0)
|
|
let pw = vec3(p.x * s2.x, p.y * s2.y, p.z)
|
|
let dw = vec3(d.x * s2.x, d.y * s2.y, d.z)
|
|
var loc = vec4(0.0, 0.0, 1.0, 1000.0)
|
|
loc = mb_gplane(loc, pw, dw, vec3(0.0, 0.0, 1.0), 0.285881)
|
|
loc = mb_sdir(loc, pw, dw, vec2(1.0, 0.0), g.x)
|
|
loc = mb_sdir(loc, pw, dw, vec2(0.0, 1.0), g.y)
|
|
loc = mb_sdir(loc, pw, dw, ud, gd)
|
|
best = mix(best, vec4(loc.x * s2.x, loc.y * s2.y, loc.z, loc.w), step(loc.w, best.w))
|
|
gq = p + d * best.w
|
|
}
|
|
return best
|
|
}
|
|
let mb_gstep = fn(q: vec2, hh: vec2, ink: vec3, nb: float, veil: float, dens: float) -> vec3 {
|
|
// Outside its box there is no stone: nothing is traced there.
|
|
var stone = vec3(0.5, 0.5, 0.5)
|
|
if abs(q.x) < hh.x + 1.0 && abs(q.y) < hh.y + 1.0 {
|
|
let sc = max(min(hh.x, hh.y), 0.5)
|
|
let g = hh / sc
|
|
let cc = 0.12
|
|
let gd = (g.x + g.y - cc) * 0.707107
|
|
let ud = vec2(0.707107, 0.707107)
|
|
let x = q / sc
|
|
// The crown hit, in the quarter.
|
|
let sg = vec2(step(0.0, x.x) * 2.0 - 1.0, step(0.0, x.y) * 2.0 - 1.0)
|
|
let w = abs(x)
|
|
var cr = vec4(0.0, 0.0, 1.0, 0.285881)
|
|
cr = mb_scrown(cr, w, vec2(1.0, 0.0), g.x)
|
|
cr = mb_scrown(cr, w, vec2(0.0, 1.0), g.y)
|
|
cr = mb_scrown(cr, w, ud, gd)
|
|
var p = vec3(x.x, x.y, cr.w)
|
|
let n = vec3(cr.x * sg.x, cr.y * sg.y, cr.z)
|
|
let eye = vec3(0.08 * g.x, -0.15, 3.0 + g.x)
|
|
var d = normalize(p - eye)
|
|
let f0 = 0.172395
|
|
let fi = (f0 + (1.0 - f0) * pow(1.0 - clamp(-dot(d, n), 0.0, 1.0), 5.0)) * 0.4
|
|
var col = vec3(1.0, 1.0, 1.0) * (fi * mb_genv(mb_grefl(d, n), 0.0, 0.0))
|
|
var thr = vec3(1.0, 1.0, 1.0) * (1.0 - fi)
|
|
d = mb_grefr(d, n, 1.0 / 2.419).xyz
|
|
let absorb = mb_gabsorb(ink) * dens
|
|
for b in 0..nb {
|
|
let best = mb_sexit(p, d, g, gd, 2.0)
|
|
let tw = clamp(best.w, 0.0, 4.0)
|
|
p = p + d * tw
|
|
thr = thr * exp(-absorb * tw)
|
|
let nh = best.xyz
|
|
let fe = f0 + (1.0 - f0) * pow(1.0 - clamp(dot(d, nh), 0.0, 1.0), 5.0)
|
|
let rr = mb_grefr(d, -nh, 2.414)
|
|
let rg = mb_grefr(d, -nh, 2.419)
|
|
let rb = mb_grefr(d, -nh, 2.425)
|
|
let lit = vec3(mb_genv(normalize(rr.xyz + vec3(0.0, 0.0, 0.00001)), 0.0, 0.0) * rr.w, mb_genv(normalize(rg.xyz + vec3(0.0, 0.0, 0.00001)), 0.0, 0.0) * rg.w, mb_genv(normalize(rb.xyz + vec3(0.0, 0.0, 0.00001)), 0.0, 0.0) * rb.w)
|
|
col = col + thr * (1.0 - fe) * lit
|
|
thr = thr * mix(1.0, fe, rg.w)
|
|
d = mb_grefl(d, nh)
|
|
}
|
|
col = col + thr * 0.6
|
|
let lit_out = vec3(1.0, 1.0, 1.0) - exp(-col * 1.35)
|
|
// Over the table a veil of the stone's deep colour, `veil` strong, so
|
|
// words laid on it read; the steps round it keep their sparkle.
|
|
let mx = max(max(ink.x, ink.y), max(ink.z, 0.02))
|
|
let deep = ink / mx * 0.40 * min(mx * 1.6, 1.0) + vec3(0.02, 0.02, 0.02)
|
|
stone = mix(lit_out, deep, veil * step(0.999, n.z))
|
|
}
|
|
return stone
|
|
}
|
|
|
|
// A tiny pavé diamond, radius `rad`, `q` from its centre, `h` its chance
|
|
// (a few of them catch the light and sparkle). Premultiplied.
|
|
let mb_pave = fn(q: vec2, rad: float, h: float, px: float) -> vec4 {
|
|
let t = length(q) / max(rad, 0.1)
|
|
let ang = atan2(q.y, q.x)
|
|
let sec = step(0.5, fract(ang / (PI / 4.0) + h * 3.0))
|
|
var col = mix(vec3(0.985, 0.985, 0.99), vec3(0.66, 0.67, 0.71), smoothstep(0.4, 1.0, t))
|
|
col = col * (0.88 + 0.16 * sec)
|
|
let sq = q / max(rad, 0.1) + vec2(0.28, 0.34)
|
|
col = mix(col, vec3(1.0, 1.0, 1.0), exp(-dot(sq, sq) / 0.08) * 0.9)
|
|
col = mix(col, vec3(0.42, 0.34, 0.20), Finish.band(length(q) - rad, 0.0, max(px * 0.7, 0.10 * rad), px) * 0.45)
|
|
let a = Finish.cover(length(q) - rad, px)
|
|
var res = vec4(min(col, vec3(1.0, 1.0, 1.0)) * a, a)
|
|
if h > 0.86 {
|
|
let gl = mb_glint(q + vec2(0.2, 0.25) * rad, rad * 2.6, px) * 0.85
|
|
res = Finish.over(res, vec4(gl, gl, gl, gl))
|
|
}
|
|
return res
|
|
}
|
|
|
|
// MILGRAIN: a line of tiny bright beads `at` points inside the outline of a
|
|
// rounded box, `pitch` apart, the jeweller's pavé edge of a frame. Over the
|
|
// colour `col` already worked out there.
|
|
let mb_milgrain = fn(col: vec3, p: vec2, c: vec2, h: vec2, r: float, at: float, rad: float, pitch: float, px: float) -> vec3 {
|
|
let d = Material.sd_box(p, c, h, r) + at
|
|
let n = mb_normal(p, c, h, r)
|
|
var s = p.x
|
|
if abs(n.x) > abs(n.y) {
|
|
s = p.y
|
|
}
|
|
let t = (fract(s / pitch) - 0.5) * pitch
|
|
let bd = length(vec2(t, d)) - rad
|
|
let a = Finish.cover(bd, px)
|
|
let k = clamp((t * 0.6 - d * 0.8) / max(rad, 0.1), -1.0, 1.0)
|
|
let bc = mix(vec3(0.60, 0.58, 0.55), vec3(1.0, 0.995, 0.985), k * 0.5 + 0.5)
|
|
return mix(col, mix(bc, vec3(0.42, 0.33, 0.16), Finish.band(bd, 0.0, px * 0.6, px) * 0.4), a)
|
|
}
|
|
|
|
// A row of pavé diamonds along x from `x0` to `x1` on the line `cy`, `pitch`
|
|
// apart, in a gold seat. Premultiplied, over `dst`.
|
|
let mb_pave_row = fn(dst: vec4, p: vec2, x0: float, x1: float, cy: float, rad: float, pitch: float, px: float) -> vec4 {
|
|
let cell = floor((p.x - x0) / pitch)
|
|
let cx = x0 + (cell + 0.5) * pitch
|
|
let inside = step(x0, cx - rad * 0.5) * step(cx + rad * 0.5, x1)
|
|
let h = Finish.hash(vec2(cell, 5.3))
|
|
return Finish.over(dst, mb_pave(p - vec2(cx, cy), rad, h, px) * inside)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- light
|
|
|
|
// LIGHT is added, never painted: screened over what is there (what lies
|
|
// under a point taken as this face over the stone) and rolled off as
|
|
// 1 - e^-light, so it brightens and never clips or darkens.
|
|
let mb_lit = fn(res: vec4, light: vec3) -> vec4 {
|
|
let est = res.rgb + mb_ground() * (1.0 - res.a)
|
|
let add = (vec3(1.0, 1.0, 1.0) - exp(-light)) * max(vec3(1.0, 1.0, 1.0) - est, vec3(0.0, 0.0, 0.0))
|
|
return vec4(res.rgb + add, res.a)
|
|
}
|
|
|
|
// LAMPS: an LED as a gem in a gold setting. The emitter is the light: at
|
|
// full current its middle burns toward white and its rim is its most
|
|
// saturated colour; at lower current the middle is no longer white, the
|
|
// colour deeper, the glow smaller; out, it is dark tinted glass, its colour
|
|
// barely there, with a catch light on its lower rim. Its lens is faintly
|
|
// faceted, a cut stone. Round it a polished gold bezel (a round bead lit
|
|
// from the top), or a socket cut into what is under it. Over the lens one
|
|
// crisp highlight of a dome. Its light is added, never painted: a tight hot
|
|
// halo and a short bloom in its own hue, gone in about two radii; on a pale
|
|
// ground, where light can barely brighten, its hue is laid round it as a
|
|
// tint that keeps the ground's luminance (at most 0.45 one device pixel
|
|
// out, halving every 0.4 of its reach, gone at the reach). A bar is the
|
|
// same light drawn out into a light pipe.
|
|
let mb_lamp_add = fn(res: vec4, light: vec3, ground: vec3) -> vec4 {
|
|
let est = res.rgb + ground * (1.0 - res.a)
|
|
let add = (vec3(1.0, 1.0, 1.0) - exp(-light)) * max(vec3(1.0, 1.0, 1.0) - est, vec3(0.0, 0.0, 0.0))
|
|
return vec4(res.rgb + add, res.a)
|
|
}
|
|
let mb_lamp_full = fn(ink: vec3) -> vec3 {
|
|
return ink / max(max(ink.x, max(ink.y, ink.z)), 0.01)
|
|
}
|
|
let mb_lamp_hue = fn(ink: vec3, vivid: float) -> vec3 {
|
|
let f = mb_lamp_full(ink)
|
|
let mn = min(f.x, min(f.y, f.z))
|
|
let ch = 1.0 - mn
|
|
let pure = (f - vec3(mn, mn, mn)) / max(ch, 0.001)
|
|
return mix(f, pure, clamp(vivid, 0.0, 1.0) * 0.72 * smoothstep(0.03, 0.12, ch))
|
|
}
|
|
// The lamp: its lens a rounded box `hb` either side of `c`, `lit` its
|
|
// current 0..1, `ink` its colour, `ground` what shows through, `room` how
|
|
// far its light may reach, `raised` its setting (0 a socket cut in what is
|
|
// under it; 1 a gold bezel). Premultiplied over `dst`.
|
|
let mb_lamp = fn(dst: vec4, p: vec2, c: vec2, hb: vec2, lit: float, ink: vec3, vivid: float, px: float, ground: vec3, room: float, raised: float) -> vec4 {
|
|
let rt = max(min(hb.x, hb.y), 0.4)
|
|
let d = Material.sd_box(p, c, hb, rt)
|
|
let bw = clamp(0.32 * rt, 0.7, 2.4)
|
|
let ds = d - bw
|
|
let L = clamp(lit, 0.0, 1.0)
|
|
let b = mb_lamp_full(ink)
|
|
let hue = mb_lamp_hue(ink, vivid)
|
|
let pw = L * sqrt(L)
|
|
let white = vec3(1.0, 1.0, 1.0)
|
|
let lum = vec3(0.2126, 0.7152, 0.0722)
|
|
let pale = smoothstep(0.35, 0.75, dot(ground, lum))
|
|
var res = dst
|
|
let x = max(ds, 0.0)
|
|
let reach = max(room, 1.0)
|
|
let win = 1.0 - smoothstep(0.55 * reach, reach, x)
|
|
let ex = max(hb.x - hb.y, 0.0)
|
|
let ey = max(hb.y - hb.x, 0.0)
|
|
let qx = p.x - c.x
|
|
let qy = p.y - c.y
|
|
let q = vec2(qx - clamp(qx, 0.0 - ex, ex), qy - clamp(qy, 0.0 - ey, ey)) / rt
|
|
let t = clamp(length(q), 0.0, 1.0)
|
|
let nrm = q / max(length(q), 0.001)
|
|
// What the setting throws on the ground: a soft shadow, down.
|
|
let shd = Finish.drop(p, c, hb + vec2(bw, bw), rt + bw, vec2(0.0, 0.2 * rt + 0.3), 0.28 * rt + px) * mix(0.16, 0.30, raised) * (1.0 - 0.6 * pw)
|
|
res = Finish.over(res, vec4(mb_shade() * shd, shd))
|
|
if L > 0.001 && pale > 0.001 {
|
|
let h = clamp(0.42 * pw * pow(2.0, -x / max(0.4 * reach, 0.5)) * win, 0.0, 0.45) * pale
|
|
let est = res.rgb + ground * (1.0 - res.a)
|
|
let w = clamp(dot(hue, lum) / max(dot(est, lum), 0.001), 0.0, 1.0)
|
|
res = Finish.over(res, vec4(hue * h * w, h * w))
|
|
}
|
|
// The setting: a polished gold bead round the lens, or a socket cut into
|
|
// what is under it, its upper wall in shadow and a catch light on its
|
|
// lower rim.
|
|
let a_s = Finish.cover(ds, px)
|
|
let u = clamp(1.0 - d / max(bw, 0.01), 0.0, 1.0)
|
|
let gold = mb_gold(mb_bead(u, nrm))
|
|
let under = res.rgb / max(res.a, 0.001) * step(0.001, res.a) + ground * (1.0 - step(0.001, res.a))
|
|
let gy = clamp(nrm.y * t, -1.0, 1.0)
|
|
var sc = under * mix(0.55, 0.92, smoothstep(-0.9, 0.9, gy))
|
|
sc = mix(sc, min(under * 1.06 + vec3(0.28, 0.28, 0.28), white), Finish.band(ds, 0.0, max(px, 0.45), px) * smoothstep(0.2, 0.95, nrm.y) * 0.85)
|
|
sc = mix(sc, gold, clamp(raised, 0.0, 1.0))
|
|
sc = mix(sc, sc * 0.55, Finish.band(d, -px, 0.0, px) * 0.8)
|
|
res = Finish.over(res, vec4(sc * a_s, a_s))
|
|
// The light: a tight hot halo and a short bloom in its hue, falling on
|
|
// the setting too.
|
|
if L > 0.001 {
|
|
let xl = max(d, 0.0)
|
|
let halo = exp(-xl / max(0.30 * rt, 0.4)) * 1.5 + exp(-xl / max(0.65 * rt, 0.7)) * 0.32
|
|
let hwin = 1.0 - smoothstep(1.1 * rt, 2.0 * rt + 1.0, xl)
|
|
res = mb_lamp_add(res, mix(hue, white, 0.15 * pw) * halo * pw * hwin * win, ground)
|
|
}
|
|
// THE STONE: a glossy dome of coloured glass, faintly faceted. Its
|
|
// colour deepens toward the top; light pools low inside; lit, its
|
|
// middle burns toward white at full current and its rim is its most
|
|
// saturated colour.
|
|
let top = smoothstep(-1.0, 0.6, q.y)
|
|
let pool = exp(-(q.y - 0.55) * (q.y - 0.55) / 0.09 - q.x * q.x / 0.30)
|
|
let fac = Finish.hash(vec2(floor((atan2(q.y, q.x) + PI) / (PI / 4.0)), floor(t * 2.2) + 3.0))
|
|
var on = mix(hue * mix(0.55, 0.8, L), mix(b, hue, 0.5), top)
|
|
on = on * (0.86 + 0.28 * fac * smoothstep(0.3, 0.6, t))
|
|
on = mix(on, min(mix(b, hue, 0.4) + vec3(0.35, 0.35, 0.35), white), pool * 0.5)
|
|
on = mix(on, vec3(1.0, 0.995, 0.985), exp(-t * t / 0.26) * smoothstep(0.5, 1.0, L) * 0.95)
|
|
on = mix(on, hue * (0.82 + 0.18 * L), smoothstep(0.62, 1.0, t))
|
|
on = on * (0.42 + 0.58 * L)
|
|
// Out: dark tinted glass, its colour barely there, the same facets, a
|
|
// catch light along its lower rim.
|
|
let offc = mix(vec3(0.075, 0.068, 0.060), b * 0.40, 0.16)
|
|
var off = mix(offc * 0.62, offc * 1.15, top) * (0.85 + 0.35 * fac * smoothstep(0.3, 0.6, t))
|
|
off = mix(off, min(offc + vec3(0.18, 0.18, 0.18), white), pool * 0.35)
|
|
let catchl = smoothstep(0.62, 0.9, t) * (1.0 - smoothstep(0.9, 1.0, t)) * smoothstep(0.2, 0.9, nrm.y)
|
|
off = off + vec3(0.30, 0.28, 0.26) * catchl
|
|
var col = mix(off, min(on, white), smoothstep(0.0, 0.35, L))
|
|
let e = length(vec2(q.x / 0.62, (q.y + 0.46) / 0.30))
|
|
let spec = (1.0 - smoothstep(0.55, 1.0, e)) * mix(1.0, 0.3, clamp((q.y + 0.76) / 0.6, 0.0, 1.0))
|
|
col = mix(col, white, spec * mix(0.8, 0.55, L) * smoothstep(0.9, 2.2, rt))
|
|
col = min(col, white)
|
|
let a_l = Finish.cover(d, px)
|
|
return Finish.over(res, vec4(col * a_l, a_l))
|
|
}
|
|
let mb_led = fn(dst: vec4, p: vec2, c: vec2, rd: float, lit: float, ink: vec3, px: float) -> vec4 {
|
|
return mb_lamp(dst, p, c, vec2(rd, rd), lit, ink, 0.6, px, mb_ground(), 3.0 * rd + 2.5, 1.0)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- shadows
|
|
|
|
// What a piece of jewellery standing on the stone throws: a soft warm
|
|
// shadow falling a little down, drawn in a point from the sides, half gone
|
|
// two points under the foot and gone by five (within half of the eight
|
|
// point gap to a neighbour), and a close contact shadow. Held, the piece
|
|
// sits down and most of it goes. Returns the coverage.
|
|
let mb_shadow = fn(p: vec2, c: vec2, h: vec2, r: float, px: float, hover: float, down: float, dis: float) -> float {
|
|
let sink = 1.0 - 0.7 * down
|
|
let hs = vec2(max(h.x - 1.0, 0.5), h.y)
|
|
let amb = Finish.drop(p, c, hs, min(r, min(hs.x, hs.y)), vec2(0.0, (1.3 + 0.3 * hover) * sink), 1.1 + 0.2 * hover + px * 0.5) * (0.30 + 0.05 * hover) * sink * (1.0 - 0.8 * dis)
|
|
let con = Finish.drop(p, c, h, r, vec2(0.0, 0.45 + px * 0.5), 0.45 + px * 0.5) * mix(0.30, 0.15, down) * (1.0 - 0.6 * dis)
|
|
return 1.0 - (1.0 - amb) * (1.0 - con)
|
|
}
|
|
|
|
// The warm gold light the focus frame spills outward: a tint one device
|
|
// pixel out, gone within 2.5 points. Premultiplied, laid under the face.
|
|
let mb_leak = fn(d: float, a: float) -> vec4 {
|
|
let s = 1.1
|
|
let g = 0.55 * exp(-(max(d, 0.0) * max(d, 0.0)) / (2.0 * s * s)) * (1.0 - a)
|
|
return vec4(vec3(0.95, 0.74, 0.30) * g, g)
|
|
}
|
|
// Focus over a gold rim: the rim burns brighter, toward the white-gold.
|
|
let mb_focus_rim = fn(col: vec3, d: float, w: float, px: float, fo: float) -> vec3 {
|
|
if fo < 0.001 {
|
|
return col
|
|
}
|
|
let band = Finish.band(d, 0.0, w, px)
|
|
return mix(col, min(col * 1.25 + vec3(0.10, 0.08, 0.02), vec3(1.0, 0.97, 0.86)), band * fo * 0.8)
|
|
}
|
|
|
|
// A JEWEL BOX: the shape every raised control is cut from: a face set in a
|
|
// polished gold rim `rw` wide, sunk a little under the rim (a soft shade
|
|
// under its upper edge and a dark device pixel where face meets gold), the
|
|
// whole throwing its shadow on the stone. `face` is the colour the caller
|
|
// worked out for the face at this point. Held, the box sits half a point
|
|
// lower. Premultiplied, over the shadow and focus spill it lays first.
|
|
// The same box; `dbl` 1 gives it the double rim.
|
|
let mb_box2 = fn(p: vec2, lo: vec2, hi: vec2, r: float, rw: float, px: float, face: vec3, hover: float, down: float, dis: float, focus: float, lift: float, dbl: float) -> vec4 {
|
|
let live = 1.0 - dis
|
|
let sink = 0.8 * down * live
|
|
let c0 = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let c = c0 + vec2(0.0, sink)
|
|
let sc = mb_shadow(p, c0, h, r, px, hover, down, dis) * lift
|
|
var res = vec4(mb_shade() * sc, sc)
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let a = Finish.cover(d, px)
|
|
let fo = focus * live
|
|
if fo > 0.001 {
|
|
res = Finish.over(res, mb_leak(d, a) * fo)
|
|
}
|
|
let n = mb_normal(p, c, h, r)
|
|
var col = face
|
|
let hi_in = h - vec2(rw, rw)
|
|
let ri = max(r - rw, 0.0)
|
|
let insh = Finish.inset(p, c, hi_in, ri, vec2(0.0, 1.0), 1.2)
|
|
col = mix(col, col * 0.80, clamp(insh, 0.0, 1.0) * (0.45 + 0.35 * down * live) * Finish.cover(d + rw, px))
|
|
col = mix(col, vec3(0.30, 0.21, 0.07), Finish.band(d, rw, rw + px, px) * 0.55)
|
|
let rim = Finish.band(d, 0.0, rw, px)
|
|
var gold = mix(mb_rim(d, rw, n, p), mb_rim2(d, rw, n, p, px), dbl)
|
|
gold = mix(gold, mix(vec3(0.80, 0.77, 0.70), gold, 0.35), 0.6 * dis)
|
|
col = mix(col, gold, rim)
|
|
col = mb_focus_rim(col, d, rw, px, fo)
|
|
return Finish.over(res, vec4(col * a, a))
|
|
}
|
|
|
|
// The jewel box with the single rim.
|
|
let mb_box = fn(p: vec2, lo: vec2, hi: vec2, r: float, rw: float, px: float, face: vec3, hover: float, down: float, dis: float, focus: float, lift: float) -> vec4 {
|
|
return mb_box2(p, lo, hi, r, rw, px, face, hover, down, dis, focus, lift, 0.0)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- buttons
|
|
|
|
// Every button is a jewel box: 26 points on a 12 point line, 12 points
|
|
// either side, a 3.5 point corner, its gold rim about four points wide. Its shadow and its light fall outside
|
|
// the box.
|
|
mod.widgets.ButtonFlat.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ButtonFlat.min_height = 26.0
|
|
mod.widgets.ButtonFlat.icon_walk.width = 14.0
|
|
mod.widgets.ButtonIcon.padding = mod.turtle.Inset{left: 6.0 right: 6.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ButtonFlatIcon.padding = mod.turtle.Inset{left: 6.0 right: 6.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ButtonFlatterIcon.padding = mod.turtle.Inset{left: 6.0 right: 6.0 top: 4.0 bottom: 4.0}
|
|
// The size rungs keep heights of their own.
|
|
mod.widgets.ButtonXs.min_height = 18.0
|
|
mod.widgets.ButtonSm.min_height = 22.0
|
|
mod.widgets.ButtonLg.min_height = 30.0
|
|
mod.widgets.ButtonXl.min_height = 34.0
|
|
mod.widgets.ButtonFlat.draw_bg.border_radius = uniform(3.5)
|
|
mod.widgets.ButtonFlat.draw_bg.border_size = uniform(0.34)
|
|
mod.widgets.ButtonFlat.clip_x = false
|
|
mod.widgets.ButtonFlat.clip_y = false
|
|
mod.widgets.ButtonFlat.draw_bg.vertex = fn() {
|
|
let m = 12.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
|
|
// The button and its variants share one face; `kind` picks it: 0 a bar of
|
|
// polished gold (the plain, small and large buttons), 1 white marble in a
|
|
// gold rim (the default button), 2 an emerald baguette (primary), 3 a
|
|
// champagne quartz (secondary), 4 a smoky quartz (tertiary), 5 a ruby
|
|
// (danger), 6 an outline of gold wire, 7 no face (a gold wash under the
|
|
// hand). A cut stone catches a star glint at its upper right corner,
|
|
// brighter under the hand.
|
|
// A JEWEL BUTTON'S STONE (kinds 2 to 5) at this pixel, traced in the face
|
|
// the button below lays out: an emerald, a champagne or a smoky quartz, or a
|
|
// ruby, step cut. A quartz is a pale stone: it absorbs far less along its
|
|
// path than an emerald or a ruby. Only the jewel variants call it, so the
|
|
// plain buttons' shaders carry no tracer.
|
|
let mb_button_gem = fn(pos: vec2, size: vec2, o: vec2, dpi: float, down: float, dis: float, kind: float) -> vec3 {
|
|
let m = 12.0
|
|
let px = mb_px(dpi)
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(size.x, o.x, px), mb_snap(size.y, o.y, px))
|
|
let cf = (lo + hi) * 0.5 + vec2(0.0, 0.8 * down * (1.0 - dis))
|
|
let rw = clamp(0.15 * (hi.y - lo.y), 2.6, 4.6)
|
|
var gem = mb_emerald()
|
|
var dens = 1.0
|
|
if kind > 2.5 && kind < 3.5 {
|
|
gem = mb_champagne()
|
|
dens = 0.2
|
|
}
|
|
if kind > 3.5 && kind < 4.5 {
|
|
gem = mb_smoky()
|
|
dens = 0.25
|
|
}
|
|
if kind > 4.5 {
|
|
gem = mb_ruby()
|
|
}
|
|
return mb_gstep(p - cf, (hi - lo) * 0.5 - vec2(rw, rw), gem, 3.0, 0.55, dens)
|
|
}
|
|
|
|
// `gem` is the jewel's stone from the function above (ignored by the
|
|
// other kinds).
|
|
let mb_button = fn(pos: vec2, size: vec2, o: vec2, dpi: float, hover: float, down: float, dis: float, focus: float, loading: float, anim: float, kind: float, dash: float, gem: vec3) -> vec4 {
|
|
let m = 12.0
|
|
let px = mb_px(dpi)
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(size.x, o.x, px), mb_snap(size.y, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let hh = hi.y - lo.y
|
|
let r = min(3.5, min(h.x, h.y))
|
|
let live = 1.0 - dis
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
var ink = mb_ink()
|
|
if kind > 5.5 {
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let a = Finish.cover(d, px)
|
|
let n = mb_normal(p, c, h, r)
|
|
if focus * live > 0.001 {
|
|
res = Finish.over(res, mb_leak(d, a) * focus * live)
|
|
}
|
|
// Under the hand a faint white wash on the stone, held a faint gold one.
|
|
let wash = 0.45 * hover * (1.0 - down) * live * a
|
|
res = Finish.over(res, vec4(vec3(1.0, 1.0, 1.0) * wash * 0.6, wash * 0.6))
|
|
let press = 0.14 * down * live * a
|
|
res = Finish.over(res, vec4(vec3(0.72, 0.59, 0.31) * press, press))
|
|
if kind < 6.5 {
|
|
// The outline: a round gold wire, its contact shadow under it.
|
|
let rw = 2.4
|
|
var ring = Finish.band(d, 0.0, rw, px)
|
|
if dash > 0.0 {
|
|
ring = ring * step(0.5, fract((p.x + p.y) / (dash * 2.0)))
|
|
}
|
|
let sh = Finish.drop(p, c, h, r, vec2(0.0, 0.6), 0.6) * (1.0 - Finish.cover(d + rw, px)) * 0.25 * live
|
|
res = Finish.over(res, vec4(mb_shade() * sh, sh))
|
|
var gold = mb_rim(d, rw, n, p)
|
|
gold = mix(gold, vec3(0.80, 0.77, 0.70), 0.55 * dis)
|
|
gold = mb_focus_rim(gold, d, rw, px, focus * live)
|
|
res = Finish.over(res, vec4(gold * ring, ring))
|
|
}
|
|
} else {
|
|
let sink = 0.8 * down * live
|
|
let cf = c + vec2(0.0, sink)
|
|
let rw = clamp(0.15 * hh, 2.6, 4.6)
|
|
let hf = h - vec2(rw, rw)
|
|
let rf = max(r - rw, 0.5)
|
|
let df = Material.sd_box(p, cf, hf, rf)
|
|
let nf = mb_normal(p, cf, hf, rf)
|
|
var face = vec3(0.0, 0.0, 0.0)
|
|
if kind < 0.5 {
|
|
face = mb_goldface(p, cf, hf, df, nf, 2.2)
|
|
ink = vec3(0.20, 0.14, 0.04)
|
|
} else if kind < 1.5 {
|
|
let t = clamp((p.y - lo.y) / max(hh, 1.0), 0.0, 1.0)
|
|
face = mb_stone(p + mb_seed(size), px, 0.55)
|
|
face = face * (1.015 - 0.045 * t)
|
|
face = mb_milgrain(face, p, cf, h, r, rw + 1.0, 0.6, 1.9, px)
|
|
} else {
|
|
face = gem
|
|
ink = vec3(1.0, 0.98, 0.94)
|
|
}
|
|
face = face * (1.0 + 0.05 * hover * live - 0.11 * down * live)
|
|
let fl = dot(face, vec3(0.3, 0.5, 0.2))
|
|
face = mix(face, mix(mb_ground(), vec3(fl, fl, fl), 0.3), 0.6 * dis)
|
|
res = mb_box(p, lo, hi, r, rw, px, face, hover, down, dis, focus, 1.0)
|
|
if kind > 1.5 && dis < 0.5 {
|
|
let gq = p - vec2(hi.x - rw - 4.5, lo.y + rw + 3.2 + sink)
|
|
let g = mb_glint(gq, 5.0 + 1.5 * hover, px) * (0.5 + 0.5 * hover) * Finish.cover(df, px)
|
|
res = Finish.over(res, vec4(g, g, g, g))
|
|
}
|
|
}
|
|
if loading > 0.001 {
|
|
let rad = max(min(h.x, h.y) - 5.5, 2.0)
|
|
let sdf = Sdf2d.viewport(p)
|
|
let a0 = anim * 2.0 * PI
|
|
sdf.arc_round_caps(c.x, c.y, rad, a0, a0 + 1.5 * PI, 1.5)
|
|
sdf.fill(vec4(ink, loading))
|
|
res = Finish.over(res, sdf.result)
|
|
}
|
|
return res * mb_fade(pos, size, m)
|
|
}
|
|
|
|
mod.widgets.ButtonFlat.draw_bg.pixel = fn() {
|
|
return self.host_over(mb_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 0.0, 0.0, vec3(0.0, 0.0, 0.0)), 12.0)
|
|
}
|
|
mod.widgets.Button.draw_bg.pixel = fn() {
|
|
return self.host_over(mb_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 1.0, 0.0, vec3(0.0, 0.0, 0.0)), 12.0)
|
|
}
|
|
mod.widgets.ButtonPrimary.draw_bg.pixel = fn() {
|
|
let gem = mb_button_gem(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.down, self.disabled, 2.0)
|
|
return self.host_over(mb_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 2.0, 0.0, gem), 12.0)
|
|
}
|
|
mod.widgets.ButtonSecondary.draw_bg.pixel = fn() {
|
|
let gem = mb_button_gem(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.down, self.disabled, 3.0)
|
|
return self.host_over(mb_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 3.0, 0.0, gem), 12.0)
|
|
}
|
|
mod.widgets.ButtonTertiary.draw_bg.pixel = fn() {
|
|
let gem = mb_button_gem(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.down, self.disabled, 4.0)
|
|
return self.host_over(mb_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 4.0, 0.0, gem), 12.0)
|
|
}
|
|
mod.widgets.ButtonDanger.draw_bg.pixel = fn() {
|
|
let gem = mb_button_gem(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.down, self.disabled, 5.0)
|
|
return self.host_over(mb_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 5.0, 0.0, gem), 12.0)
|
|
}
|
|
mod.widgets.ButtonOutline.draw_bg.pixel = fn() {
|
|
return self.host_over(mb_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 6.0, self.border_dash, vec3(0.0, 0.0, 0.0)), 12.0)
|
|
}
|
|
mod.widgets.ButtonFlatter.draw_bg.pixel = fn() {
|
|
return self.host_over(mb_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 7.0, 0.0, vec3(0.0, 0.0, 0.0)), 12.0)
|
|
}
|
|
|
|
// The legends are set in the sheet's serif (the theme's bold face).
|
|
mod.widgets.ButtonFlat.draw_text.text_style = mod.theme.font_bold{font_size: 9.5}
|
|
mod.widgets.Button.draw_text.text_style = mod.theme.font_bold{font_size: 9.5}
|
|
mod.widgets.ButtonPrimary.draw_text.text_style = mod.theme.font_bold{font_size: 9.5}
|
|
mod.widgets.ButtonSecondary.draw_text.text_style = mod.theme.font_bold{font_size: 9.5}
|
|
mod.widgets.ButtonTertiary.draw_text.text_style = mod.theme.font_bold{font_size: 9.5}
|
|
mod.widgets.ButtonDanger.draw_text.text_style = mod.theme.font_bold{font_size: 9.5}
|
|
mod.widgets.ButtonOutline.draw_text.text_style = mod.theme.font_bold{font_size: 9.5}
|
|
mod.widgets.ButtonFlatter.draw_text.text_style = mod.theme.font_bold{font_size: 9.5}
|
|
mod.widgets.ButtonSm.draw_text.text_style = mod.theme.font_bold{font_size: 8.5}
|
|
mod.widgets.ButtonLg.draw_text.text_style = mod.theme.font_bold{font_size: 11.0}
|
|
mod.widgets.ButtonXs.draw_text.text_style = mod.theme.font_bold{font_size: 7.5}
|
|
mod.widgets.ButtonXl.draw_text.text_style = mod.theme.font_bold{font_size: 12.5}
|
|
|
|
// Label ink: a dark brown on the gold bars (7:1 on the body) and on the
|
|
// white stone, a warm white on the cut stones.
|
|
mod.widgets.ButtonFlat.draw_text.color = #33230a
|
|
mod.widgets.ButtonFlat.draw_text.color_hover = #26190a
|
|
mod.widgets.ButtonFlat.draw_text.color_down = #26190a
|
|
mod.widgets.ButtonFlat.draw_text.color_focus = #33230a
|
|
mod.widgets.ButtonFlat.draw_text.color_disabled = #a89c86
|
|
mod.widgets.ButtonFlat.draw_icon.color = #33230a
|
|
mod.widgets.Button.draw_text.color = #3a2e1c
|
|
mod.widgets.Button.draw_text.color_hover = #2a2112
|
|
mod.widgets.Button.draw_text.color_down = #2a2112
|
|
mod.widgets.Button.draw_text.color_focus = #3a2e1c
|
|
mod.widgets.Button.draw_text.color_disabled = #a89c86
|
|
mod.widgets.ButtonPrimary.draw_text.color = #fffaf0
|
|
mod.widgets.ButtonPrimary.draw_text.color_hover = #ffffff
|
|
mod.widgets.ButtonPrimary.draw_text.color_down = #f2ece0
|
|
mod.widgets.ButtonPrimary.draw_text.color_focus = #fffaf0
|
|
mod.widgets.ButtonPrimary.draw_text.color_disabled = #f2efe8
|
|
mod.widgets.ButtonPrimary.draw_icon.color = #fffaf0
|
|
mod.widgets.ButtonSecondary.draw_text.color = #fffaf0
|
|
mod.widgets.ButtonSecondary.draw_text.color_hover = #ffffff
|
|
mod.widgets.ButtonSecondary.draw_text.color_down = #f2ece0
|
|
mod.widgets.ButtonSecondary.draw_text.color_focus = #fffaf0
|
|
mod.widgets.ButtonSecondary.draw_text.color_disabled = #f2efe8
|
|
mod.widgets.ButtonSecondary.draw_icon.color = #fffaf0
|
|
mod.widgets.ButtonTertiary.draw_text.color = #fffaf0
|
|
mod.widgets.ButtonTertiary.draw_text.color_hover = #ffffff
|
|
mod.widgets.ButtonTertiary.draw_text.color_down = #f2ece0
|
|
mod.widgets.ButtonTertiary.draw_text.color_focus = #fffaf0
|
|
mod.widgets.ButtonTertiary.draw_icon.color = #fffaf0
|
|
mod.widgets.ButtonDanger.draw_text.color = #fffaf0
|
|
mod.widgets.ButtonDanger.draw_text.color_hover = #ffffff
|
|
mod.widgets.ButtonDanger.draw_text.color_down = #f2ece0
|
|
mod.widgets.ButtonDanger.draw_text.color_focus = #fffaf0
|
|
mod.widgets.ButtonDanger.draw_text.color_disabled = #f2efe8
|
|
mod.widgets.ButtonDanger.draw_icon.color = #fffaf0
|
|
mod.widgets.ButtonOutline.draw_text.color = #3a2e1c
|
|
mod.widgets.ButtonOutline.draw_text.color_hover = #2a2112
|
|
mod.widgets.ButtonOutline.draw_text.color_down = #2a2112
|
|
mod.widgets.ButtonOutline.draw_text.color_focus = #3a2e1c
|
|
mod.widgets.ButtonOutline.draw_text.color_disabled = #a89c86
|
|
mod.widgets.ButtonOutline.draw_icon.color = #6e521c
|
|
mod.widgets.ButtonFlatter.draw_text.color = #3a2e1c
|
|
mod.widgets.ButtonFlatter.draw_text.color_hover = #2a2112
|
|
mod.widgets.ButtonFlatter.draw_text.color_down = #2a2112
|
|
mod.widgets.ButtonFlatter.draw_text.color_focus = #3a2e1c
|
|
mod.widgets.ButtonFlatter.draw_text.color_disabled = #a89c86
|
|
mod.widgets.ButtonFlatter.draw_icon.color = #6e521c
|
|
// A compound button's second line: the second voice.
|
|
mod.widgets.ButtonFlat.draw_description.color = #33230a
|
|
mod.widgets.ButtonOutline.draw_description.color = #5c4a2e
|
|
mod.widgets.ButtonFlatter.draw_description.color = #5c4a2e
|
|
// A link is words on the stone: brown, turning emerald under the hand.
|
|
mod.widgets.LinkLabel.draw_text.color = #3a2e1c
|
|
mod.widgets.LinkLabel.draw_text.color_hover = #0d6a39
|
|
mod.widgets.LinkLabel.draw_text.color_down = #0b5028
|
|
mod.widgets.LinkLabel.draw_text.color_focus = #2a2112
|
|
mod.widgets.LinkLabel.draw_text.color_disabled = #a89c86
|
|
mod.widgets.CloseButton.draw_bg.cross_color = #5c4a2e
|
|
|
|
// ---------------------------------------------------------------- selection
|
|
|
|
// The small controls' quads grow by this much, for their shadow and their
|
|
// focus spill.
|
|
mod.widgets.CheckBoxFlat.draw_bg.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.CheckBoxFlat.clip_x = false
|
|
mod.widgets.CheckBoxFlat.clip_y = false
|
|
mod.widgets.CheckBoxFlat.padding = mod.turtle.Inset{left: 8.0 right: 8.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.CheckBoxFlat.draw_bg.size = uniform(15.0)
|
|
mod.widgets.CheckBoxFlat.draw_bg.border_radius = uniform(1.5)
|
|
mod.widgets.CheckBoxFlat.label_walk.margin.left = 14.0
|
|
|
|
// A gold mark (a check or a dash) in a warm white with a dark brown edge,
|
|
// so it reads on gold. `dk` its distance.
|
|
let mb_mark = fn(dst: vec4, dk: float, px: float, amt: float, dis: float) -> vec4 {
|
|
let ea = Finish.cover(dk - 0.55, px) * amt
|
|
var res = Finish.over(dst, vec4(vec3(0.24, 0.16, 0.04) * ea * 0.85, ea * 0.85))
|
|
let ma = Finish.cover(dk, px) * amt
|
|
let mc = mix(vec3(1.0, 0.975, 0.90), vec3(0.93, 0.91, 0.86), dis)
|
|
return Finish.over(res, vec4(mc * ma, ma))
|
|
}
|
|
|
|
// The check box: a 15 point gold tile with a 3 point corner, its rim a
|
|
// polished bead; empty, its middle is a satin gold sunk a little under the
|
|
// rim; set, the middle is polished and a warm white check stands on it (a
|
|
// dash when mixed).
|
|
mod.widgets.CheckBoxFlat.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let sz = self.size
|
|
let x0 = (self.rect_size.x - sz) * self.mark_at_end
|
|
let y0 = self.rect_size.y * 0.5 - sz * 0.5
|
|
let lo = vec2(mb_snap(x0, o.x, px), mb_snap(y0, o.y, px))
|
|
let hi = vec2(mb_snap(x0 + sz, o.x, px), mb_snap(y0 + sz, o.y, px))
|
|
let held = max(self.down, self.pressed)
|
|
let on = max(self.active, self.mixed)
|
|
let live = 1.0 - self.disabled
|
|
let sink = 0.5 * held * live
|
|
let c = (lo + hi) * 0.5 + vec2(0.0, sink)
|
|
let h = (hi - lo) * 0.5
|
|
let r = 3.0
|
|
let rw = 1.7
|
|
let hf = h - vec2(rw, rw)
|
|
let df = Material.sd_box(p, c, hf, r - rw * 0.5)
|
|
let nf = mb_normal(p, c, hf, r - rw * 0.5)
|
|
var face = mb_goldface(p, c, hf, df, nf, 1.4)
|
|
// Empty: satin, a step deeper; set: polished.
|
|
let satin = mb_gold(0.36 + 0.06 * (1.0 - smoothstep(-1.0, 1.0, (p.y - c.y) / max(hf.y, 1.0))))
|
|
face = mix(satin, face, on)
|
|
face = face * (1.0 + 0.06 * self.hover * live - 0.12 * held * live)
|
|
face = mix(face, vec3(0.82, 0.79, 0.72), 0.6 * self.disabled)
|
|
var res = mb_box(p, lo, hi, r, rw, px, face, self.hover, held, self.disabled, self.focus, 1.0)
|
|
// The error: the rim turns ruby.
|
|
let d = Material.sd_box(p, c, h, r)
|
|
res = Finish.over(res, vec4(0.70, 0.08, 0.15, 1.0) * Finish.band(d, 0.0, 1.2, px) * self.error * live)
|
|
let cm = c + vec2(0.0, 0.2)
|
|
let dm = min(mb_seg(p, vec2(cm.x - 3.4, cm.y + 0.1), vec2(cm.x - 1.1, cm.y + 2.5)), mb_seg(p, vec2(cm.x - 1.1, cm.y + 2.5), vec2(cm.x + 3.5, cm.y - 2.6)))
|
|
let dd = mb_seg(p, vec2(cm.x - 3.2, cm.y), vec2(cm.x + 3.2, cm.y))
|
|
let dk = mix(dm - 0.85, dd - 0.95, self.mixed)
|
|
res = mb_mark(res, dk, px, on, self.disabled)
|
|
return res * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// THE TOGGLE, the pictures' gold key in a gold frame: a 36 x 20 point frame
|
|
// with a 4 point corner, its floor a satin gold sunk under its rim, and in
|
|
// it a square key of polished gold standing up, at the left while off and
|
|
// at the right while on. On, the key carries a round brilliant diamond set
|
|
// in it, glinting; off, an engraved dash. The key follows a drag.
|
|
mod.widgets.ToggleFlat.draw_bg.size = uniform(20.0)
|
|
mod.widgets.ToggleFlat.draw_bg.pill_aspect = uniform(1.9)
|
|
mod.widgets.ToggleFlat.label_walk.margin.left = 38.0
|
|
let mb_toggle = fn(pos: vec2, size: vec2, o: vec2, dpi: float, th0: float, aspect: float, at_end: float, hover: float, held: float, dis: float, on: float, kt: float, focus: float, error: float) -> vec4 {
|
|
let m = 10.0
|
|
let px = mb_px(dpi)
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let tw = th0 * aspect
|
|
let th = th0
|
|
let x0 = (size.x - tw) * at_end
|
|
let y0 = size.y * 0.5 - th * 0.5
|
|
let lo = vec2(mb_snap(x0, o.x, px), mb_snap(y0, o.y, px))
|
|
let hi = vec2(mb_snap(x0 + tw, o.x, px), mb_snap(y0 + th, o.y, px))
|
|
let r = 4.0
|
|
let rw = 1.7
|
|
let live = 1.0 - dis
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
// The frame's floor: satin gold, deeper under the rim.
|
|
let floor_col = mix(mb_gold(0.30), mb_gold(0.40 + 0.06 * on), smoothstep(-1.0, 1.0, (p.y - c.y) / max(h.y, 1.0)))
|
|
var face = mix(floor_col, vec3(0.82, 0.79, 0.72), 0.6 * dis)
|
|
var res = mb_box(p, lo, hi, r, rw, px, face, hover * 0.4, 0.0, dis, focus, 0.8)
|
|
// The key: a square of polished gold standing in the frame, its own
|
|
// shadow on the floor.
|
|
let ks = th - 2.0 * rw - 1.0
|
|
let kh = vec2(ks, ks) * 0.5
|
|
let travel = (hi.x - lo.x) - 2.0 * rw - ks - 1.0
|
|
let sink = 0.8 * held * live
|
|
let kc = vec2(lo.x + rw + 0.5 + kh.x + travel * clamp(kt, 0.0, 1.0), c.y + sink)
|
|
let fl = Finish.cover(Material.sd_box(p, c, h - vec2(rw, rw), r - rw), px)
|
|
let ksh = Finish.drop(p, kc, kh, 2.5, vec2(0.5, 1.1), 1.0 + px) * 0.45 * (1.0 - 0.6 * held) * live * fl
|
|
res = Finish.over(res, vec4(mb_shade() * ksh, ksh))
|
|
let kd = Material.sd_box(p, kc, kh, 2.5)
|
|
let kn = mb_normal(p, kc, kh, 2.5)
|
|
var kcol = mb_goldface(p, kc, kh, kd, kn, 2.0)
|
|
kcol = kcol * (1.0 + 0.06 * hover * live - 0.12 * held * live)
|
|
kcol = mix(kcol, mb_gold(0.28), Finish.band(kd, 0.0, px, px) * 0.6)
|
|
kcol = mix(kcol, vec3(0.84, 0.81, 0.75), 0.6 * dis)
|
|
let ka = Finish.cover(kd, px)
|
|
res = Finish.over(res, vec4(kcol * ka, ka))
|
|
// On: a diamond set in the key, glinting; off: an engraved dash.
|
|
let gr = ks * 0.30
|
|
let gd = length(p - kc) - gr
|
|
if on > 0.001 {
|
|
let seat = Finish.cover(gd - 0.7, px) * on
|
|
res = Finish.over(res, vec4(mb_gold(0.25) * seat, seat))
|
|
let gcol = mix(mb_gem(p - kc, gr, vec3(1.0, 1.0, 1.0), 0.3, 2.0), vec3(0.85, 0.84, 0.80), 0.6 * dis)
|
|
let ga = Finish.cover(gd, px) * on
|
|
res = Finish.over(res, vec4(gcol * ga, ga))
|
|
let gl = mb_glint(p - kc - vec2(gr * 0.35, -gr * 0.4), gr * 2.6, px) * on * live
|
|
res = Finish.over(res, vec4(gl, gl, gl, gl))
|
|
}
|
|
let dsh = mb_seg(p, kc - vec2(ks * 0.22, 0.0), kc + vec2(ks * 0.22, 0.0)) - 0.75
|
|
res = mb_mark(res, dsh, px, 1.0 - on, dis)
|
|
let ed = Material.sd_box(p, c, h, r)
|
|
res = Finish.over(res, vec4(0.70, 0.08, 0.15, 1.0) * Finish.band(ed, 0.0, 1.2, px) * error * live)
|
|
return res * mb_fade(pos, size, m)
|
|
}
|
|
mod.widgets.ToggleFlat.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.ToggleSlide.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.ToggleRocker.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.ToggleFlat.draw_bg.pixel = fn() {
|
|
return mb_toggle(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.size, self.pill_aspect, self.mark_at_end, self.hover, max(self.pressed, self.down), self.disabled, self.active, mix(self.active, self.drag_pos, self.drag), self.focus, self.error)
|
|
}
|
|
|
|
// The slide switch is the toggle: the same gold frame and key.
|
|
mod.widgets.ToggleSlide.draw_bg.size = uniform(20.0)
|
|
mod.widgets.ToggleSlide.draw_bg.pill_aspect = uniform(1.9)
|
|
mod.widgets.ToggleSlide.label_walk.margin.left = 38.0
|
|
mod.widgets.ToggleSlide.draw_bg.pixel = fn() {
|
|
return mb_toggle(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.size, self.pill_aspect, self.mark_at_end, self.hover, max(self.pressed, self.down), self.disabled, self.active, mix(self.active, self.drag_pos, self.drag), self.focus, self.error)
|
|
}
|
|
|
|
// The rocker: a white marble plate in a gold rim, split at its middle. The
|
|
// half in force is pressed in and turned to polished gold, its legend a
|
|
// warm white; the raised half is the white stone, its legend brown: the O
|
|
// at the left while off, the I at the right while on.
|
|
mod.widgets.ToggleRocker.draw_bg.size = uniform(20.0)
|
|
mod.widgets.ToggleRocker.draw_bg.pill_aspect = uniform(2.3)
|
|
mod.widgets.ToggleRocker.label_walk.margin.left = 46.0
|
|
mod.widgets.ToggleRocker.draw_bg.pixel = fn() {
|
|
let m = 10.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let tw = self.size * self.pill_aspect
|
|
let th = self.size
|
|
let x0 = (self.rect_size.x - tw) * self.mark_at_end
|
|
let y0 = self.rect_size.y * 0.5 - th * 0.5
|
|
let lo = vec2(mb_snap(x0, o.x, px), mb_snap(y0, o.y, px))
|
|
let hi = vec2(mb_snap(x0 + tw, o.x, px), mb_snap(y0 + th, o.y, px))
|
|
let r = 4.0
|
|
let rw = 1.7
|
|
let c = (lo + hi) * 0.5
|
|
let live = 1.0 - self.disabled
|
|
let on = self.active
|
|
let held = max(self.pressed, self.down)
|
|
var face = mb_stone(p + mb_seed(self.rect_size), px, 0.5)
|
|
face = mix(face, mb_ground(), 0.5 * self.disabled)
|
|
var res = mb_box(p, lo, hi, r, rw, px, face, self.hover, 0.0, self.disabled, self.focus, 1.0)
|
|
// The half in force: polished gold, pressed in under the rim, a dark
|
|
// seam at the middle.
|
|
let hw = (hi.x - lo.x) * 0.5
|
|
let sx = mix(lo.x + rw, c.x, on)
|
|
let slo = vec2(sx, lo.y + rw)
|
|
let shi = vec2(sx + hw - rw, hi.y - rw)
|
|
let sc = (slo + shi) * 0.5
|
|
let sh = (shi - slo) * 0.5
|
|
let sd = Material.sd_box(p, sc, sh, max(r - rw, 0.5))
|
|
let sn = mb_normal(p, sc, sh, max(r - rw, 0.5))
|
|
var gcol = mb_goldface(p, sc, sh, sd, sn, 1.6) * (1.0 - 0.08 * held)
|
|
let ins = Finish.inset(p, sc, sh, max(r - rw, 0.5), vec2(0.0, 1.2), 1.3)
|
|
gcol = mix(gcol, gcol * 0.70, clamp(ins, 0.0, 1.0) * 0.6)
|
|
gcol = mix(gcol, vec3(0.84, 0.81, 0.75), 0.6 * self.disabled)
|
|
let ga = Finish.cover(sd, px)
|
|
res = Finish.over(res, vec4(gcol * ga, ga))
|
|
let seam = Finish.cover(abs(p.x - c.x) - 0.5 * px, px) * Finish.cover(abs(p.y - c.y) - (th * 0.5 - rw), px)
|
|
res = Finish.over(res, vec4(vec3(0.30, 0.21, 0.07) * seam * 0.7, seam * 0.7))
|
|
// The legends.
|
|
let lc_o = vec2(lo.x + hw * 0.5 + 0.5, c.y)
|
|
let lc_i = vec2(c.x + hw * 0.5 - 0.5, c.y)
|
|
let s = th / 20.0
|
|
let d_o = abs(length((p - lc_o) * vec2(1.25, 1.0)) - 3.4 * s) - 0.65 * s
|
|
let d_i = mb_seg(p, lc_i - vec2(0.0, 3.5 * s), lc_i + vec2(0.0, 3.5 * s)) - 0.65 * s
|
|
let cream = vec3(1.0, 0.975, 0.90)
|
|
let brown = vec3(0.30, 0.23, 0.12)
|
|
let fade = mix(1.0, 0.45, self.disabled)
|
|
let ao = Finish.cover(d_o, px) * fade
|
|
let ai = Finish.cover(d_i, px) * fade
|
|
res = Finish.over(res, vec4(mix(cream, brown, on) * ao, ao))
|
|
res = Finish.over(res, vec4(mix(brown, cream, on) * ai, ai))
|
|
let d = Material.sd_box(p, c, (hi - lo) * 0.5, r)
|
|
res = Finish.over(res, vec4(0.70, 0.08, 0.15, 1.0) * Finish.band(d, 0.0, 1.2, px) * self.error * live)
|
|
return res * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// The radio: a 15 point gold dome; chosen, it opens into a gold bezel with
|
|
// a round brilliant diamond set in it, glinting.
|
|
mod.widgets.RadioButtonFlat.draw_bg.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.RadioButtonFlat.clip_x = false
|
|
mod.widgets.RadioButtonFlat.clip_y = false
|
|
mod.widgets.RadioButtonFlat.draw_bg.size = uniform(15.0)
|
|
mod.widgets.RadioButtonFlat.padding = mod.turtle.Inset{left: 8.0 right: 8.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.RadioButtonFlat.label_walk.margin.left = 14.0
|
|
|
|
// A gold dome `rad` round `c`, satin rather than mirror: lit from the top,
|
|
// a soft highlight high on it, its lower side a deeper gold, its foot
|
|
// rolling under.
|
|
let mb_golddome = fn(p: vec2, c: vec2, rad: float) -> vec3 {
|
|
let q = (p - c) / max(rad, 0.5)
|
|
let ql = min(length(q), 1.0)
|
|
let n = q / max(length(q), 0.001)
|
|
let e = sin(ql * 1.4) * dot(n, mb_lv()) / sin(1.4)
|
|
var l = 0.50 + 0.26 * e + 0.30 * exp(-(e - 0.55) * (e - 0.55) / 0.03)
|
|
l = l - 0.12 * smoothstep(0.82, 1.0, ql)
|
|
return mb_gold(l)
|
|
}
|
|
mod.widgets.RadioButtonFlat.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let sz = self.size
|
|
let y0 = self.rect_size.y * 0.5 - sz * 0.5
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(y0, o.y, px))
|
|
let hi = vec2(mb_snap(sz, o.x, px), mb_snap(y0 + sz, o.y, px))
|
|
let live = 1.0 - self.disabled
|
|
let on = self.active
|
|
let rad = sz * 0.5
|
|
let sink = 0.4 * self.down * live
|
|
let c = (lo + hi) * 0.5 + vec2(0.0, sink)
|
|
let sc = mb_shadow(p, (lo + hi) * 0.5, vec2(rad, rad), rad, px, self.hover, self.down, self.disabled)
|
|
var res = vec4(mb_shade() * sc, sc)
|
|
let d = length(p - c) - rad
|
|
let a = Finish.cover(d, px)
|
|
if self.focus * live > 0.001 {
|
|
res = Finish.over(res, mb_leak(d, a) * self.focus * live)
|
|
}
|
|
var col = mb_golddome(p, c, rad) * (1.0 + 0.06 * self.hover * live - 0.12 * self.down * live)
|
|
// Chosen: the bezel's rim and the stone in it.
|
|
let rw = 1.8
|
|
let n = (p - c) / max(length(p - c), 0.001)
|
|
let bez = mb_rim(d, rw, n, p)
|
|
let gr = rad - rw - 0.3
|
|
let gd = length(p - c) - gr
|
|
let gem = mb_gem(p - c, gr, vec3(1.0, 1.0, 1.0), 0.2, 2.0)
|
|
var chosen = mix(bez, gem, Finish.cover(gd, px))
|
|
chosen = mix(chosen, vec3(0.30, 0.21, 0.07), Finish.band(gd, -px, 0.0, px) * 0.6)
|
|
col = mix(col, chosen, on)
|
|
col = mix(col, vec3(0.84, 0.81, 0.75), 0.6 * self.disabled)
|
|
col = mb_focus_rim(col, d, rw, px, self.focus * live)
|
|
res = Finish.over(res, vec4(col * a, a))
|
|
let gl = mb_glint(p - c - vec2(gr * 0.3, -gr * 0.35), gr * 2.4, px) * on * live
|
|
res = Finish.over(res, vec4(gl, gl, gl, gl))
|
|
return res * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// The radio tab: a cell of white marble in a gold rim; chosen, it is
|
|
// pressed in and its floor turns to polished gold.
|
|
mod.widgets.RadioButtonTabFlat.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.RadioButtonTabFlat.clip_x = false
|
|
mod.widgets.RadioButtonTabFlat.clip_y = false
|
|
mod.widgets.RadioButtonTabFlat.padding = mod.turtle.Inset{left: 0.0 right: 12.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.RadioButtonTabFlat.min_height = 26.0
|
|
mod.widgets.RadioButtonTabFlat.draw_bg.pixel = fn() {
|
|
let m = 10.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x, o.x, px), mb_snap(self.rect_size.y, o.y, px))
|
|
let sel = self.active
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let rw = 3.0
|
|
let hf = h - vec2(rw, rw)
|
|
let df = Material.sd_box(p, c, hf, 2.0)
|
|
let nf = mb_normal(p, c, hf, 2.0)
|
|
var face = mb_stone(p + mb_seed(self.rect_size), px, 0.45) * (1.0 + 0.03 * self.hover)
|
|
var gold = mb_goldface(p, c, hf, df, nf, 1.8)
|
|
let ins = Finish.inset(p, c, hf, 2.0, vec2(0.0, 1.4), 1.6)
|
|
gold = mix(gold, gold * 0.68, clamp(ins, 0.0, 1.0) * 0.65)
|
|
face = mix(face, gold, sel)
|
|
face = mix(face, mb_ground(), 0.5 * self.disabled)
|
|
return mb_box(p, lo, hi, 3.5, rw, px, face, self.hover, max(self.down, sel), self.disabled, self.focus, 1.0) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color = #5c4a2e
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color_hover = #2a2112
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color_active = #26190a
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color_disabled = #a89c86
|
|
mod.widgets.RadioButtonTabFlat.draw_text.get_color = fn() {
|
|
return self.color
|
|
.mix(self.color_focus, self.focus)
|
|
.mix(self.color_hover, self.hover)
|
|
.mix(self.color_down, self.down)
|
|
.mix(self.color_active, self.active)
|
|
.mix(self.color_disabled, self.disabled)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- sliders
|
|
|
|
// THE RAIL: a gold tube from `lo` to `hi` with round ends, a polished bead
|
|
// along each edge round a satin gold floor a step deeper; the value lies in
|
|
// it as a row of pavé diamonds from `f0` to `f1`. Premultiplied over `dst`.
|
|
let mb_rail = fn(dst: vec4, p: vec2, lo: vec2, hi: vec2, px: float, f0: float, f1: float, dis: float) -> vec4 {
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = min(h.x, h.y)
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let n = mb_normal(p, c, h, r)
|
|
let a = Finish.cover(d, px)
|
|
let sh = Finish.drop(p, c, h, r, vec2(0.0, 0.8), 0.8 + px * 0.5) * 0.25 * (1.0 - a) * (1.0 - 0.6 * dis)
|
|
var res = Finish.over(dst, vec4(mb_shade() * sh, sh))
|
|
let rw = clamp(0.30 * (hi.y - lo.y), 1.0, 1.8)
|
|
let t = clamp((p.y - lo.y) / max(hi.y - lo.y, 1.0), 0.0, 1.0)
|
|
var col = mix(mb_gold(0.26), mb_gold(0.42), t)
|
|
col = mix(col, mb_rim(d, rw, n, p), Finish.band(d, 0.0, rw, px))
|
|
col = mix(col, vec3(0.84, 0.81, 0.75), 0.6 * dis)
|
|
res = Finish.over(res, vec4(col * a, a))
|
|
let prad = max(h.y - rw - 0.15, 0.6)
|
|
if f1 > f0 + 0.5 && dis < 0.5 {
|
|
res = mb_pave_row(res, p, f0, f1, c.y, prad, prad * 2.15, px)
|
|
}
|
|
return res
|
|
}
|
|
|
|
// THE THUMB: a step-cut stone (an emerald cut, `hw` x `hv` either side of
|
|
// `c`, its corners cut) held in a polished gold frame with a claw at each
|
|
// corner, throwing its own shadow; under the hand it glints, held it sits
|
|
// down. `ink` the stone.
|
|
let mb_thumb = fn(dst: vec4, p: vec2, c0: vec2, hw: float, hv: float, ink: vec3, px: float, hover: float, drag: float, focus: float, dis: float) -> vec4 {
|
|
let live = 1.0 - dis
|
|
let c = c0 + vec2(0.0, 0.4 * drag * live)
|
|
let h = vec2(hw, hv)
|
|
let sc = mb_shadow(p, c0, h, 1.5, px, hover, drag, dis)
|
|
var res = Finish.over(dst, vec4(mb_shade() * sc, sc))
|
|
let d = Finish.sd_chamfer(p, c, h, 2.0)
|
|
let a = Finish.cover(d, px)
|
|
if focus * live > 0.001 {
|
|
res = Finish.over(res, mb_leak(d, a) * focus * live)
|
|
}
|
|
let rw = 1.3
|
|
let n = mb_normal(p, c, h, 1.5)
|
|
let hg = h - vec2(rw, rw)
|
|
var gem = mb_gstep(p - c, hg, ink, 3.0, 0.0, 1.0)
|
|
gem = gem * (1.0 + 0.06 * hover * live)
|
|
var col = mix(mb_rim(d, rw, n, p), gem, Finish.cover(d + rw, px))
|
|
col = mix(col, vec3(0.30, 0.21, 0.07), Finish.band(d, rw, rw + px, px) * 0.5)
|
|
col = mix(col, vec3(0.84, 0.81, 0.75), 0.6 * dis)
|
|
col = mb_focus_rim(col, d, rw, px, focus * live)
|
|
res = Finish.over(res, vec4(col * a, a))
|
|
// The claws: four gold beads at the corners.
|
|
let q = abs(p - c) - (h - vec2(1.1, 1.1))
|
|
let cd = length(q) - 1.15
|
|
let ca = Finish.cover(cd, px)
|
|
let cn = (p - c) / max(length(p - c), 0.001)
|
|
let ccol = mix(mb_gold(mb_env(dot(cn, mb_lv()) * 0.7)), vec3(0.84, 0.81, 0.75), 0.6 * dis)
|
|
res = Finish.over(res, vec4(ccol * ca, ca))
|
|
let gl = mb_glint(p - c - vec2(hw * 0.35, -hv * 0.45), 4.0 + 3.0 * hover, px) * (0.35 + 0.65 * max(hover, drag)) * live
|
|
return Finish.over(res, vec4(gl, gl, gl, gl))
|
|
}
|
|
|
|
// A ROUND STONE THUMB: a round brilliant `rad` round `c` in a gold bezel,
|
|
// its shadow under it; for the band's ends and the minimal slider. Its
|
|
// stone is traced (`flat` 0) or, for the tiny stones (the progress bar's
|
|
// head, the divider's stone, the needle's pivot), the flat sparkle of facets
|
|
// (`flat` 1), which costs no tracer.
|
|
// The setting round a stone whose colour here is `gem`.
|
|
let mb_gemset = fn(dst: vec4, p: vec2, c0: vec2, rad: float, gem0: vec3, px: float, hover: float, drag: float, focus: float, dis: float) -> vec4 {
|
|
let live = 1.0 - dis
|
|
let c = c0 + vec2(0.0, 0.4 * drag * live)
|
|
let sc = mb_shadow(p, c0, vec2(rad, rad), rad, px, hover, drag, dis)
|
|
var res = Finish.over(dst, vec4(mb_shade() * sc, sc))
|
|
let d = length(p - c) - rad
|
|
let a = Finish.cover(d, px)
|
|
if focus * live > 0.001 {
|
|
res = Finish.over(res, mb_leak(d, a) * focus * live)
|
|
}
|
|
let rw = clamp(0.24 * rad, 1.1, 1.8)
|
|
let n = (p - c) / max(length(p - c), 0.001)
|
|
var gem = gem0 * (1.0 + 0.06 * hover * live)
|
|
var col = mix(mb_rim(d, rw, n, p), gem, Finish.cover(d + rw, px))
|
|
col = mix(col, vec3(0.30, 0.21, 0.07), Finish.band(d, rw, rw + px, px) * 0.5)
|
|
col = mix(col, vec3(0.84, 0.81, 0.75), 0.6 * dis)
|
|
col = mb_focus_rim(col, d, rw, px, focus * live)
|
|
res = Finish.over(res, vec4(col * a, a))
|
|
let gl = mb_glint(p - c - vec2(rad * 0.25, -rad * 0.3), rad * 1.6 + 2.0 * hover, px) * (0.45 + 0.55 * max(hover, drag)) * live
|
|
return Finish.over(res, vec4(gl, gl, gl, gl))
|
|
}
|
|
let mb_gemthumb = fn(dst: vec4, p: vec2, c0: vec2, rad: float, ink: vec3, px: float, hover: float, drag: float, focus: float, dis: float) -> vec4 {
|
|
let c = c0 + vec2(0.0, 0.4 * drag * (1.0 - dis))
|
|
let rw = clamp(0.24 * rad, 1.1, 1.8)
|
|
let gem = mb_gem(p - c, rad - rw, mb_gink(ink), 0.4, 2.0)
|
|
return mb_gemset(dst, p, c0, rad, gem, px, hover, drag, focus, dis)
|
|
}
|
|
let mb_gemdot = fn(dst: vec4, p: vec2, c0: vec2, rad: float, px: float) -> vec4 {
|
|
let rw = clamp(0.24 * rad, 1.1, 1.8)
|
|
let gem = mb_brilliant(p - c0, rad - rw, mb_diamond(), 0.4, px)
|
|
return mb_gemset(dst, p, c0, rad, gem, px, 0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
|
|
// The bar slider: an 8 point gold rail under its label row, the value a row
|
|
// of pavé diamonds in it, and a citrine emerald-cut riding it, 13 x 16
|
|
// points in its claws.
|
|
mod.widgets.SliderFlat.clip_x = false
|
|
mod.widgets.SliderFlat.clip_y = false
|
|
mod.widgets.SliderFlat.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.SliderFlat.draw_bg.pixel = fn() {
|
|
let m = 10.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let rad = 8.0
|
|
let cy = mb_snap(20.0 + (self.rect_size.y - 20.0) * 0.5, o.y, px)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), cy - 4.0)
|
|
let hi = vec2(mb_snap(self.rect_size.x, o.x, px), cy + 4.0)
|
|
let span = self.rect_size.x - rad * 2.0
|
|
let hx = rad + self.slide_pos * span
|
|
let ox = rad + self.origin_pos * span
|
|
let f0 = mix(lo.x + 2.0, min(ox, hx), self.arc_origin)
|
|
let f1 = mix(hx - 5.0, max(ox, hx), self.arc_origin)
|
|
var res = mb_rail(vec4(0.0, 0.0, 0.0, 0.0), p, lo, hi, px, f0, f1, self.disabled)
|
|
return mb_thumb(res, p, vec2(hx, cy), 6.5, 8.2, mb_citrine_gem(), px, self.hover, self.drag, self.focus, self.disabled) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// The minimal slider: a slim gold rail with the value in pavé, and a small
|
|
// round diamond riding it.
|
|
mod.widgets.SliderMinimal.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * self.rect_size
|
|
let cy = mb_snap(self.offset_y + (self.rect_size.y - self.offset_y) * 0.5, o.y, px)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), cy - 2.5)
|
|
let hi = vec2(mb_snap(self.rect_size.x, o.x, px), cy + 2.5)
|
|
let lo2 = min(self.origin_pos, self.slide_pos)
|
|
let hi2 = max(self.origin_pos, self.slide_pos)
|
|
let f0 = mix(1.5, lo2 * self.rect_size.x, self.arc_origin)
|
|
let f1 = mix(self.slide_pos * self.rect_size.x - 3.0, hi2 * self.rect_size.x, self.arc_origin)
|
|
var res = mb_rail(vec4(0.0, 0.0, 0.0, 0.0), p, lo, hi, px, f0, f1, self.disabled)
|
|
let hx = clamp(self.slide_pos * self.rect_size.x, 4.5, self.rect_size.x - 4.5)
|
|
return mb_gemthumb(res, p, vec2(hx, cy), 4.5, mb_diamond(), px, self.hover, self.drag, 0.0, self.disabled)
|
|
}
|
|
|
|
// The range slider: the bar slider's rail under its label row, the band in
|
|
// pavé between its ends, and at each end a round emerald in a gold bezel.
|
|
mod.widgets.RangeSliderFlat.handle_size = 13.0
|
|
mod.widgets.RangeSliderFlat.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.RangeSliderFlat.draw_bg.pixel = fn() {
|
|
let m = 10.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let top = self.label_px
|
|
let track_h = self.rect_size.y - top
|
|
let mid = mb_snap(top + track_h * 0.5, o.y, px)
|
|
let lo = vec2(mb_snap(self.inset_px * 0.5, o.x, px), mid - 3.5)
|
|
let hi = vec2(mb_snap(self.rect_size.x - self.inset_px * 0.5, o.x, px), mid + 3.5)
|
|
let span_x = self.rect_size.x - self.inset_px * 2.0 - self.handle_px
|
|
let s0 = self.inset_px + self.handle_px * 0.5 + self.start_pos * span_x
|
|
let s1 = self.inset_px + self.handle_px * 0.5 + self.end_pos * span_x
|
|
var res = mb_rail(vec4(0.0, 0.0, 0.0, 0.0), p, lo, hi, px, s0 + 4.0, s1 - 4.0, self.disabled)
|
|
let rad = clamp(track_h * 0.5 - 0.5, 4.5, 6.5)
|
|
// Each pixel traces only the nearer of the two stones.
|
|
let ns = step(abs(p.x - s0), abs(p.x - s1))
|
|
let hot_t = mix(self.hot_end, self.hot_start, ns)
|
|
return mb_gemthumb(res, p, vec2(mix(s1, s0, ns), mid), rad, mb_emerald(), px, hot_t, self.drag * hot_t, self.focus, self.disabled) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// The round slider: a label column, then the bar slider's rail, pavé and
|
|
// citrine; the rail ends short of the right edge for the value.
|
|
mod.widgets.SliderRoundFlat.clip_x = false
|
|
mod.widgets.SliderRoundFlat.clip_y = false
|
|
mod.widgets.SliderRoundFlat.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.SliderRoundFlat.draw_bg.pixel = fn() {
|
|
let m = 10.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let rad = 7.0
|
|
let cy = mb_snap(self.rect_size.y * 0.5, o.y, px)
|
|
let x0 = mb_snap(self.label_size, o.x, px)
|
|
let lo = vec2(x0, cy - 4.0)
|
|
let hi = vec2(mb_snap(self.rect_size.x - 37.0, o.x, px), cy + 4.0)
|
|
let span = hi.x - lo.x - rad * 2.0
|
|
let hx = lo.x + rad + self.slide_pos * span
|
|
var res = mb_rail(vec4(0.0, 0.0, 0.0, 0.0), p, lo, hi, px, lo.x + 2.0, hx - 5.0, self.disabled)
|
|
return mb_thumb(res, p, vec2(hx, cy), 6.5, 8.2, mb_citrine_gem(), px, self.hover, self.drag, self.focus, self.disabled) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// THE FADER: a slim gold rail standing in the fader's middle, its value in
|
|
// pavé from the stop to the cap, gold ticks either side (every fifth long),
|
|
// and the cap an emerald baguette 22 points across and 14 along, held in a
|
|
// polished gold frame with claws. Laid out in the fader's own frame (`ab`:
|
|
// along the track from the value's zero, up the screen when it stands;
|
|
// across it), so SliderFaderY is the same drawing stood on end. The travel
|
|
// law is the widget's, so what is drawn is what is dragged.
|
|
mod.widgets.SliderFader.cap_size = 22.0
|
|
mod.widgets.SliderFader.track_inset = 4.0
|
|
mod.widgets.SliderFader.draw_bg.track_size = uniform(5.0)
|
|
mod.widgets.SliderFader.draw_bg.cap_cross = uniform(0.24)
|
|
mod.widgets.SliderFader.clip_x = false
|
|
mod.widgets.SliderFader.clip_y = false
|
|
mod.widgets.SliderFader.draw_bg.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.SliderFader.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let sz = self.rect_size
|
|
let p = self.pos * (sz + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let v = self.is_vertical
|
|
let dis = self.disabled
|
|
let live = 1.0 - dis
|
|
let along = mix(sz.x, sz.y, v)
|
|
let across = mix(sz.y, sz.x, v)
|
|
// Work in the fader's frame, then hand screen points to the helpers.
|
|
let ab = vec2(mix(p.x, sz.y - p.y, v), mix(p.y, p.x, v))
|
|
let mid = across * 0.5
|
|
let travel = max(along - self.inset_px * 2.0 - self.cap_px, 1.0)
|
|
let foot = self.inset_px + self.cap_px * 0.5
|
|
let at = foot + self.slide_pos * travel
|
|
// A frame-space point to a screen point.
|
|
let tin = self.inset_px + 3.0
|
|
let tw = self.track_size
|
|
// The ticks, gold hairlines either side of the rail.
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
let n = 24.0
|
|
let k = floor((ab.x - foot) / travel * n + 0.5)
|
|
let tk = foot + k / n * travel
|
|
let major = 1.0 - step(0.5, k - 5.0 * floor(k / 5.0 + 0.0001))
|
|
let tlen = mix(3.0, 5.0, major)
|
|
let side = abs(ab.y - mid) - (tw * 0.5 + 2.5)
|
|
let inrange = step(-0.01, k) * step(k, n + 0.01)
|
|
let tick = Finish.cover(abs(ab.x - tk) - px * mix(0.5, 0.8, major), px) * Finish.cover(max(-side, side - tlen), px) * inrange
|
|
let tcol = mix(mb_gold(0.45), vec3(0.84, 0.81, 0.75), 0.6 * dis)
|
|
res = Finish.over(res, vec4(tcol * tick * 0.9, tick * 0.9))
|
|
// The rail and its value, laid out across the screen axis.
|
|
var lo = foot + self.fill_lo * travel
|
|
var hi = foot + self.fill_hi * travel
|
|
if self.fill_lo < 0.0005 {
|
|
lo = tin
|
|
}
|
|
if self.fill_hi > 0.9995 {
|
|
hi = along - tin
|
|
}
|
|
let q = vec2(ab.x, ab.y)
|
|
let rail = mb_rail(vec4(0.0, 0.0, 0.0, 0.0), q, vec2(tin, mid - tw * 0.5), vec2(along - tin, mid + tw * 0.5), px, lo + 1.0, hi - 1.0, dis)
|
|
res = Finish.over(res, rail)
|
|
// The cap, in screen orientation so its light falls from the top.
|
|
let cs = mix(vec2(at, mid), vec2(mid, sz.y - at), v)
|
|
let capw = min(across * 0.5 - 1.0, 11.0)
|
|
let thumb = mb_thumb(vec4(0.0, 0.0, 0.0, 0.0), p, cs, mix(7.0, capw, v), mix(capw, 7.0, v), mb_emerald(), px, self.hover, self.drag, self.focus, dis)
|
|
res = Finish.over(res, thumb)
|
|
return res * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- knobs
|
|
|
|
// A KNOB is a cut stone in a gold bezel, the pictures' gem knobs: a round
|
|
// brilliant that turns with the value, in a polished gold bezel whose outer
|
|
// edge is milgrained (a row of fine beads), the pointer an engraved notch
|
|
// across the bezel. Round it a slim gold ring over the whole sweep, and lit
|
|
// from the start of the sweep (or from the origin) to the value a row of
|
|
// pavé diamonds set in it. The big dial adds a ring of gold ticks outside.
|
|
// Under the hand the stone glints and the bezel brightens; held, it glints
|
|
// more; focus lays the gold light round the bezel; disabled, all fades
|
|
// toward the stone. Angles run from straight down, clockwise, the gap at
|
|
// the bottom.
|
|
|
|
// The distance from `q` (at the angle `aq`) to a band `hw` either side of
|
|
// the arc of radius `ra` from the angle `a0` to `a1`, its ends round; in .y
|
|
// how far along the arc (0..1) the nearest point lies.
|
|
let mb_arc_d = fn(q: vec2, aq: float, ra: float, hw: float, a0: float, a1: float) -> vec2 {
|
|
let r = length(q)
|
|
if aq >= a0 && aq <= a1 {
|
|
return vec2(abs(r - ra) - hw, (aq - a0) / max(a1 - a0, 0.0001))
|
|
}
|
|
let d0 = length(q - vec2(-sin(a0), cos(a0)) * ra)
|
|
let d1 = length(q - vec2(-sin(a1), cos(a1)) * ra)
|
|
if d0 < d1 {
|
|
return vec2(d0 - hw, 0.0)
|
|
}
|
|
return vec2(d1 - hw, 1.0)
|
|
}
|
|
|
|
let mb_knob = fn(p: vec2, c: vec2, rr: float, px: float, slide: float, origin: float, arc_origin: float, gap: float, hover: float, held: float, focus: float, dis: float, ink: vec3, ticks: float) -> vec4 {
|
|
let q = p - c
|
|
let ql = length(q)
|
|
let live = 1.0 - dis
|
|
let one = PI / 180.0
|
|
let sweep = 2.0 * PI - gap * one
|
|
let start = gap * one * 0.5
|
|
let ve = start + sweep * slide
|
|
let oe = start + sweep * origin
|
|
let a0 = mix(start, min(oe, ve), arc_origin)
|
|
let a1 = mix(ve, max(oe, ve), arc_origin)
|
|
var aq = atan2(-q.x, q.y)
|
|
if aq < 0.0 {
|
|
aq = aq + 2.0 * PI
|
|
}
|
|
// The sizes: the ticks (on the dial) outermost, then the ring and its
|
|
// pavé, then the bezel and the stone.
|
|
let tk = ticks * clamp(0.10 * rr, 3.0, 6.0)
|
|
let prad = clamp(0.045 * rr, 1.05, 2.1)
|
|
let ra = rr - tk - prad - 0.6
|
|
let rb = ra - prad - clamp(0.06 * rr, 1.8, 4.0)
|
|
let bw = clamp(0.16 * rb, 1.8, 5.5)
|
|
let rg = rb - bw
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
// THE TICKS (the dial only): eleven gold strokes outside the ring.
|
|
if ticks > 0.5 {
|
|
let tn = 10.0
|
|
let ti = floor(clamp((aq - start) / sweep, 0.0, 1.0) * tn + 0.5)
|
|
let ta = start + sweep * ti / tn
|
|
let td = vec2(-sin(ta), cos(ta))
|
|
let tdist = mb_seg(q, td * (rr - tk + 0.8), td * (rr - 0.8)) - 0.55
|
|
let tcov = Finish.cover(tdist, px)
|
|
let tcol = mix(mb_gold(0.5), vec3(0.84, 0.81, 0.75), 0.6 * dis)
|
|
res = Finish.over(res, vec4(tcol * tcov, tcov))
|
|
}
|
|
// THE RING: a slim gold wire over the whole sweep, its shadow under it.
|
|
let tr = mb_arc_d(q, aq, ra, prad * 0.55, start, start + sweep)
|
|
let rsh = Finish.cover(tr.x - 0.9, 1.2) * 0.18 * (1.0 - Finish.cover(tr.x, px))
|
|
res = Finish.over(res, vec4(mb_shade() * rsh, rsh))
|
|
let ta2 = Finish.cover(tr.x, px)
|
|
let rn = clamp((ql - ra) / max(prad * 0.55, 0.3), -1.0, 1.0)
|
|
var rcol = mb_gold(mb_env(rn * dot(q / max(ql, 0.01), mb_lv()) * 0.9))
|
|
rcol = mix(rcol, vec3(0.84, 0.81, 0.75), 0.6 * dis)
|
|
res = Finish.over(res, vec4(rcol * ta2, ta2))
|
|
// THE PAVÉ: from the start (or the origin) to the value, a diamond every
|
|
// so many degrees on the ring.
|
|
if dis < 0.5 {
|
|
let pitch = prad * 2.3 / max(ra, 1.0)
|
|
let ci = floor((aq - a0) / pitch)
|
|
let ca = a0 + (ci + 0.5) * pitch
|
|
let inside = step(a0, ca) * step(ca, a1)
|
|
let pc = vec2(-sin(ca), cos(ca)) * ra
|
|
res = Finish.over(res, mb_pave(q - pc, prad, Finish.hash(vec2(ci, 9.1)), px) * inside)
|
|
}
|
|
// THE BEZEL'S SHADOW on the stone ground.
|
|
let sc = Finish.drop(p, c, vec2(rb, rb), rb, vec2(0.0, 0.10 * rb + 0.6), 0.10 * rb + 0.6) * 0.32 * (1.0 - 0.6 * dis)
|
|
let db = ql - rb
|
|
let ab_ = Finish.cover(db, px)
|
|
res = Finish.over(res, vec4(mb_shade() * sc * (1.0 - ab_), sc * (1.0 - ab_)))
|
|
if focus * live > 0.001 {
|
|
res = Finish.over(res, mb_leak(db, ab_) * focus * live)
|
|
}
|
|
// THE BEZEL: a polished bead, milgrained along its outer third.
|
|
let n = q / max(ql, 0.01)
|
|
let u = clamp(-db / bw, 0.0, 1.0)
|
|
var l = mb_bead(u, n)
|
|
let nb = max(floor(2.0 * PI * rb / 1.5), 8.0)
|
|
let mg = cos(aq * nb) * (1.0 - smoothstep(0.18, 0.36, u))
|
|
l = l + 0.16 * mg * smoothstep(0.0, 0.08, u)
|
|
var bcol = mb_gold(l) * (1.0 + 0.05 * hover * live)
|
|
bcol = mix(bcol, vec3(0.30, 0.21, 0.07), Finish.band(db, 0.0, px, px) * 0.35)
|
|
// The pointer: an engraved notch across the bezel at the value.
|
|
let dirv = vec2(-sin(ve), cos(ve))
|
|
let nw = max(0.15 * bw, 0.75)
|
|
let nd = mb_seg(q, dirv * (rg - 0.2), dirv * (rb - 0.3)) - nw
|
|
let notch = Finish.cover(nd, px)
|
|
let lip = Finish.cover(mb_seg(q - vec2(0.0, 0.6), dirv * (rg - 0.2), dirv * (rb - 0.3)) - nw, px) * (1.0 - notch)
|
|
bcol = mix(bcol, vec3(1.0, 0.95, 0.78), lip * 0.6)
|
|
bcol = mix(bcol, vec3(0.20, 0.13, 0.03), notch * 0.9)
|
|
// THE STONE, turning with the value; a dark seat where it meets gold.
|
|
let dg = ql - rg
|
|
var gcol = mb_gem_aa(q, rg, mb_gink(ink), ve, px, 4.0, 2.0) * (1.0 + 0.04 * hover * live)
|
|
gcol = mix(gcol, vec3(0.25, 0.18, 0.06), Finish.band(dg, -px, 0.0, px) * 0.6)
|
|
var col = mix(bcol, gcol, Finish.cover(dg, px))
|
|
col = mix(col, mix(mb_ground(), vec3(0.80, 0.78, 0.72), 0.5), 0.55 * dis)
|
|
col = mb_focus_rim(col, db, bw, px, focus * live)
|
|
res = Finish.over(res, vec4(col * ab_, ab_))
|
|
// The glints, the larger one brighter under the hand.
|
|
let g1 = mb_glint(q - vec2(rg * 0.32, -rg * 0.38), rg * 0.95 + 2.0 * hover, px) * (0.55 + 0.45 * max(hover, held))
|
|
let g2 = mb_glint(q - vec2(-rg * 0.45, rg * 0.30), rg * 0.45, px) * 0.45
|
|
var gsum = g1 + g2
|
|
// A white diamond glints at its facet corners instead.
|
|
if max(ink.x, max(ink.y, ink.z)) - min(ink.x, min(ink.y, ink.z)) < 0.15 {
|
|
gsum = mb_dia_glints(q, rg, ve, px) * (0.75 + 0.25 * max(hover, held))
|
|
}
|
|
let gl = clamp(gsum, 0.0, 1.0) * live * Finish.cover(dg + 0.5, px)
|
|
return Finish.over(res, vec4(gl, gl, gl, gl))
|
|
}
|
|
|
|
// The panel knob is 36 points across with no side margin: in a row beside
|
|
// a big dial it then keeps inside its own column, its ring a few points
|
|
// clear of the next column's frame.
|
|
mod.widgets.RotaryKnob.width = 36.0
|
|
mod.widgets.RotaryKnob.height = 56.0
|
|
mod.widgets.RotaryKnob.margin = mod.turtle.Inset{left: 0.0 right: 0.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.RotaryKnob.clip_x = false
|
|
mod.widgets.RotaryKnob.clip_y = false
|
|
mod.widgets.RotaryKnob.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
// The panel knob is an emerald.
|
|
mod.widgets.RotaryKnob.draw_bg.pixel = fn() {
|
|
let m = 10.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let dia = min(self.rect_size.x, self.rect_size.y)
|
|
let c = vec2(Finish.snap(self.rect_pos.x + self.rect_size.x * 0.5, px) - self.rect_pos.x, Finish.snap(self.rect_pos.y + self.rect_size.y - dia * 0.5, px) - self.rect_pos.y)
|
|
return mb_knob(p, c, dia * 0.5 - 0.5, px, self.slide_pos, self.origin_pos, self.arc_origin, self.gap, self.hover, self.drag, self.focus, self.disabled, mb_emerald(), 0.0) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
mod.widgets.RotaryFlat.clip_x = false
|
|
mod.widgets.RotaryFlat.clip_y = false
|
|
mod.widgets.RotaryFlat.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
// The dial is a white diamond with its ring of ticks.
|
|
mod.widgets.RotaryFlat.draw_bg.pixel = fn() {
|
|
let m = 10.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let dia = min(self.rect_size.x, self.rect_size.y - 22.0)
|
|
let c = vec2(Finish.snap(self.rect_pos.x + self.rect_size.x * 0.5, px) - self.rect_pos.x, Finish.snap(self.rect_pos.y + 20.0 + dia * 0.5, px) - self.rect_pos.y)
|
|
return mb_knob(p, c, dia * 0.5 - 0.5, px, self.slide_pos, self.origin_pos, self.arc_origin, self.gap, self.hover, self.drag, self.focus, self.disabled, mb_diamond(), 1.0) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
// The dial's readout stands as a plain line under it.
|
|
mod.widgets.Rotary.text_input.min_height = 0.0
|
|
mod.widgets.Rotary.text_input.padding.top = 0.0
|
|
mod.widgets.Rotary.text_input.padding.bottom = 0.0
|
|
mod.widgets.RotaryKnob.draw_text.text_style = mod.theme.font_bold{font_size: 8.5}
|
|
|
|
// ---------------------------------------------------------------- fields
|
|
|
|
// A FIELD is white marble set in a double gold rim (a broad bead, a dark
|
|
// groove, a slim bead), sunk a little under it: a soft shade under its upper
|
|
// rim, a line of milgrain beads inside it, the veins calm under the words.
|
|
// Focused, the rim burns brighter and spills its gold light. `lift` how
|
|
// much shadow it throws.
|
|
let mb_field = fn(p: vec2, lo: vec2, hi: vec2, r: float, px: float, seed: vec2, hover: float, focus: float, dis: float, lift: float) -> vec4 {
|
|
let hh = hi.y - lo.y
|
|
let full = step(20.0, hh)
|
|
let rw = clamp(0.177 * hh, 1.8, 4.6)
|
|
var face = mb_stone(p + seed, px, 0.42) * (1.0 + 0.02 * hover)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let ins = Finish.inset(p, c, h - vec2(rw, rw), max(r - rw, 0.5), vec2(0.0, 1.5), 1.8)
|
|
face = mix(face, face * 0.88, clamp(ins, 0.0, 1.0) * 0.6)
|
|
face = mix(face, mb_milgrain(face, p, c, h, r, rw + 1.0, 0.6, 1.9, px), full)
|
|
face = mix(face, mb_ground(), 0.45 * dis)
|
|
return mb_box2(p, lo, hi, min(r, 0.3 * hh), rw, px, face, hover * 0.3, 0.0, dis, focus, lift, full)
|
|
}
|
|
|
|
mod.widgets.TextInputFlat.clip_x = false
|
|
mod.widgets.TextInputFlat.clip_y = false
|
|
mod.widgets.TextInputFlat.draw_bg.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.TextInputFlat.draw_bg.pixel = fn() {
|
|
if self.color.a < 0.01 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let m = 8.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x, o.x, px), mb_snap(self.rect_size.y, o.y, px))
|
|
return mb_field(p, lo, hi, 5.0, px, mb_seed(self.rect_size), self.hover, self.focus, self.disabled, 0.7) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
mod.widgets.TextInputFlat.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 4.0 bottom: 4.0}
|
|
// A field well (a field whose input is drawn by another widget) wears the
|
|
// same face.
|
|
mod.widgets.FieldWell.clip_x = false
|
|
mod.widgets.FieldWell.clip_y = false
|
|
mod.widgets.FieldWell.draw_bg.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.FieldWell.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x, o.x, px), mb_snap(self.rect_size.y, o.y, px))
|
|
return mb_field(p, lo, hi, 5.0, px, mb_seed(self.rect_size), self.hover, self.focus, self.disabled, 0.7) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
mod.widgets.TextInputFlat.draw_cursor.color = #3a2e1c
|
|
mod.widgets.TextInputFlat.draw_text.color = #3a2e1c
|
|
mod.widgets.TextInputFlat.draw_text.color_empty = #6e5f46
|
|
mod.widgets.TextInputFlat.draw_text.color_disabled = #8f826a
|
|
|
|
// The number field: a field; its stepper two small gold keys stacked at
|
|
// the right, parted by a dark seam, their chevrons engraved.
|
|
mod.widgets.NumberField.clip_x = false
|
|
mod.widgets.NumberField.clip_y = false
|
|
mod.widgets.NumberField.draw_bg.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.NumberField.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x, o.x, px), mb_snap(self.rect_size.y, o.y, px))
|
|
return mb_field(p, lo, hi, 5.0, px, mb_seed(self.rect_size), self.hover, self.focus, self.disabled, 0.7) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
mod.widgets.NumberField.spin_width = 16.0
|
|
mod.widgets.NumberSpin.width = 16.0
|
|
mod.widgets.NumberSpin.draw_text.color = #00000000
|
|
mod.widgets.NumberSpin.draw_text.color_disabled = #00000000
|
|
mod.widgets.NumberSpin.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * self.rect_size
|
|
let x0 = mb_snap(0.5, o.x, px)
|
|
let x1 = mb_snap(self.rect_size.x - 4.6, o.x, px)
|
|
let y0 = mb_snap(5.2, o.y, px)
|
|
let y1 = mb_snap(self.rect_size.y - 5.2, o.y, px)
|
|
let mid = mb_snap(self.rect_size.y * 0.5, o.y, px)
|
|
let live = 1.0 - self.disabled
|
|
let tu = step(p.y, mid)
|
|
let hot = mix(max(0.0, -self.hot), max(0.0, self.hot), tu) * live
|
|
let dn = mix(max(0.0, -self.down), max(0.0, self.down), tu) * live
|
|
let lo = vec2(x0, mix(mid + px * 0.5, y0, tu))
|
|
let hi = vec2(x1, mix(y1, mid - px * 0.5, tu))
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = Material.sd_box(p, c, h, 1.5)
|
|
let n = mb_normal(p, c, h, 1.5)
|
|
let a = Finish.cover(d, px)
|
|
var col = mb_goldface(p, c, h, d, n, 1.2) * (1.0 + 0.07 * hot - 0.10 * dn)
|
|
col = mix(col, vec3(0.84, 0.81, 0.75), 0.6 * self.disabled)
|
|
var res = vec4(min(col, vec3(1.0, 1.0, 1.0)) * a, a)
|
|
let cx = (x0 + x1) * 0.5
|
|
let cu = (y0 + mid) * 0.5
|
|
let cd = (mid + y1) * 0.5
|
|
let du = min(mb_seg(p, vec2(cx - 2.2, cu + 0.9), vec2(cx, cu - 1.0)), mb_seg(p, vec2(cx, cu - 1.0), vec2(cx + 2.2, cu + 0.9)))
|
|
let dd = min(mb_seg(p, vec2(cx - 2.2, cd - 0.9), vec2(cx, cd + 1.0)), mb_seg(p, vec2(cx, cd + 1.0), vec2(cx + 2.2, cd - 0.9)))
|
|
let k = Finish.cover(min(du, dd) - 0.55, px) * mix(1.0, 0.4, self.disabled)
|
|
return Finish.over(res, vec4(vec3(0.20, 0.13, 0.03) * k, k))
|
|
}
|
|
|
|
// The chevron of a drop-down, engraved: 7 x 4 points in a 1.4 point stroke.
|
|
let mb_chevron = fn(dst: vec4, p: vec2, cc: vec2, ink: vec3, open: float, px: float) -> vec4 {
|
|
let s = mix(1.0, -1.0, open)
|
|
let dk = min(mb_seg(p, vec2(cc.x - 3.5, cc.y - 1.8 * s), vec2(cc.x, cc.y + 1.9 * s)), mb_seg(p, vec2(cc.x, cc.y + 1.9 * s), vec2(cc.x + 3.5, cc.y - 1.8 * s))) - 0.7
|
|
let k = Finish.cover(dk, px)
|
|
return Finish.over(dst, vec4(ink * k, k))
|
|
}
|
|
|
|
// THE DROP-DOWN: white marble in a chunky gold rim, a line of milgrain
|
|
// inside it, with a square key of polished
|
|
// gold at its right end carrying the chevron, as the pictures' selectors;
|
|
// open, the key is pressed in and its chevron turns up.
|
|
mod.widgets.DropDownFlat.padding = mod.turtle.Inset{left: 12.0 right: 30.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.DropDownFlat.clip_x = false
|
|
mod.widgets.DropDownFlat.clip_y = false
|
|
mod.widgets.DropDownFlat.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
let mb_dropdown = fn(pos: vec2, size: vec2, o: vec2, dpi: float, hover: float, down: float, open: float, dis: float, focus: float, lift: float) -> vec4 {
|
|
let m = 10.0
|
|
let px = mb_px(dpi)
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(size.x, o.x, px), mb_snap(size.y, o.y, px))
|
|
let live = 1.0 - dis
|
|
let rw = 3.8
|
|
let held = max(down, open)
|
|
var face = mb_stone(p + mb_seed(size), px, 0.42) * (1.0 + 0.03 * hover * live)
|
|
face = mb_milgrain(face, p, (lo + hi) * 0.5, (hi - lo) * 0.5, 4.5, rw + 1.0, 0.6, 1.9, px)
|
|
// The key: a square of gold inside the rim at the right end.
|
|
let ks = (hi.y - lo.y) - 2.0 * rw
|
|
let kc = vec2(hi.x - rw - ks * 0.5, (lo.y + hi.y) * 0.5)
|
|
let kh = vec2(ks * 0.5, ks * 0.5)
|
|
let kd = Material.sd_box(p, kc, kh, 1.5)
|
|
let kn = mb_normal(p, kc, kh, 1.5)
|
|
var kcol = mb_goldface(p, kc, kh, kd, kn, 1.6) * (1.0 + 0.06 * hover * live - 0.10 * held * live)
|
|
let kin = Finish.inset(p, kc, kh, 1.5, vec2(0.0, 1.2), 1.3)
|
|
kcol = mix(kcol, kcol * 0.72, clamp(kin, 0.0, 1.0) * 0.6 * held)
|
|
kcol = mix(kcol, vec3(0.30, 0.21, 0.07), Finish.band(kd, 0.0, px, px) * 0.4 * step(p.x, kc.x - kh.x + 0.6))
|
|
face = mix(face, kcol, Finish.cover(kd, px))
|
|
face = mix(face, mb_ground(), 0.45 * dis)
|
|
var res = mb_box(p, lo, hi, 4.5, rw, px, face, hover, 0.0, dis, focus, lift)
|
|
res = mb_chevron(res, p, kc, mix(vec3(0.20, 0.13, 0.03), vec3(0.55, 0.50, 0.42), dis), open, px)
|
|
return res * mb_fade(pos, size, m)
|
|
}
|
|
mod.widgets.DropDownFlat.draw_bg.pixel = fn() {
|
|
return mb_dropdown(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.active, self.disabled, self.focus, 1.0)
|
|
}
|
|
mod.widgets.DropDownFlat.draw_text.color = #3a2e1c
|
|
mod.widgets.DropDownFlat.draw_text.color_hover = #2a2112
|
|
mod.widgets.DropDownFlat.draw_text.color_focus = #3a2e1c
|
|
mod.widgets.DropDownFlat.draw_text.color_disabled = #a89c86
|
|
|
|
// The select wears a button of its own, built before this sheet: it is
|
|
// given the drop-down's face, its grown quad and its room here.
|
|
mod.widgets.Select.clip_x = false
|
|
mod.widgets.Select.clip_y = false
|
|
mod.widgets.MultiSelect.clip_x = false
|
|
mod.widgets.MultiSelect.clip_y = false
|
|
mod.widgets.Select.face.clip_x = false
|
|
mod.widgets.Select.face.clip_y = false
|
|
mod.widgets.MultiSelect.face.clip_x = false
|
|
mod.widgets.MultiSelect.face.clip_y = false
|
|
mod.widgets.Select.face.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.MultiSelect.face.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.Select.face.draw_bg.pixel = fn() {
|
|
return mb_dropdown(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, 0.0, self.disabled, self.focus, 1.0)
|
|
}
|
|
mod.widgets.MultiSelect.face.draw_bg.pixel = fn() {
|
|
return mb_dropdown(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, 0.0, self.disabled, self.focus, 1.0)
|
|
}
|
|
mod.widgets.Select.face.padding = mod.turtle.Inset{left: 12.0 right: 30.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.MultiSelect.face.padding = mod.turtle.Inset{left: 12.0 right: 30.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.Select.face.min_height = 26.0
|
|
mod.widgets.MultiSelect.face.min_height = 26.0
|
|
|
|
// The combo box: the drop-down one can type in, set a little lower (its
|
|
// shadow shorter).
|
|
mod.widgets.ComboBoxFlat.padding = mod.turtle.Inset{left: 12.0 right: 30.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ComboBoxFlat.input.min_height = 0.0
|
|
mod.widgets.ComboBoxFlat.clip_x = false
|
|
mod.widgets.ComboBoxFlat.clip_y = false
|
|
mod.widgets.ComboBoxFlat.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.ComboBoxFlat.draw_bg.pixel = fn() {
|
|
return mb_dropdown(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, 0.0, 0.0, self.disabled, self.focus, 0.6)
|
|
}
|
|
|
|
// Open lists: a card of white marble in a gold rim; a row under the hand
|
|
// takes a pale gold wash; the chosen row is a strip of pavé in a gold rim.
|
|
let mb_menu = fn(p: vec2, size: vec2, px: float) -> vec4 {
|
|
let c = size * 0.5
|
|
let d = Material.sd_box(p, c, c, 4.0)
|
|
let n = mb_normal(p, c, c, 4.0)
|
|
let rw = 3.0
|
|
var col = mb_stone(p + mb_seed(size), px, 0.35)
|
|
col = mix(col, vec3(0.30, 0.21, 0.07), Finish.band(d, rw, rw + px, px) * 0.5)
|
|
col = mix(col, mb_rim(d, rw, n, p), Finish.band(d, 0.0, rw, px))
|
|
let a = Finish.cover(d, px)
|
|
return vec4(col * a, a)
|
|
}
|
|
// The pavé strip of a chosen row: a hexagonal field of tiny diamonds in a
|
|
// gold rim.
|
|
let mb_pave_strip = fn(p: vec2, lo: vec2, hi: vec2, px: float, amt: float) -> vec4 {
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = min(3.0, min(h.x, h.y))
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let n = mb_normal(p, c, h, r)
|
|
let a = Finish.cover(d, px) * amt
|
|
let rw = 1.3
|
|
let pitch = 2.5
|
|
let row = floor((p.y - lo.y) / (pitch * 0.866))
|
|
let shift = fract(row * 0.5) * pitch
|
|
let cell = floor((p.x - lo.x - shift) / pitch)
|
|
let cc = vec2(lo.x + shift + (cell + 0.5) * pitch, lo.y + (row + 0.5) * pitch * 0.866)
|
|
var col = mb_gold(0.58)
|
|
let dot = mb_pave(p - cc, 1.12, Finish.hash(vec2(cell, row + 1.7)), px)
|
|
col = col * (1.0 - dot.a) + dot.rgb
|
|
col = mix(col, vec3(0.30, 0.21, 0.07), Finish.band(d, rw, rw + px, px) * 0.6)
|
|
col = mix(col, mb_rim(d, rw, n, p), Finish.band(d, 0.0, rw, px))
|
|
let sh = Finish.drop(p, c, h, r, vec2(0.0, 0.7), 0.7) * 0.22 * amt * (1.0 - a)
|
|
return Finish.over(vec4(mb_shade() * sh, sh), vec4(col * a, a))
|
|
}
|
|
let mb_row = fn(p: vec2, size: vec2, px: float, hover: float, active: float, dis: float) -> vec4 {
|
|
let wash = 0.10 * hover * (1.0 - dis)
|
|
var res = vec4(vec3(0.78, 0.63, 0.30) * wash, wash)
|
|
if active > 0.001 {
|
|
res = Finish.over(res, mb_pave_strip(p, vec2(3.0, 1.5), size - vec2(3.0, 2.0), px, active))
|
|
}
|
|
return res
|
|
}
|
|
mod.widgets.PopupMenuFlat.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
return mb_menu(self.pos * self.rect_size, self.rect_size, px)
|
|
}
|
|
mod.widgets.PopupMenuItem.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
return mb_row(self.pos * self.rect_size, self.rect_size, px, self.hover, self.active, self.disabled)
|
|
}
|
|
mod.widgets.PopupMenuItem.draw_text.color = #3a2e1c
|
|
mod.widgets.PopupMenuItem.draw_text.color_hover = #2a2112
|
|
mod.widgets.PopupMenuItem.draw_text.color_active = #2a2112
|
|
mod.widgets.ComboBoxFlat.draw_popup_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
return mb_menu(self.pos * self.rect_size, self.rect_size, px)
|
|
}
|
|
mod.widgets.ComboBoxFlat.draw_item.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
return mb_row(self.pos * self.rect_size, self.rect_size, px, self.hover, self.active, 0.0)
|
|
}
|
|
mod.widgets.ComboBoxFlat.draw_item_text.color_active = #2a2112
|
|
|
|
// ---------------------------------------------------------------- tabs
|
|
|
|
// The segmented control: a row of white marble in a chunky gold rim; the chosen
|
|
// answer is pressed down into it, its floor polished gold sunk under a deep
|
|
// shade along its upper edge, its word engraved dark in the gold.
|
|
mod.widgets.SegmentedControl.segment_height = 22.0
|
|
mod.widgets.SegmentedControlFlat.segment_height = 22.0
|
|
mod.widgets.SegmentedControlFlat.draw_bg.vertex = fn() {
|
|
let m = 10.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.SegmentedControlFlat.draw_bg.pixel = fn() {
|
|
let m = 10.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x, o.x, px), mb_snap(self.rect_size.y, o.y, px))
|
|
let face = mb_stone(p + mb_seed(self.rect_size), px, 0.42)
|
|
return mb_box(p, lo, hi, 4.0, 3.4, px, face, 0.0, 0.0, 0.0, 0.0, 1.0) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
mod.widgets.SegmentedControlFlat.draw_pill.vertex = fn() {
|
|
let m = 4.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.SegmentedControlFlat.draw_pill.pixel = fn() {
|
|
let m = 4.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
// Kept inside the strip's wider rim.
|
|
let lo = vec2(mb_snap(1.4, o.x, px), mb_snap(1.4, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x - 1.4, o.x, px), mb_snap(self.rect_size.y - 1.4, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = min(2.5, min(h.x, h.y))
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let n = mb_normal(p, c, h, r)
|
|
let a = Finish.cover(d, px)
|
|
// Concave gold: the far wall lit, the near wall in shade.
|
|
var col = mb_goldface(p, c, h, d, vec2(-n.x, -n.y), 2.4)
|
|
let ins = Finish.inset(p, c, h, r, vec2(0.0, 1.6), 1.6)
|
|
col = mix(col, col * 0.55, clamp(ins, 0.0, 1.0) * 0.75)
|
|
col = mix(col, vec3(0.22, 0.15, 0.04), Finish.band(d, 0.0, px, px) * 0.7)
|
|
return vec4(col * a, a) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
mod.widgets.SegmentedControlFlat.draw_text.text_style.font_size = 9.0
|
|
mod.widgets.SegmentedControlFlat.draw_text_selected.text_style.font_size = 9.0
|
|
mod.widgets.SegmentedControlFlat.draw_text.color = #5c4a2e
|
|
mod.widgets.SegmentedControlFlat.draw_text_selected.color = #26190a
|
|
// The chosen word takes its ink from the role palette: the dark brown.
|
|
mod.widgets.SegmentedControlFlat.palette.on_primary_container = #26190a
|
|
mod.widgets.SegmentedControlFlat.palette.on_neutral_container = #26190a
|
|
mod.widgets.SegmentedControlFlat.palette.on_secondary_container = #26190a
|
|
mod.widgets.SegmentedControl.palette.on_primary_container = #26190a
|
|
mod.widgets.SegmentedControl.palette.on_neutral_container = #26190a
|
|
mod.widgets.SegmentedControl.palette.on_secondary_container = #26190a
|
|
|
|
// Tabs: words on the stone parted by a short gold line; the tab in use a
|
|
// white marble tab in a gold rim with a gold bar under its word; under the
|
|
// hand a pale gold wash.
|
|
mod.widgets.Tabs.height = 26.0
|
|
mod.widgets.Tabs.clip_x = false
|
|
mod.widgets.Tabs.clip_y = false
|
|
let mb_tab = fn(pos: vec2, size: vec2, o: vec2, dpi: float, hover: float, active: float) -> vec4 {
|
|
let m = 8.0
|
|
let px = mb_px(dpi)
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(1.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(size.x - 1.0, o.x, px), mb_snap(size.y, o.y, px))
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
if active > 0.5 {
|
|
let face = mb_stone(p + mb_seed(size), px, 0.42)
|
|
res = mb_box(p, lo, hi, 3.5, 3.0, px, face, hover, 0.0, 0.0, 0.0, 1.0)
|
|
let c = (lo + hi) * 0.5
|
|
let bar = Material.sd_box(p, vec2(c.x, hi.y - 6.2), vec2(clamp(0.22 * (hi.x - lo.x), 5.0, 12.0), 0.8), 0.8)
|
|
let ba = Finish.cover(bar, px)
|
|
res = Finish.over(res, vec4(mb_gold(0.42) * ba, ba))
|
|
} else {
|
|
if hover > 0.001 {
|
|
let d = Material.sd_box(p, (lo + hi) * 0.5, (hi - lo) * 0.5, 3.0)
|
|
let w = Finish.cover(d, px) * 0.10 * hover
|
|
res = vec4(vec3(0.78, 0.63, 0.30) * w, w)
|
|
}
|
|
}
|
|
return res * mb_fade(pos, size, m)
|
|
}
|
|
mod.widgets.Tabs.draw_tab.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.Tabs.draw_tab_hover.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.Tabs.draw_tab_active.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.Tabs.draw_bg.pixel = fn() {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
mod.widgets.Tabs.draw_tab.pixel = fn() {
|
|
return mb_tab(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, 0.0, 0.0)
|
|
}
|
|
mod.widgets.Tabs.draw_tab_hover.pixel = fn() {
|
|
return mb_tab(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, 1.0, 0.0)
|
|
}
|
|
mod.widgets.Tabs.draw_tab_active.pixel = fn() {
|
|
return mb_tab(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, 0.0, 1.0)
|
|
}
|
|
mod.widgets.Tabs.draw_sep.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let x = Finish.snap(self.rect_pos.x + self.rect_size.x * 0.5, px) - self.rect_pos.x
|
|
let span = step(self.rect_size.y * 0.25, p.y) * step(p.y, self.rect_size.y * 0.75)
|
|
let l = step(x, p.x) * step(p.x, x + px) * span
|
|
let w = step(x + px, p.x) * step(p.x, x + px * 2.0) * span
|
|
return vec4(mb_gold(0.40), 1.0) * l + vec4(mb_gold(0.85), 1.0) * w * (1.0 - l)
|
|
}
|
|
mod.widgets.Tabs.draw_mark.color = #b8964e
|
|
mod.widgets.Tabs.draw_text.color = #5c4a2e
|
|
mod.widgets.Tabs.draw_text_active.color = #2a2112
|
|
mod.widgets.Tabs.draw_text.text_style.font_size = 9.0
|
|
mod.widgets.Tabs.draw_text_active.text_style.font_size = 9.0
|
|
|
|
// ---------------------------------------------------------------- feedback
|
|
|
|
// The progress bar: a gold tube, the value an emerald enamel rod in it
|
|
// (deep green with a lit line along its middle and a crystalline sparkle),
|
|
// a small round diamond at its head.
|
|
mod.widgets.ProgressBarFlat.height = 10.0
|
|
mod.widgets.ProgressBarFlat.clip_x = false
|
|
mod.widgets.ProgressBarFlat.clip_y = false
|
|
mod.widgets.ProgressBarFlat.draw_bg.vertex = fn() {
|
|
let m = 5.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.ProgressBarFlat.draw_bg.pixel = fn() {
|
|
let m = 5.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let th = min(8.0, self.rect_size.y)
|
|
let y0 = mb_snap((self.rect_size.y - th) * 0.5, o.y, px)
|
|
let x0 = mb_snap(self.rect_size.x * self.start + 1.0, o.x, px)
|
|
let x1 = mb_snap(self.rect_size.x * self.end - 1.0, o.x, px)
|
|
let lo = vec2(x0, y0)
|
|
let hi = vec2(x1, y0 + th)
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
if self.track > 0.5 {
|
|
res = mb_rail(res, p, lo, hi, px, 0.0, 0.0, 0.0)
|
|
}
|
|
let rw = 1.5
|
|
let span = hi.x - lo.x - rw * 2.0
|
|
var f0 = lo.x + rw
|
|
var f1 = f0 + span * clamp((self.value - self.start) / max(self.end - self.start, 0.001), 0.0, 1.0)
|
|
let unknown = step(self.value, -0.0001)
|
|
if unknown > 0.5 {
|
|
f0 = lo.x + span * 0.3
|
|
f1 = lo.x + span * 0.7
|
|
}
|
|
let fc = vec2((f0 + f1) * 0.5, (lo.y + hi.y) * 0.5)
|
|
let fh = vec2(max((f1 - f0) * 0.5, 0.01), th * 0.5 - rw)
|
|
let fd = Material.sd_box(p, fc, fh, fh.y)
|
|
let fa = Finish.cover(fd, px) * step(0.5, fh.x)
|
|
let t = (p.y - fc.y) / max(fh.y, 0.5)
|
|
// The enamel: an intent other than the plain one tints it.
|
|
let ic = self.fill_color()
|
|
let tint = step(0.5, self.intent)
|
|
let ink = mix(mb_emerald(), ic.rgb, tint * 0.8)
|
|
var col = mix(ink * 0.55, ink * 1.05, smoothstep(1.0, -0.6, t))
|
|
col = mix(col, mix(ink, vec3(1.0, 1.0, 1.0), 0.55), exp(-(t + 0.25) * (t + 0.25) / 0.06) * 0.55)
|
|
let sp = Finish.hash(floor(p / (px * 1.5)) + vec2(3.7, 1.1))
|
|
col = col * (0.88 + 0.24 * sp)
|
|
col = mix(col, vec3(1.0, 1.0, 1.0), step(0.985, sp) * 0.6)
|
|
var fill = vec4(col * fa, fa)
|
|
if unknown > 0.5 {
|
|
fill = fill * smoothstep(f0 - 1.0, f0 + span * 0.1, p.x) * smoothstep(f1 + 1.0, f1 - span * 0.1, p.x)
|
|
}
|
|
res = Finish.over(res, fill)
|
|
if unknown < 0.5 && f1 > f0 + 2.0 {
|
|
res = mb_gemdot(res, p, vec2(f1, fc.y), 3.9, px)
|
|
}
|
|
return res * self.opacity * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// THE LEVEL METER: a row of small square-cut stones set in a gold channel,
|
|
// the pictures' jewelled meter: emeralds to 70 %, citrines to 90 %, rubies
|
|
// past it; a lit stone is light itself (white at its heart), an unlit one
|
|
// dark tinted glass. A stone held at the peak, a ruby clip lamp.
|
|
mod.widgets.LevelMeter.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let sz = self.rect_size
|
|
let p = self.pos * sz
|
|
let v = self.vertical
|
|
let along = mix(sz.x, sz.y, v)
|
|
let across = mix(sz.y, sz.x, v)
|
|
let a = mix(p.x, sz.y - p.y, v)
|
|
let b = mix(p.y, p.x, v)
|
|
let lamp_room = self.lamp * (across + 3.0)
|
|
let bar = max(4.0, along - lamp_room)
|
|
let wa = min(across, 8.0)
|
|
let wb0 = (across - wa) * 0.5
|
|
let wlo = mix(vec2(0.0, wb0), vec2(wb0, sz.y - bar), v)
|
|
let whi = mix(vec2(bar, wb0 + wa), vec2(wb0 + wa, sz.y), v)
|
|
let lo = vec2(mb_snap(wlo.x, o.x, px), mb_snap(wlo.y, o.y, px))
|
|
let hi = vec2(mb_snap(whi.x, o.x, px), mb_snap(whi.y, o.y, px) - px)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = min(2.0, min(h.x, h.y))
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let n = mb_normal(p, c, h, r)
|
|
let ca = Finish.cover(d, px)
|
|
let rw = clamp(0.18 * wa, 0.8, 1.4)
|
|
var col = mb_gold(0.22)
|
|
col = mix(col, mb_rim(d, rw, n, p), Finish.band(d, 0.0, rw, px))
|
|
var res = vec4(col * ca, ca)
|
|
let pad = rw + 0.6
|
|
let span = max(1.0, bar - pad * 2.0)
|
|
let pitch = 4.5
|
|
let ga = a - pad
|
|
let ci = floor(ga / pitch)
|
|
let cl = (ga - ci * pitch) - 1.85
|
|
let gb = b - (wb0 + wa * 0.5)
|
|
let ghw = max(wa * 0.5 - rw - 0.5, 0.6)
|
|
let sd = max(abs(cl) - 1.75, abs(gb) - ghw)
|
|
let cell = Finish.cover(sd, px)
|
|
let share = clamp((ci * pitch + 1.85) / span, 0.0, 1.0)
|
|
let inb = step(pad, a) * step(a, bar - pad)
|
|
let ha = max(self.hot_at, 0.7)
|
|
var ink = mb_emerald()
|
|
ink = mix(ink, mb_citrine(), step(ha, share))
|
|
ink = mix(ink, mb_ruby(), step(max(self.hot_to, 0.9), share))
|
|
let on = step(share, self.level) * step(0.001, self.level)
|
|
let hc = step(abs(ci * pitch - floor((span * self.hold) / pitch) * pitch), 0.1) * step(0.002, self.hold)
|
|
let lit = max(on, hc * 0.9)
|
|
let gq = vec2(cl / 1.75, gb / ghw)
|
|
let core = exp(-dot(gq, gq) / 0.35)
|
|
var lcol = mix(mb_lamp_hue(ink, 0.6) * 0.9, vec3(1.0, 0.99, 0.96), core * 0.55)
|
|
lcol = lcol * (0.88 + 0.22 * Finish.hash(vec2(ci, 4.4)))
|
|
var dcol = mix(vec3(0.07, 0.065, 0.055), mb_lamp_full(ink) * 0.35, 0.18)
|
|
dcol = dcol + vec3(0.18, 0.17, 0.15) * smoothstep(0.5, 0.95, gq.y) * 0.5
|
|
let gcol = mix(dcol, lcol, lit)
|
|
res = Finish.over(res, vec4(gcol, 1.0) * cell * inb * self.opacity)
|
|
if self.lamp > 0.5 {
|
|
let lc = mix(vec2(bar + 3.0 + across * 0.5, sz.y * 0.5), vec2(sz.x * 0.5, across * 0.5), v)
|
|
let rl = max(across * 0.5 - 2.0, 1.0)
|
|
res = mb_lamp(res, p, lc, vec2(rl * 0.62, rl * 0.62), step(0.5, self.over), mb_ruby(), 0.6, px, mb_ground(), 2.0, 1.0)
|
|
}
|
|
return res * self.opacity
|
|
}
|
|
|
|
// The spinner keeps the library's own turning face and takes the gold.
|
|
mod.widgets.SpinnerFlat.draw_bg.color = #b8964e
|
|
mod.widgets.SpinnerFlat.draw_bg.track_alpha = 0.18
|
|
|
|
// The rings, the arc and the stock bars keep their own faces; the plain
|
|
// intent reads in emerald.
|
|
mod.widgets.ProgressRingFlat.draw_bg.color_primary = #0f7a42
|
|
mod.widgets.ProgressRing.draw_bg.color_primary = #0f7a42
|
|
mod.widgets.ProgressArc.draw_bg.color_primary = #0f7a42
|
|
mod.widgets.ActivityRings.draw_bg.color_primary = #0f7a42
|
|
mod.widgets.ProgressBarFlat.draw_bg.color_primary = #0f7a42
|
|
mod.widgets.ProgressBar.draw_bg.color_primary = #0f7a42
|
|
mod.widgets.ProgressBarGradientX.draw_bg.color_primary = #0f7a42
|
|
mod.widgets.ProgressBarGradientY.draw_bg.color_primary = #0f7a42
|
|
|
|
// Words in the error intent beside a check box or a toggle: a ruby red that
|
|
// reads on the stone.
|
|
mod.widgets.CheckBoxFlat.draw_text.color_error = #9c1830
|
|
mod.widgets.ToggleFlat.draw_text.color_error = #9c1830
|
|
|
|
// ---------------------------------------------------------------- surfaces
|
|
|
|
// The scroll bar: a slim gold rod for its gutter and a polished gold bead
|
|
// for its thumb, brighter under the hand.
|
|
mod.widgets.ScrollBar.bar_size = 8.0
|
|
mod.widgets.ScrollBar.bar_side_margin = 1.0
|
|
mod.widgets.ScrollBar.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let sz = self.rect_size
|
|
let p = self.pos * sz
|
|
let v = self.is_vertical
|
|
let t0 = mix(sz.x * self.norm_scroll, sz.y * self.norm_scroll, v)
|
|
let t1 = t0 + mix(sz.x * self.norm_handle, sz.y * self.norm_handle, v)
|
|
let mid = mix(sz.y * 0.5, sz.x * 0.5, v)
|
|
let glo = mix(vec2(1.0, mid - 1.0), vec2(mid - 1.0, 1.0), v)
|
|
let ghi = mix(vec2(sz.x - 1.0, mid + 1.0), vec2(mid + 1.0, sz.y - 1.0), v)
|
|
let gd = Material.sd_box(p, (glo + ghi) * 0.5, (ghi - glo) * 0.5, 1.0)
|
|
let gutter = Finish.cover(gd, px) * 0.55
|
|
var res = vec4(mb_gold(0.45) * gutter, gutter)
|
|
let tlo = mix(vec2(t0, mid - 2.6), vec2(mid - 2.6, t0), v)
|
|
let thi = mix(vec2(t1, mid + 2.6), vec2(mid + 2.6, t1), v)
|
|
let lo = vec2(mb_snap(tlo.x, o.x, px), mb_snap(tlo.y, o.y, px))
|
|
let hi = vec2(mb_snap(thi.x, o.x, px), mb_snap(thi.y, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = Material.sd_box(p, c, h, 2.6)
|
|
let n = mb_normal(p, c, h, 2.6)
|
|
let across = mix((p.y - c.y) / max(h.y, 0.5), (p.x - c.x) / max(h.x, 0.5), v)
|
|
let nn = mix(vec2(0.0, 1.0), vec2(1.0, 0.0), v)
|
|
var col = mb_gold(mb_env(across * dot(nn, mb_lv()) * 0.9)) * (1.0 + 0.10 * max(self.hover, self.drag))
|
|
let a = Finish.cover(d, px) * 0.95
|
|
res = Finish.over(res, vec4(col * a, a))
|
|
return res * self.opacity
|
|
}
|
|
|
|
// A RAISED PANEL, the pictures' framed marble slab: white marble (its veins
|
|
// calm under the words) in a double polished gold frame 5.4 points wide (a
|
|
// broad bead, a dark groove, a slim bead), a dark seam and a line of
|
|
// milgrain beads inside the frame, a small gold scroll in each corner (kept within
|
|
// the corner's nine points, clear of anything the panel holds) and a soft
|
|
// warm shadow under it, drawn in from the sides so it stays in the gap.
|
|
// `sunk` 1 makes it a well: the stone under the frame, shaded under its top
|
|
// edge, no shadow out. `orn` 0 leaves the scrolls off.
|
|
let mb_panel = fn(p: vec2, size: vec2, o: vec2, px: float, r: float, hover: float, lift: float, sunk: float, orn: float) -> vec4 {
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(size.x, o.x, px), mb_snap(size.y, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let a = Finish.cover(d, px)
|
|
let n = mb_normal(p, c, h, r)
|
|
let hs = vec2(max(h.x - 3.0, 1.0), h.y)
|
|
let amb = Finish.drop(p, c, hs, min(r, min(hs.x, hs.y)), vec2(0.0, 3.0 + 0.6 * hover), 2.6) * (0.26 + 0.04 * hover) * lift
|
|
let con = Finish.drop(p, c, h, r, vec2(0.0, 0.6 + px * 0.5), 0.6 + px * 0.5) * 0.30 * (1.0 - 0.5 * sunk)
|
|
let sc = (1.0 - (1.0 - amb * (1.0 - sunk)) * (1.0 - con)) * (1.0 - a)
|
|
var res = vec4(mb_shade() * sc, sc)
|
|
let rw = 5.4
|
|
var face = mb_stone(p + mb_seed(size) + vec2(37.0, 11.0), px, 0.6)
|
|
let t = clamp((p.y - lo.y) / max(size.y, 1.0), 0.0, 1.0)
|
|
face = face * mix(1.012 - 0.03 * t, 0.955, sunk) + vec3(0.006, 0.006, 0.005) * hover
|
|
let insh = Finish.inset(p, c, h - vec2(rw, rw), max(r - rw, 0.0), vec2(0.0, mix(1.2, 3.4, sunk)), mix(1.5, 4.0, sunk))
|
|
face = mix(face, face * mix(0.86, 0.72, sunk), clamp(insh, 0.0, 1.0) * mix(0.45, 0.9, sunk))
|
|
var col = mb_milgrain(face, p, c, h, r, rw + 1.0, 0.62, 1.9, px)
|
|
// The corner scrolls, with their own small shadow on the stone.
|
|
if orn > 0.5 && size.x > 60.0 && size.y > 40.0 {
|
|
let dl = p - lo
|
|
let dr = hi - p
|
|
let m = vec2(min(dl.x, dr.x), min(dl.y, dr.y)) - vec2(2.6, 2.6)
|
|
let sx = mix(1.0, -1.0, step(dr.x, dl.x))
|
|
let sy = mix(1.0, -1.0, step(dr.y, dl.y))
|
|
let lv = vec2(mb_lv().x * sx, mb_lv().y * sy)
|
|
let g = mb_corner(m, 0.9, lv, px)
|
|
let shm = vec2(min(dl.x - 0.3, dr.x + 0.3), min(dl.y - 0.8, dr.y + 0.8)) - vec2(2.6, 2.6)
|
|
let gs = mb_corner(shm, 0.9, lv, px)
|
|
col = mix(col, col * 0.72, gs.x * 0.6)
|
|
col = mix(col, mb_gold(g.y), g.x)
|
|
// The small stone in each corner's eye.
|
|
let eye = vec2(mix(hi.x - 8.9, lo.x + 8.9, step(0.0, sx)), mix(hi.y - 8.9, lo.y + 8.9, step(0.0, sy)))
|
|
let ed = length(p - eye) - 1.55
|
|
col = mix(col, mb_gold(0.3), Finish.cover(ed - 0.45, px))
|
|
col = mix(col, mb_brilliant(p - eye, 1.55, mb_diamond(), 0.4, px), Finish.cover(ed, px))
|
|
}
|
|
col = mix(col, vec3(0.30, 0.21, 0.07), Finish.band(d, rw, rw + px, px) * 0.55)
|
|
col = mix(col, mb_rim2(d, rw, n, p, px), Finish.band(d, 0.0, rw, px))
|
|
return Finish.over(res, vec4(col * a, a))
|
|
}
|
|
|
|
mod.widgets.PanelView.clip_x = false
|
|
mod.widgets.PanelView.clip_y = false
|
|
mod.widgets.PanelView.padding = mod.turtle.Inset{left: 10.0 right: 10.0 top: 10.0 bottom: 10.0}
|
|
mod.widgets.PanelView.draw_bg.vertex = fn() {
|
|
let m = 12.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.PanelView.draw_bg.pixel = fn() {
|
|
let m = 12.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
return mb_panel(p, self.rect_size, self.rect_pos, px, 5.0, 0.0, 1.0, step(0.5, self.sunken), 1.0) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// The rounded view keeps the colour its caller gives it, with a true
|
|
// corner and, when it is opaque, a fine gold edge.
|
|
mod.widgets.RoundedView.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let lo = vec2(self.border_inset.x, self.border_inset.y)
|
|
let hi = self.rect_size - vec2(self.border_inset.z, self.border_inset.w)
|
|
let c = (lo + hi) * 0.5
|
|
let h = max((hi - lo) * 0.5, vec2(0.5, 0.5))
|
|
let r = min(2.0 * max(1.0, self.border_radius), min(h.x, h.y))
|
|
let d = Material.sd_box(p, c, h, r)
|
|
var fill = self.color
|
|
if self.color_2.x > -0.5 {
|
|
fill = mix(self.color, self.color_2, mix(self.pos.y, self.pos.x, self.gradient_fill_horizontal))
|
|
}
|
|
var ink = self.border_color
|
|
if self.border_size < 0.01 {
|
|
ink = vec4(mb_gold(0.5), fill.a)
|
|
}
|
|
let a = Finish.cover(d, px)
|
|
let bd = Finish.band(d, 0.0, max(self.border_size, px), px)
|
|
var col = mix(fill.rgb, ink.rgb, bd * ink.a)
|
|
return vec4(col * a * fill.a, a * fill.a) + vec4(ink.rgb * ink.a, ink.a) * bd * a * (1.0 - fill.a)
|
|
}
|
|
|
|
// The card: its three appearances told apart. Elevated, a framed marble
|
|
// slab standing off the stone with its scrolls and a deeper shadow, more of
|
|
// it under the hand; filled, a framed slab seated with its contact shadow
|
|
// only; outlined, the stone inside a fine gold wire.
|
|
mod.widgets.Card.clip_x = false
|
|
mod.widgets.Card.clip_y = false
|
|
mod.widgets.Card.padding = mod.turtle.Inset{left: 14.0 right: 14.0 top: 13.0 bottom: 13.0}
|
|
mod.widgets.Card.draw_bg.vertex = fn() {
|
|
let m = 14.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.Card.draw_bg.pixel = fn() {
|
|
let m = 14.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let fade = mb_fade(self.pos, self.rect_size, m)
|
|
if self.border_size > 0.01 {
|
|
let o = self.rect_pos
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x, o.x, px), mb_snap(self.rect_size.y, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = Material.sd_box(p, c, h, 5.0)
|
|
let n = mb_normal(p, c, h, 5.0)
|
|
let ring = Finish.band(d, 0.0, 2.4, px)
|
|
let col = mb_rim(d, 2.4, n, p)
|
|
let wash = 0.3 * self.hover * Finish.cover(d, px)
|
|
var res = vec4(vec3(1.0, 1.0, 1.0) * wash, wash)
|
|
return Finish.over(res, vec4(col * ring, ring)) * fade
|
|
}
|
|
if self.shadow_radius < 0.01 {
|
|
return mb_panel(p, self.rect_size, self.rect_pos, px, 5.0, self.hover, 0.0, 0.0, 1.0) * fade
|
|
}
|
|
return mb_panel(p, self.rect_size, self.rect_pos, px, 5.0, self.hover, 1.3, 0.0, 1.0) * fade
|
|
}
|
|
|
|
// LISTS: the rows stand in a white marble well framed in a gold rim, each
|
|
// row drawing the part of the well it covers (the well is the clip the rows
|
|
// are drawn in, the list's own box, so it stays put while the rows scroll).
|
|
// The well is held four points in from the box's leading edge and a point
|
|
// from the others, so whatever stands beside the list keeps its room. Under the hand a row takes a pale gold wash; the chosen row is a
|
|
// strip of pavé diamonds in a gold rim. The words are the ink.
|
|
mod.widgets.ListItem.padding = mod.turtle.Inset{left: 14.0 right: 10.0 top: 0.0 bottom: 0.0}
|
|
// A one-line row is 25 points, so a short list ends on a whole row.
|
|
mod.widgets.ListItemOne.height = 25.0
|
|
mod.widgets.ListItem.clip_x = false
|
|
mod.widgets.ListItem.clip_y = false
|
|
mod.widgets.ListItem.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * self.rect_size
|
|
let live = 1.0 - self.disabled
|
|
let tlo = vec2(mb_snap(self.draw_clip.x - o.x + 4.0, o.x, px), mb_snap(self.draw_clip.y - o.y + 1.0, o.y, px))
|
|
let thi = vec2(mb_snap(self.draw_clip.z - o.x - 1.0, o.x, px), mb_snap(self.draw_clip.w - o.y - 1.0, o.y, px))
|
|
let tc = (tlo + thi) * 0.5
|
|
let th = max((thi - tlo) * 0.5, vec2(1.0, 1.0))
|
|
let tr = min(4.0, min(th.x, th.y))
|
|
let d = Material.sd_box(p, tc, th, tr)
|
|
let n = mb_normal(p, tc, th, tr)
|
|
let a = Finish.cover(d, px)
|
|
// The well's stone is laid in the well's own frame, so it holds still
|
|
// under the scrolling rows.
|
|
let wq = p - tlo + mb_seed(thi - tlo)
|
|
var col = mb_stone(wq, px, 0.4) * 0.985
|
|
col = mix(col, col * 0.84, clamp(Finish.inset(p, tc, th - vec2(2.2, 2.2), tr, vec2(0.0, 2.0), 2.4), 0.0, 1.0) * 0.6)
|
|
col = col + vec3(0.06, 0.045, 0.01) * self.hover * live
|
|
col = mix(col, vec3(0.30, 0.21, 0.07), Finish.band(d, 2.2, 2.2 + px, px) * 0.5)
|
|
col = mix(col, mb_rim(d, 2.2, n, p), Finish.band(d, 0.0, 2.2, px))
|
|
var res = vec4(col * a, a)
|
|
if self.selected > 0.001 {
|
|
let lo = vec2(mb_snap(8.0, o.x, px), mb_snap(2.0, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x - 5.0, o.x, px), mb_snap(self.rect_size.y - 2.0, o.y, px))
|
|
res = Finish.over(res, mb_pave_strip(p, lo, hi, px, self.selected) * a)
|
|
}
|
|
return res
|
|
}
|
|
mod.widgets.ListItem.draw_text.color = #3a2e1c
|
|
mod.widgets.ListItem.draw_text_2.color = #5c4a2e
|
|
|
|
// A chip is a small white marble box in a gold rim; its label the ink
|
|
// whatever its role.
|
|
mod.widgets.ChipFlat.draw_text.text_style = mod.theme.font_bold{font_size: 9.0}
|
|
mod.widgets.ChipFlat.palette.on_neutral = #3a2e1c
|
|
mod.widgets.ChipFlat.palette.on_neutral_container = #3a2e1c
|
|
mod.widgets.ChipFlat.palette.neutral = #3a2e1c
|
|
mod.widgets.ChipFlat.palette.on_primary = #3a2e1c
|
|
mod.widgets.ChipFlat.palette.on_primary_container = #3a2e1c
|
|
mod.widgets.ChipFlat.palette.primary = #3a2e1c
|
|
mod.widgets.ChipFlat.palette.on_secondary_container = #3a2e1c
|
|
mod.widgets.ChipFlat.palette.on_tertiary_container = #3a2e1c
|
|
mod.widgets.ChipFlat.draw_bg.vertex = fn() {
|
|
let m = 8.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.ChipFlat.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x, o.x, px), mb_snap(self.rect_size.y, o.y, px))
|
|
let face = mb_stone(p + mb_seed(self.rect_size), px, 0.45) * (1.0 + 0.04 * self.hover - 0.06 * self.down)
|
|
return mb_box(p, lo, hi, 3.5, 2.6, px, face, self.hover, self.down, 0.0, self.keyed, 1.0) * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
|
|
// A count is a small white marble box in a gold rim with brown figures.
|
|
mod.widgets.BadgePalette.neutral = #f6f5f1
|
|
mod.widgets.BadgePalette.on_neutral = #3a2e1c
|
|
mod.widgets.BadgeFlat.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * self.rect_size
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(self.rect_size.x - px * 0.49, o.x, px), mb_snap(self.rect_size.y - px * 0.49, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = min(3.0, min(h.x, h.y))
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let n = mb_normal(p, c, h, r)
|
|
let rw = 2.2
|
|
var col = mb_stone(p + mb_seed(self.rect_size), px, 0.3)
|
|
col = mix(col, self.color.rgb, 0.3 * step(self.color.a, 0.99))
|
|
col = mix(col, vec3(0.30, 0.21, 0.07), Finish.band(d, rw, rw + px, px) * 0.5)
|
|
col = mix(col, mb_rim(d, rw, n, p), Finish.band(d, 0.0, rw, px))
|
|
let a = Finish.cover(d, px)
|
|
return vec4(col * a, a)
|
|
}
|
|
|
|
// LAMPS. The Lamp and the bar lamp are the sheet's LED gem (above) in its
|
|
// gold bezel. The halo's room is held in the lamp's own box, so the light is
|
|
// never cut at its edge; the bar lamp keeps to the left of its cell, short
|
|
// enough that it and its light end well before whatever stands beside it.
|
|
mod.widgets.Lamp.halo = 0.3
|
|
mod.widgets.Lamp.halo_reach = 1.0
|
|
mod.widgets.Lamp.draw_bg.color_accent = uniform(#18b864)
|
|
mod.widgets.Lamp.draw_bg.color_success = uniform(#22c76a)
|
|
mod.widgets.Lamp.draw_bg.color_warning = uniform(#f5a52e)
|
|
mod.widgets.Lamp.draw_bg.color_error = uniform(#ec2f4a)
|
|
mod.widgets.Lamp.draw_bg.color_plain = uniform(#ffe6b8)
|
|
mod.widgets.Lamp.draw_bg.vertex = fn() {
|
|
let m = 2.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.Lamp.draw_bg.pixel = fn() {
|
|
let m = 2.0
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let reach = clamp(self.reach, 0.0, 1.0)
|
|
let t = self.rect_size.y / (1.0 + 2.0 * reach)
|
|
let room = t * reach
|
|
let c = self.rect_size * 0.5
|
|
// A bar is a short light pipe a little slimmer than the round lamp,
|
|
// set at the left of its cell, its light kept within two and a half
|
|
// points of its bezel.
|
|
let tb = mix(t, t * 0.78, self.bar)
|
|
let half_len = min(max((self.rect_size.x - 2.0 * room) * 0.5, t * 0.5), tb * 1.1)
|
|
let bwb = clamp(0.32 * tb * 0.5, 0.7, 2.4)
|
|
let cb = vec2(mix(c.x, 1.0 + bwb + half_len, self.bar), c.y)
|
|
let hb = vec2(mix(t * 0.5, half_len, self.bar), tb * 0.5)
|
|
let res = mb_lamp(vec4(0.0, 0.0, 0.0, 0.0), p, cb, hb, self.lit, self.intent_color().rgb, 0.35 * (1.0 - step(3.5, self.intent)), px, mb_ground(), mix(max(room - 0.5, 2.0), 2.5, self.bar), 1.0)
|
|
return res * self.opacity
|
|
}
|
|
|
|
// Dividers are a fine gold wire: a bright line over a dark one, a small
|
|
// round diamond set at the middle of a long one.
|
|
mod.widgets.Hr.draw_bg.vertex = fn() {
|
|
let m = 4.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.Hr.draw_bg.pixel = fn() {
|
|
let m = 4.0
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let y = Finish.snap(self.rect_pos.y + self.rect_size.y * 0.5, px) - self.rect_pos.y
|
|
let span = step(4.0, p.x) * step(p.x, self.rect_size.x - 4.0)
|
|
let l = step(y, p.y) * step(p.y, y + px) * span
|
|
let w = step(y + px, p.y) * step(p.y, y + px * 2.0) * (1.0 - l) * span
|
|
var res = vec4(mb_gold(0.80), 1.0) * l + vec4(mb_gold(0.30), 1.0) * w
|
|
if self.rect_size.x > 80.0 {
|
|
res = mb_gemdot(res, p, vec2(self.rect_size.x * 0.5, y + px), 2.6, px)
|
|
}
|
|
return res * mb_fade(self.pos, self.rect_size, m)
|
|
}
|
|
mod.widgets.Vr.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let x = Finish.snap(self.rect_pos.x + self.rect_size.x * 0.5, px) - self.rect_pos.x
|
|
let l = step(x, p.x) * step(p.x, x + px)
|
|
let w = step(x + px, p.x) * step(p.x, x + px * 2.0) * (1.0 - l)
|
|
return vec4(mb_gold(0.80), 1.0) * l + vec4(mb_gold(0.30), 1.0) * w
|
|
}
|
|
|
|
// ---------------------------------------------------------------- screens
|
|
|
|
// A SCREEN is black onyx glass in a polished gold bezel: the face the
|
|
// screen colour with a few faint grey veins in it (a black marble, calm
|
|
// enough for the figures), darkest under its top edge where the bezel
|
|
// shades it (`recess` points deep), a dark device pixel where the face
|
|
// meets the gold; the bezel (`bezel` points, at least two) a round bead lit
|
|
// from the top; a contact shadow on the stone under it. Figures on it are
|
|
// champagne gold.
|
|
let mb_screen = fn(p: vec2, size: vec2, o: vec2, px: float, r: float, bezel: float, recess: float, face_ink: vec3) -> vec4 {
|
|
let lo = vec2(mb_snap(0.0, o.x, px), mb_snap(0.0, o.y, px))
|
|
let hi = vec2(mb_snap(size.x, o.x, px), mb_snap(size.y, o.y, px) - px)
|
|
let c = (lo + hi) * 0.5
|
|
let ho = (hi - lo) * 0.5
|
|
let ro = min(r, min(ho.x, ho.y))
|
|
let outer = Material.sd_box(p, c, ho, ro)
|
|
let n = mb_normal(p, c, ho, ro)
|
|
let b = Finish.snap(max(bezel, 2.2), px)
|
|
let hf = max(ho - vec2(b, b), vec2(0.5, 0.5))
|
|
let rf = max(ro - b, 0.0)
|
|
let fd = Material.sd_box(p, c, hf, rf)
|
|
let sh = Finish.drop(p, c, ho, ro, vec2(0.0, 1.0), 1.1) * 0.30 * (1.0 - Finish.cover(outer, px))
|
|
var res = vec4(mb_shade() * sh, sh)
|
|
// The black marble: the stone's veins, inverted and faint.
|
|
let st = mb_stone(p + mb_seed(size) + vec2(91.0, 17.0), px, 1.0)
|
|
let vein = clamp((0.965 - dot(st, vec3(0.333, 0.333, 0.334))) * 3.0, 0.0, 1.0)
|
|
var face = face_ink + vec3(0.11, 0.105, 0.095) * vein * 0.55
|
|
if recess > 0.0 {
|
|
let insh = Finish.inset(p, c, hf, rf, vec2(0.0, recess * 0.5), max(recess * 0.45, 0.3))
|
|
face = mix(face, face * 0.35, 0.8 * insh)
|
|
}
|
|
face = mix(face, vec3(0.02, 0.015, 0.008), Finish.band(fd, 0.0, px, px) * 0.8)
|
|
let col = mix(mb_rim(outer, b, n, p), face, Finish.cover(fd, px))
|
|
let a = Finish.cover(outer, px)
|
|
return Finish.over(res, vec4(col * a, a))
|
|
}
|
|
mod.widgets.ScreenView.draw_bg.border_radius = uniform(5.0)
|
|
mod.widgets.ScreenView.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
var res = mb_screen(p, self.rect_size, self.rect_pos, px, self.border_radius, self.bezel, self.recess, self.color.rgb)
|
|
// The screen's status light, an emerald lit in its top right corner;
|
|
// its light stays on the face.
|
|
let b = max(self.bezel, 2.2)
|
|
let fdist = Material.sd_box(p, self.rect_size * 0.5, max(self.rect_size * 0.5 - vec2(b, b), vec2(0.5, 0.5)), max(self.border_radius - b, 0.0))
|
|
res = mix(res, mb_lamp(res, p, vec2(self.rect_size.x - b - 5.5, b + 5.5), vec2(1.5, 1.5), 1.0, mb_emerald(), 0.6, px, vec3(0.08, 0.07, 0.06), 6.0, 0.0), Finish.cover(fdist + 0.5, px))
|
|
if self.scan > 0.0 {
|
|
let s = Finish.scan(p.y, px, 3.0 * px, self.scan)
|
|
res = vec4(res.rgb * mix(1.0, s, 0.6), res.a)
|
|
}
|
|
return res * self.color.a
|
|
}
|
|
// The glass: a faint diagonal band over the face.
|
|
mod.widgets.ScreenView.sheen = 0.035
|
|
mod.widgets.ScreenView.draw_glass.pixel = fn() {
|
|
let p = self.pos * self.rect_size
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let lo = vec2(Finish.snap(self.rect_pos.x, px), Finish.snap(self.rect_pos.y, px)) - self.rect_pos
|
|
let hi = vec2(Finish.snap(self.rect_pos.x + self.rect_size.x, px), Finish.snap(self.rect_pos.y + self.rect_size.y, px) - px) - self.rect_pos
|
|
let c = (lo + hi) * 0.5
|
|
let ho = (hi - lo) * 0.5
|
|
let b = Finish.snap(max(self.bezel, 2.2), px)
|
|
let hf = max(ho - vec2(b, b), vec2(0.5, 0.5))
|
|
let fd = Material.sd_box(p, c, hf, max(min(self.face_radius, min(ho.x, ho.y)) - b, 0.0))
|
|
let u = (p - (c - hf)) / max(hf * 2.0, vec2(1.0, 1.0))
|
|
let diag = u.x + u.y * 0.6
|
|
let band = smoothstep(0.0, 0.12, diag) * (1.0 - smoothstep(0.28, 0.5, diag))
|
|
let a = clamp(self.sheen * band, 0.0, 1.0) * Finish.cover(fd + px, px)
|
|
return vec4(vec3(1.0, 0.95, 0.85) * a, a)
|
|
}
|
|
|
|
// THE NEEDLE METER is a screen: the same onyx in its gold bezel, its scale
|
|
// printed in gold (a tick at every division, the majors two device pixels
|
|
// wide and the minors one and dimmer, a faint arc under them), the red
|
|
// zone a ruby band just outside the arc, the needle a fine gold line with a
|
|
// soft warm light along it, its root under a small round diamond in a gold
|
|
// bezel.
|
|
mod.widgets.NeedleMeter.draw_bg.border_radius = uniform(5.0)
|
|
mod.widgets.NeedleMeter.draw_bg.color_zone = uniform(#d0203e)
|
|
mod.widgets.NeedleMeter.draw_bg.color_scale = uniform(#e2c886)
|
|
mod.widgets.NeedleMeter.draw_bg.color_needle = uniform(#f6dc98)
|
|
mod.widgets.NeedleMeter.draw_bg.pixel = fn() {
|
|
let p = self.pos * self.rect_size
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let pv = self.pivot()
|
|
let rr = self.scale_radius()
|
|
let q = p - pv
|
|
let r = length(q)
|
|
let ang = atan2(q.x, 0.0 - q.y)
|
|
let sweep = self.sweep * 0.017453293
|
|
let t = ang / sweep + 0.5
|
|
let on_scale = step(-0.0001, t) * step(t, 1.0001)
|
|
let res = mb_screen(p, self.rect_size, self.rect_pos, px, self.border_radius, 2.4, 4.0, self.color.rgb)
|
|
var col = res.rgb / max(res.a, 0.001)
|
|
let ink = self.color_scale.rgb
|
|
let arc = Finish.cover(abs(r - rr) - px * 0.5, px) * on_scale
|
|
let n = max(floor(self.majors + 0.5), 1.0) * max(floor(self.minors + 0.5), 1.0)
|
|
let k = floor(clamp(t, 0.0, 1.0) * n + 0.5)
|
|
let ak = (k / n - 0.5) * sweep
|
|
let perp = abs(q.x * cos(ak) + q.y * sin(ak))
|
|
let mn = max(floor(self.minors + 0.5), 1.0)
|
|
let major = 1.0 - step(0.5, k - mn * floor(k / mn + 0.0001))
|
|
let len = mix(self.tick_minor, self.tick_major, major)
|
|
let radial = max(rr - len - r, r - rr)
|
|
let tick = Finish.cover(perp - px * mix(0.5, 1.0, major), px) * Finish.cover(radial, px) * step(0.0, -q.y * cos(ak) + q.x * sin(ak))
|
|
col = mix(col, ink, max(arc * 0.4, tick * mix(0.55, 0.95, major)))
|
|
if self.zone < 0.999 {
|
|
let zone_t = Finish.cover((self.zone - t) * sweep * r, px) * Finish.cover((t - 1.0) * sweep * r, px)
|
|
let zone_r = Finish.cover(max(rr + px - r, r - rr - 2.5), px)
|
|
col = mix(col, self.color_zone.rgb, zone_t * zone_r * 0.9)
|
|
}
|
|
let na = self.needle_angle(self.value)
|
|
let nd = vec2(sin(na), 0.0 - cos(na))
|
|
let tail = max(self.pivot_size - px, 0.0)
|
|
let along = dot(q, nd)
|
|
let across = abs(q.x * nd.y - q.y * nd.x)
|
|
let span = smoothstep(-1.0, 1.0, rr + 3.0 - along) * smoothstep(-1.0, 1.0, along + tail)
|
|
let halo = 0.30 / (1.0 + (across / 1.2) * (across / 1.2)) * span
|
|
col = col + (vec3(1.0, 1.0, 1.0) - exp(-vec3(0.95, 0.70, 0.30) * halo)) * max(vec3(1.0, 1.0, 1.0) - col, vec3(0.0, 0.0, 0.0))
|
|
let needle = Finish.cover(across - 0.55, px) * Finish.cover(along - (rr + 3.0), px) * Finish.cover(0.0 - along - tail, px)
|
|
col = mix(col, self.color_needle.rgb, needle)
|
|
let pr = max(self.pivot_size + 0.5, 2.0)
|
|
let piv = mb_gemdot(vec4(0.0, 0.0, 0.0, 0.0), p, pv, pr, px)
|
|
col = col * (1.0 - piv.a) + piv.rgb
|
|
return vec4(col * res.a, res.a) * self.opacity
|
|
}
|
|
|
|
// ---------------------------------------------------------------- own faces
|
|
|
|
// Templates that draw a face of their own on top of these roots keep the
|
|
// plain quad: the grown one is only for the faces written here.
|
|
mod.widgets.CloseButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.CopyButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.BurgerButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.ButtonFloating.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.ButtonFloatingSm.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.CheckBoxCustom.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.glass.CutButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.glass.RadioButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
// The icon of a face-less icon button stands on the stone: gold-brown.
|
|
mod.widgets.ButtonFlatterIcon.draw_icon.color = #6e521c
|
|
mod.widgets.BurgerButton.draw_bg.bar_color = #5c4a2e
|
|
mod.widgets.BurgerButton.draw_bg.bar_color_hover = #2a2112
|
|
mod.widgets.BurgerButton.draw_bg.bar_color_disabled = #a89c86
|
|
mod.widgets.CloseButton.draw_bg.cross_color_hover = #2a2112
|
|
|
|
// ---------------------------------------------------------------- field row
|
|
|
|
// A ROW OF FIELDS IS ONE HEIGHT. Left to themselves the library's fields each
|
|
// come out at a size of their own, so the box metrics are stated ONCE here
|
|
// and handed to each field below; a field added to the library later joins
|
|
// the row by being named here rather than by having these numbers copied
|
|
// into it. Fields and buttons share the one 26 point row.
|
|
let field_height = 26.0
|
|
let field_pad_v = 4.0
|
|
// Stock faces draw the corner doubled: 1.75 is a 3.5 point corner.
|
|
let field_radius = 1.75
|
|
// One device pixel; the faces written above draw their own edges.
|
|
let field_border = 0.34
|
|
|
|
let field_room = fn(w) {
|
|
w.min_height = field_height
|
|
w.padding.top = field_pad_v
|
|
w.padding.bottom = field_pad_v
|
|
}
|
|
let field_face = fn(d) {
|
|
d.border_radius = field_radius
|
|
d.border_size = field_border
|
|
}
|
|
let field_frame = fn(w) {
|
|
w.min_height = field_height
|
|
}
|
|
|
|
field_room(mod.widgets.TextInput)
|
|
field_face(mod.widgets.TextInput.draw_bg)
|
|
field_room(mod.widgets.ComboBox)
|
|
field_face(mod.widgets.ComboBox.draw_bg)
|
|
field_room(mod.widgets.DropDown)
|
|
field_face(mod.widgets.DropDown.draw_bg)
|
|
field_room(mod.widgets.DropDown2)
|
|
field_face(mod.widgets.DropDown2.draw_bg)
|
|
field_room(mod.widgets.FieldWell)
|
|
field_face(mod.widgets.FieldWell.draw_bg)
|
|
field_room(mod.widgets.TagField)
|
|
field_face(mod.widgets.TagField.draw_bg)
|
|
field_frame(mod.widgets.NumberField)
|
|
mod.widgets.NumberField.draw_bg.border_radius = field_radius
|
|
field_frame(mod.widgets.ValueInput)
|
|
field_frame(mod.widgets.DateField)
|
|
field_frame(mod.widgets.TimeField)
|
|
field_frame(mod.widgets.DatePicker)
|
|
field_frame(mod.widgets.DateRangePicker)
|
|
// The chrome-less input a well holds must impose no height of its own.
|
|
mod.widgets.WellInput.min_height = 0.0
|
|
|
|
// ---------------------------------------------------------------- ground
|
|
|
|
// Plain views stop clipping so a shadow or a light can fall past their
|
|
// edge; scroll views keep clipping their content.
|
|
mod.widgets.View.clip_x = false
|
|
mod.widgets.View.clip_y = false
|
|
mod.widgets.ConcedingRow.clip_x = false
|
|
mod.widgets.ConcedingRow.clip_y = false
|
|
mod.widgets.Window.pass.clear_color = #efeee9
|
|
// THE WINDOW'S GROUND: one slab of white marble, fixed in window space (it
|
|
// never moves with what scrolls over it), its veins at their strongest
|
|
// along the window's frame and calmed to under half of that under the
|
|
// content, so words read on it; a soft pool of light high in the middle, a
|
|
// faint fall toward the corners. Round its edge a polished gold frame 2.4
|
|
// points wide, set 3 points in, and in each corner a gold scroll.
|
|
mod.widgets.Window.show_bg = true
|
|
mod.widgets.Window.draw_bg.pixel = fn() {
|
|
let px = mb_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let sz = self.rect_size
|
|
let de = min(min(p.x, p.y), min(sz.x - p.x, sz.y - p.y))
|
|
let edge = 1.0 - smoothstep(20.0, 120.0, de)
|
|
let k = mix(0.58, 1.0, edge)
|
|
var col = mb_marble(p + vec2(311.0, 127.0), px, k)
|
|
let qv = (p - vec2(sz.x * 0.5, sz.y * 0.2)) / vec2(max(sz.x * 0.8, 1.0), max(sz.y * 1.1, 1.0))
|
|
col = col * (1.0 + 0.012 * exp(-dot(qv, qv) * 6.0) - 0.03 * smoothstep(0.5, 1.2, length(qv)))
|
|
// The frame.
|
|
let lo = vec2(3.0, 3.0)
|
|
let hi = sz - vec2(3.0, 3.0)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = Material.sd_box(p, c, h, 6.0)
|
|
let n = mb_normal(p, c, h, 6.0)
|
|
let fw = 3.6
|
|
let fb = Finish.band(d, 0.0, fw, px)
|
|
col = mix(col, vec3(0.30, 0.21, 0.07), Finish.band(d, fw, fw + px, px) * 0.45)
|
|
col = mix(col, mb_rim(d, fw, vec2(-n.x, -n.y), p), fb)
|
|
// The corner scrolls, inside the frame.
|
|
let dl = p - lo
|
|
let dr = hi - p
|
|
let m = vec2(min(dl.x, dr.x), min(dl.y, dr.y)) - vec2(fw - 0.5, fw - 0.5)
|
|
let sx = mix(1.0, -1.0, step(dr.x, dl.x))
|
|
let sy = mix(1.0, -1.0, step(dr.y, dl.y))
|
|
let lv = vec2(mb_lv().x * sx, mb_lv().y * sy)
|
|
if m.x < 60.0 && m.y < 60.0 {
|
|
let g = mb_corner(m, 1.35, lv, px)
|
|
let gs = mb_corner(m - vec2(0.3 * sx, 0.8 * sy), 1.35, lv, px)
|
|
col = mix(col, col * 0.75, gs.x * 0.5)
|
|
col = mix(col, mb_gold(g.y), g.x)
|
|
}
|
|
return vec4(col, 1.0)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- states
|
|
|
|
// Every held state is written as a plain value that cuts in at once (the
|
|
// library writes some as snap() values, which a state held as a default --
|
|
// the states page -- never applies). Live, the cut is the same as the snap.
|
|
mod.widgets.ButtonFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.ButtonFlat.animator.hover.on.apply = {draw_bg: {down: 0.0 hover: 1.0} draw_text: {down: 0.0 hover: 1.0}}
|
|
mod.widgets.ButtonFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.ButtonFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.CheckBoxFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.CheckBoxFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.RadioButtonFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.RadioButtonFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.TextInputFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.TextInputFlat.animator.hover.on.apply = {draw_bg: {down: 0.0 hover: 1.0} draw_text: {down: 0.0 hover: 1.0}}
|
|
mod.widgets.TextInputFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.TextInputFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.DropDownFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.DropDownFlat.animator.hover.on.apply = {draw_bg: {down: 0.0 hover: 1.0} draw_text: {down: 0.0 hover: 1.0}}
|
|
mod.widgets.DropDownFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.DropDownFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
true
|