${nm} nm \u2014 k ${sig(kv)}${measured ? "/cm" : ""}, half dark at ${sig(Math.LN2 / kv)}${measured ? " cm" : ""}

2b:null 2c:["$","title",null,{"children":"Absorption Gradients | Lao | Observable"}] 31:T97f5,viewof gradient = { const THREE = three; const { BINS, FINE_NM, FINE, MATERIALS, TAGS, SOURCES, CATEGORIES } = spectra; const ORDERED = [...ranked.filter(n => MATERIALS[n]), ...Object.keys(MATERIALS).filter(n => !ranked.includes(n))]; const SPLINE_STEPS = 96; const HIT_PX = 14; const WIDTH_BASE = 2, WIDTH_SELECTED = 10, WIDTH_HOVER = WIDTH_SELECTED; const TIER_WIDTH = [WIDTH_BASE, WIDTH_HOVER, WIDTH_SELECTED]; const OUTLINE_PX = 1; const OUTLINE_ALPHA = 0.6; const biasFor = tier => 0.75 * (TIER_WIDTH[tier] + 2 * OUTLINE_PX) + 1; const BEAD_RADIUS = 2.4; const CAGE_SHADE = 0.55, CAGE_OPACITY = 0.25; const GHOST_ALPHA = 0.5; const GHOST_SAMPLES = 4; const MAX_DPR = 2; const WAKE_MARGIN = "200px"; const BG_DEFAULT = "#bdcad1"; const HIDDEN_SOURCES = ["blackbody"]; const FG_LIGHT = "#333333"; const FG_MUTED_LIGHT = "#666666"; const FG_DARK = "#ffffff"; const FG_MUTED_DARK = "#bbbbbb"; const TEXT_CONTRAST = 7; const MUTED_CONTRAST = 4.5; const THEME_NOTEBOOK = true; const toLinear = v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); const luminance = hex => { const c = [1, 3, 5].map(i => toLinear(parseInt(hex.slice(i, i + 2), 16) / 255)); return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]; }; const contrast = (a, b) => { const la = luminance(a), lb = luminance(b); return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05); }; const mixHex = (a, b, t) => "#" + [1, 3, 5].map(i => { const av = parseInt(a.slice(i, i + 2), 16), bv = parseInt(b.slice(i, i + 2), 16); return Math.round(av + (bv - av) * t).toString(16).padStart(2, "0"); }).join(""); const readable = (surfaces, from, to, ratio) => { for (let step = 0; step <= 24; step++) { const c = mixHex(from, to, step / 24); if (surfaces.every(s => contrast(c, s) >= ratio)) return c; } return to; }; const palette = bg => { const dark = contrast(FG_DARK, bg) > contrast("#000000", bg); const edge = dark ? FG_DARK : "#000000"; const away = dark ? "#000000" : FG_DARK; let alt = mixHex(bg, edge, 0.07); if (contrast(edge, alt) < MUTED_CONTRAST) alt = mixHex(bg, away, 0.07); const tones = field => ({ field, fg: readable([bg, alt, field], dark ? FG_DARK : FG_LIGHT, edge, TEXT_CONTRAST), muted: readable([bg, alt, field], dark ? FG_MUTED_DARK : FG_MUTED_LIGHT, edge, MUTED_CONTRAST) }); const passes = t => Math.min(contrast(t.fg, t.field), contrast(t.muted, t.field)) >= MUTED_CONTRAST; let t = tones(mixHex(bg, "#ffffff", 0.1)); if (!passes(t)) t = tones(mixHex(bg, "#000000", 0.1)); if (!passes(t)) t = tones(bg); return { dark, alt, field: t.field, fg: t.fg, muted: t.muted, faint: mixHex(bg, t.muted, 0.6), fainter: mixHex(bg, t.muted, 0.35), faintest: mixHex(bg, t.muted, 0.15) }; }; let tone = palette(BG_DEFAULT); let viewing = cam02.forBackground(absorb.hexToLinear(BG_DEFAULT)); const posOf = (c, id) => space.pos(c, id, viewing); let themeSheet = document.getElementById("ge-notebook-theme"); if (!themeSheet) { themeSheet = document.createElement("style"); themeSheet.id = "ge-notebook-theme"; document.head.appendChild(themeSheet); } function applyNotebookTheme(bg, t) { themeSheet.textContent = ` :root:root { color-scheme: ${t.dark ? "dark" : "light"}; --theme-background: ${bg}; --theme-background-alt: ${t.alt}; --theme-foreground: ${t.fg}; --theme-foreground-alt: ${t.fg}; --theme-foreground-muted: ${t.muted}; --theme-foreground-faint: ${t.faint}; --theme-foreground-fainter: ${t.fainter}; --theme-foreground-faintest: ${t.faintest}; } html { background-color: ${bg}; } body { background: transparent; color: var(--theme-foreground); } `; } const root = document.createElement("div"); root.innerHTML = `

Color space Cage Category Material

Light source

Light tint Background

Stop spacing Color stops

`; const $ = s => root.querySelector(s); const shell = $(".ge"), stage = $(".ge-stage"), tip = $(".ge-tip"); const spaceSel = $(".ge-space"), cageSel = $(".ge-cage"), catSel = $(".ge-cat"); const matSel = $(".ge-mat"), modeSel = $(".ge-mode"); const lightInput = $(".ge-light"), bgInput = $(".ge-bg"), chainBtn = $(".ge-chain"); const range = $(".ge-range"), num = $(".ge-num"), strip = $(".ge-strip"), text = $(".ge-text"); const specSvg = $(".ge-spec-svg"); const srcSel = $(".ge-src"), kelvinRow = $(".ge-kelvin"), kelvinInput = $(".ge-kr"), kelvinOut = $(".ge-ko"); const EXPOSURE = 0; const fill = (el, items) => items.forEach(([v, l]) => { const o = document.createElement("option"); o.value = v; o.textContent = l; el.appendChild(o); }); fill(spaceSel, space.SPACES.map(s => [s.id, s.label])); fill(cageSel, [["gray", "Gray axis only"], ["corners", "8 corners"], ["cube", "RGB cube"]]); fill(catSel, CATEGORIES.map(c => [c, c])); fill(modeSel, stops.MODES.map(m => [m.id, m.label])); const SOURCE_OPTIONS = illuminants.OPTIONS.filter(o => !HIDDEN_SOURCES.some(h => o.id.toLowerCase() === h || o.label.toLowerCase().includes(h))); fill(srcSel, SOURCE_OPTIONS.map(o => [o.id, o.label])); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, 1, 1, 2000); camera.position.set(76, 65, 114); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, MAX_DPR)); renderer.setClearColor(new THREE.Color(BG_DEFAULT), 1); renderer.autoClear = false; stage.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enablePan = false; controls.zoomSpeed = 0.6; controls.minDistance = 40; controls.maxDistance = 400; controls.enableDamping = true; controls.dampingFactor = 0.2; controls.rotateSpeed = 0.35; controls.addEventListener("start", () => { fitted = true; }); // Three renders per frame. // // scene -> canvas. Every line and stop, true depth ordering, no halos. // halo + -> ghostTarget, offscreen and fully opaque. A second copy of the // overlay hovered/selected spline: halos first, depth clear, then the // spline and its beads, so the highlight occludes itself and // the halo traces the outside of the whole shape. // composite-> canvas. ghostTarget drawn over the scene at GHOST_ALPHA. // // Because the highlight also lives in the scene pass at full strength, the // parts that are genuinely in front composite back to their own color, while // the parts hidden behind other lines come through at half strength. const halo = new THREE.Scene(), overlay = new THREE.Scene(); const cageGroup = new THREE.Group(), splineGroup = new THREE.Group(); const stopGroup = new THREE.Group(); const haloGroup = new THREE.Group(), haloStopGroup = new THREE.Group(); const overlayGroup = new THREE.Group(), ghostStopGroup = new THREE.Group(); cageGroup.renderOrder = -1; scene.add(cageGroup, splineGroup, stopGroup); halo.add(haloGroup, haloStopGroup); overlay.add(overlayGroup, ghostStopGroup); const beadGeom = new THREE.IcosahedronGeometry(BEAD_RADIUS, 2); const lightLinear = () => absorb.hexToLinear(lightInput.value); const ghostTarget = new THREE.WebGLRenderTarget(1, 1, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, depthBuffer: true, stencilBuffer: false, samples: GHOST_SAMPLES }); const compositeCam = new THREE.OrthographicCamera(-1, 1, 1, -1, -1, 1); const compositeGeom = new THREE.PlaneGeometry(2, 2); const compositeMat = new THREE.MeshBasicMaterial({ map: ghostTarget.texture, transparent: true, opacity: GHOST_ALPHA, depthTest: false, depthWrite: false }); const composite = new THREE.Scene(); composite.add(new THREE.Mesh(compositeGeom, compositeMat)); const bufferSize = new THREE.Vector2(); const syncTarget = () => { renderer.getDrawingBufferSize(bufferSize); if (ghostTarget.width !== bufferSize.x || ghostTarget.height !== bufferSize.y) ghostTarget.setSize(Math.max(1, bufferSize.x), Math.max(1, bufferSize.y)); }; let splines = [], hovered = null, fitted = false; const FACE_SPIN = Math.PI / 3; const FIRST_MATERIAL = "water"; let frame = null, dirty = true, pendingHover = null; let onScreen = false, pageVisible = !document.hidden; const awake = () => onScreen && pageVisible; const schedule = () => { if (frame === null && awake()) frame = requestAnimationFrame(tick); }; const invalidate = () => { dirty = true; schedule(); }; const sleep = () => { if (frame !== null) { cancelAnimationFrame(frame); frame = null; } }; function tick() { frame = null; if (!awake()) return; if (pendingHover) { const { cx, cy } = pendingHover; pendingHover = null; const r = renderer.domElement.getBoundingClientRect(); const x = cx - r.left, y = cy - r.top; setHover(pick(x, y), x, y); } controls.update(); if (!dirty) return; dirty = false; syncBeadHalo(); syncTarget(); renderer.setRenderTarget(ghostTarget); renderer.setClearAlpha(0); renderer.clear(); renderer.render(halo, camera); renderer.clearDepth(); renderer.render(overlay, camera); renderer.setRenderTarget(null); renderer.setClearAlpha(1); renderer.clear(); renderer.render(scene, camera); renderer.render(composite, compositeCam); } controls.addEventListener("change", invalidate); let viewW = 1, viewH = 1; const size = () => [viewW, viewH]; function applySize(w, h) { w = Math.max(1, Math.round(w)); h = Math.max(1, Math.round(h)); if (w === viewW && h === viewH) return; viewW = w; viewH = h; renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); if (!fitted) fitTop(w / h); for (const s of splines) s.line.material.resolution.set(w, h); for (const m of casingMats) m.resolution.set(w, h); invalidate(); } const resizeObs = new ResizeObserver(entries => { const r = entries[entries.length - 1].contentRect; applySize(r.width, r.height); }); resizeObs.observe(stage); const viewObs = new IntersectionObserver(entries => { const now = entries[entries.length - 1].isIntersecting; if (now === onScreen) return; onScreen = now; onScreen ? invalidate() : sleep(); }, { rootMargin: WAKE_MARGIN }); viewObs.observe(stage); const onVisibility = () => { pageVisible = !document.hidden; pageVisible ? invalidate() : sleep(); }; document.addEventListener("visibilitychange", onVisibility); let dprQuery = null; const onDpr = () => { renderer.setPixelRatio(Math.min(window.devicePixelRatio, MAX_DPR)); invalidate(); watchDpr(); }; function watchDpr() { if (dprQuery) dprQuery.onchange = null; dprQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`); dprQuery.onchange = onDpr; } watchDpr(); // Tier 0 is the base outline every thin line carries in the scene pass. // Tiers 1 and 2 are used only inside ghostTarget. const casingMats = TIER_WIDTH.map((w, tier) => new THREE.LineMaterial({ color: 0xffffff, linewidth: w + 2 * OUTLINE_PX, transparent: tier === 0, opacity: tier === 0 ? OUTLINE_ALPHA : 1, depthWrite: false, polygonOffset: true, polygonOffsetFactor: biasFor(tier), polygonOffsetUnits: 1 })); for (const m of casingMats) m.resolution.set(...size()); const beadHaloMat = new THREE.MeshBasicMaterial({ depthTest: false, depthWrite: false }); let beadHaloScale = 1; function syncBeadHalo() { const dist = camera.position.distanceTo(controls.target); const worldPerPx = 2 * Math.tan(camera.fov * Math.PI / 360) * dist / viewH; const k = (BEAD_RADIUS + OUTLINE_PX * worldPerPx) / BEAD_RADIUS; if (Math.abs(k - beadHaloScale) < 1e-4) return; beadHaloScale = k; for (const o of haloStopGroup.children) o.scale.setScalar(k); } const SHARED = new Set([beadGeom, beadHaloMat, ...casingMats]); const clear = (...groups) => { const done = new Set(); for (const group of groups) { while (group.children.length) { const o = group.children.pop(); for (const res of [o.geometry, o.material]) { if (SHARED.has(res) || done.has(res)) continue; done.add(res); res.dispose(); } } } }; const cageLine = (colors, id, opacity = 1, shade = CAGE_SHADE) => { const pos = new Float32Array(colors.length * 3), col = new Float32Array(colors.length * 3); colors.forEach((c, i) => { pos.set(posOf(c, id), i * 3); col.set(c.map(v => v * shade), i * 3); }); const g = new THREE.BufferGeometry(); g.setAttribute("position", new THREE.BufferAttribute(pos, 3)); g.setAttribute("color", new THREE.BufferAttribute(col, 3)); return new THREE.Line(g, new THREE.LineBasicMaterial({ vertexColors: true, transparent: opacity < 1, opacity, depthWrite: opacity >= 1 })); }; const gradientLine = (colors, id) => { const pos = [], col = []; for (const c of colors) { pos.push(...posOf(c, id)); col.push(...c); } const g = new THREE.LineGeometry(); g.setPositions(pos); g.setColors(col); const m = new THREE.LineMaterial({ linewidth: WIDTH_BASE, vertexColors: true, polygonOffset: true, polygonOffsetFactor: -biasFor(0), polygonOffsetUnits: -1 }); m.resolution.set(...size()); const l = new THREE.Line2(g, m); l.computeLineDistances(); return l; }; const rampCache = new Map(); let light = null, lightKey = null; const currentLight = () => { const id = srcSel.value, K = +kelvinInput.value; const key = `${id}|${lightInput.value}|${K}|${EXPOSURE}`; if (key !== lightKey) { lightKey = key; const rgb = Array.from(lightLinear()); light = { spd: illuminants.spd(id, rgb, K), white: illuminants.spd(id, [1, 1, 1], K), ev: EXPOSURE }; rampCache.clear(); } return light; }; const rampOf = name => { const lit = currentLight(); if (!rampCache.has(name)) rampCache.set(name, absorb.ramp(FINE[name], SPLINE_STEPS, lit)); return rampCache.get(name); }; const inCategory = name => catSel.value === "all" || (TAGS[name] || []).includes(catSel.value); function buildCage() { const id = spaceSel.value; clear(cageGroup); if (cageSel.value === "cube") for (const edge of space.cage()) cageGroup.add(cageLine(edge, id, CAGE_OPACITY)); if (cageSel.value === "corners") for (const stub of space.corners()) cageGroup.add(cageLine(stub, id, CAGE_OPACITY)); cageGroup.add(cageLine(space.grayAxis(), id)); invalidate(); } function buildSplines() { const id = spaceSel.value; clear(splineGroup, overlayGroup, haloGroup); splines = []; for (const name of ORDERED.filter(inCategory)) { const colors = rampOf(name); const line = gradientLine(colors, id); const casing = new THREE.Line2(line.geometry, casingMats[0]); // Ghost copies share the geometry and the line material with the originals. const ghostLine = new THREE.Line2(line.geometry, line.material); const ghostCasing = new THREE.Line2(line.geometry, casingMats[1]); splineGroup.add(casing, line); splines.push({ name, line, casing, ghostLine, ghostCasing, points: colors.map(c => new THREE.Vector3(...posOf(c, id))) }); } styleSplines(); } function styleSplines() { for (const s of splines) { const chosen = s.name === matSel.value, warm = s.name === hovered; const tier = chosen ? 2 : warm ? 1 : 0; s.line.material.linewidth = TIER_WIDTH[tier]; s.line.material.polygonOffsetFactor = -biasFor(tier); s.casing.renderOrder = -1; s.line.renderOrder = tier; if (tier > 0) { s.ghostCasing.material = casingMats[tier]; if (s.ghostLine.parent !== overlayGroup) { overlayGroup.add(s.ghostLine); haloGroup.add(s.ghostCasing); } } else if (s.ghostLine.parent) { overlayGroup.remove(s.ghostLine); haloGroup.remove(s.ghostCasing); } } invalidate(); } const SPEC = { w: 350, h: 150, top: 4, right: 3, bottom: 26, left: 3 }; const BAR_H = 4.5; const FLIP_X = true; const SPEC_STOPS = 22; const sig = v => v >= 100 ? v.toFixed(0) : v >= 1 ? v.toFixed(1) : v.toPrecision(2); const CHART_MAX = 700; const VIS = FINE_NM.map((nm, i) => ({ nm, i })).filter(o => o.nm <= CHART_MAX); const LABEL_NM = VIS.map(o => o.nm).filter(nm => nm % 50 === 0); const CONE_NAME = { L: "Long", M: "Medium", S: "Short" }; const CONE_COLOR = { L: "#e0473a", M: "#1ea34a", S: "#3f6ee6" }; const CONE_LABEL_SIZE = 9.5; // was 8 const CONE_LABEL_BAND = CONE_LABEL_SIZE + 5; const TICK_LABEL_SIZE = 9; // was 7.5 const AXIS_LABEL_SIZE = 8.5; // was 7 const UID = "ge" + Math.random().toString(36).slice(2, 8); const encode = v => { v = Math.max(0, Math.min(1, v)); return Math.round(255 * (v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055)); }; const linHex = c => "#" + c.map(v => encode(v).toString(16).padStart(2, "0")).join(""); function binColors({ spd, ev }) { const mx = Math.max(...spd, 1e-12), stop = Math.pow(2, ev || 0); return cones.BIN_RGB.map((c, i) => c.map(v => v * spd[i] / mx * stop)); } function drawSpectrum() { const name = matSel.value, k = FINE[name]; if (!k) { specSvg.innerHTML = ""; return; } const measured = (SOURCES[name] || {}).kind === "measured"; const lit = currentLight(); const base0 = binColors(lit); const w = SPEC.w - SPEC.left - SPEC.right, h = SPEC.h - SPEC.top - SPEC.bottom; const base = SPEC.top + h, bw = w / VIS.length; const win = absorb.range(k, lit); const LN_LO = Math.log(Math.max(win.d0, 1e-12)); const LN_HI = Math.log(Math.max(win.d1, win.d0 * 10)); const n = VIS.length; const xOfBin = j => SPEC.left + (FLIP_X ? n - 1 - j : j) * bw; const xOfNm = nm => { const u = (nm - VIS[0].nm) / 5; return SPEC.left + (FLIP_X ? n - 0.5 - u : u + 0.5) * bw; }; const defs = [], parts = []; VIS.forEach(({ i }) => { const kv = k[i]; const stops = []; for (let s = 0; s < SPEC_STOPS; s++) { const t = s / (SPEC_STOPS - 1); const T = Math.exp(-kv * Math.exp(LN_HI - (LN_HI - LN_LO) * t)); stops.push(``); } defs.push(`${stops.join("")}`); }); defs.push(``); parts.push(`${defs.join("")}`); VIS.forEach(({ nm, i }, j) => { const kv = k[i]; parts.push(`${nm} nm \u2014 k ${sig(kv)}${measured ? "/cm" : ""}, half dark at ${sig(Math.LN2 / kv)}${measured ? " cm" : ""}`); }); const cone = []; for (const band of ["L", "M", "S"]) { const pts = cones.NM .map(nm => `${xOfNm(nm).toFixed(1)},${(base - h * cones.at(nm, band)).toFixed(1)}`) .join(" "); cone.push(``); cone.push(``); } parts.push(`${cone.join("")}`); parts.push(``); for (const [band, side] of [["L", -1], ["M", 1], ["S", 1]]) { const step = (FLIP_X ? -1 : 1) * side * 5; let nm = cones.PEAKS[band]; const clear = (h - CONE_LABEL_BAND) / h; while (nm + step >= cones.NM[0] && nm + step <= CHART_MAX && cones.at(nm + step, band) > clear) nm += step; const x = Math.min(SPEC.left + w - 3, Math.max(SPEC.left + 3, xOfNm(nm) + side * 4)); parts.push(`${CONE_NAME[band]}`); } const rgb = Array.from(lightLinear()); const tint = rgb.map(v => v / Math.max(...rgb, 1e-6)); const pmax = Math.max(...lit.spd, 1e-12); VIS.forEach(({ i }, j) => { const p = lit.spd[i]; parts.push(``); }); parts.push(``); for (const nm of LABEL_NM) { parts.push(`${nm}`); } parts.push(`wavelength (nm)`); specSvg.innerHTML = parts.join(""); } let lastHexes = []; function publish(hexes = lastHexes) { lastHexes = hexes; root.value = { space: spaceSel.value, category: catSel.value, material: matSel.value, spacing: modeSel.value, light: lightInput.value, background: bgInput.value, dark: tone.dark, foreground: tone.fg, muted: tone.muted, colors: hexes }; root.dispatchEvent(new CustomEvent("input", { bubbles: true })); } function buildStops() { const id = spaceSel.value, name = matSel.value; const colors = stops.colors(FINE[name], +num.value, modeSel.value, currentLight(), viewing); clear(stopGroup, ghostStopGroup, haloStopGroup); for (const c of colors) { const at = posOf(c, id); const beadMat = new THREE.MeshBasicMaterial({ color: new THREE.Color().setRGB(...c) }); const bead = new THREE.Mesh(beadGeom, beadMat); bead.position.set(...at); stopGroup.add(bead); const ghostBead = new THREE.Mesh(beadGeom, beadMat); ghostBead.position.set(...at); ghostStopGroup.add(ghostBead); const haloBead = new THREE.Mesh(beadGeom, beadHaloMat); haloBead.position.set(...at); haloBead.scale.setScalar(beadHaloScale); haloStopGroup.add(haloBead); } styleSplines(); drawSpectrum(); const hexes = colors.map(absorb.hex); strip.innerHTML = hexes.map(h => `

`).join(""); text.value = "[" + hexes.map(h => `'${h}'`).join(", ") + "]"; publish(hexes); } function setHover(spline, x, y) { const name = spline ? spline.name : null; if (name !== hovered) { hovered = name; styleSplines(); } tip.style.opacity = spline ? 1 : 0; if (spline) { tip.textContent = spline.name; tip.style.transform = `translate(${x + 12}px,${y - 10}px)`; } renderer.domElement.style.cursor = spline ? "pointer" : "grab"; } const scratch = new THREE.Vector3(); function pick(x, y) { const [w, h] = size(); let best = null, bestSq = HIT_PX * HIT_PX; camera.updateMatrixWorld(); for (const s of splines) { for (const p of s.points) { scratch.copy(p).project(camera); const dx = (scratch.x * 0.5 + 0.5) * w - x, dy = (-scratch.y * 0.5 + 0.5) * h - y; const sq = dx * dx + dy * dy; if (sq < bestSq) { bestSq = sq; best = s; } } } return best; } let downAt = null; const local = e => { const r = renderer.domElement.getBoundingClientRect(); return [e.clientX - r.left, e.clientY - r.top]; }; renderer.domElement.addEventListener("pointerdown", e => { downAt = local(e); }); renderer.domElement.addEventListener("pointermove", e => { if (e.buttons) return; pendingHover = { cx: e.clientX, cy: e.clientY }; schedule(); }, { passive: true }); renderer.domElement.addEventListener("pointerleave", () => { pendingHover = null; setHover(null); }); renderer.domElement.addEventListener("pointerup", e => { const [x, y] = local(e); if (!downAt || Math.hypot(x - downAt[0], y - downAt[1]) > 4) return; const hit = pick(x, y); if (hit && hit.name !== matSel.value) { matSel.value = hit.name; buildStops(); } }); let matList = []; const setMaterialOrder = names => { const keep = matSel.value; matSel.innerHTML = ""; fill(matSel, names.map(n => [n, n])); if (keep) matSel.value = keep; }; const alphabetical = () => matList.slice().sort((a, b) => a.localeCompare(b)); function populateMaterials() { const prev = matSel.value; matList = ORDERED.filter(inCategory); setMaterialOrder(matList); const has = v => matList.includes(v); matSel.value = has(prev) ? prev : !prev && has(FIRST_MATERIAL) ? FIRST_MATERIAL : matList[0] || ""; } matSel.addEventListener("pointerdown", () => setMaterialOrder(alphabetical())); matSel.addEventListener("change", () => setMaterialOrder(matList)); matSel.addEventListener("blur", () => setMaterialOrder(matList)); matSel.addEventListener("keydown", e => { if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return; setMaterialOrder(matList); const last = matSel.options.length - 1; if (last < 1) return; const at = matSel.selectedIndex; if (e.key === "ArrowDown" && at === last) matSel.selectedIndex = 0; else if (e.key === "ArrowUp" && at === 0) matSel.selectedIndex = last; else return; e.preventDefault(); matSel.dispatchEvent(new Event("input", { bubbles: true })); }); function syncSource() { const opt = SOURCE_OPTIONS.find(o => o.id === srcSel.value); kelvinRow.hidden = !opt || opt.kind !== "planck"; lightInput.closest("label").title = opt && opt.kind === "screen" ? "Drives the measured display primaries" : "Tints the source spectrum like a filter, keeping its peak"; } srcSel.addEventListener("input", () => { syncSource(); rampCache.clear(); buildSplines(); buildStops(); }); kelvinInput.addEventListener("input", () => { kelvinOut.value = `${kelvinInput.value} K`; scheduleRamps(); drawSpectrum(); }); spaceSel.addEventListener("input", () => { buildCage(); buildSplines(); buildStops(); }); cageSel.addEventListener("input", buildCage); catSel.addEventListener("input", () => { populateMaterials(); buildSplines(); buildStops(); }); matSel.addEventListener("input", buildStops); modeSel.addEventListener("input", buildStops); range.addEventListener("input", () => { num.value = range.value; buildStops(); }); num.addEventListener("input", () => { const n = Math.max(2, Math.min(256, +num.value || 2)); range.value = Math.min(+range.max, n); buildStops(); }); $(".ge-copy").addEventListener("click", async () => { const btn = $(".ge-copy"); const done = () => { btn.textContent = "Copied"; setTimeout(() => btn.textContent = "Copy", 1000); }; try { await navigator.clipboard.writeText(text.value); done(); } catch (e) { text.focus(); text.select(); if (document.execCommand("copy")) done(); } }); applyBackground(); syncSource(); populateMaterials(); buildCage(); buildSplines(); buildStops(); function fitTop(aspect) { const half = Math.tan(camera.fov * Math.PI / 360) * Math.min(1, aspect); let d = 1; for (const s of splines) for (const p of s.points) { d = Math.max(d, p.y + Math.hypot(p.x, p.z) / half); } d *= 1.04; controls.maxDistance = Math.max(controls.maxDistance, d * 1.5); camera.position.set(d * 1e-4 * Math.sin(FACE_SPIN), d, d * 1e-4 * Math.cos(FACE_SPIN)); controls.target.set(0, 0, 0); controls.update(); } function applyBackground() { const hex = bgInput.value; const col = new THREE.Color(hex); renderer.setClearColor(col, 1); for (const m of casingMats) m.color.copy(col); beadHaloMat.color.copy(col); shell.style.background = hex; tone = palette(hex); viewing = cam02.forBackground(absorb.hexToLinear(hex)); shell.style.setProperty("--ge-field", tone.field); shell.style.setProperty("--ge-fg", tone.fg); shell.style.setProperty("--ge-fg-muted", tone.muted); shell.classList.toggle("ge-dark", tone.dark); if (THEME_NOTEBOOK) applyNotebookTheme(hex, tone); if (root.value) { publish(); scheduleSpace(); } invalidate(); } for (const input of [lightInput, bgInput]) { let open = false; input.addEventListener("blur", () => { open = false; }); input.closest("label").addEventListener("pointerdown", e => { if (!open) { open = true; return; } e.preventDefault(); open = false; input.blur(); }); } let lightTimer = null; const scheduleRamps = () => { clearTimeout(lightTimer); lightTimer = setTimeout(() => { rampCache.clear(); buildSplines(); buildStops(); }, 120); }; let spaceTimer = null; const scheduleSpace = () => { clearTimeout(spaceTimer); spaceTimer = setTimeout(() => { const opt = space.SPACES.find(s => s.id === spaceSel.value); if (!opt || opt.adaptive !== false) { buildCage(); buildSplines(); } buildStops(); }, 120); }; let chained = false; chainBtn.addEventListener("click", () => { chained = !chained; chainBtn.classList.toggle("off", !chained); chainBtn.setAttribute("aria-pressed", String(chained)); if (chained) { bgInput.value = lightInput.value; applyBackground(); } }); lightInput.addEventListener("input", () => { if (chained) { bgInput.value = lightInput.value; applyBackground(); } drawSpectrum(); scheduleRamps(); }); bgInput.addEventListener("input", () => { applyBackground(); if (chained) { lightInput.value = bgInput.value; scheduleRamps(); } }); const fullBtn = $(".ge-full"); const isFull = () => document.fullscreenElement === shell || shell.classList.contains("ge-expanded"); const syncFull = () => { fullBtn.textContent = isFull() ? "Exit full screen" : "Full screen"; }; fullBtn.addEventListener("click", async () => { if (isFull()) { if (document.fullscreenElement) await document.exitFullscreen().catch(() => {}); shell.classList.remove("ge-expanded"); } else { try { await shell.requestFullscreen(); } catch (e) { shell.classList.add("ge-expanded"); } } syncFull(); }); const onEscape = e => { if (e.key === "Escape" && shell.classList.contains("ge-expanded")) { shell.classList.remove("ge-expanded"); syncFull(); } }; document.addEventListener("fullscreenchange", syncFull); document.addEventListener("keydown", onEscape); invalidation.then(() => { document.removeEventListener("fullscreenchange", syncFull); document.removeEventListener("keydown", onEscape); document.removeEventListener("visibilitychange", onVisibility); if (dprQuery) dprQuery.onchange = null; resizeObs.disconnect(); viewObs.disconnect(); sleep(); clearTimeout(lightTimer); clearTimeout(spaceTimer); controls.removeEventListener("change", invalidate); controls.dispose(); clear(cageGroup, splineGroup, stopGroup, overlayGroup, ghostStopGroup, haloGroup, haloStopGroup); beadGeom.dispose(); for (const m of casingMats) m.dispose(); beadHaloMat.dispose(); compositeGeom.dispose(); compositeMat.dispose(); ghostTarget.dispose(); renderer.dispose(); renderer.forceContextLoss(); }); return root; }32:T6d91,gradientMap = { const { FINE, MATERIALS, TAGS, CATEGORIES } = spectra; const OPTS = { projection: () => d3.geoEquirectangular(), angle: 0, sphere: "radial", category: CATEGORIES.includes("all") ? "all" : CATEGORIES[0], source: illuminants.OPTIONS[0].id, kelvin: 5500, tint: "#ffffff", spacing: "smooth", stops: 24, lineWidth: 3, hold: 50, trim: 17, background: "none", graticule: true }; const LABEL_POSITIONS = { "green earth": [0.46, -1], "pyropheophorbide a": [0.7, 1], "green zircon": [0.11, -1], "blue sapphire": [0.292, 1], "verdigris": [0.738, 1], "tetramesitylporphyrin": [0.63, 1], "melanin": [0.699, -1], "alexandrite": [0.618, -1], "diaryl chlorin": [0.81, -1], "triphenylcorrole": [0.181, 1], "emerald": [0.578, -1], "demantoid garnet": [0.61, -1], "malachite green": [0.639, -1], "sugilite": [0.517, 1], "ruby": [0.53, -1], "chlorophyll a": [0.104, 1], "blood, deoxygenated": [0.303, 1], "oxazine 1": [0.779, -1], "cobalt violet": [0.49, -1], "chlorophyll b": [0.115, -1], "iodine vapour": [0.52, -1], "anthocyanin": [0.46, 1], "crystal violet": [0.46, -1], "chlorine gas": [0.67, -1], "cu-blue tourmaline": [0.367, 1], "water": [0.18, -1], "beta-carotene": [0.566, 1], "rhodamine 123": [0.266, 1], "blood, oxygenated": [0.28, 1], "nickel olivine": [0.236, 1], "cresyl violet": [0.336, -1], "lucifer yellow": [0.126, -1], "eosin Y": [0.226, -1], "pinacyanol": [0.682, -1], "sulforhodamine 101": [0.38, -1], "rhodamine B": [0.498, 1], "tsavorite garnet": [0.764, -1], "rhodamine 6G": [0.24, 1], "bromine gas": [0.297, 1] }; const AUTO_LABELS = true; const ORDERED = [...ranked.filter(n => MATERIALS[n]), ...Object.keys(MATERIALS).filter(n => !ranked.includes(n))]; const SMOOTH_STEPS = 96; const SPAN_SAMPLES = 96; const PAD = 10; const BUFFER = 10; const HIT_PX = 10; const CHROMA_REF = 40; const MAX_STEP = 4; const BACKTRACK = 0.5; const OUTLINE = 1; const SORT_CHROMA = 1; const SORT_HUE_SPAN = 0.5; const SPIN = 62; const CELL = 10; const LABEL_SIZE = 11; const LABEL_GAP = 1.5; const LABEL_CHAR = 0.54; const LABEL_STEP = 3; const LABEL_SAMPLES = 9; const LABEL_TURN = 6; const LABEL_MAX_CROWD = 5; const LABEL_WEIGHT = 3; const CROP = true; const CROP_PAD = 6; const NS = "http://www.w3.org/2000/svg"; const LIMIT = 180 + BUFFER; const UID = "gm" + Math.random().toString(36).slice(2, 7); const light = { spd: illuminants.spd(OPTS.source, Array.from(absorb.hexToLinear(OPTS.tint)), OPTS.kelvin), white: illuminants.spd(OPTS.source, [1, 1, 1], OPTS.kelvin), ev: 0 }; const ramps = new Map(), dense = new Map(); const rampOf = name => { if (!ramps.has(name)) { ramps.set(name, OPTS.spacing === "smooth" ? absorb.ramp(FINE[name], SMOOTH_STEPS, light) : stops.colors(FINE[name], OPTS.stops, OPTS.spacing, light)); } return ramps.get(name); }; const denseOf = name => { if (!dense.has(name)) dense.set(name, absorb.ramp(FINE[name], SPAN_SAMPLES, light)); return dense.get(name); }; const inCategory = name => OPTS.category === "all" || (TAGS[name] || []).includes(OPTS.category); const DEG = 180 / Math.PI; const angDiff = (a, b) => ((a - b + 540) % 360) - 180; const latOf = (J, C) => OPTS.sphere === "radial" ? Math.atan2((J - 50) / 50, C / CHROMA_REF) * DEG : J / 100 * 180 - 90; function holdPoleHues(pts, limit) { const n = pts.length, band = pts.map(p => Math.abs(p.lat) > limit); const span = Math.max(1, 90 - limit); let i = 0; while (i < n) { if (!band[i]) { i++; continue; } let j = i; while (j < n && band[j]) j++; const before = i > 0 ? i - 1 : -1, after = j < n ? j : -1; if (before >= 0 || after >= 0) { for (let k = i; k < j; k++) { const anchor = before < 0 ? after : after < 0 ? before : (k - before <= after - k ? before : after); const w = Math.min(1, (Math.abs(pts[k].lat) - limit) / span); pts[k].lon = pts[anchor].lon + (1 - w) * angDiff(pts[k].lon, pts[anchor].lon); } } i = j; } } const mid = (a, b) => absorb.hex([0, 1, 2].map(k => (a[k] + b[k]) / 2)); function geometry(ramp, cap) { const pts = []; for (const c of ramp) { const jab = cam02.jab(c); const J = jab[0], a = jab[1], b = jab[2], C = Math.hypot(a, b); pts.push({ c, C, lon: Math.atan2(b, a) * DEG, lat: latOf(J, C) }); } holdPoleHues(pts, Math.min(OPTS.hold, cap)); const n = pts.length; const keep = pts.map(p => Math.abs(p.lat) <= cap - 0.4); const lon = new Float64Array(n), lat = new Float64Array(n); let prev = null; for (let i = 0; i < n; i++) { lon[i] = prev = prev === null ? pts[i].lon : prev + angDiff(pts[i].lon, prev); lat[i] = pts[i].lat; } const held = []; for (let i = 0; i < n; i++) if (keep[i]) held.push(lon[i]); return { pts, lon, lat, keep, held }; } function buildLines() { const cap = 90 - OPTS.trim; const out = []; for (const name of ORDERED.filter(inCategory)) { const g = geometry(rampOf(name), cap); if (!g.keep.some((v, i) => v && g.keep[i + 1])) continue; const sampled = OPTS.spacing === "smooth" && g.pts.length >= SPAN_SAMPLES ? g : geometry(denseOf(name), cap); const reach = sampled.held.length > 1 ? sampled.held : g.held; const span = Math.min(360, Math.max(...reach) - Math.min(...reach)); const median = g.held.slice().sort((a, b) => a - b)[g.held.length >> 1]; out.push({ name, lon: g.lon, lat: g.lat, keep: g.keep, median, span, cols: g.pts.map(p => absorb.hex(p.c)), bands: g.pts.slice(1).map((p, i) => mid(g.pts[i].c, p.c)), meanC: sampled.pts.reduce((s, p) => s + p.C, 0) / sampled.pts.length }); } const topC = Math.max(1e-6, ...out.map(l => l.meanC)); const rank = l => SORT_CHROMA * (l.meanC / topC) + SORT_HUE_SPAN * (l.span / 360); out.sort((a, b) => rank(a) - rank(b)); return out; } const lines = buildLines(); const sphere = { type: "Sphere" }; const graticule = d3.geoGraticule10(); const W = Math.max(320, Math.floor(width)); const inset = PAD + OPTS.lineWidth / 2; const projection = OPTS.projection().rotate([0, 0]); if (typeof projection.angle === "function") projection.angle(OPTS.angle); let H, mapW; let ok = false; try { projection.fitWidth((W - inset * 2) / (1 + BUFFER / 180), sphere); const b = d3.geoPath(projection).bounds(sphere); const h = b[1][1] - b[0][1]; mapW = b[1][0] - b[0][0]; ok = isFinite(h) && h > 0 && h < W * 3 && isFinite(mapW) && mapW > 0; if (ok) { const over = mapW * BUFFER / 360; H = Math.ceil(h) + inset * 2; projection.fitExtent([[inset + over, inset], [W - inset - over, H - inset]], sphere); } } catch (e) { ok = false; } if (!ok) { H = Math.round(W * 0.62); projection.scale(W / 7).translate([W / 2, H / 2]); } const turns = new Map(); const turnAt = lat => { const key = Math.round(lat * 4); if (!turns.has(key)) { const a = projection([-180, lat]), b = projection([180, lat]); turns.set(key, a && b ? [b[0] - a[0], b[1] - a[1]] : [0, 0]); } return turns.get(key); }; const at = (lon, lat) => { const k = Math.round(lon / 360); const p = projection([lon - 360 * k, lat]); if (!p) return null; if (!k) return p; const t = turnAt(lat); return [p[0] + k * t[0], p[1] + k * t[1]]; }; function runsOf(line) { const n = line.lon.length; let off = SPIN - 360 * Math.round((line.median + SPIN) / 360); const L = new Float64Array(n), brk = new Uint8Array(n); for (let i = 0; i < n; i++) { let v = line.lon[i] + off; while (v > LIMIT) { off -= 360; v -= 360; brk[i] = 1; } while (v < -LIMIT) { off += 360; v += 360; brk[i] = 1; } L[i] = v; } const runs = []; let start = -1; const close = end => { if (start >= 0 && end > start) runs.push([start, end]); start = -1; }; for (let i = 0; i < n; i++) { if (!line.keep[i]) { close(i - 1); continue; } if (start < 0) { start = i; continue; } if (brk[i]) { close(i - 1); start = i; } } close(n - 1); return { L, runs }; } function sections(screen) { const last = screen.length - 1, out = []; let s = 0; while (s < last) { let e = s + 1; while (e < last) { const ax = screen[e + 1][0] - screen[s][0], ay = screen[e + 1][1] - screen[s][1]; const len = Math.hypot(ax, ay); if (len < 1e-6) break; const ux = ax / len, uy = ay / len; let fits = true, prev = -Infinity; for (let i = s; i <= e + 1; i++) { const t = (screen[i][0] - screen[s][0]) * ux + (screen[i][1] - screen[s][1]) * uy; if (t < prev - BACKTRACK) { fits = false; break; } if (t > prev) prev = t; } if (!fits) break; e++; } out.push([s, e]); s = e; } return out; } const num = v => Math.round(v * 100) / 100; const toPath = pts => pts.map((p, i) => (i ? "L" : "M") + num(p[0]) + " " + num(p[1])).join(""); function tracePts(L, lat, a, b) { const out = []; const push = p => { if (p) out.push(p); }; push(at(L[a], lat[a])); for (let i = a; i < b; i++) { const dl = L[i + 1] - L[i], da = lat[i + 1] - lat[i]; const steps = Math.min(24, Math.max(1, Math.ceil(Math.max(Math.abs(dl), Math.abs(da)) / MAX_STEP))); for (let k = 1; k <= steps; k++) { const t = k / steps; push(at(L[i] + dl * t, lat[i] + da * t)); } } return out; } function shapesOf(line) { const { L, runs } = runsOf(line); const lat = line.lat; const banded = OPTS.spacing !== "smooth"; const shapes = [], curves = []; for (const [a, b] of runs) { const screen = []; for (let i = a; i <= b; i++) screen.push(at(L[i], lat[i])); if (screen.some(p => !p)) continue; const curve = []; for (const [rs, re] of sections(screen)) { const s = rs + a, e = re + a; const pts = tracePts(L, lat, s, e); if (pts.length < 2) continue; for (const p of curve.length ? pts.slice(1) : pts) curve.push(p); const d = toPath(pts); const p0 = screen[rs], p1 = screen[re]; const ax = p1[0] - p0[0], ay = p1[1] - p0[1], len = Math.hypot(ax, ay); if (len < 0.75) { shapes.push({ d, solid: banded ? line.bands[s] : line.cols[s] }); continue; } const ux = ax / len, uy = ay / len; const stopList = []; let prevT = 0, prevColor = null; for (let i = s; i <= e; i++) { const q = screen[i - a]; let t = ((q[0] - p0[0]) * ux + (q[1] - p0[1]) * uy) / len; t = Math.max(prevT, Math.min(1, t)); prevT = t; if (banded) { if (i > s) stopList.push([t, prevColor]); if (i < e) stopList.push([t, prevColor = line.bands[i]]); } else { stopList.push([t, line.cols[i]]); } } shapes.push({ d, grad: { x1: p0[0], y1: p0[1], x2: p1[0], y2: p1[1], stops: stopList } }); } if (curve.length > 1) curves.push(curve); } return { shapes, curves }; } const ink = cam02.jab(absorb.hexToLinear(OPTS.background))[0] < 56.2 ? "#ffffff" : "#000000"; const svg = document.createElementNS(NS, "svg"); svg.setAttribute("width", W); svg.setAttribute("height", H); svg.setAttribute("viewBox", `0 0 ${W} ${H}`); svg.style.cssText = "display:block;max-width:100%"; svg.innerHTML = `` + `` + `` + `` + `` + `` + `` + ``; const bgRect = svg.querySelector(".gm-bg"); const defs = svg.querySelector(".gm-defs"); const ldefs = svg.querySelector(".gm-ldefs"); const grid = svg.querySelector(".gm-grid"); const lineG = svg.querySelector(".gm-lines"); const hiG = svg.querySelector(".gm-hi"); const labelG = svg.querySelector(".gm-labels"); const tip = svg.querySelector(".gm-tip"); const gridPath = d3.geoPath(projection); grid.innerHTML = (OPTS.graticule ? `` : "") + ``; const shapes = new Map(), curves = new Map(), picks = new Map(); let hovered = null; let viewY = 0, viewH = H; for (const line of lines) { const built = shapesOf(line); shapes.set(line, built.shapes); curves.set(line, built.curves); const { L, runs } = runsOf(line); const pts = []; for (const [a, b] of runs) for (let i = a; i <= b; i++) { const p = at(L[i], line.lat[i]); if (p) pts.push(p); } picks.set(line, pts); } let gid = 0; const emit = (line, w, override) => { const d = [], p = [], o = []; for (const shape of shapes.get(line) || []) { if (!override && OUTLINE > 0) { o.push(``); } if (override || shape.solid) { p.push(``); continue; } const id = `${UID}-${gid++}`; const g = shape.grad; d.push(`` + g.stops.map(([t, c]) => ``).join("") + ``); p.push(``); } return [d, o.concat(p)]; }; function draw() { gid = 0; const d = [], body = [], high = []; for (const line of lines) { if (line === hovered) continue; const [gd, gp] = emit(line, OPTS.lineWidth); d.push(...gd); body.push(...gp); } if (hovered) { const [, casing] = emit(hovered, OPTS.lineWidth + 4, ink); high.push(...casing.map(s => s.replace(" { const cx = Math.floor(x / CELL), cy = Math.floor(y / CELL); return cx < 0 || cy < 0 || cx >= gcols || cy >= grows ? -1 : cy * gcols + cx; }; const stamp = (pts, w, own) => { for (let i = 1; i < pts.length; i++) { const a = pts[i - 1], b = pts[i]; const dist = Math.hypot(b[0] - a[0], b[1] - a[1]); const steps = Math.max(1, Math.ceil(dist / (CELL / 2))); for (let k = 0; k <= steps; k++) { const t = k / steps; const idx = cellAt(a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t); if (idx < 0) continue; occ[idx] += w; if (own) own.set(idx, (own.get(idx) || 0) + w); } } }; const readOcc = (x, y, own) => { let sum = 0; for (let dx = -1; dx <= 1; dx++) for (let dy = -1; dy <= 1; dy++) { const idx = cellAt(x + dx * CELL, y + dy * CELL); if (idx < 0) continue; sum += occ[idx] - (own ? own.get(idx) || 0 : 0); } return sum; }; function windowScore(pts, s, e, side, off, own) { let crowd = 0, turn = 0; for (let k = 0; k <= LABEL_SAMPLES; k++) { const t = s + (e - s) * k / LABEL_SAMPLES; const i = Math.min(e - 1, Math.floor(t)), f = t - i; const a = pts[i], b = pts[i + 1]; const dx = b[0] - a[0], dy = b[1] - a[1]; const len = Math.hypot(dx, dy) || 1; const x = a[0] + dx * f + side * (-dy / len) * off; const y = a[1] + dy * f + side * (dx / len) * off; if (x < LABEL_SIZE || y < LABEL_SIZE || x > W - LABEL_SIZE || y > H - LABEL_SIZE) return null; crowd += readOcc(x, y, own); } for (let i = s + 1; i < e; i++) { const ax = pts[i][0] - pts[i - 1][0], ay = pts[i][1] - pts[i - 1][1]; const bx = pts[i + 1][0] - pts[i][0], by = pts[i + 1][1] - pts[i][1]; const la = Math.hypot(ax, ay), lb = Math.hypot(bx, by); if (la < 1e-6 || lb < 1e-6) continue; turn += Math.acos(Math.max(-1, Math.min(1, (ax * bx + ay * by) / (la * lb)))); } return crowd / (LABEL_SAMPLES + 1) + turn * LABEL_TURN; } function cumulative(curve) { const cum = new Float64Array(curve.length); for (let i = 1; i < curve.length; i++) { cum[i] = cum[i - 1] + Math.hypot(curve[i][0] - curve[i - 1][0], curve[i][1] - curve[i - 1][1]); } return cum; } const needOf = line => line.name.length * LABEL_SIZE * LABEL_CHAR + 6; const offOf = () => OPTS.lineWidth / 2 + LABEL_GAP + LABEL_SIZE / 2; function windowIndices(cum, center, need) { const a = center - need / 2, b = center + need / 2; let s = 0; while (s < cum.length - 2 && cum[s + 1] <= a) s++; let e = cum.length - 1; while (e > s + 1 && cum[e - 1] >= b) e--; return [s, e]; } function labelFor(line, own, force) { const need = needOf(line), off = offOf(); let best = null; for (const pts of curves.get(line) || []) { const n = pts.length; if (n < 3) continue; const cum = cumulative(pts); if (cum[n - 1] < need) continue; for (let s = 0; s + 1 < n; s += LABEL_STEP) { let e = s; while (e < n - 1 && cum[e] - cum[s] < need) e++; if (cum[e] - cum[s] < need) break; for (const side of [-1, 1]) { const score = windowScore(pts, s, e, side, off, own); if (score != null && (!best || score < best.score)) { best = { score, curve: pts, cum, center: cum[s] + need / 2, side, off }; } } } } return best && (force || best.score <= LABEL_MAX_CROWD) ? best : null; } function labelPinned(line, frac, side, own) { const list = curves.get(line) || []; if (!list.length) return null; let curve = list[0]; for (const c of list) if (c.length > curve.length) curve = c; const cum = cumulative(curve); const total = cum[cum.length - 1]; const need = needOf(line), off = offOf(); if (!(total >= need)) return null; const half = need / 2; const center = Math.max(half, Math.min(total - half, (Number(frac) || 0) * total)); if (side !== 1 && side !== -1) { const [s, e] = windowIndices(cum, center, need); const a = windowScore(curve, s, e, -1, off, own); const b = windowScore(curve, s, e, 1, off, own); side = a == null ? 1 : b == null ? -1 : (a <= b ? -1 : 1); } return { curve, cum, center, side, off }; } const labels = []; const labelOf = new Map(); let labelSeq = 0; function alongCurve(curve, cum, dist) { let i = 0; while (i < curve.length - 2 && cum[i + 1] < dist) i++; const a = curve[i], b = curve[i + 1]; const dx = b[0] - a[0], dy = b[1] - a[1]; const len = Math.hypot(dx, dy) || 1; const f = Math.max(0, Math.min(1, (dist - cum[i]) / Math.max(1e-6, cum[i + 1] - cum[i]))); return { x: a[0] + dx * f, y: a[1] + dy * f, tx: dx / len, ty: dy / len }; } function bandOf(l) { const half = l.need / 2, out = []; for (let k = 0; k <= LABEL_SAMPLES; k++) { const d = l.center - half + l.need * k / LABEL_SAMPLES; const p = alongCurve(l.curve, l.cum, d); out.push([p.x + l.side * -p.ty * l.off, p.y + l.side * p.tx * l.off]); } return out; } function renderLabel(l) { const total = l.cum[l.cum.length - 1]; const half = l.need / 2; l.center = Math.max(half, Math.min(Math.max(half, total - half), l.center)); const a = l.center - half, b = l.center + half; const [s, e] = windowIndices(l.cum, l.center, l.need); let seg = l.curve.slice(s, e + 1); let side = l.side; let start = a - l.cum[s]; if (seg[seg.length - 1][0] < seg[0][0]) { seg = seg.slice().reverse(); side = -side; start = (l.cum[e] - l.cum[s]) - (start + l.need); } l.path.setAttribute("d", toPath(seg)); l.text.setAttribute("dy", num(side * l.off)); l.tp.setAttribute("startOffset", num(Math.max(0, start))); l.band = bandOf(l); } function addLabel(line, spot) { const id = `${UID}-t${labelSeq++}`; const path = document.createElementNS(NS, "path"); path.setAttribute("id", id); path.setAttribute("fill", "none"); ldefs.appendChild(path); const text = document.createElementNS(NS, "text"); text.setAttribute("font-family", "system-ui,sans-serif"); text.setAttribute("font-size", LABEL_SIZE); text.setAttribute("font-weight", "600"); text.setAttribute("fill", ink); text.setAttribute("stroke", OPTS.background); text.setAttribute("stroke-width", "2.5"); text.setAttribute("paint-order", "stroke"); text.setAttribute("dominant-baseline", "middle"); text.style.cssText = "cursor:move;user-select:none"; const tp = document.createElementNS(NS, "textPath"); tp.setAttribute("href", `#${id}`); tp.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", `#${id}`); tp.textContent = line.name; text.appendChild(tp); labelG.appendChild(text); const l = { line, curve: spot.curve, cum: spot.cum, need: needOf(line), off: spot.off, side: spot.side, center: spot.center, path, text, tp, band: [] }; labels.push(l); labelOf.set(line, l); renderLabel(l); return l; } function dropLabel(l) { stamp(l.band, -LABEL_WEIGHT); l.path.remove(); l.text.remove(); labels.splice(labels.indexOf(l), 1); labelOf.delete(l.line); } const ownMaps = new Map(); for (const line of lines) { const m = new Map(); for (const c of curves.get(line) || []) stamp(c, 1, m); ownMaps.set(line, m); } function toggleLabel(line, force) { const shown = labelOf.get(line); if (shown) { dropLabel(shown); return; } const spot = labelFor(line, ownMaps.get(line), force); if (spot) stamp(addLabel(line, spot).band, LABEL_WEIGHT); } const pinned = new Set(); for (const line of lines) { const spec = LABEL_POSITIONS[line.name]; if (!spec) continue; const frac = Array.isArray(spec) ? spec[0] : spec; const side = Array.isArray(spec) ? spec[1] : 0; let spot = null; try { spot = labelPinned(line, frac, side, ownMaps.get(line)); } catch (e) { spot = null; } if (!spot) continue; stamp(addLabel(line, spot).band, LABEL_WEIGHT); pinned.add(line); } if (AUTO_LABELS) { for (let i = lines.length - 1; i >= 0; i--) { if (!pinned.has(lines[i])) toggleLabel(lines[i], false); } } function cropView() { if (!CROP) return; let top = Infinity, bottom = -Infinity; const grow = OPTS.lineWidth / 2 + OUTLINE + 1; for (const line of lines) { for (const c of curves.get(line) || []) { for (const p of c) { if (p[1] - grow < top) top = p[1] - grow; if (p[1] + grow > bottom) bottom = p[1] + grow; } } } for (const l of labels) { for (const p of l.band) { if (p[1] - LABEL_SIZE < top) top = p[1] - LABEL_SIZE; if (p[1] + LABEL_SIZE > bottom) bottom = p[1] + LABEL_SIZE; } } if (!isFinite(top) || !isFinite(bottom) || bottom <= top) return; viewY = Math.max(0, Math.floor(top - CROP_PAD)); viewH = Math.max(1, Math.min(H, Math.ceil(bottom + CROP_PAD)) - viewY); svg.setAttribute("height", viewH); svg.setAttribute("viewBox", `0 ${viewY} ${W} ${viewH}`); bgRect.setAttribute("y", viewY); bgRect.setAttribute("height", viewH); } cropView(); const labelSource = () => { const rows = labels.map(l => { const total = l.cum[l.cum.length - 1] || 1; const frac = Math.round(l.center / total * 1000) / 1000; return ` ${JSON.stringify(l.line.name)}: [${frac}, ${l.side}]`; }); return " const LABEL_POSITIONS = {\n" + rows.join(",\n") + "\n };"; }; svg.labelSource = labelSource; function logLabels() { console.log(labelSource()); } function nearestOn(l, mx, my) { let best = null; for (let i = 1; i < l.curve.length; i++) { const a = l.curve[i - 1], b = l.curve[i]; const dx = b[0] - a[0], dy = b[1] - a[1]; const len2 = dx * dx + dy * dy; const t = len2 ? Math.max(0, Math.min(1, ((mx - a[0]) * dx + (my - a[1]) * dy) / len2)) : 0; const px = a[0] + dx * t, py = a[1] + dy * t; const d = Math.hypot(mx - px, my - py); if (!best || d < best.d) { best = { d, dist: l.cum[i - 1] + t * Math.sqrt(len2), px, py, tx: dx, ty: dy }; } } return best; } function pickLabel(x, y) { for (let i = labels.length - 1; i >= 0; i--) { for (const p of labels[i].band) { if (Math.hypot(p[0] - x, p[1] - y) < LABEL_SIZE) return labels[i]; } } return null; } function pick(x, y) { let best = null, bestDist = HIT_PX + OPTS.lineWidth / 2; for (const line of lines) { for (const p of picks.get(line) || []) { const d = Math.hypot(p[0] - x, p[1] - y); if (d < bestDist) { bestDist = d; best = line; } } } return best; } const local = e => { const r = svg.getBoundingClientRect(); const k = W / (r.width || W); return [(e.clientX - r.left) * k, (e.clientY - r.top) * k + viewY]; }; let dragged = null; svg.addEventListener("pointerdown", e => { const [x, y] = local(e); const l = pickLabel(x, y); if (!l) return; dragged = l; svg.setPointerCapture(e.pointerId); e.preventDefault(); }); svg.addEventListener("pointermove", e => { const [x, y] = local(e); if (dragged) { const n = nearestOn(dragged, x, y); if (n) { dragged.center = n.dist; dragged.side = n.tx * (y - n.py) - n.ty * (x - n.px) >= 0 ? 1 : -1; renderLabel(dragged); } return; } if (pickLabel(x, y)) { svg.style.cursor = "move"; if (hovered) { hovered = null; draw(); } tip.setAttribute("opacity", 0); return; } svg.style.cursor = "default"; const hit = pick(x, y); if (hit !== hovered) { hovered = hit; draw(); } tip.setAttribute("opacity", hit ? 1 : 0); if (hit) { tip.textContent = hit.name; tip.setAttribute("x", Math.min(W - 6, x + 12)); tip.setAttribute("y", Math.max(viewY + 12, y - 8)); tip.setAttribute("text-anchor", x + 12 > W - 90 ? "end" : "start"); } }); svg.addEventListener("dblclick", e => { const [x, y] = local(e); const l = pickLabel(x, y); if (l) { dropLabel(l); logLabels(); return; } const hit = pick(x, y); if (hit) { toggleLabel(hit, true); logLabels(); } }); const endDrag = () => { if (dragged) { dragged = null; logLabels(); } }; svg.addEventListener("pointerup", endDrag); svg.addEventListener("pointercancel", endDrag); svg.addEventListener("pointerleave", () => { if (hovered) { hovered = null; draw(); } tip.setAttribute("opacity", 0); }); return svg; }33:T66a,{ const height = 200; // change this to resize every image at once const images = [ { title: "Atoll coastline", src: "https://en.wikipedia.org/wiki/Special:FilePath/Maamigili_Island_Raa_Atoll.jpg", width: 200 // cropped to this width; omit to keep the natural aspect ratio }, { title: "Chlorophyll A and B", src: await FileAttachment("image@1.png").url() }, { title: "Pumpkin seed oil", src: "https://news-cdn.softpedia.com/images/news2/Why-Does-Pumpkin-Seed-Oil-Appear-Red-in-a-Bottle-but-Green-on-a-Plate-2.jpg" }, { title: "Bromine gas", src: "https://www.chemistrylearner.com/wp-content/uploads/2018/07/Bromine.jpg", width: 200 } ]; return html`

${images.map( (d) => html`

` )}

`; }34:T1e8f,{ const w = width; const h = 300; const rampH = 46; const pad = { top: 18, right: 20, bottom: 48, left: 54 }; const bgPad = 14; const svgH = h + rampH + 22 + bgPad * 2; const dMin = 0.005; const dMax = 200; const nPts = 600; const nStops = 180; const chans = [ { key: "rA", label: "red A", amp: 0.5, k: 50, hue: "#ff0000", ink: "#c62828" }, { key: "gr", label: "green", amp: 1, k: 1.75, hue: "#00ff00", ink: "#1b7f28" }, { key: "bl", label: "blue", amp: 1, k: 50, hue: "#0000ff", ink: "#2438c4" }, { key: "rB", label: "red B", amp: 0.5, k: 0.1, hue: "#ff0000", ink: "#c62828" } ]; const ks = new Map(chans.map(c => [c.key, c.k])); const byKey = new Map(chans.map(c => [c.key, c])); const fmt = d3.format(".3g"); const uid = "ck" + Math.random().toString(36).slice(2, 8); const gradId = "ramp" + Math.random().toString(36).slice(2, 8); const root = document.createElement("div"); Object.assign(root.style, { width: "100%", background: "none", font: "12px ui-sans-serif, system-ui, sans-serif", color: "#333" }); const css = document.createElement("style"); css.textContent = ` .${uid}{-webkit-appearance:none;appearance:none;height:14px;background:transparent;cursor:pointer} .${uid}::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--ink) 0 var(--fill),transparent var(--fill) 100%)} .${uid}::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:0;border-radius:50%;background:var(--ink)} .${uid}::-moz-range-track{height:4px;border-radius:2px;background:transparent} .${uid}::-moz-range-progress{height:4px;border-radius:2px;background:var(--ink)} .${uid}::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--ink)} .${uid}:focus{outline:none} .${uid}:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px} `; root.appendChild(css); const panel = document.createElement("div"); Object.assign(panel.style, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", alignItems: "center", columnGap: "18px", background: "none", padding: "8px 0 12px 0" }); root.appendChild(panel); const x = d3.scaleLog().domain([dMin, dMax]).range([pad.left, w - pad.right]); const y = d3.scaleLinear().domain([0, 1]).range([h - pad.bottom, pad.top]); const depths = d3.range(nPts).map(i => dMin * Math.pow(dMax / dMin, i / (nPts - 1))); const svg = d3.select(root) .append("svg") .attr("width", w) .attr("height", svgH) .attr("viewBox", [0, 0, w, svgH]) .style("display", "block") .style("width", "100%"); const grad = svg.append("defs") .append("linearGradient") .attr("id", gradId) .attr("x1", "0%") .attr("x2", "100%"); svg.append("rect") .attr("width", w) .attr("height", svgH) .attr("fill", "#000"); const stage = svg.append("g").attr("transform", `translate(0,${bgPad})`); const plot = stage.append("g").style("isolation", "isolate"); plot.append("rect") .attr("x", pad.left) .attr("y", pad.top) .attr("width", w - pad.left - pad.right) .attr("height", h - pad.top - pad.bottom) .attr("fill", "#000"); const xAxis = stage.append("g").attr("transform", `translate(0,${h - pad.bottom})`); const yAxis = stage.append("g").attr("transform", `translate(${pad.left},0)`); stage.append("rect") .attr("x", pad.left) .attr("y", h) .attr("width", w - pad.left - pad.right) .attr("height", rampH) .attr("fill", `url(#${gradId})`); stage.append("text") .attr("x", pad.left) .attr("y", h + rampH + 16) .attr("fill", "#aaa") .attr("font-size", 11) .text("transmitted color vs depth"); const xLab = stage.append("text") .attr("y", h - pad.bottom + 34) .attr("text-anchor", "middle") .attr("fill", "#aaa") .attr("font-size", 11) .text("depth (log)"); stage.append("text") .attr("x", pad.left) .attr("y", pad.top - 6) .attr("fill", "#aaa") .attr("font-size", 11) .text("transmitted intensity"); const bandOf = (lo, hi) => d3.area() .x(p => x(p.d)) .y0(p => y(lo(p))) .y1(p => y(hi(p))); const edgeOf = hi => d3.line() .x(p => x(p.d)) .y(p => y(hi(p))); const layers = [ { hue: "#0000ff", lo: () => 0, hi: p => p.bl }, { hue: "#00ff00", lo: () => 0, hi: p => p.gr }, { hue: "#ff0000", lo: () => 0, hi: p => p.rB }, { hue: "#ff0000", lo: p => p.rB, hi: p => p.rB + p.rA } ]; const sample = d => ({ d, rA: 0.5 * Math.exp(-ks.get("rA") * d), rB: 0.5 * Math.exp(-ks.get("rB") * d), gr: Math.exp(-ks.get("gr") * d), bl: Math.exp(-ks.get("bl") * d) }); const swatch = d => { const p = sample(d); return d3.rgb(255 * (p.rA + p.rB), 255 * p.gr, 255 * p.bl).formatRgb(); }; const dressAxis = g => { g.selectAll("path, line").attr("stroke", "#888"); g.selectAll("text").attr("fill", "#f2f2f2").attr("font-size", 10); }; const render = () => { const rows = depths.map(sample); plot.selectAll("g.band").remove(); for (const l of layers) { const g = plot.append("g").attr("class", "band").style("mix-blend-mode", "screen"); g.append("path") .attr("d", bandOf(l.lo, l.hi)(rows)) .attr("fill", l.hue) .attr("fill-opacity", 0.8); g.append("path") .attr("d", edgeOf(l.hi)(rows)) .attr("fill", "none") .attr("stroke", l.hue) .attr("stroke-opacity", 1) .attr("stroke-width", 1.6); } grad.selectAll("stop") .data(d3.range(nStops)) .join("stop") .attr("offset", i => `${(100 * i) / (nStops - 1)}%`) .attr("stop-color", i => swatch(dMin * Math.pow(dMax / dMin, i / (nStops - 1)))); xAxis.call(d3.axisBottom(x).ticks(10, "~g")).call(dressAxis); yAxis.call(d3.axisLeft(y).ticks(5)).call(dressAxis); const marks = xAxis.selectAll(".tick").nodes(); const lastTick = marks[marks.length - 1]; const anchor = lastTick ? x(d3.select(lastTick).datum()) : w - pad.right; xLab.attr("x", Math.min(anchor, w - pad.right - 30)); }; const setFill = el => { const lo = +el.min, hi = +el.max; const t = hi > lo ? (+el.value - lo) / (hi - lo) : 0; el.style.setProperty("--fill", `${(100 * t).toFixed(2)}%`); }; const makeRow = c => { const row = document.createElement("div"); Object.assign(row.style, { display: "flex", alignItems: "center", gap: "6px", padding: "3px 0" }); const lab = document.createElement("span"); lab.textContent = c.label; Object.assign(lab.style, { color: c.ink, flex: "0 0 auto", fontSize: "11px", whiteSpace: "nowrap" }); const slider = document.createElement("input"); slider.type = "range"; slider.className = uid; slider.min = -2; slider.max = 2; slider.step = 0.005; slider.value = Math.log10(c.k); Object.assign(slider.style, { flex: "1 1 auto", minWidth: "0", margin: "0" }); slider.style.setProperty("--ink", c.ink); setFill(slider); const val = document.createElement("span"); val.textContent = fmt(c.k); Object.assign(val.style, { color: "#666", flex: "0 0 32px", fontSize: "11px", textAlign: "right", fontVariantNumeric: "tabular-nums" }); slider.addEventListener("input", () => { const k = Math.pow(10, +slider.value); ks.set(c.key, k); val.textContent = fmt(k); setFill(slider); render(); }); row.append(lab, slider, val); return row; }; const redCol = document.createElement("div"); redCol.append(makeRow(byKey.get("rA")), makeRow(byKey.get("rB"))); panel.append(redCol, makeRow(byKey.get("gr")), makeRow(byKey.get("bl"))); render(); return root; }35:T6a3,Nature is much more complicated because there is an infinite spectrum of wavelengths in the visible spectrum. Human eyes have cone cells that can detect long, medium and short wavelengths. When calculating the absorption spectrum, we need to start with the distribution of wavelengths of the light source, track how each is absorbed by the material, how the sum of frequencies stimulate the L, M and S cones in human eyes, and then how our brain processes those signals. The International Commission on Illumination tristimulus calculation standard ([ISO/CIE 11664-3:2019](https://www.iso.org/standard/74165.html)) requires a spectrum to be sampled along 380-780nm, with at least a bin width of 5nm, and ideally a bin width of 1nm. The chart takes empirical spectral data across 390-700nm using 5nm bins and graphs the exponential decays of each frequency. Scaling each frequency by the intensity of the light source and how much it stimulates each cone cell allows us to stack each frequency into cone response curves. All three LMS spectras overlap, but especially the Long and Medium. Our brain calculates colors by how each cone is stimulated compared to the other cones. This comparison to other cones is shown as white curves on the cone response panels. We can calculate the Red, Green, Blue color by the distance of the response curve to the comparison curve. Notice that some materials create colors with an R, G, or B value below 0% or above 100%. This is not an error, this means the actual color is more vivid in person than our monitors can create. We can gamut clip to the nearest color in sRBG color space, but physical reality will always be better than a simulation on a screen.36:T6303,coneStack = { const INSET = 10; // breathing room inside the black const W = (typeof width === "number" ? width : 900) - 2 * INSET; const PANEL = 175, GAP = 8, STRIP = 18; const SPEC_W = 200, SWEEP = 100; // room for the sweeps between the two charts const PAD = { t: 22, b: 28, l: SPEC_W + SWEEP }; const H = PAD.t + 3 * PANEL + 2 * GAP + STRIP + PAD.b; const SPEC_NX = 110; const CHART_MAX = 700; // past here the eye takes ~0.04% const BANDS = ["L", "M", "S"], NAME = { L: "Long", M: "Medium", S: "Short" }; const CHANNEL = { L: [0.878, 0.278, 0.227], M: [0.118, 0.639, 0.290], S: [0.247, 0.431, 0.902] }; const TINT = 0.7; // channel colour vs the bin's own hue // sweeps start at exactly the equal-area curve height, so Short can reach full // opacity and the two broad cones never do const NX = Math.max(320, Math.round(W - (SPEC_W + SWEEP))); // one column per pixel const NM = spectra.FINE_NM; const VIS = NM.map((nm, i) => ({ nm, i })).filter(o => o.nm <= CHART_MAX); const ROW_OF = new Map(VIS.map((o, r) => [o.i, r])); const CONE = { L: cones.L, M: cones.M, S: cones.S }; // curves drawn with equal area rather than equal peak: S is the narrowest, so it keeps // its height and the two broad ones come down to match the area it covers const CURVE_SCALE = (() => { const nms = cones.NM.filter(nm => nm <= CHART_MAX), area = {}; for (const b of BANDS) area[b] = nms.reduce((a, nm) => a + cones.at(nm, b), 0); const mn = Math.min(...BANDS.map(b => area[b])), out = {}; for (const b of BANDS) out[b] = mn / area[b]; return out; })(); const curve = (nm, b) => cones.at(nm, b) * CURVE_SCALE[b]; let SPD, PMAX, lit, WHITE_RESP, MIX, LEAD, SUBC, SUB_LABEL; const rgbOf = lms => cones.apply(cones.XYZ_TO_RGB, cones.apply(cones.LMS_TO_XYZ, lms)); const CH = ["R", "G", "B"]; const KELVIN = 5500; // only used by the blackbody source const enc = v => Math.round(255 * Math.pow(Math.max(0, Math.min(1, v)), 1 / 2.2)); const SPEC_RGB = cones.BIN_RGB.map(c => c.map(enc)); const FILL = {}; for (const b of BANDS) FILL[b] = cones.BIN_RGB.map(c => { const e = c.map(v => Math.pow(Math.max(0, Math.min(1, v)), 1 / 2.2)); return "rgb(" + [0, 1, 2].map(j => Math.round(255 * (TINT * CHANNEL[b][j] + (1 - TINT) * e[j]))).join(",") + ")"; }); // Normalising each cone to its response to white makes every row of the LMS->RGB // matrix sum to 1, so each channel reads as one cone minus a share of the others. // All of it depends on the illuminant, so it is rebuilt whenever the source changes. function setLight() { const id = srcSel.value; SPD = illuminants.spd(id, [1, 1, 1], KELVIN); PMAX = Math.max(...SPD, 1e-12); lit = { spd: SPD, white: SPD, ev: 0 }; WHITE_RESP = {}; for (const b of BANDS) WHITE_RESP[b] = NM.reduce((a, _, i) => a + SPD[i] * CONE[b][i], 0); const W3 = BANDS.map(b => WHITE_RESP[b]), UNIT = rgbOf(W3); MIX = [[0, 0, 0], [0, 0, 0], [0, 0, 0]]; for (let j = 0; j < 3; j++) { const lms = [0, 0, 0]; lms[j] = W3[j]; const c = rgbOf(lms); for (let i = 0; i < 3; i++) MIX[i][j] = c[i] / UNIT[i]; } LEAD = MIX.map((row, i) => row[i]); // channel i = LEAD[i] * SUBC = MIX.map((row, i) => row.map((v, j) => j === i ? 0 : -v / row[i])); // (own - SUBC . others) SUB_LABEL = SUBC.map((row, i) => { // tenths, tiny terms dropped const t = row.map((v, j) => ({ b: BANDS[j], v })).filter((o, j) => j !== i && Math.abs(o.v) >= 0.05); return t.map((o, n) => (n ? (o.v < 0 ? " - " : " + ") : (o.v < 0 ? "-" : "")) + Math.abs(o.v).toFixed(1).replace(/^0/, "") + " " + o.b).join("") || "0"; }); } const uid = "cs" + Math.random().toString(36).slice(2, 8); const root = document.createElement("div"); root.className = uid; // The black belongs to the chart, not the cell: it is on the stage that wraps the // canvas, so the control row above it sits on the notebook background. const css = document.createElement("style"); css.textContent = ` .${uid}{font:13px system-ui,sans-serif;color:var(--theme-foreground,#333)} .${uid} .cs-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:none;padding:8px 10px} .${uid} .cs-lab{color:var(--theme-foreground-muted,#666)} .${uid} select{font:13px system-ui,sans-serif;color:inherit;background:var(--theme-background-alt,transparent);border:1px solid rgba(128,128,128,.45);border-radius:4px;padding:3px 5px} .${uid} option{color:#333;background:#fff} .${uid} .cs-stage{padding:${INSET}px;background:#000} `; root.appendChild(css); const bar = document.createElement("div"); bar.className = "cs-bar"; const mkSelect = () => document.createElement("select"); const mkLabel = t => { const el = document.createElement("span"); el.textContent = t; el.className = "cs-lab"; return el; }; const sel = mkSelect(); for (const n of Object.keys(spectra.MATERIALS).sort((a, b) => a.localeCompare(b))) { const o = document.createElement("option"); o.value = o.textContent = n; sel.appendChild(o); } const FIRST = "Mg phthalocyanine"; sel.value = spectra.MATERIALS[FIRST] ? FIRST : sel.options[0].value; const srcSel = mkSelect(); for (const o of illuminants.OPTIONS) { const e = document.createElement("option"); e.value = o.id; e.textContent = o.label; srcSel.appendChild(e); } srcSel.value = "D65"; const lab = document.createElement("span"); lab.className = "cs-lab"; lab.textContent = "each panel scaled to its own response to white"; bar.appendChild(mkLabel("Material")); bar.appendChild(sel); bar.appendChild(mkLabel("Light source")); bar.appendChild(srcSel); bar.appendChild(lab); root.appendChild(bar); const wrap = document.createElement("div"); wrap.className = "cs-stage"; const canvas = document.createElement("canvas"); canvas.style.cssText = `width:${W}px;height:${H}px;display:block;cursor:crosshair`; wrap.appendChild(canvas); root.appendChild(wrap); const base = document.createElement("canvas"); // static layers, blitted on hover const layer = [0, 1, 2].map(() => document.createElement("canvas")); // one per cone let cols = [], x, xSpec, k, edge0 = {}, dpr = 1; // the spectrum runs from the top of the first panel to the foot of the ramp strip, // so both charts share the same top and bottom edge const specTop = PAD.t, specH = 3 * PANEL + 2 * GAP + 6 + STRIP; const rowH = specH / VIS.length; const yOfRow = r => specTop + (VIS.length - 1 - r) * rowH; // long wavelengths at the top const yOfNm = nm => specTop + ((CHART_MAX - nm) / (CHART_MAX - VIS[0].nm)) * specH; const panelTop = bi => PAD.t + bi * (PANEL + GAP); const stripTop = () => PAD.t + 3 * PANEL + 2 * GAP + 6; // the largest channel still present at a given depth, so the axis can stop once // there is nothing left worth plotting const peakChannel = d => { const tot = BANDS.map(b => { let s = 0; for (let i = 0; i < NM.length; i++) s += SPD[i] * Math.exp(-k[i] * d) * CONE[b][i]; return s / WHITE_RESP[b]; }); let mx = 0; for (let i = 0; i < 3; i++) { let v = 0; for (let j = 0; j < 3; j++) v += MIX[i][j] * tot[j]; if (Math.abs(v) > mx) mx = Math.abs(v); } return mx; }; function build() { setLight(); k = spectra.FINE[sel.value]; const r = absorb.range(k, lit); // run out until every channel is down to a hundredth, not all the way to black let dEnd = Math.max(r.d0 * 10, r.d0); while (dEnd < r.d1 * 1e3 && peakChannel(dEnd) > 0.01) dEnd *= 1.12; x = d3.scaleLog().domain([r.d0, dEnd]).range([PAD.l, W]); xSpec = d3.scaleLog().domain([r.d0, dEnd]).range([0, SPEC_W]); cols = []; for (let c = 0; c < NX; c++) { const d = r.d0 * Math.pow(dEnd / r.d0, c / (NX - 1)); const P = NM.map((_, i) => SPD[i] * Math.exp(-k[i] * d)); const per = {}, raw = {}, tot = {}; for (const b of BANDS) { raw[b] = P.map((p, i) => p * CONE[b][i]); per[b] = raw[b].map(v => v / WHITE_RESP[b]); tot[b] = per[b].reduce((a, v) => a + v, 0); } cols.push({ d, per, raw, tot, hex: absorb.hex(absorb.colorAt(k, d, lit)) }); } // where each bin sits in the stack at the shallow edge, which is where its sweep lands for (const b of BANDS) { const e = new Array(NM.length); let acc = 0; for (let i = 0; i < NM.length; i++) { e[i] = [acc, acc + cols[0].per[b][i]]; acc = e[i][1]; } edge0[b] = e; } renderBase(); draw(); } const subAt = (bi, c) => BANDS.reduce((a, b, j) => a + SUBC[bi][j] * cols[c].tot[b], 0); const chanAt = (bi, c) => LEAD[bi] * (cols[c].tot[BANDS[bi]] - subAt(bi, c)); const hatch = (() => { // marks a negative channel const t = document.createElement("canvas"); t.width = t.height = 6; const tg = t.getContext("2d"); tg.strokeStyle = "rgba(255,255,255,.55)"; tg.lineWidth = 1.2; tg.beginPath(); tg.moveTo(-2, 6); tg.lineTo(6, -2); tg.moveTo(1, 9); tg.lineTo(9, 1); tg.stroke(); return tg.canvas; })(); function renderBase() { dpr = window.devicePixelRatio || 1; base.width = W * dpr; base.height = H * dpr; const g = base.getContext("2d"); g.setTransform(dpr, 0, 0, dpr, 0, 0); g.lineJoin = "round"; g.lineCap = "round"; g.fillStyle = "#000"; g.fillRect(0, 0, W, H); // spectrum, turned a quarter clockwise: wavelength down, depth across const cw = SPEC_W / SPEC_NX, [lo, hi] = x.domain(); for (let c = 0; c < SPEC_NX; c++) { const d = lo * Math.pow(hi / lo, c / (SPEC_NX - 1)); VIS.forEach(({ i }, r) => { const s = SPD[i] / PMAX * Math.exp(-k[i] * d); g.fillStyle = "rgb(" + cones.BIN_RGB[i].map(v => enc(v * s)).join(",") + ")"; g.fillRect(c * cw, yOfRow(r), cw + 0.6, rowH + 0.6); }); } for (const b of BANDS) { for (const [col, wd] of [["rgba(0,0,0,.55)", 2.4], ["rgb(" + CHANNEL[b].map(v => Math.round(v * 255)).join(",") + ")", 1.2]]) { g.beginPath(); cones.NM.filter(nm => nm <= CHART_MAX).forEach((nm, j) => { const px = curve(nm, b) * SPEC_W, py = yOfNm(nm); j ? g.lineTo(px, py) : g.moveTo(px, py); }); g.strokeStyle = col; g.lineWidth = wd; g.stroke(); } } g.strokeStyle = "rgba(150,150,150,.45)"; g.lineWidth = 1; g.strokeRect(0.5, specTop + 0.5, SPEC_W - 1, specH - 1); g.font = "9px system-ui,sans-serif"; g.textAlign = "left"; const nmTicks = []; for (let nm = CHART_MAX; nm >= 400; nm -= 50) nmTicks.push(nm); nmTicks.forEach((nm, j) => { // the top and bottom ticks sit on the panel edge, so nudge them inside const py = Math.max(specTop + 9, Math.min(specTop + specH - 3, yOfNm(nm))); const label = j === 0 ? nm + " nm" : String(nm); g.strokeStyle = "rgba(0,0,0,.75)"; g.lineWidth = 2.5; g.fillStyle = "#fff"; g.strokeText(label, 0, py - 1); g.fillText(label, 0, py - 1); }); BANDS.forEach((b, bi) => { const top = panelTop(bi), y = v => top + PANEL - v * PANEL; g.fillStyle = "#000"; g.fillRect(PAD.l, top, W - PAD.l, PANEL); const cum = [], acc = new Float64Array(NX); for (let i = 0; i < NM.length; i++) { // short at the bottom, long on top for (let c = 0; c < NX; c++) acc[c] += cols[c].per[b][i]; cum.push(Float64Array.from(acc)); } const thick = []; for (let i = 0; i < NM.length; i++) { let mx = 0; for (let c = 0; c < NX; c++) { const t = cum[i][c] - (i ? cum[i - 1][c] : 0); if (t > mx) mx = t; } if (mx * PANEL > 0.25) thick.push(i); } for (let n = thick.length - 1; n >= 0; n--) { const i = thick[n]; // the outermost drawn layer carries the true total, so the silhouette stays exact const bound = n === thick.length - 1 ? cum[NM.length - 1] : cum[i]; g.beginPath(); g.moveTo(PAD.l, top + PANEL); for (let c = 0; c < NX; c++) g.lineTo(x(cols[c].d), y(bound[c])); g.lineTo(W, top + PANEL); g.closePath(); g.fillStyle = FILL[b][i]; g.fill(); } // R, G and B are each this cone minus a share of the other two, so the signed // gap between the stack and the subtracted curve is that channel over LEAD const sub = new Float64Array(NX), own = new Float64Array(NX); for (let c = 0; c < NX; c++) { sub[c] = subAt(bi, c); own[c] = cols[c].tot[b]; } let cStart = 0; const flush = (c0, c1, positive) => { if (c1 <= c0) return; g.beginPath(); for (let c = c0; c <= c1; c++) { const px = x(cols[c].d); c === c0 ? g.moveTo(px, y(own[c])) : g.lineTo(px, y(own[c])); } for (let c = c1; c >= c0; c--) g.lineTo(x(cols[c].d), y(sub[c])); g.closePath(); if (positive) { g.fillStyle = "rgba(" + CHANNEL[b].map(v => Math.round(v * 255)).join(",") + ",.42)"; g.fill(); } else { g.fillStyle = "rgba(0,0,0,.55)"; g.fill(); g.fillStyle = g.createPattern(hatch, "repeat"); g.fill(); } }; for (let c = 1; c < NX; c++) { const a = own[c - 1] - sub[c - 1] >= 0, bnow = own[c] - sub[c] >= 0; if (a !== bnow) { flush(cStart, c, a); cStart = c; } } flush(cStart, NX - 1, own[NX - 1] - sub[NX - 1] >= 0); g.beginPath(); for (let c = 0; c < NX; c++) { const px = x(cols[c].d); c ? g.lineTo(px, y(sub[c])) : g.moveTo(px, y(sub[c])); } g.strokeStyle = "rgba(0,0,0,.85)"; g.lineWidth = 4.2; g.stroke(); g.strokeStyle = "#fff"; g.lineWidth = 1.2; g.stroke(); // same size and left edge as the band name above it g.font = "600 11px system-ui,sans-serif"; g.textAlign = "left"; const ey = Math.min(y(sub[0]) + 14, top + PANEL - 4); g.strokeStyle = "rgba(0,0,0,.85)"; g.lineWidth = 3; g.strokeText(SUB_LABEL[bi], PAD.l + 7, ey); g.fillStyle = "#fff"; g.fillText(SUB_LABEL[bi], PAD.l + 7, ey); g.strokeStyle = "rgba(150,150,150,.45)"; g.lineWidth = 1; g.strokeRect(PAD.l + 0.5, top + 0.5, W - PAD.l - 1, PANEL - 1); g.font = "600 11px system-ui,sans-serif"; g.textAlign = "left"; g.strokeStyle = "rgba(0,0,0,.6)"; g.lineWidth = 3; g.strokeText(NAME[b], PAD.l + 7, top + 15); g.fillStyle = "#fff"; g.fillText(NAME[b], PAD.l + 7, top + 15); }); const sTop = stripTop(); for (let c = 0; c < NX; c++) { g.fillStyle = cols[c].hex; g.fillRect(x(cols[c].d), sTop, W / NX + 1, STRIP); } g.strokeStyle = "rgba(150,150,150,.45)"; g.lineWidth = 1; g.strokeRect(PAD.l + 0.5, sTop + 0.5, W - PAD.l - 1, STRIP - 1); const [dlo, dhi] = x.domain(); let ticks = []; for (let e = Math.ceil(Math.log10(dlo)); e <= Math.floor(Math.log10(dhi)); e++) ticks.push(Math.pow(10, e)); if (ticks.length < 3) for (let e = Math.ceil(Math.log10(dlo / 3)); e <= Math.floor(Math.log10(dhi / 3)); e++) ticks.push(3 * Math.pow(10, e)); ticks = ticks.filter(t => t >= dlo && t <= dhi).sort((a, b) => a - b); const fmt = d3.format(".3~g"); g.font = "10px system-ui,sans-serif"; g.strokeStyle = "rgba(150,150,150,.6)"; g.fillStyle = "#999"; const baseline = sTop + STRIP + 15; g.textAlign = "left"; g.fillText("depth", PAD.l, baseline); const taken = PAD.l + g.measureText("depth").width + 8; // keep ticks clear of it g.textAlign = "center"; for (const t of ticks) { const px = x(t), label = fmt(t), half = g.measureText(label).width / 2; g.beginPath(); g.moveTo(px, sTop + STRIP); g.lineTo(px, sTop + STRIP + 4); g.stroke(); const lx = Math.min(W - half, px); if (lx - half < taken) continue; g.fillText(label, lx, baseline); } g.font = "11px system-ui,sans-serif"; g.textAlign = "left"; g.fillText("spectrum", 0, 13); g.fillText("cone response", PAD.l, 13); } // One ribbon per bin per channel: even height and partial opacity where the light // leaves the spectrum, the stack's own band height at full opacity where it lands. const SWEEP_STOPS = 36, OVER = 0.4; const EXPOSURE = 1, BLOOM = 0.25, BLOOM_PX = 4; const KNEE = 1.9, SOFT = 2.5; // where whitening starts, and how gently const srgb8 = v => { v = v <= 0 ? 0 : v >= 1 ? 1 : v; return Math.round(255 * (v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055)); }; // Tone map in float, per gradient stop, and store the finished colour. Holding linear // light in 8 bits instead cost a factor of 39 in precision near black and saturated // hard at 3x full scale, which is what produced the blocky darks and the flat white core. const toneMap = (lin, op) => { const c = [lin[0] * op, lin[1] * op, lin[2] * op]; const m = c[0] > c[1] ? (c[0] > c[2] ? c[0] : c[2]) : (c[1] > c[2] ? c[1] : c[2]); if (m > 1) { // Hold the hue at full scale, then let it wash out exponentially with how far // past the knee it is. Lifting toward the max directly jumped the weak channels // by a third of full scale on the first step, which read as a hard white edge. const w = m > KNEE ? 1 - Math.exp(-(m - KNEE) / SOFT) : 0; for (let j = 0; j < 3; j++) { const n = c[j] / m; c[j] = n + (1 - n) * w; } } return "rgb(" + srgb8(c[0]) + "," + srgb8(c[1]) + "," + srgb8(c[2]) + ")"; }; const scratch = document.createElement("canvas"), blurC = document.createElement("canvas"); function sweeps(g, hoverBin, hoverD) { const xL = SPEC_W + 2, xR = PAD.l - 1; BANDS.forEach((b, bi) => { const cv = layer[bi]; cv.width = W * dpr; cv.height = H * dpr; // also clears const lg = cv.getContext("2d"); lg.setTransform(dpr, 0, 0, dpr, 0, 0); const order = VIS.filter(o => o.i !== hoverBin); if (hoverBin != null && ROW_OF.has(hoverBin)) order.push({ nm: NM[hoverBin], i: hoverBin }); for (const { i } of order) { // at a hovered depth a bin only still carries what the material has let through const T = hoverD == null ? 1 : Math.exp(-k[i] * hoverD); if (T < 0.0015) continue; const dim = hoverBin != null && hoverBin !== i; // each cone's sweeps are capped by its equal-area curve peak, so Long tops out // near half scale and Short can reach full, matching the curves in the spectrum const gain = EXPOSURE * CURVE_SCALE[b] * T * (dim ? 0.16 : hoverBin === i ? 1.35 : 1); const yL = yOfRow(ROW_OF.get(i)); const top = panelTop(bi), band = edge0[b][i]; const y0 = top + PANEL - band[1] * PANEL, y1 = top + PANEL - band[0] * PANEL; const hL = rowH, hR = y1 - y0; if (hR < 0.03) continue; // nothing of this bin lands here // The ribbon carries a fixed amount of light, so where it is narrow that light // is concentrated. A bin landing in a band several rows tall leaves the spectrum // far above full scale and washes to white, like the core of a neon tube. const lin = cones.BIN_RGB[i]; const grad = lg.createLinearGradient(xL, 0, xR, 0); for (let sIdx = 0; sIdx <= SWEEP_STOPS; sIdx++) { const t = sIdx / SWEEP_STOPS; grad.addColorStop(t, toneMap(lin, gain * hR / (hL + (hR - hL) * t))); } lg.fillStyle = grad; lg.beginPath(); lg.moveTo(xL, yL - OVER); lg.lineTo(xR, y0 - OVER); lg.lineTo(xR, y1 + OVER); lg.lineTo(xL, yL + rowH + OVER); lg.closePath(); lg.fill(); } }); scratch.width = W * dpr; scratch.height = H * dpr; const sc = scratch.getContext("2d"); sc.setTransform(dpr, 0, 0, dpr, 0, 0); // The three layers are the same photons measured three ways, not three separate // beams, so summing them would triple count. Take the brightest instead. sc.globalCompositeOperation = "lighten"; for (const cv of layer) sc.drawImage(cv, 0, 0, W, H); // a blurred copy added back is the glow around a blown-out core blurC.width = W * dpr; blurC.height = H * dpr; const bc = blurC.getContext("2d"); bc.setTransform(dpr, 0, 0, dpr, 0, 0); bc.filter = `blur(${BLOOM_PX}px)`; bc.drawImage(scratch, 0, 0, W, H); sc.globalCompositeOperation = "lighter"; sc.globalAlpha = BLOOM; sc.drawImage(blurC, 0, 0, W, H); sc.globalAlpha = 1; g.drawImage(scratch, 0, 0, W, H); } function draw(hoverD, hoverBin) { const g = canvas.getContext("2d"); canvas.width = W * dpr; canvas.height = H * dpr; g.setTransform(dpr, 0, 0, dpr, 0, 0); g.drawImage(base, 0, 0, W, H); sweeps(g, hoverBin, hoverD); if (hoverBin != null) { // trace that bin's band through every stack BANDS.forEach((b, bi) => { const top = panelTop(bi), y = v => top + PANEL - v * PANEL; g.beginPath(); for (let c = 0; c < NX; c++) { let a = 0; for (let i = 0; i < hoverBin; i++) a += cols[c].per[b][i]; const px = x(cols[c].d); c ? g.lineTo(px, y(a)) : g.moveTo(px, y(a)); } for (let c = NX - 1; c >= 0; c--) { let a = 0; for (let i = 0; i <= hoverBin; i++) a += cols[c].per[b][i]; g.lineTo(x(cols[c].d), y(a)); } g.closePath(); g.strokeStyle = "rgba(255,255,255,.9)"; g.lineWidth = 1; g.stroke(); }); g.strokeStyle = "rgba(255,255,255,.9)"; g.lineWidth = 1; g.strokeRect(0, yOfRow(ROW_OF.get(hoverBin)), SPEC_W, Math.max(1.5, rowH)); // wavelength only: the cone percentages are already the curves in the panel g.font = "600 11px system-ui,sans-serif"; g.textAlign = "left"; const nmLabel = NM[hoverBin] + " nm"; g.fillStyle = "#000"; g.fillRect(0, 2, g.measureText(nmLabel).width + 6, 15); g.fillStyle = "#fff"; g.fillText(nmLabel, 0, 13); } if (hoverD != null) { for (const [col, wd] of [["rgba(0,0,0,.55)", 3], ["rgba(255,255,255,.95)", 1]]) { g.strokeStyle = col; g.lineWidth = wd; g.beginPath(); g.moveTo(x(hoverD), PAD.t); g.lineTo(x(hoverD), stripTop() + STRIP); g.stroke(); } // on the spectrum, show the slice itself rather than a line over it const SW = 9, sx = Math.max(0, Math.min(SPEC_W - SW, xSpec(hoverD) - SW / 2)); VIS.forEach(({ i }, r) => { const v = SPD[i] / PMAX * Math.exp(-k[i] * hoverD); g.fillStyle = "rgb(" + cones.BIN_RGB[i].map(q => enc(q * v)).join(",") + ")"; g.fillRect(sx, yOfRow(r), SW, rowH + 0.6); }); g.strokeStyle = "rgba(255,255,255,.95)"; g.lineWidth = 1.4; g.strokeRect(sx - 0.7, specTop - 0.7, SW + 1.4, specH + 1.4); // the gap between the two curves, times LEAD, is that channel in linear light const c = nearest(hoverD), px = x(hoverD); BANDS.forEach((b, bi) => { const top = panelTop(bi), y = v => top + PANEL - v * PANEL; const yOwn = y(cols[c].tot[b]), ySub = y(subAt(bi, c)); g.strokeStyle = "rgba(0,0,0,.75)"; g.lineWidth = 3.4; g.beginPath(); g.moveTo(px, yOwn); g.lineTo(px, ySub); g.stroke(); g.strokeStyle = "rgb(" + CHANNEL[b].map(v => Math.round(v * 255)).join(",") + ")"; g.lineWidth = 2; g.beginPath(); g.moveTo(px, yOwn); g.lineTo(px, ySub); g.stroke(); for (const yy of [yOwn, ySub]) { g.beginPath(); g.arc(px, yy, 3, 0, 2 * Math.PI); g.fillStyle = "#fff"; g.fill(); g.strokeStyle = "rgba(0,0,0,.8)"; g.lineWidth = 1.1; g.stroke(); } const label = CH[bi] + " " + (100 * chanAt(bi, c)).toFixed(0) + "%"; g.font = "600 11px system-ui,sans-serif"; const wLab = g.measureText(label).width, right = px + 8 + wLab < W; g.textAlign = right ? "left" : "right"; const lx = right ? px + 8 : px - 8, ly = (yOwn + ySub) / 2 + 4; g.strokeStyle = "rgba(0,0,0,.85)"; g.lineWidth = 3; g.strokeText(label, lx, ly); g.fillStyle = "#fff"; g.fillText(label, lx, ly); }); } } const nearest = d => { const [lo, hi] = x.domain(); return Math.max(0, Math.min(NX - 1, Math.round(Math.log(d / lo) / Math.log(hi / lo) * (NX - 1)))); }; function report(px, py) { const overSpec = px >= 0 && px <= SPEC_W && py >= specTop && py <= specTop + specH; if (overSpec) { const r = Math.max(0, Math.min(VIS.length - 1, VIS.length - 1 - Math.floor((py - specTop) / rowH))); draw(null, VIS[r].i); return; } const [lo, hi] = x.range(); const c = Math.max(0, Math.min(NX - 1, Math.round((px - lo) / (hi - lo) * (NX - 1)))); draw(cols[c].d, null); } canvas.addEventListener("pointermove", e => { const r = canvas.getBoundingClientRect(); report((e.clientX - r.left) * (W / r.width), (e.clientY - r.top) * (H / r.height)); }); canvas.addEventListener("pointerleave", () => draw()); sel.addEventListener("input", build); srcSel.addEventListener("input", build); build(); return root; }37:T488e,provenance = { // Documentation only: where every number in `spectra` came from. Nothing depends on this cell. // [name, note, source, url, measured span] const ROWS = [ ["DCM laser dye", "4-(dicyanomethylene)-2-methyl-6-(p-dimethylaminostyryl)-4H-pyran, [DCM] in acetonitrile, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/019.html", [219, 700]], ["Mg phthalocyanine", "Magnesium phthalocyanine, [MgPc] in pyridine, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/025.html", [340, 840]], ["alexandrite", "Chrysoberyl, GRR 874, Lake Manyara, Tanzania, 0.717 mm, polarizations averaged", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/CHRYSOBeryl/Index.html", [390, 760]], ["anthocyanin", "Cyanidin-3-glucoside, flavylium form (acidic sap), 5 uM; two Gaussian bands, 520 nm and a 440 nm shoulder at 0.27 of peak", "Model, not a measurement: no downloadable anthocyanin spectrum was found. Band positions and strengths are from the published values used in the pH-differential assay - visible band 490-550 nm, molar absorptivity 26900 M-1 cm-1 at 520 nm for cyanidin-3-glucoside (Giusti and Wrolstad), and the diagnostic A440 to visible-max ratio of about 0.27", "https://doi.org/10.1002/0471142913.faf0102s00", null], ["bacteriochlorophyll a", "Bacteriochlorophyll a in toluene, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/135.html", [300, 900]], ["benitoite", "Benitoite, GRR-561-D4, dark blue zone, The Gem Mine, San Benito County, California, 0.997 mm", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Benitoite/Index.html", [390, 760]], ["beta-carotene", "Beta-carotene in hexane, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/041.html", [220, 700]], ["bilirubin", "Bilirubin in chloroform, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/119.html", [240, 700]], ["blood, deoxygenated", "Whole blood diluted 1:200, 0.75 g/L Hb", "S. Prahl, Oregon Medical Laser Center, from W. B. Gratzer and N. Kollias", "https://omlc.org/spectra/hemoglobin/summary.html", [250, 1000]], ["blood, oxygenated", "Whole blood diluted 1:200, 0.75 g/L HbO2", "S. Prahl, Oregon Medical Laser Center, from W. B. Gratzer and N. Kollias", "https://omlc.org/spectra/hemoglobin/summary.html", [250, 1000]], ["blue apatite", "Apatite, OK-5, Hugo Mine, Keystone, South Dakota, deep blue, 0.191 mm", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Apatite/Index.html", [390, 760]], ["blue bice", "Pigment in acrylic on cardboard; reflectance converted to Kubelka-Munk K/S, so depth is relative, not a path length", "A. Cosentino, Pigments Checker reflectance database, Cultural Heritage Science Open Source (chsopensource.org)", "https://chsopensource.org/products/pigments-checker/", [390, 760]], ["blue sapphire", "Corundum, GRR 3615, blue, Colombia", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Corundum/Index.html", [390, 760]], ["bromine gas", "Br2 gas at 1 atm and 298 K; cross-section x 2.46e19 molecules/cm3", "C. E. Flowerday et al., ACS Environ. Au 6, 678 (2026), 298 K, 325-850 nm, via the MPI-Mainz UV/VIS Spectral Atlas (uv-vis-spectral-atlas-mainz.org)", "https://uv-vis-spectral-atlas-mainz.org/uvvis/cross_sections/Halogens+mixed%20halogens/Br2.spc", [390, 760]], ["chlorine gas", "Cl2 gas at 1 atm and 298 K; cross-section x 2.46e19 molecules/cm3", "J. Tellinghuisen, J. Chem. Phys. 118, 1573 (2003) to 600 nm, spliced with H. von Halban and H. Siedentopf (1922) for 600-643 nm, whose weak red continuum is held flat beyond; via the MPI-Mainz UV/VIS Spectral Atlas (uv-vis-spectral-atlas-mainz.org)", "https://uv-vis-spectral-atlas-mainz.org/uvvis/cross_sections/Halogens+mixed%20halogens/Cl2.spc", [390, 643]], ["chlorophyll a", "Chlorophyll a in diethyl ether, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/123.html", [220, 700]], ["chlorophyll b", "Chlorophyll b in diethyl ether, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/125.html", [300, 800]], ["chrome oxide green", "Pigment in acrylic on cardboard; reflectance converted to Kubelka-Munk K/S, so depth is relative, not a path length", "A. Cosentino, Pigments Checker reflectance database, Cultural Heritage Science Open Source (chsopensource.org)", "https://chsopensource.org/products/pigments-checker/", [390, 760]], ["cobalt violet", "Pigment in acrylic on cardboard; reflectance converted to Kubelka-Munk K/S, so depth is relative, not a path length", "A. Cosentino, Pigments Checker reflectance database, Cultural Heritage Science Open Source (chsopensource.org)", "https://chsopensource.org/products/pigments-checker/", [390, 760]], ["coffee", "Brewed coffee, exponential decay model, absorbance falling about tenfold from 400 to 700 nm", "Model, not a measurement: coffee brew has no standard reference spectrum. Melanoidin absorbance is reported as a smooth monotonic decline through the visible with no visible-range maxima (Moreira et al., Food Funct. 2012); the decay constant is set to a tenfold drop over 400-700 nm", "https://doi.org/10.1039/c2fo10288a", null], ["cresyl violet", "Cresyl violet perchlorate in ethanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/047.html", [220, 662]], ["cryptocyanine", "Cryptocyanine in ethanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/051.html", [220, 898]], ["crystal violet", "Crystal violet, in water, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/048.html", [220, 720]], ["cu-blue tourmaline", "Elbaite, GIA-R030, Paraiba, Brazil, Cu-blue, X-ray oriented, 0.200 mm", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/tourmaline/Index.html", [390, 760]], ["demantoid garnet", "Andradite, GRR 2667, variety demantoid, Nicolai K, heated, 0.648 mm", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Garnet/Index.html", [390, 760]], ["diaryl chlorin", "5,10-Diaryl chlorin in toluene, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/128.html", [350, 672]], ["egyptian blue", "Pigment in acrylic on cardboard; reflectance converted to Kubelka-Munk K/S, so depth is relative, not a path length", "A. Cosentino, Pigments Checker reflectance database, Cultural Heritage Science Open Source (chsopensource.org)", "https://chsopensource.org/products/pigments-checker/", [390, 760]], ["emerald", "Emerald, Zambia, Miku, light green", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Beryl/Index.html", [390, 760]], ["eosin Y", "Eosin Y in basic ethanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/061.html", [220, 700]], ["fayalite", "Fayalite, GRR1582, Coso Mts., CA R.T.", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Olivine/Index.html", [390, 760]], ["fluorescein", "Fluorescein in basic ethanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/037.html", [220, 720]], ["green earth", "Pigment in acrylic on cardboard; reflectance converted to Kubelka-Munk K/S, so depth is relative, not a path length", "A. Cosentino, Pigments Checker reflectance database, Cultural Heritage Science Open Source (chsopensource.org)", "https://chsopensource.org/products/pigments-checker/", [390, 760]], ["green zircon", "Zircon, GRR 3106, Mogok, Myanmar, green, 2.592 mm; sharp uranium lines", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/zircon/Index.html", [390, 760]], ["hematin", "Hematin in acetic acid, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/121.html", [250, 700]], ["indocyanine green", "ICG in water, 10 uM measurement rescaled to 5 uM", "A. Barofsky / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/icg/index.html", [390, 760]], ["indodicarbocyanine", "indodicarbocyanine", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction. This is the monomer spectrum: the notebook applies Beer-Lambert with a fixed k, so the J- or H-aggregate band that gives this dye its metachromasia does not appear at any depth", "https://omlc.org/spectra/PhotochemCAD/html/017.html", [220, 700]], ["iodine vapour", "I2 vapour at 1 atm partial pressure, 308 K; cross-section x 2.46e19 molecules/cm3", "J. Tellinghuisen (2011), 308 K, 390-900 nm, via the MPI-Mainz UV/VIS Spectral Atlas (uv-vis-spectral-atlas-mainz.org)", "https://uv-vis-spectral-atlas-mainz.org/uvvis/cross_sections/Halogens+mixed%20halogens/I2.spc", [390, 760]], ["lucifer yellow", "Lucifer yellow CH in water, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/065.html", [220, 720]], ["malachite green", "Malachite Green in water, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/030.html", [220, 697]], ["melanin", "Cutaneous melanosome, mu_a = 1.70e12 * lambda^-3.48 /cm, scaled", "S. Jacques, Oregon Medical Laser Center (omlc.org), power-law fit to melanosome absorption", "https://omlc.org/spectra/melanin/mua.html", [390, 760]], ["methylene blue", "Methylene blue in water, 5 uM", "S. Prahl, Oregon Medical Laser Center (omlc.org), molar extinction", "https://omlc.org/spectra/mb/index.html", [390, 760]], ["nickel olivine", "(Mg,Ni)2SiO4 synthetic olivine, GRR 239c, J. Ito, 0.055 mm", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Olivine/Index.html", [390, 760]], ["nile blue", "Nile Blue in methanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/005.html", [220, 700]], ["nile red", "Nile Red in Dioxane, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/007.html", [250, 749]], ["orpiment", "Pigment in acrylic on cardboard; reflectance converted to Kubelka-Munk K/S, so depth is relative, not a path length", "A. Cosentino, Pigments Checker reflectance database, Cultural Heritage Science Open Source (chsopensource.org)", "https://chsopensource.org/products/pigments-checker/", [390, 760]], ["oxazine 1", "Oxazine 1 in methanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/014.html", [220, 700]], ["oxazine 170", "Oxazine 170 in methanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/071.html", [220, 700]], ["pinacyanol", "pinacyanol", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction. This is the monomer spectrum: the notebook applies Beer-Lambert with a fixed k, so the J- or H-aggregate band that gives this dye its metachromasia does not appear at any depth", "https://omlc.org/spectra/PhotochemCAD/html/075.html", [220, 685]], ["pink tourmaline", "Tourmaline, Paraiba, Brazil, pink", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Tourmaline/Index.html", [390, 760]], ["pseudoisocyanine", "pseudoisocyanine", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction. This is the monomer spectrum: the notebook applies Beer-Lambert with a fixed k, so the J- or H-aggregate band that gives this dye its metachromasia does not appear at any depth", "https://omlc.org/spectra/PhotochemCAD/html/052.html", [220, 594]], ["pumpkin seed oil", "Phenomenological fit, not a composition; peak chroma at 1 mm", "Fitted to the hue/lightness trajectory measured off a photograph of the oil: mean hue error 1.0 deg, max 3.0 deg over L* 25-90. Basis is measured chlorophyll a and b plus a brown baseline and one free band at 590 nm", "https://doi.org/10.1364/JOSAA.26.001576", null], ["pyropheophorbide a", "Pyropheophorbide a in dichloromethane, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/150.html", [300, 751]], ["rhodamine 123", "Rhodamine 123 in ethanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/008.html", [220, 689]], ["rhodamine 6G", "Rhodamine 6G in ethanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/083.html", [220, 700]], ["rhodamine B", "Rhodamine B in ethanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/009.html", [220, 697]], ["ruby", "Ruby, GRR 1843, Chanthaburi, Thailand", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Corundum/Index.html", [390, 760]], ["smoky quartz", "Quartz, grr 2918, Jack Rabbit Claim, Teller Co., Colorado, smoky", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Quartz/Index.html", [390, 760]], ["sugilite", "Sugilite, GRR 610, Wessels Mine, South Africa, pink region, 1.48 mm", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/sugilite/Index.html", [390, 760]], ["sulforhodamine 101", "Sulforhodamine 101 in ethanol, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/012.html", [220, 689]], ["tanzanite", "Zoisite, Arusha, grr2292, blue", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Zoisite/Index.html", [390, 760]], ["tetramesitylporphyrin", "Tetramesitylporphyrin in toluene, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/102.html", [350, 700]], ["thiadicarbocyanine", "thiadicarbocyanine", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction. This is the monomer spectrum: the notebook applies Beer-Lambert with a fixed k, so the J- or H-aggregate band that gives this dye its metachromasia does not appear at any depth", "https://omlc.org/spectra/PhotochemCAD/html/087.html", [220, 700]], ["triphenylcorrole", "5,10,15-Triphenylcorrole in dichloromethane, 5 uM", "PhotochemCAD 3 / OMLC (omlc.org), molar extinction", "https://omlc.org/spectra/PhotochemCAD/html/126.html", [300, 707]], ["tsavorite garnet", "Grossular, GRR 229, Tanzania, variety tsavorite, 0.758 mm", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/Garnet/Index.html", [390, 760]], ["ultramarine b nat", "Pigment in acrylic on cardboard; reflectance converted to Kubelka-Munk K/S, so depth is relative, not a path length", "A. Cosentino, Pigments Checker reflectance database, Cultural Heritage Science Open Source (chsopensource.org)", "https://chsopensource.org/products/pigments-checker/", [390, 760]], ["usambara tourmaline", "Elbaite, GRR 3245, Kisiwani village, Tanga Province, Tanzania, the sample that shows the Usambara effect, 0.404 mm, single direction: the other axis of the same crystal stays green", "G. R. Rossman, Caltech Mineral Spectroscopy Server (minerals.gps.caltech.edu); absorbance over stated thickness, baseline offset removed", "http://minerals.gps.caltech.edu/files/visible/tourmaline/Index.html", [390, 760]], ["verdigris", "Pigment in acrylic on cardboard; reflectance converted to Kubelka-Munk K/S, so depth is relative, not a path length", "A. Cosentino, Pigments Checker reflectance database, Cultural Heritage Science Open Source (chsopensource.org)", "https://chsopensource.org/products/pigments-checker/", [390, 760]], ["water", "Pure water, 1/cm", "R. M. Pope and E. S. Fry, Appl. Opt. 36, 8710 (1997), integrating cavity, 390-728 nm; above 728 nm from D. J. Segelstein (1981), which the two agree on to within 10%", "https://omlc.org/spectra/water/abs/index.html", [390, 760]] ]; const esc = t => t.replace(/&/g, "&").replace(/ a[0].localeCompare(b[0])).map(([name, note, source, url]) => `

${esc(name)} : ${esc(note)}; ${esc(source)}

` ).join(""); return html`

Sources and notes for materials

${items}

`; }38:Tdb47,spectra = { // Measured absorption only, k in 1/cm on the 5 nm grid shared with cones. // Citations live outside this cell; `measured` is the span the source actually covers. const BINS = [405, 430, 455, 480, 505, 530, 555, 580, 605, 630, 655, 680, 700, 720, 745]; const FINE_NM = cones.NM; // measured spans exclude regions where the source reads at its noise floor; // those are replaced by the absorption band's own log-linear decay. const EMPIRICAL = { "water": { tags: ["everyday"], measured: [390, 760], k: [ 8.51e-5, 8.13e-5, 6.63e-5, 5.3e-5, 4.73e-5, 4.44e-5, 4.54e-5, 4.78e-5, 4.95e-5, 5.3e-5, 6.35e-5, 7.51e-5, 9.22e-5, 9.62e-5, 9.79e-5, 0.0001011, 0.000106, 0.000114, 0.000127, 0.000136, 0.00015, 0.000173, 0.000204, 0.000256, 0.000325, 0.000396, 0.000409, 0.000417, 0.000434, 0.000452, 0.000474, 0.000511, 0.000565, 0.000596, 0.000619, 0.000642, 0.000695, 0.000772, 0.000896, 0.0011, 0.001351, 0.001672, 0.002224, 0.002577, 0.002644, 0.002678, 0.002755, 0.002834, 0.002916, 0.003012, 0.003108, 0.00325, 0.0034, 0.00371, 0.0041, 0.00429, 0.00439, 0.00448, 0.00465, 0.00486, 0.00516, 0.00559, 0.00624, 0.00704, 0.00827, 0.01007, 0.01231, 0.01489, 0.02044, 0.02306, 0.02477, 0.02582, 0.02612, 0.02629, 0.02611 ] }, "blood, oxygenated": { tags: ["biological"], measured: [250, 1000], k: [ 4.491, 5.949, 7.128, 8.799, 12.5, 14.02, 12.86, 9.38, 6.588, 3.925, 2.747, 2.111, 1.682, 1.373, 1.191, 1.031, 0.8892, 0.7888, 0.713, 0.6673, 0.6341, 0.5931, 0.5605, 0.5395, 0.5364, 0.5531, 0.648, 0.8257, 1.07, 1.296, 1.425, 1.369, 1.152, 0.9505, 0.8732, 0.9382, 1.191, 1.467, 1.341, 0.8166, 0.3856, 0.1761, 0.08568, 0.05172, 0.04032, 0.03113, 0.02522, 0.01977, 0.01633, 0.01322, 0.01183, 0.01064, 0.009853, 0.009111, 0.008557, 0.008181, 0.007872, 0.007596, 0.007433, 0.00732, 0.00739, 0.007509, 0.007765, 0.00804, 0.008407, 0.008794, 0.009317, 0.009857, 0.01044, 0.01105, 0.01194, 0.01286, 0.01387, 0.01487, 0.01569 ] }, "blood, deoxygenated": { tags: ["biological"], measured: [250, 1000], k: [ 4.492, 5.272, 5.979, 7.014, 8.138, 9.456, 10.91, 12.64, 14.15, 14.75, 11.07, 6.944, 2.766, 0.882, 0.6262, 0.5, 0.4326, 0.3992, 0.3896, 0.4117, 0.4467, 0.4992, 0.5586, 0.6235, 0.6901, 0.7679, 0.8458, 0.9417, 1.045, 1.147, 1.247, 1.352, 1.43, 1.46, 1.44, 1.331, 1.207, 1.095, 0.9912, 0.9001, 0.7584, 0.567, 0.393, 0.3223, 0.2528, 0.2018, 0.1743, 0.1543, 0.1379, 0.1249, 0.1163, 0.1078, 0.1004, 0.09321, 0.08639, 0.08061, 0.07484, 0.06936, 0.06447, 0.05957, 0.05494, 0.05149, 0.04804, 0.04447, 0.04125, 0.03836, 0.0355, 0.03279, 0.02951, 0.02951, 0.02988, 0.03307, 0.03762, 0.0416, 0.04146 ] }, "chlorophyll a": { tags: ["biological"], measured: [220, 700], k: [ 0.5026, 0.5922, 0.7265, 0.8009, 0.8181, 0.8196, 0.9577, 1.217, 1.246, 0.7317, 0.2485, 0.08091, 0.0365, 0.02023, 0.01435, 0.01254, 0.01159, 0.0114, 0.01496, 0.01684, 0.01963, 0.02265, 0.02003, 0.02193, 0.02312, 0.02573, 0.03464, 0.04126, 0.04389, 0.04345, 0.03676, 0.03116, 0.03189, 0.03972, 0.05128, 0.06522, 0.07724, 0.08326, 0.07632, 0.06316, 0.05841, 0.07649, 0.1054, 0.1318, 0.1474, 0.1519, 0.141, 0.1144, 0.09826, 0.1003, 0.1395, 0.2353, 0.4331, 0.769, 0.9802, 0.7562, 0.362, 0.1103, 0.03929, 0.01774, 0.01012, 0.006066, 0.005169, 0.002413, 0.001127, 0.0005259, 0.0002455, 0.0001146, 5.351e-5, 2.498e-5, 1.166e-5, 5.444e-6, 2.541e-6, 1.186e-6, 5.538e-7 ] }, "chlorophyll b": { tags: ["biological"], measured: [300, 800], k: [ 0.1491, 0.1481, 0.169, 0.1897, 0.2246, 0.3137, 0.4785, 0.6202, 0.6513, 0.644, 0.7793, 1.2, 1.714, 1.785, 1.342, 0.7905, 0.3867, 0.1637, 0.07722, 0.04817, 0.04302, 0.04184, 0.04283, 0.04299, 0.04313, 0.04477, 0.04756, 0.05325, 0.06177, 0.07083, 0.078, 0.08149, 0.08204, 0.0829, 0.08696, 0.09004, 0.08969, 0.08934, 0.09537, 0.1113, 0.1258, 0.1294, 0.1177, 0.1021, 0.09879, 0.09549, 0.09324, 0.1165, 0.1941, 0.3729, 0.612, 0.6122, 0.3485, 0.1333, 0.05864, 0.03136, 0.02012, 0.0156, 0.01268, 0.00936, 0.00715, 0.005779, 0.005296, 0.004939, 0.0051, 0.005192, 0.004709, 0.004421, 0.003788, 0.003235, 0.002867, 0.003062, 0.003327, 0.002763, 0.002464 ] }, "bacteriochlorophyll a": { tags: ["biological"], measured: [300, 900], k: [ 0.4972, 0.5201, 0.4798, 0.322, 0.179, 0.1111, 0.08493, 0.07231, 0.06455, 0.05943, 0.05424, 0.04719, 0.04404, 0.03807, 0.03442, 0.03174, 0.02907, 0.02729, 0.02525, 0.0247, 0.02446, 0.02519, 0.02499, 0.02394, 0.02489, 0.02634, 0.02948, 0.03456, 0.04245, 0.04986, 0.0558, 0.06063, 0.06706, 0.08175, 0.1108, 0.1559, 0.2084, 0.2547, 0.2742, 0.2541, 0.2003, 0.1378, 0.08853, 0.05851, 0.04312, 0.03431, 0.03213, 0.03083, 0.03231, 0.03348, 0.03576, 0.0386, 0.04019, 0.04178, 0.04315, 0.04515, 0.05039, 0.05631, 0.06514, 0.07551, 0.08817, 0.1012, 0.116, 0.1268, 0.1346, 0.1377, 0.1399, 0.141, 0.1482, 0.1638, 0.1907, 0.2351, 0.3004, 0.3989, 0.5317 ] }, "beta-carotene": { tags: ["biological"], measured: [220, 700], k: [ 0.4818, 0.5777, 0.6714, 0.7613, 0.8428, 0.9467, 1.121, 1.219, 1.23, 1.283, 1.393, 1.521, 1.597, 1.533, 1.395, 1.268, 1.248, 1.294, 1.275, 1.114, 0.8757, 0.6069, 0.3757, 0.2212, 0.1265, 0.07521, 0.03894, 0.0233, 0.02566, 0.005313, 0.02459, 0.008086, 0.01578, 0.00891, 3.689e-5, 0.01816, 0.007512, 0.0112, 0.009605, 0.01269, 0.001198, 0.01175, 0.008439, 0.007844, 0.0187, 0.00797, 0.02, 0.02044, 0.006211, 0.01935, 0.01081, 0.00406, 0.006469, 0.01235, 0.005227, 0.007668, 0.01622, 0.002694, 0.005434, 0.005906, 0.006896, 1.268e-11, 0.01653, 0.01515, 0.01388, 0.01272, 0.01166, 0.01068, 0.009786, 0.008967, 0.008217, 0.007529, 0.006899, 0.006322, 0.005793 ] }, "bilirubin": { tags: ["biological"], measured: [240, 700], k: [ 0.1881, 0.2257, 0.2674, 0.3078, 0.355, 0.4018, 0.4524, 0.5007, 0.5388, 0.5733, 0.5999, 0.6156, 0.6319, 0.6313, 0.6202, 0.5893, 0.5318, 0.4463, 0.3412, 0.2456, 0.1615, 0.09914, 0.05488, 0.02882, 0.01496, 0.007184, 0.003914, 0.002464, 0.001485, 0.001232, 0.0007599, 0.0005296, 0.0007023, 0.0006562, 0.0005987, 0.0001727, 0.0005181, 0.0003914, 2.303e-5, 6.335e-13, 0.0006447, 0.0001151, 0.0006677, 0.0006102, 0.0006217, 0.0009786, 6.335e-13, 0.0003224, 0.0003224, 0.0003684, 4.605e-5, 6.335e-13, 0.0009901, 0.000898, 0.0003454, 6.335e-13, 0.001002, 6.335e-13, 6.335e-13, 6.335e-13, 0.000403, 6.335e-13, 0.001186, 0.001084, 0.0009907, 0.0009056, 0.0008277, 0.0007566, 0.0006915, 0.0006321, 0.0005777, 0.0005281, 0.0004827, 0.0004412, 0.0004033 ] }, "melanin": { tags: ["biological"], measured: [390, 760], k: [ 3, 2.87, 2.747, 2.631, 2.521, 2.417, 2.318, 2.225, 2.136, 2.052, 1.972, 1.896, 1.823, 1.754, 1.689, 1.627, 1.567, 1.511, 1.456, 1.405, 1.356, 1.309, 1.264, 1.221, 1.179, 1.14, 1.102, 1.066, 1.032, 0.9985, 0.9667, 0.9362, 0.9069, 0.8788, 0.8518, 0.8258, 0.8009, 0.7769, 0.7539, 0.7317, 0.7103, 0.6898, 0.67, 0.6509, 0.6325, 0.6148, 0.5977, 0.5813, 0.5654, 0.55, 0.5352, 0.5209, 0.5071, 0.4937, 0.4809, 0.4684, 0.4563, 0.4447, 0.4334, 0.4225, 0.4119, 0.4017, 0.3918, 0.3822, 0.3729, 0.3639, 0.3552, 0.3468, 0.3386, 0.3306, 0.3229, 0.3154, 0.3082, 0.3011, 0.2943 ] }, "hematin": { tags: ["biological"], measured: [250, 700], k: [ 0.9711, 0.971, 0.952, 0.8757, 0.7368, 0.5868, 0.4257, 0.3032, 0.2202, 0.1624, 0.1296, 0.1112, 0.1011, 0.096, 0.09042, 0.08947, 0.08887, 0.08861, 0.09118, 0.09445, 0.09588, 0.1003, 0.1032, 0.1046, 0.1053, 0.1034, 0.09877, 0.09902, 0.09993, 0.1006, 0.09902, 0.09431, 0.08607, 0.07225, 0.06127, 0.05388, 0.04779, 0.04498, 0.0429, 0.04182, 0.04082, 0.03879, 0.03852, 0.03754, 0.03894, 0.04185, 0.04455, 0.04743, 0.05184, 0.05293, 0.05169, 0.04681, 0.04086, 0.03363, 0.025, 0.01923, 0.01286, 0.009408, 0.006213, 0.005365, 0.004847, 0.0044, 0.0009325, 0.0007068, 0.0005358, 0.0004061, 0.0003078, 0.0002333, 0.0001768, 0.000134, 0.0001016, 7.701e-5, 5.837e-5, 4.424e-5, 3.353e-5 ] }, "pyropheophorbide a": { tags: ["biological"], measured: [300, 751], k: [ 0.9203, 1.022, 1.079, 1.116, 1.188, 1.203, 1.014, 0.7086, 0.4243, 0.2451, 0.1473, 0.09906, 0.07368, 0.05925, 0.05269, 0.05394, 0.05564, 0.05659, 0.05533, 0.05385, 0.05646, 0.07414, 0.1012, 0.12, 0.1259, 0.1055, 0.08031, 0.06657, 0.0716, 0.09785, 0.11, 0.08281, 0.05973, 0.05292, 0.05146, 0.04724, 0.04115, 0.0352, 0.03121, 0.03103, 0.03327, 0.04398, 0.06394, 0.08592, 0.0974, 0.09441, 0.08213, 0.07033, 0.06349, 0.06345, 0.06711, 0.08159, 0.1205, 0.2161, 0.3485, 0.4906, 0.5077, 0.3857, 0.2337, 0.1312, 0.07974, 0.05434, 0.04004, 0.02981, 0.02087, 0.01372, 0.008623, 0.005572, 0.00365, 0.00236, 0.001451, 0.0007714, 0.0003108, 0.0001853, 0.0001125 ] }, "DCM laser dye": { tags: ["dye"], measured: [219, 700], k: [ 0.1544, 0.1748, 0.1893, 0.2057, 0.2314, 0.2647, 0.3015, 0.3377, 0.3748, 0.4098, 0.4433, 0.4735, 0.4962, 0.5109, 0.5175, 0.5173, 0.5103, 0.4982, 0.476, 0.447, 0.4117, 0.3699, 0.3236, 0.2759, 0.2293, 0.1859, 0.1471, 0.1137, 0.08617, 0.06386, 0.04663, 0.03373, 0.02404, 0.01719, 0.0124, 0.009003, 0.006666, 0.005146, 0.004006, 0.003431, 0.002878, 0.002671, 0.002475, 0.002337, 0.002245, 0.002153, 0.002118, 0.002176, 0.002038, 0.002164, 0.002003, 0.001969, 0.001957, 0.002049, 0.002003, 0.001785, 0.001842, 0.001808, 0.001704, 0.001612, 0.001543, 0.001451, 0.001382, 0.001326, 0.001273, 0.001222, 0.001173, 0.001126, 0.00108, 0.001037, 0.0009954, 0.0009554, 0.000917, 0.0008802, 0.0008449 ] }, "Mg phthalocyanine": { tags: ["dye"], measured: [340, 840], k: [ 0.06715, 0.04742, 0.03528, 0.024, 0.01876, 0.009445, 0.007626, 0.005296, 0.006792, 0.006165, 0.003021, 0.004821, 0.001746, 0.001689, 0.001956, 8.17e-5, 0.0009053, 6.885e-6, 1.097e-6, 0.001467, 0.001676, 4.259e-5, 0.001765, 4.733e-6, 0.0008757, 0.000358, 0.001713, 0.003498, 0.001398, 0.004629, 0.003943, 0.003506, 0.006813, 0.01005, 0.01593, 0.01699, 0.01759, 0.01864, 0.02495, 0.02893, 0.03143, 0.04555, 0.07493, 0.1315, 0.1505, 0.1205, 0.09925, 0.08045, 0.07495, 0.09143, 0.1182, 0.1327, 0.1276, 0.1509, 0.2409, 0.5084, 0.8734, 0.9903, 0.7375, 0.3945, 0.1689, 0.07072, 0.02954, 0.01313, 0.007775, 0.003772, 0.002265, 0.00116, 1.003e-12, 3.765e-7, 1.003e-12, 1.003e-12, 1.003e-12, 1.003e-12, 1.003e-12 ] }, "alexandrite": { tags: ["mineral"], measured: [390, 760], k: [ 24.31, 29.46, 35.19, 40.04, 43.82, 46.02, 46.66, 47.39, 47.38, 45.07, 41.82, 35.98, 28.05, 20.92, 15.78, 11.93, 9.552, 5.427, 3.289, 2.29, 1.89, 1.903, 2.157, 2.603, 3.281, 4.168, 5.283, 6.639, 8.265, 10.12, 12.22, 14.49, 16.93, 19.4, 21.9, 24.26, 26.47, 28.36, 29.86, 30.92, 31.5, 31.59, 30.93, 29.69, 28.19, 26.55, 24.67, 22.13, 18.63, 15.16, 11.9, 11.29, 8.149, 7.213, 4.987, 3.965, 2.528, 1.816, 5.188, 1.152, 0.7026, 0.4729, 0.3852, 0.3082, 0.2224, 0.1842, 0.1481, 0.08447, 0.05285, 0.04364, 0.01802, 0.0302, 0.05396, 0.03803, 0.01428 ] }, "benitoite": { tags: ["mineral"], measured: [390, 760], k: [ 1.677, 1.28, 0.9323, 0.6778, 0.5026, 0.4367, 0.3927, 0.3165, 0.3309, 0.4727, 0.691, 0.9911, 1.336, 1.786, 2.286, 2.805, 3.392, 4.026, 4.74, 5.419, 6.128, 6.92, 7.753, 8.577, 9.411, 10.29, 11.16, 12.08, 12.99, 13.89, 14.82, 15.75, 16.7, 17.57, 18.46, 19.36, 20.26, 21.08, 21.95, 22.78, 23.56, 24.34, 25.09, 25.77, 26.42, 27.07, 27.71, 28.27, 28.86, 29.35, 29.83, 30.25, 30.68, 31.01, 31.42, 31.61, 31.83, 31.96, 32.32, 32.37, 32.57, 32.69, 32.62, 32.73, 32.59, 32.39, 32.35, 32.2, 32.12, 31.97, 31.82, 31.58, 31.38, 31.05, 30.82 ] }, "blue apatite": { tags: ["mineral"], measured: [390, 760], k: [ 21.48, 17.84, 14.56, 11.82, 9.467, 7.301, 5.167, 3.287, 1.861, 0.8047, 0.2766, 0.01064, 0.004633, 0.21, 0.5448, 0.8874, 1.32, 1.842, 2.409, 3.184, 4.091, 5.041, 5.749, 6.477, 7.216, 7.903, 8.655, 9.518, 10.47, 11.58, 12.91, 14.46, 16.18, 18.11, 20.3, 22.71, 25.34, 27.95, 30.59, 33.21, 35.83, 38.45, 40.78, 42.64, 43.98, 44.87, 45.27, 45.69, 46.02, 46.34, 46.29, 45.85, 45.17, 43.83, 42.2, 40.46, 38.69, 37.03, 35.36, 33.39, 31.41, 29.08, 26.8, 24.23, 21.45, 18.76, 16.19, 13.91, 12.17, 11.81, 10.76, 9.196, 7.62, 6.579, 5.488 ] }, "blue sapphire": { tags: ["mineral"], measured: [390, 760], k: [ 2.39, 1.582, 1.015, 0.7605, 0.632, 0.5653, 0.502, 0.4617, 0.4575, 0.5179, 0.6715, 0.855, 1.183, 0.8639, 0.6391, 0.3815, 0.2668, 0.1248, 0.02883, 0.0002389, 0.01205, 0.04902, 0.1016, 0.1594, 0.2275, 0.2969, 0.3798, 0.4514, 0.5245, 0.6058, 0.6807, 0.7523, 0.8187, 0.8793, 0.9188, 0.9552, 0.9804, 0.9883, 0.9939, 0.9766, 0.9618, 0.928, 0.9072, 0.8723, 0.8416, 0.8151, 0.7899, 0.7637, 0.7361, 0.7098, 0.7057, 0.68, 0.6691, 0.6494, 0.6333, 0.6162, 0.619, 0.6062, 0.6195, 0.626, 0.6257, 0.6325, 0.6175, 0.615, 0.6162, 0.6032, 0.6048, 0.6175, 0.6173, 0.6255, 0.6356, 0.6356, 0.6425, 0.6468, 0.6514 ] }, "bromine gas": { tags: ["gas"], measured: [390, 760], k: [ 10.84, 12.44, 13.81, 14.83, 15.47, 15.73, 15.63, 15.24, 14.67, 13.96, 13.23, 12.54, 11.91, 11.38, 10.94, 10.57, 10.24, 9.935, 9.606, 9.239, 8.83, 8.368, 7.845, 7.283, 6.693, 6.029, 5.357, 4.776, 4.189, 3.679, 3.229, 2.766, 2.38, 2.061, 1.715, 1.496, 1.193, 1.066, 0.8419, 0.711, 0.5877, 0.4779, 0.3886, 0.3217, 0.2587, 0.2077, 0.1629, 0.1311, 0.1022, 0.08406, 0.06312, 0.04821, 0.0341, 0.02753, 0.0225, 0.01766, 0.01108, 0.009591, 0.007606, 0.00592, 0.004609, 0.005109, 0.00292, 0.004428, 0.00294, 0.003574, 0.004086, 0.004982, 0.003064, 0.005877, 0.008285, 0.005562, 0.004604, 0.004793, 0.005494 ] }, "chlorine gas": { tags: ["gas"], measured: [390, 643], k: [ 0.7483, 0.5913, 0.4751, 0.3904, 0.3274, 0.282, 0.2457, 0.2139, 0.1863, 0.1623, 0.1403, 0.1186, 0.09895, 0.08282, 0.06868, 0.05553, 0.04431, 0.03538, 0.02831, 0.02313, 0.01883, 0.01474, 0.0113, 0.008747, 0.006597, 0.004191, 0.002831, 0.003298, 0.003766, 0.002353, 0.0009403, 0.001886, 0.002831, 0.002831, 0.002831, 0.002831, 0.002831, 0.002831, 0.002831, 0.002357, 0.001883, 0.001883, 0.001883, 0.002698, 0.004123, 0.004677, 0.004668, 0.004623, 0.004511, 0.004303, 0.003967, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692, 0.003692 ] }, "cresyl violet": { tags: ["dye"], measured: [220, 662], k: [ 0.02063, 0.02145, 0.02668, 0.03029, 0.03679, 0.03907, 0.04242, 0.0472, 0.05407, 0.05938, 0.07007, 0.07626, 0.08756, 0.09469, 0.1052, 0.1155, 0.1241, 0.1337, 0.1439, 0.1493, 0.1562, 0.1605, 0.1671, 0.174, 0.1813, 0.1864, 0.1993, 0.2111, 0.2333, 0.2565, 0.2949, 0.3364, 0.3817, 0.4309, 0.4824, 0.5294, 0.5725, 0.6188, 0.689, 0.7777, 0.8682, 0.9298, 0.9533, 0.9488, 0.9105, 0.8019, 0.577, 0.3219, 0.1492, 0.0657, 0.03406, 0.01627, 0.006939, 0.0004751, 9.556e-13, 0.0009554, 0.0004079, 0.0001742, 7.437e-5, 3.175e-5, 1.356e-5, 5.788e-6, 2.471e-6, 1.055e-6, 4.506e-7, 1.924e-7, 8.214e-8, 3.507e-8, 1.497e-8, 6.393e-9, 2.73e-9, 1.166e-9, 4.976e-10, 2.125e-10, 9.072e-11 ] }, "cryptocyanine": { tags: ["dye"], measured: [220, 898], k: [ 0.02672, 0.03669, 0.03514, 0.02313, 0.01656, 0.00915, 0.005184, 0.005489, 0.0006649, 0.003002, 0.001131, 0.001406, 0.002615, 0.004781, 0.002934, 0.0005069, 0.0008139, 0.003413, 0.003555, 0.008932, 0.003497, 0.003375, 0.001617, 0.00549, 0.004215, 0.001707, 0.008147, 0.004083, 0.007221, 0.006604, 0.007639, 0.01263, 0.01536, 0.01599, 0.01758, 0.02274, 0.02722, 0.03437, 0.04508, 0.04825, 0.06163, 0.07322, 0.08134, 0.08852, 0.1047, 0.1231, 0.1525, 0.1826, 0.2401, 0.3088, 0.3797, 0.4375, 0.4788, 0.4778, 0.4635, 0.4611, 0.4801, 0.5506, 0.6625, 0.8199, 1.046, 1.35, 1.773, 2.221, 2.41, 2.108, 1.484, 0.8845, 0.4639, 0.2358, 0.1173, 0.06132, 0.02928, 0.01708, 0.01392 ] }, "crystal violet": { tags: ["dye"], measured: [220, 720], k: [ 0.03836, 0.0385, 0.02982, 0.02959, 0.03585, 0.03194, 0.03923, 0.05293, 0.05923, 0.07556, 0.08713, 0.1175, 0.1453, 0.1728, 0.2138, 0.2514, 0.3164, 0.3876, 0.4724, 0.5582, 0.6636, 0.7889, 0.9459, 1.102, 1.313, 1.525, 1.788, 2.016, 2.247, 2.457, 2.638, 2.776, 2.866, 2.944, 3.045, 3.15, 3.326, 3.541, 3.841, 4.068, 4.174, 4.06, 3.681, 3.174, 2.548, 1.97, 1.438, 0.9977, 0.6896, 0.458, 0.2934, 0.2045, 0.1292, 0.08797, 0.05576, 0.03781, 0.02655, 0.01842, 0.005756, 0.008784, 0.01289, 0.01087, 0.001612, 4.183e-12, 4.183e-12, 4.183e-12, 0.001193, 0.0009117, 0.0006969, 0.0005327, 0.0004071, 0.0003112, 0.0002379, 0.0001818, 0.000139 ] }, "cu-blue tourmaline": { tags: ["mineral"], measured: [390, 760], k: [ 3.163, 2.415, 1.916, 1.596, 1.327, 1.063, 0.8679, 0.7904, 0.7242, 0.5933, 0.5251, 0.5126, 0.5088, 0.5151, 0.5266, 0.5333, 0.5162, 0.4838, 0.4781, 0.5132, 0.5217, 0.4401, 0.3437, 0.2892, 0.2448, 0.2066, 0.1767, 0.1468, 0.09848, 0.02923, 0.003342, 0.05332, 0.1331, 0.1945, 0.2628, 0.4708, 0.9287, 1.506, 2.045, 2.684, 3.505, 4.532, 5.698, 6.793, 8.167, 9.713, 11.38, 13.21, 15.28, 17.2, 19.25, 21.09, 22.86, 24.75, 26.5, 28.13, 29.55, 30.59, 31.44, 32.05, 32.52, 32.97, 33.28, 33.35, 33.42, 33.3, 33.13, 32.98, 32.81, 32.72, 32.85, 32.91, 33.02, 33.21, 33.35 ] }, "demantoid garnet": { tags: ["mineral"], measured: [390, 760], k: [ 31.4, 31.4, 31.4, 29.01, 26.92, 25.21, 24.62, 25.52, 28.97, 35.09, 39.45, 23.55, 16.52, 13.91, 12.46, 11.07, 9.776, 8.717, 7.903, 6.921, 5.951, 5.195, 4.561, 4.02, 3.604, 3.317, 3.105, 2.971, 2.866, 2.815, 2.811, 2.85, 2.945, 2.995, 3.082, 3.185, 3.321, 3.463, 3.614, 3.757, 3.917, 4.104, 4.3, 4.507, 4.704, 4.858, 4.933, 4.868, 4.714, 4.53, 4.393, 4.137, 3.792, 3.429, 3.065, 2.719, 2.407, 2.132, 1.903, 1.68, 1.48, 1.259, 1.031, 0.807, 0.5818, 0.4366, 0.3253, 0.2186, 0.1307, 0.07269, 0.03633, 0.01766, 0.005254, 0.003944, 0.01622 ] }, "diaryl chlorin": { tags: ["dye"], measured: [350, 672], k: [ 0.539, 0.7943, 0.927, 0.9342, 0.971, 1.024, 0.8498, 0.3772, 0.1085, 0.03667, 0.02011, 0.0166, 0.01723, 0.01927, 0.02194, 0.02312, 0.02315, 0.02442, 0.02617, 0.03146, 0.04833, 0.07361, 0.08236, 0.09567, 0.09921, 0.07567, 0.04291, 0.02739, 0.02838, 0.0287, 0.02381, 0.01651, 0.01051, 0.007, 0.005768, 0.004847, 0.005584, 0.008508, 0.01638, 0.03068, 0.03547, 0.02527, 0.01508, 0.01149, 0.01007, 0.009844, 0.01128, 0.02841, 0.05044, 0.1026, 0.3048, 0.1738, 0.04073, 0.01353, 0.004271, 0.001036, 0.0002303, 7.917e-5, 3.13e-5, 1.238e-5, 4.894e-6, 1.935e-6, 7.651e-7, 3.025e-7, 1.196e-7, 4.729e-8, 1.87e-8, 7.394e-9, 2.923e-9, 1.156e-9, 4.57e-10, 1.807e-10, 7.145e-11, 2.825e-11, 1.117e-11 ] }, "emerald": { tags: ["mineral"], measured: [390, 760], k: [ 1.648, 1.657, 1.755, 1.86, 1.966, 2.074, 2.105, 2.158, 2.146, 2.004, 1.85, 1.723, 1.589, 1.332, 1.105, 0.88, 0.6961, 0.5203, 0.3906, 0.2405, 0.1414, 0.07491, 0.03632, 0.02506, 0.04543, 0.07223, 0.1087, 0.1751, 0.233, 0.3306, 0.4244, 0.538, 0.6447, 0.7958, 0.9427, 1.113, 1.268, 1.431, 1.569, 1.733, 1.865, 2.022, 2.153, 2.271, 2.356, 2.441, 2.502, 2.543, 2.582, 2.55, 2.624, 2.686, 2.644, 2.45, 2.337, 2.316, 2.13, 1.963, 1.904, 2.396, 1.918, 1.809, 1.76, 1.769, 1.806, 1.87, 1.976, 2.09, 2.228, 2.414, 2.574, 2.755, 2.996, 3.2, 3.406 ] }, "eosin Y": { tags: ["dye"], measured: [220, 700], k: [ 0.02093, 0.02344, 0.02267, 0.02186, 0.01995, 0.01619, 0.01928, 0.01464, 0.01482, 0.01605, 0.02258, 0.03057, 0.04163, 0.05596, 0.0741, 0.09117, 0.1186, 0.1678, 0.2355, 0.3073, 0.3614, 0.3856, 0.4162, 0.4934, 0.665, 0.9331, 1.174, 1.288, 1.15, 0.8252, 0.4652, 0.2223, 0.09774, 0.03853, 0.01611, 0.005492, 0.001865, 0.003557, 0.001324, 0.001474, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 0.001727, 0.000921, 0.001635, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 1.29e-12, 0.0019, 1.29e-12, 1.29e-12, 0.0002187, 0.0002013, 0.0001853, 0.0001705, 0.0001569, 0.0001444, 0.0001329, 0.0001223, 0.0001125, 0.0001035, 9.529e-5, 8.769e-5, 8.07e-5 ] }, "fayalite": { tags: ["mineral"], measured: [390, 760], k: [ 420.9, 327.3, 270.8, 249.7, 202.2, 170.5, 151.7, 143.4, 137.9, 132, 124.2, 121.3, 127.7, 126.4, 114, 103.7, 99.77, 89.01, 75.88, 71.65, 72.1, 74.02, 68.25, 57.14, 48.37, 42.98, 39.66, 37.54, 34.43, 30.2, 26.4, 23.39, 21.31, 19.27, 17.56, 16.13, 15.02, 14.55, 13.2, 11.5, 10.19, 9.062, 8.639, 8.401, 8.277, 7.76, 6.97, 6.109, 4.873, 3.769, 2.891, 2.037, 1.307, 0.7119, 0.4764, 0.3869, 0.1595, 0.1042, 0.1303, 0.1876, 0.3312, 0.6939, 1.326, 1.902, 2.404, 2.908, 3.475, 4.077, 4.772, 5.615, 6.63, 7.908, 9.653, 11.57, 13.33 ] }, "fluorescein": { tags: ["dye"], measured: [220, 720], k: [ 0.01864, 0.01771, 0.01603, 0.01536, 0.01745, 0.01954, 0.0232, 0.03159, 0.04314, 0.05642, 0.07475, 0.09322, 0.1238, 0.17, 0.2374, 0.3037, 0.3512, 0.3854, 0.4545, 0.5798, 0.7652, 0.9601, 1.059, 0.9502, 0.6617, 0.3719, 0.1706, 0.07594, 0.03161, 0.01566, 0.00799, 0.00487, 0.005215, 0.003339, 0.004087, 0.001715, 0.0007714, 0.002832, 0.001819, 0.001923, 0.002475, 0.001854, 0.002383, 0.002337, 0.001324, 0.002533, 0.002625, 0.001612, 0.002648, 0.001911, 0.002118, 6.908e-5, 0.0006447, 0.0019, 0.001036, 0.001761, 0.001888, 0.0004375, 0.002625, 0.002187, 0.001669, 0.001842, 0.0009786, 0.0006677, 0.001854, 0.001992, 0.001623, 0.001596, 0.001568, 0.001541, 0.001515, 0.001489, 0.001464, 0.001439, 0.001414 ] }, "green zircon": { tags: ["mineral"], measured: [390, 760], k: [ 6.559, 6.414, 6.184, 5.894, 5.582, 5.468, 7.062, 5.801, 4.646, 5.046, 3.422, 2.91, 2.722, 2.689, 2.911, 3.376, 2.694, 2.78, 2.894, 3.278, 2.317, 1.951, 2.298, 3.86, 5.145, 3.215, 2.091, 1.815, 1.935, 2.444, 2.994, 2.48, 1.587, 1.209, 1.112, 1.136, 1.254, 1.549, 2.121, 3.631, 6.118, 2.385, 1.732, 1.947, 2.463, 5.826, 5.421, 2.679, 1.313, 1.217, 1.567, 2.555, 5.298, 5.072, 7.351, 2.391, 1.08, 0.5186, 0.5482, 1.059, 0.2306, 0.1128, 0.08481, 0.03475, 0.01762, 0.000735, 0.004292, 0.007114, 0.02117, 0.0335, 0.06241, 0.1026, 0.1339, 0.1199, 0.2419 ] }, "indocyanine green": { tags: ["dye"], measured: [390, 760], k: [ 0.1031, 0.09754, 0.08273, 0.06927, 0.04873, 0.03003, 0.0306, 0.01927, 0.01927, 0.01247, 0.017, 0.009636, 0.002268, 5.683e-5, 0.001128, 4.686e-6, 0.0001633, 0.0005305, 0.001084, 0.0018, 0.002657, 0.003632, 0.004702, 0.005845, 0.007037, 0.008257, 0.009481, 0.01069, 0.01185, 0.01295, 0.01397, 0.01488, 0.01565, 0.01627, 0.01672, 0.01696, 0.004536, 0.0228, 0.034, 0.04763, 0.03514, 0.04183, 0.05327, 0.06607, 0.0748, 0.0918, 0.102, 0.1208, 0.1337, 0.1791, 0.1904, 0.2115, 0.2652, 0.3012, 0.3049, 0.3331, 0.3842, 0.4228, 0.4772, 0.5554, 0.6313, 0.694, 0.7548, 0.8185, 0.8308, 0.8427, 0.867, 0.8642, 0.8478, 0.8349, 0.8739, 0.9308, 1.025, 1.149, 1.257 ] }, "indodicarbocyanine": { tags: ["dye"], measured: [220, 700], k: [ 0.008445, 0.004098, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 2.751e-12, 0.0007792, 2.751e-12, 2.751e-12, 1.99e-5, 0.005434, 0.007612, 0.01254, 0.01755, 0.02639, 0.03548, 0.03934, 0.05577, 0.07142, 0.09349, 0.1175, 0.1554, 0.1843, 0.2285, 0.2679, 0.3131, 0.3775, 0.4684, 0.5791, 0.7221, 0.8613, 0.9606, 1.023, 1.052, 1.086, 1.186, 1.353, 1.648, 2.047, 2.441, 2.716, 2.696, 2.387, 1.873, 1.337, 0.8425, 0.4866, 0.279, 0.1561, 0.08959, 0.05979, 0.03917, 0.02738, 0.02366, 0.01478, 0.009227, 0.005762, 0.003599, 0.002247, 0.001403, 0.0008764, 0.0005473, 0.0003418, 0.0002135, 0.0001333, 8.325e-5 ] }, "iodine vapour": { tags: ["gas"], measured: [390, 760], k: [ 0.02708, 0.05169, 0.09871, 0.178, 0.3101, 0.5169, 0.832, 1.292, 1.947, 2.845, 4.049, 5.615, 7.608, 10.1, 13.14, 16.78, 21.04, 25.92, 31.34, 37.18, 43.26, 49.31, 55.06, 60.17, 64.4, 67.51, 69.37, 69.87, 69.07, 66.99, 63.82, 59.74, 55.01, 49.83, 44.48, 39.15, 34.02, 29.21, 24.83, 20.94, 17.54, 14.65, 12.24, 10.25, 8.66, 7.404, 6.437, 5.706, 5.164, 4.775, 4.505, 4.32, 4.197, 4.113, 4.054, 4.007, 3.965, 3.919, 3.86, 3.786, 3.702, 3.601, 3.488, 3.362, 3.225, 3.072, 2.917, 2.754, 2.592, 2.427, 2.264, 2.103, 1.944, 1.79, 1.642 ] }, "lucifer yellow": { tags: ["dye"], measured: [220, 720], k: [ 0.06805, 0.07889, 0.09053, 0.1008, 0.1108, 0.1188, 0.1258, 0.1289, 0.1289, 0.1264, 0.1194, 0.1102, 0.09794, 0.08426, 0.0689, 0.05396, 0.04099, 0.02985, 0.02178, 0.01486, 0.01135, 0.00845, 0.006747, 0.005849, 0.005503, 0.004905, 0.005192, 0.004881, 0.004605, 0.004697, 0.004237, 0.003834, 0.003339, 0.003822, 0.003155, 0.002567, 0.001738, 0.001957, 0.001623, 0.00152, 0.001289, 0.0008289, 0.0008404, 0.001025, 0.0005756, 0.0007138, 0.001059, 0.0003224, 0.0001727, 0.0009901, 0.0007714, 0.0007368, 0.0004605, 0.0003339, 0.0003569, 0.0005411, 0.0003799, 0.0005872, 0.0003108, 9.21e-5, 0.0004951, 0.0006332, 0.0002418, 0.0002072, 0.0003224, 0.000472, 0.0005411, 0.0005324, 0.0005238, 0.0005153, 0.000507, 0.0004988, 0.0004908, 0.0004828, 0.0004751 ] }, "malachite green": { tags: ["dye"], measured: [220, 697], k: [ 0.1532, 0.1785, 0.2183, 0.2583, 0.2935, 0.3091, 0.3371, 0.3501, 0.3343, 0.2913, 0.2358, 0.1701, 0.1167, 0.07852, 0.04568, 0.02826, 0.02672, 0.02201, 0.02535, 0.03072, 0.03196, 0.04144, 0.0513, 0.06004, 0.07649, 0.09993, 0.1186, 0.139, 0.1714, 0.2047, 0.2469, 0.2907, 0.3531, 0.4296, 0.5002, 0.5741, 0.6513, 0.7209, 0.8001, 0.8897, 1.001, 1.152, 1.311, 1.472, 1.619, 1.701, 1.7, 1.585, 1.38, 1.124, 0.8818, 0.6676, 0.4903, 0.3456, 0.2326, 0.1528, 0.09692, 0.0576, 0.03059, 0.01165, 0.008243, 1.714e-12, 0.0004202, 0.0002122, 0.0001071, 5.41e-5, 2.732e-5, 1.379e-5, 6.964e-6, 3.516e-6, 1.776e-6, 8.965e-7, 4.527e-7, 2.286e-7, 1.154e-7 ] }, "methylene blue": { tags: ["dye"], measured: [390, 760], k: [ 0.01447, 0.01471, 0.01316, 0.01089, 0.007978, 0.006833, 0.006885, 0.006591, 0.008186, 0.008936, 0.01036, 0.01181, 0.01346, 0.01551, 0.01727, 0.0203, 0.02101, 0.024, 0.02676, 0.03313, 0.03193, 0.03247, 0.03278, 0.03305, 0.03361, 0.03349, 0.03414, 0.03742, 0.03985, 0.04473, 0.05144, 0.06034, 0.07125, 0.08458, 0.1004, 0.1214, 0.1379, 0.158, 0.1853, 0.2165, 0.2531, 0.3, 0.3521, 0.3964, 0.4308, 0.446, 0.4534, 0.461, 0.4804, 0.5194, 0.5728, 0.6439, 0.7213, 0.8234, 0.8237, 0.8522, 0.8184, 0.697, 0.5157, 0.3392, 0.2124, 0.1266, 0.07496, 0.04579, 0.0277, 0.01777, 0.01184, 0.01063, 0.008082, 0.006664, 0.004974, 0.003814, 0.004536, 0.003955, 0.001773 ] }, "nickel olivine": { tags: ["mineral"], measured: [390, 760], k: [ 896.8, 784.7, 732.4, 750, 807.6, 917.1, 1020, 1047, 995.3, 863.3, 627.7, 448.1, 292.9, 229.6, 200.8, 187.2, 176.1, 162.3, 143, 117, 90.3, 70.66, 57.2, 44.88, 32.62, 21.74, 13.64, 7.777, 3.741, 1.389, 0.1788, 0.1047, 0.428, 1.243, 2.743, 4.801, 7.508, 10.39, 13.21, 16.43, 19.86, 24.57, 28.85, 34.47, 41.03, 47.41, 53.83, 61.11, 67.58, 72.99, 77.85, 82.11, 86.66, 91.14, 96.18, 102.7, 110.1, 119.8, 130.3, 143.3, 155.7, 172.5, 191.3, 211.7, 217.5, 213.8, 213.2, 216.7, 222.3, 229.4, 239.1, 250.8, 261.9, 275.7, 290.3 ] }, "nile blue": { tags: ["dye"], measured: [220, 700], k: [ 0.02632, 0.02466, 0.02259, 0.02688, 0.03003, 0.02966, 0.02948, 0.03016, 0.02722, 0.02322, 0.02042, 0.01872, 0.01887, 0.01678, 0.01482, 0.01325, 0.01281, 0.01162, 0.01222, 0.01454, 0.01766, 0.02019, 0.02588, 0.03222, 0.03753, 0.04801, 0.05829, 0.06994, 0.08519, 0.1024, 0.1234, 0.15, 0.1779, 0.2155, 0.2503, 0.2943, 0.3354, 0.3796, 0.4299, 0.4798, 0.527, 0.5837, 0.6435, 0.7028, 0.7731, 0.8262, 0.8625, 0.8825, 0.8684, 0.8217, 0.7382, 0.6227, 0.4881, 0.3549, 0.2289, 0.1357, 0.07988, 0.04508, 0.02445, 0.01535, 0.009337, 0.006344, 0.004156, 0.002469, 0.001467, 0.0008712, 0.0005175, 0.0003074, 0.0001826, 0.0001085, 6.445e-5, 3.828e-5, 2.274e-5, 1.351e-5, 8.025e-6 ] }, "nile red": { tags: ["dye"], measured: [250, 749], k: [ 0.02025, 0.01991, 0.02258, 0.02435, 0.0279, 0.0309, 0.0375, 0.04403, 0.05217, 0.06446, 0.0771, 0.09487, 0.1134, 0.1333, 0.1599, 0.1873, 0.2155, 0.2462, 0.2781, 0.3097, 0.3425, 0.3713, 0.3982, 0.4171, 0.4276, 0.4333, 0.4363, 0.4333, 0.4201, 0.3931, 0.3506, 0.2917, 0.2288, 0.1654, 0.1137, 0.0748, 0.04706, 0.02954, 0.01825, 0.01173, 0.009418, 0.007829, 0.005342, 0.004674, 0.004789, 0.004916, 0.004202, 0.004513, 0.00411, 0.002855, 0.003016, 0.002429, 0.002372, 0.002291, 0.002533, 0.0009556, 0.001324, 0.001451, 0.001612, 0.001128, 0.0001842, 0.001439, 4.603e-13, 0.0003684, 3.454e-5, 0.001577, 0.0003914, 0.000426, 0.0008059, 3.454e-5, 0.0002648, 0.0009671, 0.001012, 0.0009024, 0.000805 ] }, "oxazine 1": { tags: ["dye"], measured: [220, 700], k: [ 0.02545, 0.02167, 0.01702, 0.02101, 0.02316, 0.02236, 0.02427, 0.02564, 0.0276, 0.03096, 0.03198, 0.02854, 0.02891, 0.02525, 0.02157, 0.02185, 0.01908, 0.01692, 0.01497, 0.01697, 0.01799, 0.01548, 0.01774, 0.02212, 0.026, 0.03191, 0.04071, 0.04658, 0.06081, 0.07318, 0.09527, 0.1152, 0.1357, 0.163, 0.1903, 0.2321, 0.2787, 0.3346, 0.4075, 0.4808, 0.5318, 0.5649, 0.577, 0.5922, 0.6374, 0.7075, 0.8081, 0.9169, 1.051, 1.228, 1.385, 1.399, 1.218, 0.9127, 0.5869, 0.3557, 0.2124, 0.1163, 0.06021, 0.03294, 0.01825, 0.009625, 0.007817, 0.004396, 0.002472, 0.00139, 0.0007818, 0.0004397, 0.0002473, 0.000139, 7.819e-5, 4.397e-5, 2.473e-5, 1.391e-5, 7.82e-6 ] }, "oxazine 170": { tags: ["dye"], measured: [220, 700], k: [ 0.04173, 0.04042, 0.04234, 0.04192, 0.04331, 0.04061, 0.03888, 0.03625, 0.03587, 0.034, 0.03282, 0.03106, 0.03368, 0.03142, 0.03191, 0.0348, 0.03827, 0.04233, 0.04636, 0.05377, 0.05918, 0.06852, 0.0811, 0.09218, 0.1084, 0.1247, 0.143, 0.1642, 0.1846, 0.2133, 0.2473, 0.2886, 0.3345, 0.3789, 0.4207, 0.4662, 0.5081, 0.5529, 0.5958, 0.6434, 0.7131, 0.7901, 0.8636, 0.9206, 0.949, 0.9537, 0.926, 0.836, 0.6587, 0.4528, 0.2745, 0.1558, 0.09388, 0.05367, 0.03225, 0.01856, 0.01166, 0.009406, 0.005089, 0.004536, 0.004294, 0.003569, 0.003638, 0.002688, 0.001986, 0.001467, 0.001084, 0.0008011, 0.0005919, 0.0004373, 0.0003231, 0.0002387, 0.0001764, 0.0001303, 9.629e-5 ] }, "pinacyanol": { tags: ["dye"], measured: [220, 685], k: [ 0.03011, 0.02474, 0.02513, 0.02835, 0.02481, 0.01493, 0.006666, 0.004415, 0.004796, 0.0002653, 5.486e-6, 1.474e-12, 0.0005157, 1.474e-12, 1.474e-12, 0.003295, 0.004816, 0.009552, 0.01455, 0.02124, 0.02766, 0.03381, 0.04516, 0.06529, 0.09523, 0.1252, 0.1525, 0.1619, 0.1758, 0.193, 0.2489, 0.3474, 0.4732, 0.5983, 0.6518, 0.6304, 0.5646, 0.5212, 0.5448, 0.6715, 0.8919, 1.177, 1.401, 1.466, 1.326, 1.042, 0.6873, 0.4078, 0.225, 0.1164, 0.05904, 0.03043, 0.01606, 0.009003, 0.00312, 1.474e-12, 1.474e-12, 1.474e-12, 1.474e-12, 0.0005097, 0.0002374, 0.0001105, 5.146e-5, 2.396e-5, 1.116e-5, 5.195e-6, 2.419e-6, 1.126e-6, 5.245e-7, 2.442e-7, 1.137e-7, 5.295e-8, 2.466e-8, 1.148e-8, 5.346e-9 ] }, "pink tourmaline": { tags: ["mineral"], measured: [390, 760], k: [ 0.0006259, 0.1908, 0.3366, 0.4386, 0.5106, 0.5763, 0.6176, 0.7333, 0.8347, 0.9874, 1.197, 1.457, 1.816, 1.889, 2.055, 2.229, 2.385, 2.605, 2.861, 3.124, 3.523, 3.909, 4.413, 4.906, 5.368, 5.755, 6.096, 6.248, 6.174, 5.843, 5.419, 4.946, 4.312, 3.769, 3.232, 2.733, 2.257, 1.823, 1.424, 1.063, 0.7546, 0.4993, 0.2853, 0.1558, 0.0632, 0.05006, 0.08322, 0.1602, 0.2828, 0.4349, 0.6194, 0.8259, 1.019, 1.219, 1.426, 1.597, 1.78, 1.922, 2.07, 2.187, 2.299, 2.377, 2.432, 2.485, 2.541, 2.587, 2.627, 2.667, 2.708, 2.689, 2.685, 2.675, 2.661, 2.674, 2.666 ] }, "pseudoisocyanine": { tags: ["dye"], measured: [220, 594], k: [ 6.217e-13, 6.217e-13, 6.217e-13, 6.217e-13, 0.002561, 0.004202, 0.008768, 0.01664, 0.02508, 0.03267, 0.04325, 0.05986, 0.08598, 0.1133, 0.1342, 0.1483, 0.17, 0.2112, 0.2799, 0.3501, 0.3896, 0.3858, 0.3637, 0.361, 0.402, 0.485, 0.5844, 0.6191, 0.5645, 0.4546, 0.3256, 0.2154, 0.1357, 0.08153, 0.04837, 0.02824, 0.01572, 0.009119, 0.003399, 0.001215, 0.0005844, 6.641e-5, 3.082e-5, 1.43e-5, 6.635e-6, 3.079e-6, 1.429e-6, 6.629e-7, 3.076e-7, 1.427e-7, 6.622e-8, 3.073e-8, 1.426e-8, 6.616e-9, 3.07e-9, 1.424e-9, 6.61e-10, 3.067e-10, 1.423e-10, 6.604e-11, 3.064e-11, 1.422e-11, 6.597e-12, 3.061e-12, 1.42e-12, 6.591e-13, 6.217e-13, 6.217e-13, 6.217e-13, 6.217e-13, 6.217e-13, 6.217e-13, 6.217e-13, 6.217e-13, 6.217e-13 ] }, "rhodamine 123": { tags: ["dye"], measured: [220, 689], k: [ 0.001466, 9.809e-13, 2.905e-6, 9.809e-13, 0.001616, 9.809e-13, 0.0007133, 0.001678, 0.00645, 0.01256, 0.02525, 0.03551, 0.05005, 0.06754, 0.09392, 0.1376, 0.1917, 0.2479, 0.2859, 0.3146, 0.3707, 0.4746, 0.643, 0.8397, 0.9696, 0.9303, 0.6987, 0.4215, 0.2117, 0.09444, 0.03513, 0.01007, 0.0008959, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 0.0006073, 9.809e-13, 9.809e-13, 0.000424, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 9.809e-13, 0.0007608, 0.0005183, 0.0003531, 0.0002406, 0.0001639, 0.0001117, 7.608e-5, 5.183e-5, 3.531e-5, 2.406e-5, 1.639e-5, 1.117e-5, 7.608e-6, 5.183e-6, 3.531e-6 ] }, "rhodamine 6G": { tags: ["dye"], measured: [220, 700], k: [ 0.02543, 0.02062, 0.02082, 0.01605, 0.01783, 0.01408, 0.01018, 0.009231, 0.01209, 0.01286, 0.0175, 0.02215, 0.03466, 0.04764, 0.06299, 0.08232, 0.1019, 0.1408, 0.1973, 0.2658, 0.3379, 0.3926, 0.4318, 0.4846, 0.5919, 0.7698, 1.015, 1.232, 1.335, 1.228, 0.9095, 0.5513, 0.2905, 0.1383, 0.06167, 0.02659, 0.01065, 0.006098, 0.001825, 3.471e-6, 0.0004125, 0.000215, 4.255e-5, 0.0006219, 3.658e-6, 0.002601, 9.951e-6, 0.002154, 0.003656, 7.1e-6, 0.001971, 0.0008505, 0.0008142, 0.000162, 0.0003569, 1.335e-12, 0.001923, 0.0007714, 0.002038, 0.0005756, 0.00137, 0.0008059, 0.002021, 0.001926, 0.001836, 0.001749, 0.001667, 0.001589, 0.001514, 0.001443, 0.001375, 0.00131, 0.001249, 0.00119, 0.001134 ] }, "rhodamine B": { tags: ["dye"], measured: [220, 697], k: [ 0.02651, 0.02336, 0.02668, 0.024, 0.02498, 0.02135, 0.01578, 0.01189, 0.004476, 1.253e-5, 0.0004125, 1.415e-5, 0.004658, 0.0101, 0.02082, 0.0353, 0.04905, 0.0675, 0.09207, 0.1229, 0.1709, 0.2298, 0.2983, 0.3608, 0.4121, 0.4636, 0.5462, 0.6799, 0.8637, 1.049, 1.194, 1.2, 1.032, 0.7585, 0.4799, 0.267, 0.125, 0.0573, 0.01434, 0.001811, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 1.22e-12, 0.0007499, 0.0005109, 0.0003481, 0.0002371, 0.0001616, 0.0001101, 7.499e-5, 5.109e-5, 3.481e-5, 2.371e-5, 1.616e-5, 1.101e-5, 7.499e-6 ] }, "ruby": { tags: ["mineral"], measured: [390, 760], k: [ 34.5, 37.69, 40.65, 43.26, 45.1, 45.61, 44.24, 41.07, 36.44, 30.61, 24.51, 19.02, 15.27, 12.53, 9.729, 7.187, 5.74, 4.499, 3.87, 4.023, 4.779, 6.01, 7.674, 9.816, 12.38, 15.31, 18.59, 22.08, 25.68, 29.28, 32.67, 35.72, 38.2, 39.9, 40.66, 40.26, 38.71, 36, 32.32, 27.8, 22.78, 17.72, 13.04, 9.15, 6.434, 4.483, 3.125, 2.21, 1.595, 1.184, 0.9329, 0.7336, 0.6211, 0.6372, 0.8169, 0.8361, 0.8319, 0.5987, 0.4771, 0.3891, 0.9668, 1.107, 0.7479, 0.4801, 0.397, 0.3624, 0.2998, 0.258, 0.2278, 0.1951, 0.192, 0.1323, 0.1258, 0.05789, 0.004561 ] }, "smoky quartz": { tags: ["mineral"], measured: [390, 760], k: [ 2.98, 2.894, 2.92, 2.93, 2.943, 2.954, 2.967, 2.985, 2.99, 2.994, 2.995, 2.996, 2.988, 2.981, 2.965, 2.947, 2.919, 2.886, 2.85, 2.799, 2.742, 2.685, 2.62, 2.55, 2.475, 2.401, 2.323, 2.246, 2.169, 2.094, 2.021, 1.951, 1.885, 1.819, 1.76, 1.706, 1.655, 1.61, 1.567, 1.528, 1.489, 1.455, 1.422, 1.391, 1.359, 1.328, 1.3, 1.268, 1.236, 1.204, 1.172, 1.136, 1.1, 1.061, 1.019, 0.9757, 0.932, 0.8871, 0.8423, 0.7946, 0.7455, 0.6965, 0.6427, 0.5914, 0.5398, 0.4856, 0.4304, 0.3778, 0.3223, 0.2708, 0.2153, 0.1612, 0.108, 0.0547, 0.0003069 ] }, "sugilite": { tags: ["mineral"], measured: [390, 760], k: [ 3.865, 3.628, 3.385, 3.194, 2.998, 2.896, 2.927, 3.092, 3.276, 2.368, 2.209, 2.113, 2.051, 1.997, 2.022, 1.921, 1.937, 1.988, 2.091, 2.253, 2.463, 2.66, 2.847, 3.063, 3.363, 3.587, 3.984, 4.454, 4.936, 5.407, 5.851, 6.259, 6.593, 6.925, 7.203, 7.389, 7.502, 7.539, 7.491, 7.366, 7.146, 6.834, 6.441, 5.974, 5.439, 4.845, 4.231, 3.602, 2.995, 2.426, 1.928, 1.502, 1.147, 0.8751, 0.6733, 0.5178, 0.4136, 0.3329, 0.2737, 0.2291, 0.1855, 0.1477, 0.1247, 0.1122, 0.08668, 0.08512, 0.06836, 0.05916, 0.04528, 0.03067, 0.02642, 0.01511, 0.008888, 0.004143, 0.0007539 ] }, "sulforhodamine 101": { tags: ["dye"], measured: [220, 689], k: [ 0.01572, 0.01337, 0.01928, 0.01763, 0.02618, 0.02185, 0.02605, 0.02632, 0.02456, 0.01841, 0.02295, 0.0179, 0.02083, 0.02018, 0.01798, 0.01751, 0.01824, 0.02495, 0.03349, 0.04514, 0.05959, 0.07453, 0.08785, 0.1074, 0.1353, 0.1811, 0.2537, 0.3344, 0.4018, 0.4308, 0.4385, 0.4388, 0.4991, 0.6376, 0.8723, 1.155, 1.443, 1.594, 1.493, 1.134, 0.7123, 0.3624, 0.167, 0.07581, 0.03127, 0.01791, 0.003664, 0.003382, 0.000696, 1.232e-5, 0.0005844, 2.143e-6, 1.6e-12, 1.6e-12, 1.6e-12, 1.6e-12, 1.6e-12, 1.6e-12, 1.6e-12, 1.6e-12, 0.001206, 0.001186, 0.001166, 0.001147, 0.001128, 0.001109, 0.001091, 0.001072, 0.001055, 0.001037, 0.00102, 0.001003, 0.0009863, 0.00097, 0.0009539 ] }, "tanzanite": { tags: ["mineral"], measured: [390, 760], k: [ 6.788, 5.845, 4.688, 3.441, 2.308, 1.416, 0.8167, 0.4505, 0.242, 0.132, 0.07049, 0.03283, 0.01652, 0.01731, 0.03184, 0.06126, 0.09464, 0.1544, 0.2313, 0.3115, 0.4131, 0.5266, 0.6523, 0.7864, 0.9119, 1.037, 1.139, 1.232, 1.289, 1.345, 1.373, 1.413, 1.44, 1.491, 1.544, 1.627, 1.722, 1.822, 1.94, 2.033, 2.132, 2.195, 2.227, 2.236, 2.189, 2.12, 2.019, 1.88, 1.741, 1.596, 1.444, 1.32, 1.194, 1.084, 1.018, 0.9613, 0.9045, 0.8736, 0.8373, 0.8819, 0.9422, 1.021, 1.074, 1.122, 1.192, 1.262, 1.311, 1.365, 1.432, 1.48, 1.507, 1.534, 1.566, 1.574, 1.552 ] }, "tetramesitylporphyrin": { tags: ["dye"], measured: [350, 700], k: [ 0.08461, 0.07967, 0.1967, 0.3459, 0.2906, 0.3346, 1.182, 4.204, 2.791, 0.4284, 0.09098, 0.06425, 0.03855, 0.007368, 0.008761, 0.01581, 0.0147, 0.01194, 0.009959, 0.01294, 0.01041, 4.916e-12, 0.02024, 0.01268, 0.01411, 0.02905, 0.02151, 0.01821, 0.02467, 0.02202, 0.02405, 0.02015, 0.03495, 0.09756, 0.135, 0.169, 0.1409, 0.07047, 0.0403, 0.02115, 0.01582, 0.03676, 0.04062, 0.06918, 0.03599, 0.01256, 0.005469, 0.001025, 0.01192, 0.003132, 4.916e-12, 4.916e-12, 0.01116, 0.02054, 0.01947, 0.01026, 0.009936, 0.009084, 0.006574, 0.003765, 0.00662, 0.008151, 0.01199, 0.008172, 0.005567, 0.003793, 0.002584, 0.001761, 0.001199, 0.0008172, 0.0005567, 0.0003793, 0.0002584, 0.0001761, 0.0001199 ] }, "thiadicarbocyanine": { tags: ["dye"], measured: [220, 700], k: [ 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 2.867e-12, 0.001325, 0.00542, 0.009598, 0.01227, 0.01841, 0.03152, 0.03802, 0.05654, 0.07667, 0.09346, 0.1158, 0.1381, 0.1589, 0.1851, 0.2303, 0.2901, 0.3749, 0.4722, 0.576, 0.6656, 0.7265, 0.7577, 0.7972, 0.8512, 0.9865, 1.206, 1.53, 1.939, 2.352, 2.695, 2.856, 2.712, 2.273, 1.68, 1.09, 0.6378, 0.3555, 0.1903, 0.1082, 0.06161, 0.03721, 0.02248, 0.01358, 0.008201, 0.004954, 0.002992, 0.001807, 0.001092, 0.0006594, 0.0003983, 0.0002406, 0.0001453 ] }, "triphenylcorrole": { tags: ["dye"], measured: [300, 707], k: [ 0.3984, 0.4929, 0.6513, 0.9053, 1.154, 1.266, 1.221, 1.076, 0.9479, 0.8365, 0.6558, 0.4308, 0.2419, 0.125, 0.06689, 0.03913, 0.02742, 0.0222, 0.022, 0.02339, 0.0252, 0.02807, 0.0326, 0.03913, 0.04595, 0.0524, 0.0577, 0.06036, 0.0634, 0.06961, 0.08067, 0.09573, 0.1137, 0.1312, 0.1441, 0.1509, 0.1541, 0.1559, 0.1525, 0.1404, 0.1247, 0.1087, 0.09971, 0.1039, 0.1149, 0.1228, 0.1175, 0.1075, 0.09586, 0.09412, 0.09741, 0.1047, 0.1033, 0.09527, 0.07219, 0.05159, 0.03462, 0.0222, 0.01425, 0.00921, 0.005722, 0.003523, 0.001796, 0.0005756, 0.0004344, 0.0002545, 0.0001491, 8.736e-5, 5.118e-5, 2.998e-5, 1.757e-5, 1.029e-5, 6.03e-6, 3.533e-6, 2.07e-6 ] }, "tsavorite garnet": { tags: ["mineral"], measured: [390, 760], k: [ 16.02, 16.59, 17.15, 17.69, 18.6, 19.39, 20.23, 20.7, 20.9, 20.22, 18.89, 17.01, 14.71, 12.35, 10.07, 8.145, 6.48, 5.264, 4.279, 3.554, 3.065, 2.696, 2.399, 2.187, 2.033, 1.926, 1.819, 1.834, 1.812, 1.911, 2.044, 2.188, 2.458, 2.79, 3.205, 3.659, 4.136, 4.648, 5.163, 5.667, 6.145, 6.55, 6.811, 7.019, 7.014, 6.954, 6.804, 6.673, 6.381, 6.202, 5.928, 5.638, 5.317, 5.019, 4.755, 4.379, 4.049, 3.616, 3.204, 2.776, 2.348, 2.005, 1.674, 1.345, 0.9898, 0.7394, 0.4998, 0.3084, 0.2823, 0.2054, 0.1256, 0.0966, 0.00209, 0.1062, 0.05857 ] }, "usambara tourmaline": { tags: ["mineral"], measured: [390, 760], k: [ 18.14, 21.61, 25.25, 28.58, 31.21, 33.42, 35.17, 36.59, 37.77, 38.43, 38.37, 37.54, 36.13, 34.03, 31.49, 28.16, 24.77, 21.78, 18.83, 16.13, 13.88, 11.96, 10.25, 8.823, 7.688, 6.937, 6.581, 6.505, 6.54, 6.649, 7.019, 7.642, 8.366, 9.037, 9.581, 10.01, 10.46, 10.81, 11.05, 11.17, 11.03, 10.69, 10.19, 9.659, 9.143, 8.611, 8.069, 7.473, 6.844, 6.148, 5.468, 4.856, 4.323, 3.841, 3.45, 3.128, 2.798, 2.353, 2.009, 1.633, 1.237, 0.9639, 0.7822, 0.6624, 0.6764, 0.6534, 0.5943, 0.4931, 0.3502, 0.2039, 0.08933, 0.003842, 0.01793, 0.09909, 0.209 ] }, }; // Reflectance converted to Kubelka-Munk K/S: shape is measured, depth is relative. const REFLECTANCE = { "blue bice": { tags: ["paint"], measured: [390, 760], k: [ 5.532, 4.54, 3.788, 3.097, 2.568, 2.149, 1.838, 1.594, 1.413, 1.271, 1.157, 1.081, 1.039, 1.019, 1.013, 1.039, 1.085, 1.163, 1.282, 1.443, 1.612, 1.838, 2.105, 2.408, 2.769, 3.159, 3.6, 4.1, 4.662, 5.29, 5.955, 6.609, 7.227, 7.957, 8.641, 9.441, 10.13, 10.85, 11.52, 12.18, 12.91, 13.3, 14.17, 14.64, 15.14, 15.68, 16.25, 16.26, 16.26, 16.87, 16.87, 16.87, 16.87, 16.87, 16.87, 16.26, 16.26, 15.68, 15.68, 15.68, 15.14, 14.65, 14.64, 14.17, 13.72, 13.72, 13.3, 12.91, 12.53, 12.53, 12.18, 11.84, 11.84, 11.52, 11.22 ] }, "chrome oxide green": { tags: ["paint"], measured: [390, 760], k: [ 3.86, 3.023, 2.372, 1.994, 1.929, 2.06, 2.337, 2.718, 3.126, 3.534, 3.906, 4.203, 4.423, 4.601, 4.662, 4.662, 4.601, 4.481, 4.311, 4.047, 3.726, 3.443, 3.159, 2.911, 2.617, 2.224, 1.836, 1.522, 1.321, 1.254, 1.262, 1.354, 1.508, 1.71, 1.945, 2.221, 2.501, 2.798, 3.062, 3.261, 3.368, 3.443, 3.481, 3.443, 3.405, 3.332, 3.227, 3.127, 3.001, 2.882, 2.744, 2.602, 2.452, 2.307, 2.167, 2.032, 1.913, 1.809, 1.727, 1.637, 1.553, 1.475, 1.403, 1.335, 1.268, 1.195, 1.109, 1.019, 0.9316, 0.8474, 0.7655, 0.6986, 0.6332, 0.5756, 0.5266 ] }, "cobalt violet": { tags: ["paint"], measured: [390, 760], k: [ 0.7358, 0.7366, 0.7679, 0.8066, 0.8167, 0.8116, 0.8207, 0.8883, 1.067, 1.329, 1.736, 2.546, 4.075, 6.776, 10.49, 14.17, 17.53, 20.75, 24.01, 26.79, 26.79, 26.79, 26.79, 24.01, 21.74, 18.24, 17.53, 19.01, 22.82, 28.42, 32.34, 37.47, 44.42, 44.46, 49, 49, 49, 49, 49, 49, 49, 44.46, 40.67, 37.47, 30.26, 22.42, 14.64, 9.441, 5.809, 3.593, 2.31, 1.529, 1.086, 0.8183, 0.6575, 0.5537, 0.4855, 0.4414, 0.4099, 0.389, 0.3756, 0.3691, 0.3691, 0.3756, 0.3845, 0.3981, 0.4175, 0.4396, 0.4633, 0.4943, 0.5313, 0.5746, 0.6252, 0.6801, 0.7403 ] }, "egyptian blue": { tags: ["paint"], measured: [390, 760], k: [ 3.133, 3.001, 2.882, 2.718, 2.592, 2.452, 2.344, 2.263, 2.205, 2.131, 2.06, 2.026, 2.009, 2.009, 2.026, 2.06, 2.149, 2.271, 2.43, 2.617, 2.854, 3.094, 3.383, 3.686, 4.05, 4.393, 4.726, 5.056, 5.29, 5.532, 5.704, 5.886, 6.078, 6.281, 6.387, 6.609, 6.744, 7.063, 7.363, 7.65, 7.8, 8.118, 8.286, 8.46, 8.641, 8.829, 8.829, 9.025, 9.025, 9.025, 8.829, 8.829, 8.641, 8.46, 8.118, 7.8, 7.363, 6.968, 6.496, 5.906, 5.449, 5.066, 4.726, 4.423, 4.256, 4.1, 4.001, 3.953, 3.953, 3.953, 3.953, 4.001, 4.05, 4.05, 4.1 ] }, "green earth": { tags: ["paint"], measured: [390, 760], k: [ 6.496, 6.496, 6.496, 6.496, 6.496, 6.387, 6.281, 6.178, 6.078, 5.947, 5.794, 5.532, 5.369, 5.29, 5.139, 4.994, 4.925, 4.857, 4.726, 4.601, 4.481, 4.423, 4.311, 4.203, 4.1, 4.001, 3.86, 3.776, 3.684, 3.56, 3.443, 3.405, 3.332, 3.332, 3.293, 3.261, 3.261, 3.261, 3.261, 3.296, 3.296, 3.332, 3.332, 3.368, 3.368, 3.405, 3.443, 3.443, 3.481, 3.481, 3.52, 3.52, 3.52, 3.52, 3.52, 3.52, 3.52, 3.52, 3.52, 3.52, 3.52, 3.481, 3.481, 3.443, 3.443, 3.443, 3.405, 3.368, 3.332, 3.296, 3.227, 3.193, 3.159, 3.094, 3.031 ] }, "orpiment": { tags: ["paint"], measured: [390, 760], k: [ 6.387, 6.725, 7.193, 7.363, 7.504, 7.65, 7.771, 7.8, 7.8, 7.65, 7.504, 7.096, 6.702, 6.078, 5.449, 4.791, 4.175, 3.548, 2.959, 2.471, 2.061, 1.715, 1.443, 1.219, 1.034, 0.8768, 0.7579, 0.6572, 0.5706, 0.5088, 0.4531, 0.4072, 0.3669, 0.331, 0.3022, 0.2786, 0.2607, 0.2455, 0.234, 0.2229, 0.2133, 0.2046, 0.1984, 0.1935, 0.1888, 0.1852, 0.1818, 0.1795, 0.1773, 0.1751, 0.1729, 0.1707, 0.1685, 0.1664, 0.1643, 0.1632, 0.1632, 0.1631, 0.1612, 0.1591, 0.1581, 0.1571, 0.1541, 0.1531, 0.1521, 0.1501, 0.1482, 0.1462, 0.1444, 0.1425, 0.1406, 0.1397, 0.1378, 0.136, 0.1333 ] }, "ultramarine b nat": { tags: ["paint"], measured: [390, 760], k: [ 2.994, 3.031, 3.094, 3.094, 3.031, 2.94, 2.854, 2.744, 2.641, 2.536, 2.43, 2.344, 2.303, 2.263, 2.283, 2.303, 2.365, 2.475, 2.641, 2.828, 3.062, 3.368, 3.684, 4.05, 4.423, 4.857, 5.29, 5.704, 6.078, 6.497, 6.968, 7.363, 7.65, 7.957, 8.118, 8.46, 8.641, 8.829, 9.025, 9.025, 9.229, 9.229, 9.229, 9.229, 9.229, 9.025, 9.025, 8.829, 8.641, 8.46, 8.286, 7.957, 7.687, 7.363, 7.096, 6.725, 6.387, 5.98, 5.532, 5.139, 4.773, 4.367, 4.001, 3.684, 3.368, 3.094, 2.854, 2.667, 2.498, 2.344, 2.224, 2.131, 2.045, 1.977, 1.928 ] }, "verdigris": { tags: ["paint"], measured: [390, 760], k: [ 1.395, 1.305, 1.228, 1.163, 1.088, 1.026, 0.9692, 0.9316, 0.8913, 0.8477, 0.8017, 0.7632, 0.7181, 0.6744, 0.6272, 0.584, 0.5395, 0.4958, 0.4633, 0.4371, 0.422, 0.4147, 0.4172, 0.432, 0.4553, 0.4855, 0.521, 0.5618, 0.5977, 0.6406, 0.6802, 0.7225, 0.7632, 0.8017, 0.8372, 0.8793, 0.9208, 0.968, 1.019, 1.068, 1.118, 1.171, 1.221, 1.28, 1.325, 1.383, 1.443, 1.497, 1.553, 1.6, 1.649, 1.687, 1.737, 1.778, 1.824, 1.853, 1.898, 1.929, 1.961, 1.993, 2.009, 2.043, 2.06, 2.06, 2.078, 2.078, 2.095, 2.095, 2.095, 2.095, 2.078, 2.078, 2.06, 2.043, 2.043 ] }, }; // Fitted to published colorimetry, not a measurement. const MODELLED = { "anthocyanin": { tags: ["biological"], k: [ 0.02174, 0.02853, 0.03649, 0.04552, 0.05541, 0.0659, 0.07666, 0.0874, 0.09784, 0.1078, 0.1174, 0.1266, 0.1359, 0.1455, 0.156, 0.1677, 0.181, 0.1959, 0.2123, 0.2298, 0.2476, 0.265, 0.281, 0.2945, 0.3047, 0.3107, 0.3121, 0.3085, 0.3001, 0.287, 0.27, 0.2496, 0.2269, 0.2027, 0.178, 0.1536, 0.1303, 0.1087, 0.08904, 0.07171, 0.05677, 0.04416, 0.03377, 0.02538, 0.01874, 0.01361, 0.009708, 0.006808, 0.004692, 0.003178, 0.002116, 0.001384, 0.0008903, 0.0005627, 0.0003496, 0.0002134, 0.0001281, 7.552e-5, 4.378e-5, 2.494e-5, 1.396e-5, 7.684e-6, 4.156e-6, 2.209e-6, 1.154e-6, 5.926e-7, 2.991e-7, 1.483e-7, 7.231e-8, 3.465e-8, 1.632e-8, 7.551e-9, 3.435e-9, 1.536e-9, 6.747e-10 ] }, "coffee": { tags: ["everyday"], k: [ 3, 2.887, 2.778, 2.674, 2.573, 2.476, 2.383, 2.293, 2.207, 2.124, 2.044, 1.967, 1.893, 1.822, 1.753, 1.687, 1.624, 1.562, 1.504, 1.447, 1.392, 1.34, 1.29, 1.241, 1.194, 1.149, 1.106, 1.064, 1.024, 0.9858, 0.9487, 0.913, 0.8786, 0.8455, 0.8137, 0.783, 0.7536, 0.7252, 0.6979, 0.6716, 0.6463, 0.622, 0.5986, 0.576, 0.5544, 0.5335, 0.5134, 0.4941, 0.4755, 0.4576, 0.4403, 0.4238, 0.4078, 0.3925, 0.3777, 0.3635, 0.3498, 0.3366, 0.3239, 0.3117, 0.3, 0.2887, 0.2778, 0.2674, 0.2573, 0.2476, 0.2383, 0.2293, 0.2207, 0.2124, 0.2044, 0.1967, 0.1893, 0.1822, 0.1753 ] }, "pumpkin seed oil": { tags: ["everyday"], k: [ 132.4, 124.4, 116.9, 109.8, 103.1, 96.85, 91.12, 85.82, 80.65, 75.45, 70.65, 66.5, 62.73, 58.97, 55.15, 51.49, 48.12, 45.05, 42.24, 39.63, 37.2, 34.91, 32.77, 30.76, 28.87, 27.1, 25.45, 23.9, 22.45, 21.1, 19.88, 18.86, 18.21, 18.21, 19.26, 21.76, 25.85, 31.12, 36.49, 40.42, 41.51, 39.2, 34.02, 27.34, 20.7, 15.2, 11.25, 8.729, 7.267, 6.489, 6.089, 5.735, 5.358, 5.128, 4.929, 4.513, 4.021, 3.634, 3.371, 3.151, 2.953, 2.769, 2.598, 2.437, 2.287, 2.146, 2.014, 1.89, 1.774, 1.665, 1.562, 1.467, 1.377, 1.292, 1.213 ] }, }; // Monotone cubic, matching SciPy pchip; monotone so resampling cannot go negative. function pchip(xs, ys, xq) { const n = xs.length, h = [], d = []; for (let i = 0; i < n - 1; i++) { h.push(xs[i + 1] - xs[i]); d.push((ys[i + 1] - ys[i]) / h[i]); } const m = new Array(n); for (let i = 1; i < n - 1; i++) { if (d[i - 1] * d[i] <= 0) { m[i] = 0; continue; } const w1 = 2 * h[i] + h[i - 1], w2 = h[i] + 2 * h[i - 1]; m[i] = (w1 + w2) / (w1 / d[i - 1] + w2 / d[i]); } const edge = (h0, h1, m0, m1) => { const v = ((2 * h0 + h1) * m0 - h0 * m1) / (h0 + h1); if (Math.sign(v) !== Math.sign(m0)) return 0; if (Math.sign(m0) !== Math.sign(m1) && Math.abs(v) > 3 * Math.abs(m0)) return 3 * m0; return v; }; m[0] = edge(h[0], h[1], d[0], d[1]); m[n - 1] = edge(h[n - 2], h[n - 3], d[n - 2], d[n - 3]); return xq.map(x => { const xc = Math.min(Math.max(x, xs[0]), xs[n - 1]); let i = 0; while (i < n - 2 && xs[i + 1] < xc) i++; const t = (xc - xs[i]) / h[i], t2 = t * t, t3 = t2 * t; return Math.max(0, ys[i] * (2 * t3 - 3 * t2 + 1) + h[i] * m[i] * (t3 - 2 * t2 + t) + ys[i + 1] * (-2 * t3 + 3 * t2) + h[i] * m[i + 1] * (t3 - t2)); }); } const FINE = {}, MATERIALS = {}, TAGS = {}, SOURCES = {}; for (const [kind, table] of [["measured", EMPIRICAL], ["reflectance", REFLECTANCE], ["model", MODELLED]]) { for (const [name, d] of Object.entries(table)) { FINE[name] = d.k; MATERIALS[name] = pchip(FINE_NM, d.k, BINS); // coarse copy for cells still on BINS TAGS[name] = d.tags; SOURCES[name] = { kind, measured: d.measured || null }; } } // Behaviour tags are derived from the spectra, never asserted. const D65 = illuminants.spd("D65"); const CN = [cones.L, cones.M, cones.S]; const XW = cones.apply(cones.LMS_TO_XYZ, CN.map(c => D65.reduce((a, _, i) => a + D65[i] * c[i], 0))); const labAt = (k, d) => { const lms = [0, 0, 0]; for (let i = 0; i < FINE_NM.length; i++) { const p = D65[i] * Math.exp(-k[i] * d); lms[0] += p * CN[0][i]; lms[1] += p * CN[1][i]; lms[2] += p * CN[2][i]; } const X = cones.apply(cones.LMS_TO_XYZ, lms).map((v, j) => v / XW[j]); const f = t => t > 216 / 24389 ? Math.cbrt(t) : (24389 / 27 * t + 16) / 116; const [fx, fy, fz] = X.map(f); return [500 * (fx - fy), 200 * (fy - fz)]; }; // Total hue excursion, ignoring samples too grey for hue to mean anything. const profile = k => { const kmax = Math.max(...k), pts = []; for (let e = -4; e <= 6; e += 0.25) { const ab = labAt(k, Math.pow(10, e) / kmax), C = Math.hypot(ab[0], ab[1]); if (C > 15) pts.push({ h: (Math.atan2(ab[1], ab[0]) * 180 / Math.PI + 360) % 360, C }); } if (pts.length < 3) return { swing: 0, chroma: Math.max(0, ...pts.map(p => p.C)) }; let cur = 0, min = 0, max = 0, prev = pts[0].h; for (const q of pts.slice(1)) { cur += ((q.h - prev + 180) % 360 + 360) % 360 - 180; min = Math.min(min, cur); max = Math.max(max, cur); prev = q.h; } return { swing: max - min, chroma: Math.max(...pts.map(p => p.C)) }; }; for (const name of Object.keys(FINE)) { const { swing, chroma } = profile(FINE[name]); const t = [TAGS[name][0]]; if (swing >= 75) t.push("hue-shifting"); if (chroma >= 120) t.push("vivid"); if (chroma < 45) t.push("muted"); if (SOURCES[name].kind !== "measured") t.push("not measured"); TAGS[name] = t; SOURCES[name].chroma = Math.round(chroma); SOURCES[name].swing = Math.round(swing); } // What it is, then how it behaves, then how much to trust it. const ORDER = ["all", "mineral", "dye", "biological", "paint", "gas", "everyday", "hue-shifting", "vivid", "muted", "not measured"]; const present = new Set(Object.values(TAGS).flat()); const CATEGORIES = ORDER.filter(c => c === "all" || present.has(c)); return { BINS, FINE_NM, EMPIRICAL, REFLECTANCE, MODELLED, FINE, MATERIALS, TAGS, SOURCES, CATEGORIES, pchip }; }39:T2e0e,illuminants = { // Light source spectra, 5 nm, peak 1. CIE tables plus measured display primaries. const NM = cones.NM; // shared grid, do not reorder // Fixed-spectrum sources: SPD is the table, the Light colour picker does not apply const FIXED = { "D65": { label: "Daylight D65 (noon)", cct: 6498, xy: [0.3127, 0.3291], spd: [ 0.4639, 0.5831, 0.7024, 0.7395, 0.7765, 0.7848, 0.7931, 0.7644, 0.7358, 0.8129, 0.8901, 0.9416, 0.9932, 0.9966, 1, 0.9875, 0.975, 0.9795, 0.984, 0.9538, 0.9236, 0.9259, 0.9282, 0.9216, 0.915, 0.9023, 0.8895, 0.9018, 0.9141, 0.9001, 0.8862, 0.8847, 0.8832, 0.866, 0.8488, 0.8333, 0.8177, 0.8154, 0.8131, 0.7829, 0.7528, 0.7584, 0.764, 0.7623, 0.7605, 0.7525, 0.7444, 0.7257, 0.707, 0.7087, 0.7104, 0.6949, 0.6793, 0.6801, 0.6809, 0.6896, 0.6984, 0.6814, 0.6645, 0.6281, 0.5918, 0.5998, 0.6078, 0.6195, 0.6311, 0.577, 0.5229, 0.558, 0.5932, 0.6153, 0.6373, 0.5886, 0.5398, 0.4669, 0.394 ] }, "D50": { label: "Daylight D50 (warm)", cct: 5002, xy: [0.3457, 0.3585], spd: [ 0.29, 0.3843, 0.4787, 0.5137, 0.5487, 0.5657, 0.5828, 0.5721, 0.5613, 0.6439, 0.7264, 0.7867, 0.847, 0.8634, 0.8797, 0.8834, 0.887, 0.9052, 0.9234, 0.9081, 0.8928, 0.9111, 0.9293, 0.9337, 0.938, 0.9405, 0.943, 0.9671, 0.9912, 0.9847, 0.9782, 0.9858, 0.9933, 0.9821, 0.9708, 0.9599, 0.9489, 0.9546, 0.9603, 0.934, 0.9077, 0.9281, 0.9484, 0.9561, 0.9637, 0.9626, 0.9615, 0.9454, 0.9293, 0.9445, 0.9597, 0.9443, 0.9288, 0.941, 0.9533, 0.9766, 1, 0.9812, 0.9624, 0.9054, 0.8483, 0.8688, 0.8893, 0.8956, 0.9018, 0.824, 0.7461, 0.793, 0.8399, 0.8694, 0.8988, 0.8292, 0.7595, 0.6598, 0.5601 ] }, "A": { label: "Incandescent (CIE A)", cct: 2791, xy: [0.4476, 0.4075], spd: [ 0.05207, 0.05753, 0.06337, 0.06957, 0.07615, 0.08311, 0.09045, 0.09818, 0.1063, 0.1148, 0.1237, 0.1329, 0.1425, 0.1525, 0.1629, 0.1736, 0.1847, 0.1961, 0.2078, 0.2199, 0.2323, 0.2449, 0.2579, 0.2711, 0.2846, 0.2984, 0.3123, 0.3265, 0.3409, 0.3555, 0.3703, 0.3852, 0.4003, 0.4155, 0.4308, 0.4463, 0.4618, 0.4774, 0.493, 0.5087, 0.5244, 0.5402, 0.5559, 0.5717, 0.5874, 0.6031, 0.6187, 0.6343, 0.6498, 0.6653, 0.6806, 0.6958, 0.711, 0.726, 0.7409, 0.7556, 0.7702, 0.7846, 0.7989, 0.813, 0.8269, 0.8406, 0.8541, 0.8675, 0.8806, 0.8936, 0.9063, 0.9188, 0.9311, 0.9432, 0.955, 0.9666, 0.978, 0.9891, 1 ] }, "FL2": { label: "Fluorescent (CIE FL2)", cct: 4229, xy: [0.3721, 0.3751], spd: [ 0.0526, 0.06146, 0.09834, 0.4485, 0.1101, 0.1069, 0.1198, 0.1321, 0.1447, 1, 0.3376, 0.1792, 0.1895, 0.1981, 0.2055, 0.2115, 0.2156, 0.2178, 0.2187, 0.2178, 0.2178, 0.213, 0.2081, 0.2044, 0.2015, 0.2013, 0.2047, 0.2136, 0.2298, 0.2539, 0.2862, 0.7113, 0.4757, 0.4171, 0.462, 0.502, 0.5323, 0.6138, 0.6515, 0.5515, 0.5334, 0.5069, 0.4728, 0.4348, 0.3945, 0.3533, 0.313, 0.2759, 0.2401, 0.2093, 0.1804, 0.1552, 0.1338, 0.1149, 0.09863, 0.08462, 0.0729, 0.06261, 0.05403, 0.04688, 0.04374, 0.03631, 0.03145, 0.0283, 0.02516, 0.02173, 0.01944, 0.01744, 0.01601, 0.01544, 0.01458, 0.01344, 0.01344, 0.01229, 0.01315 ] }, "FL11": { label: "Fluorescent triphosphor (FL11)", cct: 4007, xy: [0.3805, 0.3769], spd: [ 0.006315, 0.00508, 0.01771, 0.1741, 0.02183, 0.02457, 0.03377, 0.04572, 0.06164, 0.466, 0.1665, 0.09541, 0.09871, 0.09775, 0.09226, 0.08416, 0.07496, 0.06576, 0.0777, 0.1962, 0.2054, 0.1231, 0.0648, 0.03199, 0.02018, 0.0151, 0.01222, 0.01139, 0.0162, 0.06727, 0.5435, 1, 0.4477, 0.1032, 0.03885, 0.02691, 0.02293, 0.06082, 0.1549, 0.2026, 0.1748, 0.1337, 0.1006, 0.1334, 0.7588, 0.5846, 0.1809, 0.1807, 0.1683, 0.07015, 0.02842, 0.03213, 0.04915, 0.04132, 0.03405, 0.02938, 0.02114, 0.01826, 0.02004, 0.02663, 0.02746, 0.01647, 0.01853, 0.05629, 0.07661, 0.03446, 0.007825, 0.003707, 0.003158, 0.002883, 0.003295, 0.003295, 0.002746, 0.003295, 0.004393 ] }, "LED-B3": { label: "White LED (phosphor)", cct: 4115, xy: [0.3756, 0.3723], spd: [ 0.0005299, 0.00106, 0.00265, 0.005829, 0.01325, 0.02968, 0.06359, 0.1256, 0.2247, 0.38, 0.6418, 0.938, 1, 0.7727, 0.5246, 0.399, 0.319, 0.2708, 0.274, 0.3084, 0.3588, 0.4176, 0.4738, 0.5204, 0.5575, 0.5861, 0.61, 0.6322, 0.6555, 0.6799, 0.7054, 0.7308, 0.7557, 0.778, 0.7992, 0.8172, 0.8331, 0.8463, 0.8574, 0.8675, 0.8744, 0.8771, 0.8744, 0.8649, 0.8479, 0.8235, 0.7928, 0.7562, 0.7144, 0.6688, 0.6206, 0.5713, 0.522, 0.4732, 0.4261, 0.3816, 0.3402, 0.3015, 0.266, 0.2342, 0.2056, 0.1797, 0.1563, 0.1357, 0.1176, 0.1017, 0.08744, 0.07578, 0.06518, 0.05617, 0.04822, 0.04134, 0.03604, 0.03074, 0.0265 ] }, "E": { label: "Equal energy (CIE E)", cct: 5474, xy: [0.3334, 0.3334], spd: [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ] }, }; // Measured display primaries, mixed by the Light picker. const SCREENS = { "lcd": { label: "LCD screen (measured)", cct: 6232, xy: [0.3145, 0.3568], source: "Apple Studio Display", r: [ 0, 0, 0, 0, 0, 0, 0, 0, 6.536e-20, 2.614e-19, 0.002411, 0.002411, 1.046e-18, 0.002411, 1.046e-18, 0.002411, 0.002411, 0.002411, 0.002411, 0.002411, 0.002411, 0.002411, 0.002411, -5.229e-19, -2.614e-19, 6.536e-20, 0, 0, 0, 2.092e-18, 4.183e-18, 0.02634, 0.01911, 0.002411, 0, -7.843e-19, 0, -4.126e-19, 0.002411, 0.01194, 0.03828, 0.05263, 0.03828, 0.04304, 0.1579, 0.6459, 0.2942, 0.2129, 0.1268, 0.1172, 0.03352, 0.01435, 0.0287, 0.04069, 0.01435, 0.02393, 0.02393, 0.01676, 0.01676, 0.01911, 0.01911, 0.01194, 0.009585, 0.007174, 0.05739, 0.05739, 0.009585, 0.002411, -1.046e-18, 5.229e-19, 6.536e-20, 0, 0, 0, 0 ], g: [ 0, 0, 0, 0, 0, 0, 6.536e-20, -1.307e-19, 0.002411, 0.007174, -6.275e-18, 0.007174, 0.007174, 0.004762, 0.01194, 0.01435, 0.01911, 0.02152, 0.03111, 0.05263, 0.05263, 0.04069, 0.02634, 0.02152, 0.01911, 0.01911, 0.01435, 0.01435, 0.01911, 0.1172, 0.9521, 0.8469, 0.2488, 0.05739, 0.01911, 0.009585, 0.004762, 0.05739, 0.08615, 0.0885, 0.04545, 0.02152, 0.009585, 0.002411, 0.0287, 0.009585, 0.002411, 0.002411, 1.569e-18, -2.614e-19, 6.536e-20, 0, 0, 6.536e-20, 2.614e-19, 0.002411, 0.002411, -5.229e-19, -2.614e-19, 6.536e-20, 0, 0, 6.536e-20, -5.229e-19, 0.002411, 1.046e-18, 0, 6.536e-20, 0, 0, 0, 0, 0, 0, 0 ], b: [ -3.268e-20, 2.614e-19, 0.002411, 0.002411, 0.004762, 0.01435, 0.03111, 0.0598, 0.1124, 0.2369, 0.1531, 0.1651, 0.1818, 0.1818, 0.1794, 0.1626, 0.1483, 0.1268, 0.1483, 0.2369, 0.2009, 0.122, 0.05504, 0.02634, 0.01435, 0.007174, 0.004762, 0.002411, 0.002411, 0.009585, 0.04787, 0.04545, 0.004762, 0.002411, 0, -5.229e-19, 6.536e-20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }, "crt": { label: "CRT screen (measured)", cct: 8305, xy: [0.2884, 0.3131], source: "Typical CRT Brainard 1997", r: [ 0.001022, 0.0006614, 0.001022, 0.001684, 0.002225, 0.002766, 0.003848, 0.00475, 0.005652, 0.006313, 0.006794, 0.006914, 0.006794, 0.006794, 0.006914, 0.009861, 0.00974, 0.007215, 0.005471, 0.007155, 0.01046, 0.01311, 0.007816, 0.007395, 0.01563, 0.01455, 0.007516, 0.007155, 0.01209, 0.03583, 0.0389, 0.01509, 0.01491, 0.01954, 0.01196, 0.00968, 0.007696, 0.01305, 0.04167, 0.07335, 0.1119, 0.1307, 0.04672, 0.03193, 0.1463, 0.3494, 0.5624, 0.9652, 0.3886, 0.06614, 0.01936, 0.01245, 0.01166, 0.01178, 0.009981, 0.0104, 0.01323, 0.01118, 0.02267, 0.04702, 0.0386, 0.07299, 0.431, 0.6673, 0.1867, 0.01449, 0.01082, 0.008959, 0.006494, 0.005832, 0.005471, 0.005592, 0.00499, 0.004389, 0.00487 ], g: [ 0.001203, 0.001263, 0.001503, 0.001804, 0.002585, 0.003547, 0.00475, 0.006253, 0.007576, 0.008838, 0.01022, 0.01148, 0.01323, 0.01605, 0.02044, 0.02778, 0.03902, 0.05628, 0.08087, 0.112, 0.1494, 0.1918, 0.2383, 0.282, 0.319, 0.3503, 0.3725, 0.384, 0.3856, 0.3817, 0.3721, 0.3567, 0.3344, 0.3092, 0.2769, 0.2401, 0.1982, 0.1635, 0.1331, 0.1064, 0.0846, 0.06944, 0.0564, 0.04563, 0.03692, 0.03139, 0.02736, 0.02627, 0.01671, 0.01082, 0.008177, 0.006433, 0.005111, 0.004028, 0.003307, 0.002646, 0.002345, 0.001984, 0.001804, 0.001684, 0.001383, 0.001684, 0.00469, 0.006794, 0.002345, 0.0006614, 0.0005411, 0.000481, 0.0005411, 0.0006614, 0.0005411, 0.0006013, 0.0006614, 0.0007816, 0.0009019 ], b: [ 0.03151, 0.0472, 0.06794, 0.09764, 0.139, 0.1932, 0.2563, 0.3226, 0.3785, 0.4205, 0.4491, 0.4602, 0.4521, 0.43, 0.398, 0.358, 0.3113, 0.2602, 0.2109, 0.1713, 0.137, 0.1088, 0.08466, 0.06518, 0.05141, 0.04064, 0.03229, 0.02537, 0.0205, 0.01708, 0.01431, 0.01184, 0.009921, 0.008598, 0.007155, 0.005952, 0.00475, 0.003908, 0.003427, 0.003066, 0.002826, 0.002585, 0.001744, 0.001383, 0.002165, 0.003668, 0.005291, 0.008478, 0.003608, 0.0009019, 0.000481, 0.0003608, 0.0003608, 0.0004209, 0.0003608, 0.0003006, 0.0003608, 0.0003006, 0.0004209, 0.0006013, 0.0006013, 0.000962, 0.003608, 0.005652, 0.001804, 0.0004209, 0.0005411, 0.000481, 0.0006614, 0.0006013, 0.0006013, 0.0007215, 0.0007816, 0.0007215, 0.000962 ] }, }; // Planck's law, so colour temperature is a real one-parameter family. function planck(kelvin) { const c1 = 3.741771852e-16, c2 = 1.438776877e-2; // SI, CODATA 2018 const v = NM.map(nm => { const l = nm * 1e-9; return c1 / (l ** 5 * (Math.exp(c2 / (l * kelvin)) - 1)); }); const mx = Math.max(...v); return v.map(x => x / mx); } // The Light picker filters the source; a dark pick makes a genuinely dimmer light. const BASIS = cones.BIN_RGB; const BASIS_SUM = BASIS.map(c => c[0] + c[1] + c[2]); const isWhite = rgb => rgb[0] === 1 && rgb[1] === 1 && rgb[2] === 1; const transmittance = rgb => BASIS.map((c, i) => BASIS_SUM[i] > 1e-9 ? (rgb[0] * c[0] + rgb[1] * c[1] + rgb[2] * c[2]) / BASIS_SUM[i] : (rgb[0] + rgb[1] + rgb[2]) / 3); // No rescaling back to the source peak: a dark tint really is a dimmer light, so it // carries its own brightness through and reads as underexposure. const filter = (base, rgb) => { if (isWhite(rgb)) return base; const t = transmittance(rgb); return base.map((v, i) => Math.max(0, v * t[i])); }; const ORDER = ["D65", "lcd", "crt", "A", "LED-B3", "FL2", "FL11", "D50", "E", "blackbody"]; const OPTIONS = ORDER.map(id => { if (id === "blackbody") return { id, label: "Blackbody (temperature slider)", kind: "planck" }; if (SCREENS[id]) return { id, label: SCREENS[id].label, kind: "screen", cct: SCREENS[id].cct, xy: SCREENS[id].xy }; return { id, label: FIXED[id].label, kind: "fixed", cct: FIXED[id].cct, xy: FIXED[id].xy }; }); // spd(id, rgb, kelvin): screens drive measured primaries, lamps get filtered; peak preserved. function spd(id, rgb = [1, 1, 1], kelvin = 5500) { const s = SCREENS[id]; if (s) { const full = NM.map((_, i) => s.r[i] + s.g[i] + s.b[i]); if (isWhite(rgb)) return full; return NM.map((_, i) => Math.max(0, rgb[0] * s.r[i] + rgb[1] * s.g[i] + rgb[2] * s.b[i])); } return filter(id === "blackbody" ? planck(kelvin) : FIXED[id].spd, rgb); } return { NM, FIXED, SCREENS, OPTIONS, spd, planck, transmittance }; }3a:Tf33,cones = { // Stockman & Sharpe (2000) 2-deg cone fundamentals, 5 nm, peak 1. Source: cvrl.org linss2_10e_5.csv const NM = [ 390, 395, 400, 405, 410, 415, 420, 425, 430, 435, 440, 445, 450, 455, 460, 465, 470, 475, 480, 485, 490, 495, 500, 505, 510, 515, 520, 525, 530, 535, 540, 545, 550, 555, 560, 565, 570, 575, 580, 585, 590, 595, 600, 605, 610, 615, 620, 625, 630, 635, 640, 645, 650, 655, 660, 665, 670, 675, 680, 685, 690, 695, 700, 705, 710, 715, 720, 725, 730, 735, 740, 745, 750, 755, 760 ]; const L = [ 0.000415, 0.001052, 0.002408, 0.004833, 0.008721, 0.01338, 0.01845, 0.02293, 0.02819, 0.03411, 0.04026, 0.04494, 0.04986, 0.05534, 0.06472, 0.08069, 0.09948, 0.1188, 0.1401, 0.164, 0.1916, 0.2329, 0.289, 0.3597, 0.4437, 0.5365, 0.6286, 0.7047, 0.7706, 0.8257, 0.881, 0.9191, 0.9402, 0.9657, 0.9814, 0.9945, 1, 0.9923, 0.9694, 0.9556, 0.9277, 0.886, 0.834, 0.7751, 0.7057, 0.6308, 0.5542, 0.4799, 0.4007, 0.3279, 0.2658, 0.2133, 0.1651, 0.1247, 0.09301, 0.06851, 0.04987, 0.03582, 0.02538, 0.01772, 0.01217, 0.008472, 0.005897, 0.004091, 0.002804, 0.001921, 0.001327, 0.0009178, 0.0006394, 0.000446, 0.0003109, 0.0002193, 0.0001545, 0.0001095, 7.799e-5 ]; const M = [ 0.0003683, 0.0009587, 0.00227, 0.0047, 0.008794, 0.01453, 0.02166, 0.02957, 0.03946, 0.05182, 0.06478, 0.07588, 0.08705, 0.09819, 0.1163, 0.1445, 0.1759, 0.2054, 0.2358, 0.2681, 0.3036, 0.3571, 0.4278, 0.5156, 0.6155, 0.7192, 0.8166, 0.8855, 0.9357, 0.9689, 0.9952, 0.9972, 0.9772, 0.9566, 0.9177, 0.8732, 0.8135, 0.7403, 0.6533, 0.5726, 0.4926, 0.4112, 0.3344, 0.2649, 0.2053, 0.1562, 0.1166, 0.08559, 0.06211, 0.04449, 0.03143, 0.0218, 0.01545, 0.01071, 0.007303, 0.004972, 0.003437, 0.002376, 0.001637, 0.001121, 0.0007611, 0.0005255, 0.0003653, 0.0002534, 0.0001744, 0.0001206, 8.417e-5, 5.893e-5, 4.16e-5, 2.944e-5, 2.089e-5, 1.505e-5, 1.082e-5, 7.823e-6, 5.691e-6 ]; const S = [ 0.009547, 0.02382, 0.05665, 0.1225, 0.233, 0.3814, 0.5436, 0.6745, 0.8026, 0.9036, 0.991, 0.9915, 0.9554, 0.8602, 0.7867, 0.7383, 0.6464, 0.5164, 0.3903, 0.2903, 0.2119, 0.1605, 0.1228, 0.0889, 0.06082, 0.04281, 0.0292, 0.01939, 0.0126, 0.008095, 0.005089, 0.003169, 0.001959, 0.001203, 0.0007402, 0.000456, 0.0002818, 0.000175, 0.0001095, 6.9e-5, 4.39e-5, 2.822e-5, 1.835e-5, 1.207e-5, 8.035e-6, 5.418e-6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]; const CURVES = { L, M, S }; const FIRST = NM[0], STEP = NM[1] - NM[0], LAST = NM[NM.length - 1]; // Linear interpolation between 5 nm samples; 0 outside the tabulated range const at = (nm, band) => { const c = CURVES[band]; if (!c || nm < FIRST || nm > LAST) return 0; const t = (nm - FIRST) / STEP, i = Math.floor(t); if (i >= c.length - 1) return c[c.length - 1]; return c[i] + (c[i + 1] - c[i]) * (t - i); }; const lms = nm => [at(nm, "L"), at(nm, "M"), at(nm, "S")]; // Peak wavelength of each curve, useful for labelling plots const PEAKS = Object.fromEntries(Object.entries(CURVES) .map(([k, c]) => [k, NM[c.indexOf(Math.max(...c))]])); // Per-bin eye colour via CIE 170-2 LMS->XYZ then D65 sRGB; out-of-gamut clipped, each bin normalized. const LMS_TO_XYZ = [[1.94735469, -1.41445123, 0.36476327], [0.68990272, 0.34832189, 0], [0, 0, 1.93485343]]; const XYZ_TO_RGB = [[3.2406, -1.5372, -0.4986], [-0.9689, 1.8758, 0.0415], [0.0557, -0.2040, 1.0570]]; const apply = (m, v) => m.map(r => r[0] * v[0] + r[1] * v[1] + r[2] * v[2]); const BIN_RGB = NM.map(nm => { const rgb = apply(XYZ_TO_RGB, apply(LMS_TO_XYZ, lms(nm))).map(v => Math.max(0, v)); const mx = Math.max(...rgb) || 1; return rgb.map(v => v / mx); }); return { NM, L, M, S, CURVES, PEAKS, FIRST, LAST, STEP, at, lms, BIN_RGB, LMS_TO_XYZ, XYZ_TO_RGB, apply }; }3b:T1b96,absorb = { // Spectral rendering: light SPD -> x exp(-k*d) per 5 nm bin -> cone response -> XYZ -> linear sRGB. const NM = spectra.FINE_NM; const COARSE = spectra.BINS; const CONE = [cones.L, cones.M, cones.S]; // CIE 170-2 transform for the Stockman & Sharpe 2-deg fundamentals, then sRGB/D65 const LMS_TO_XYZ = [[1.94735469, -1.41445123, 0.36476327], [0.68990272, 0.34832189, 0], [0, 0, 1.93485343]]; const XYZ_TO_RGB = [[3.2406, -1.5372, -0.4986], [-0.9689, 1.8758, 0.0415], [0.0557, -0.2040, 1.0570]]; const apply = (m, v) => m.map(r => r[0] * v[0] + r[1] * v[1] + r[2] * v[2]); const lmsOf = spd => CONE.map(c => { let s = 0; for (let i = 0; i < NM.length; i++) s += spd[i] * c[i]; return s; }); const rgbOf = lms => apply(XYZ_TO_RGB, apply(LMS_TO_XYZ, lms)); // sRGB transfer functions: physics runs in linear light const toLinear = c => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); const toSrgb = c => c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055; const clamp = c => c.map(v => Math.min(1, Math.max(0, v))); // Callers may pass a coarse or a fine k array. const fineCache = new Map(); const asFine = k => { if (k.length === NM.length) return k; if (!fineCache.has(k)) fineCache.set(k, spectra.pchip(COARSE, k, NM)); return fineCache.get(k); }; // "A light of colour rgb" is concretely a display emitting that colour const PRIM = illuminants.SCREENS.lcd; const spdFromRGB = rgb => NM.map((_, i) => Math.max(0, rgb[0] * PRIM.r[i] + rgb[1] * PRIM.g[i] + rgb[2] * PRIM.b[i])); const WHITE = [1, 1, 1]; const SPD_WHITE = spdFromRGB(WHITE); const LMS_D65 = lmsOf(illuminants.spd("D65")); // sRGB is a D65 space const asLight = light => { if (!light) return { spd: SPD_WHITE, white: SPD_WHITE, ev: 0 }; if (Array.isArray(light)) { if (light.length === 3) return { spd: spdFromRGB(light), white: SPD_WHITE, ev: 0 }; return { spd: light, white: light, ev: 0 }; } return { spd: light.spd, white: light.white || light.spd, ev: light.ev || 0 }; }; // Von Kries: map the source white onto D65's cone response, the white point sRGB uses. const adaptCache = new Map(); const adaptFor = whiteSpd => { if (!adaptCache.has(whiteSpd)) { if (adaptCache.size > 24) adaptCache.clear(); const w = lmsOf(whiteSpd); const gain = w.map((v, i) => v > 1e-12 ? LMS_D65[i] / v : 0); const unit = rgbOf(LMS_D65).map(v => Math.abs(v) < 1e-12 ? 1 : v); adaptCache.set(whiteSpd, { gain, unit }); } return adaptCache.get(whiteSpd); }; // One exposure divisor per light, so zero depth reproduces the chosen light colour exactly. const expoCache = new Map(); const expoFor = (spd, ad) => { if (!expoCache.has(spd)) { if (expoCache.size > 24) expoCache.clear(); const lms = lmsOf(spd); const rgb = rgbOf([lms[0] * ad.gain[0], lms[1] * ad.gain[1], lms[2] * ad.gain[2]]); expoCache.set(spd, Math.max(1, ...[0, 1, 2].map(c => rgb[c] / ad.unit[c]))); } return expoCache.get(spd); }; // Two different kinds of out-of-gamut, handled differently. // Too bright (a channel over 1): divide through by the largest channel, which keeps // hue and chroma exactly and only gives up luminance. Desaturating instead would // pull the deficient channel up and turn a vivid yellow into a pastel peach. // Still negative afterwards: reduce chroma toward the equal-luminance grey by the // least amount that fits, which for the small residuals left here barely moves it. const LUMA = [0.2126, 0.7152, 0.0722]; const toGamut = c => { const mx = Math.max(...c); if (mx > 1) c = c.map(v => v / mx); if (c[0] >= 0 && c[1] >= 0 && c[2] >= 0) return c; const y = Math.min(1, Math.max(0, LUMA[0] * c[0] + LUMA[1] * c[1] + LUMA[2] * c[2])); let t = 0; for (const v of c) if (v < 0) t = Math.max(t, -v / (y - v)); t = Math.min(1, Math.max(0, t)); return c.map(v => Math.min(1, Math.max(0, v + (y - v) * t))); }; // Transmitted linear RGB after depth d, mapped into sRGB. // Exposure is applied after gamut mapping, so it clips like a photograph instead of // being undone by the max-channel rescale that maps out-of-gamut colours. const colorAt = (k, d, light = WHITE) => { const { spd, white, ev } = asLight(light); const ad = adaptFor(white), { gain, unit } = ad, expo = expoFor(spd, ad); const kf = asFine(k); const lms = [0, 0, 0]; for (let i = 0; i < NM.length; i++) { const p = spd[i] * Math.exp(-kf[i] * d); lms[0] += p * CONE[0][i]; lms[1] += p * CONE[1][i]; lms[2] += p * CONE[2][i]; } const rgb = rgbOf([lms[0] * gain[0], lms[1] * gain[1], lms[2] * gain[2]]); const mapped = toGamut([0, 1, 2].map(c => rgb[c] / unit[c] / expo)); if (!ev) return mapped; const stop = Math.pow(2, ev); return mapped.map(v => Math.min(1, v * stop)); }; // Perceptual-ish difference, measured in gamma-encoded space const diff = (a, b) => { let s = 0; for (let i = 0; i < 3; i++) s += Math.abs(toSrgb(Math.min(1, a[i])) - toSrgb(Math.min(1, b[i]))); return s; }; // Far end is where a further decade of depth stops changing the colour: black when // every bin absorbs, otherwise the transmission window's own asymptotic colour. const range = (k, light = WHITE) => { // Measured at neutral exposure and neutral brightness on purpose: the window belongs // to the material and the light's spectral shape, not to how bright the light is. // Otherwise dimming would re-sample every stop and change the ramp's colours. const L = asLight(light); const mx = Math.max(...L.spd), ref = Math.max(...L.white); light = { spd: mx > 0 ? L.spd.map(v => v * ref / mx) : L.spd, white: L.white, ev: 0 }; const c0 = colorAt(k, 0, light); // Search grid derived from k, so the window is exactly proportional to 1/k and plots are scale-invariant. const kmax = Math.max(...k); let d1 = kmax > 0 ? 1e-3 / kmax : 1e-4; while (d1 < 1e12 && diff(colorAt(k, d1, light), c0) < 0.05) d1 *= 1.3; // clear the transition first while (d1 < 1e12 && diff(colorAt(k, d1, light), colorAt(k, d1 * 10, light)) > 0.01) d1 *= 1.3; let d0 = d1; while (d0 > d1 * 1e-12 && diff(colorAt(k, d0, light), c0) >= 0.025) d0 /= 1.3; return { d0, d1, limit: colorAt(k, d1, light) }; }; // Log-spaced ramp of linear colors across the useful window const ramp = (k, n, light = WHITE) => { const { d0, d1 } = range(k, light); const out = []; for (let i = 0; i < n; i++) out.push(clamp(colorAt(k, d0 * Math.pow(d1 / d0, i / (n - 1)), light))); return out; }; const hex = c => "#" + clamp(c).map(v => Math.round(toSrgb(v) * 255).toString(16).padStart(2, "0")).join(""); const hexToLinear = h => [1, 3, 5].map(i => toLinear(parseInt(h.slice(i, i + 2), 16) / 255)); return { WHITE, colorAt, range, ramp, hex, hexToLinear, toLinear, toSrgb, clamp, asLight, lmsOf, spdFromRGB }; }3c:T6d3,ranked = { // Order materials by the chroma-weighted mean hue of their ramp, red first, then // yellow, green, cyan, blue, violet, magenta, as in the spectrum. const SAMPLES = 12; const names = Object.keys(spectra.MATERIALS); // Summing the CAM02-UCS a,b components already weights each sample by its own // chroma, since (a, b) = C * (cos h, sin h). const meanHue = name => { const ramp = absorb.ramp(spectra.FINE[name], SAMPLES); let a = 0, b = 0, chroma = 0; for (const c of ramp) { const [, ja, jb] = cam02.jab(c); a += ja; b += jb; chroma += Math.hypot(ja, jb); } return { h: Math.atan2(b, a) * 180 / Math.PI, mag: Math.hypot(a, b), chroma }; }; const redJab = cam02.jab([1, 0, 0]); const H_RED = Math.atan2(redJab[2], redJab[1]) * 180 / Math.PI; const from = h => ((h - H_RED) % 360 + 360) % 360; const keyed = names.map(name => { const { h, mag, chroma } = meanHue(name); // a ramp spanning more than half the hue circle can cancel itself out; fall back // to the hue of its most chromatic sample so it still lands somewhere sensible const trustworthy = chroma > 0 && mag / chroma > 0.25; let angle; if (trustworthy) { angle = from(h); } else { const ramp = absorb.ramp(spectra.FINE[name], SAMPLES); let best = null; for (const c of ramp) { const [, ja, jb] = cam02.jab(c), C = Math.hypot(ja, jb); if (!best || C > best.C) best = { C, h: Math.atan2(jb, ja) * 180 / Math.PI }; } angle = best ? from(best.h) : 720; // fully achromatic goes last } return { name, angle }; }); keyed.sort((x, y) => x.angle - y.angle || x.name.localeCompare(y.name)); return keyed.map(k => k.name); }3d:T8fb,space = { const SPACES = [ { id: "jab", label: "CIECAM02 UCS", adaptive: true }, { id: "rgb", label: "RGB cube", adaptive: false } ]; const DEFAULT_VIEW = cam02.base; const facings = new WeakMap(); const facingOf = view => { if (!facings.has(view)) { const red = view.jab([1, 0, 0]); facings.set(view, Math.PI / 2 - Math.atan2(red[2], red[1])); } return facings.get(view); }; const spin = (x, z, a) => [x * Math.cos(a) - z * Math.sin(a), x * Math.sin(a) + z * Math.cos(a)]; const TURN = 56.76 * Math.PI / 180 + facingOf(DEFAULT_VIEW); const UP = [1, 1, 1].map(v => v / Math.sqrt(3)); const EAST = [1 / Math.SQRT2, 0, -1 / Math.SQRT2]; const NORTH = [-1, 2, -1].map(v => v / Math.sqrt(6)); const AXES = [ EAST.map((v, i) => v * Math.cos(TURN) - NORTH[i] * Math.sin(TURN)), UP, EAST.map((v, i) => v * Math.sin(TURN) + NORTH[i] * Math.cos(TURN)) ]; const RGB_SCALE = 100 / Math.sqrt(3); const pos = (lin, id, view) => { if (id === "rgb") { const c = lin.map(v => absorb.toSrgb(Math.min(1, Math.max(0, v))) - 0.5); return AXES.map(ax => (ax[0] * c[0] + ax[1] * c[1] + ax[2] * c[2]) * RGB_SCALE); } const model = view || DEFAULT_VIEW; const [J, a, b] = model.jab(lin); const [x, z] = spin(a, b, facingOf(model)); return [x, J - 50, z]; }; const CORNERS = [0, 1, 2, 3, 4, 5, 6, 7].map(i => [i & 1, (i >> 1) & 1, (i >> 2) & 1]); const EDGES = []; for (let i = 0; i < 8; i++) for (let bit = 0; bit < 3; bit++) { const j = i ^ (1 << bit); if (j > i) EDGES.push([i, j]); } const lerpLine = (c0, c1, steps) => { const out = []; for (let i = 0; i < steps; i++) { const t = i / (steps - 1); out.push([0, 1, 2].map(ch => absorb.toLinear(c0[ch] + (c1[ch] - c0[ch]) * t))); } return out; }; const cage = (steps = 48) => EDGES.map(([i, j]) => lerpLine(CORNERS[i], CORNERS[j], steps)); const corners = (steps = 10, frac = 0.18) => { const stub = (a, b) => lerpLine(CORNERS[a], CORNERS[a].map((v, ch) => v + (CORNERS[b][ch] - v) * frac), steps); return EDGES.flatMap(([i, j]) => [stub(i, j), stub(j, i)]); }; const grayAxis = (steps = 48) => lerpLine([0, 0, 0], [1, 1, 1], steps); return { SPACES, pos, cage, corners, grayAxis }; }3e:Tc93,stops = { const MODES = [ { id: "log", label: "Logarithmic depth" }, { id: "lightness", label: "Isoluminant steps (J')" }, { id: "uniform", label: "Perceptually uniform" } ]; const PROBE = 257; const RELAX = 60; const DAMP = 0.8; const trace = (k, bg, view) => { const { d0, d1 } = absorb.range(k, bg); const ds = [0]; for (let i = 0; i < PROBE; i++) ds.push(d0 * Math.pow(d1 / d0, i / (PROBE - 1))); return { ds, jab: ds.map(d => view.jab(absorb.colorAt(k, d, bg))) }; }; const depthAt = (ds, i, f) => i === 0 ? ds[0] + (ds[1] - ds[0]) * f : ds[i] * Math.pow(ds[i + 1] / ds[i], f); const spaced = (k, n, mode, bg, view) => { if (n < 2) return [0]; if (mode === "log") { const { d0, d1 } = absorb.range(k, bg); return Array.from({ length: n }, (_, i) => d0 * Math.pow(d1 / d0, i / (n - 1))); } const { ds, jab } = trace(k, bg, view); const last = ds.length - 1; if (mode === "lightness") { const j0 = jab[0][0], j1 = jab[last][0]; const out = []; let i = 0; for (let s = 0; s < n; s++) { const target = j0 + (j1 - j0) * s / (n - 1); while (i < last - 1 && (j1 < j0 ? jab[i + 1][0] > target : jab[i + 1][0] < target)) i++; const a = jab[i][0], b = jab[i + 1][0]; out.push(depthAt(ds, i, Math.abs(b - a) < 1e-9 ? 0 : Math.max(0, Math.min(1, (target - a) / (b - a))))); } return out; } const cum = [0]; for (let i = 1; i <= last; i++) cum.push(cum[i - 1] + cam02.deltaE(jab[i - 1], jab[i])); const total = cum[last]; if (!(total > 0)) return Array.from({ length: n }, () => 0); const locate = u => { let i = 0, hi = last; while (i < hi) { const m = (i + hi + 1) >> 1; if (cum[m] <= u) i = m; else hi = m - 1; } i = Math.min(i, last - 1); const span = cum[i + 1] - cum[i]; return [i, span < 1e-12 ? 0 : Math.max(0, Math.min(1, (u - cum[i]) / span))]; }; const point = u => { const [i, f] = locate(u); return [0, 1, 2].map(c => jab[i][c] + (jab[i + 1][c] - jab[i][c]) * f); }; let u = Array.from({ length: n }, (_, s) => total * s / (n - 1)); for (let pass = 0; pass < RELAX; pass++) { const pts = u.map(point); const c = []; for (let s = 0; s < n - 1; s++) c.push(cam02.deltaE(pts[s], pts[s + 1])); const next = u.slice(); for (let s = 1; s < n - 1; s++) { const l = c[s - 1], r = c[s]; if (l + r <= 1e-12) continue; const room = Math.min(u[s] - u[s - 1], u[s + 1] - u[s]); next[s] = u[s] - DAMP * ((l - r) / (l + r)) * room; } for (let s = 1; s < n; s++) next[s] = Math.max(next[s], next[s - 1]); u = next.map(v => Math.max(0, Math.min(total, v))); } return u.map(v => { const [i, f] = locate(v); return depthAt(ds, i, f); }); }; const depths = (k, n, mode, bg = absorb.WHITE, view = cam02.base) => { const out = spaced(k, n, mode, bg, view); out[0] = 0; return out; }; const colors = (k, n, mode, bg = absorb.WHITE, view = cam02.base) => depths(k, n, mode, bg, view).map(d => absorb.clamp(absorb.colorAt(k, d, bg))); return { MODES, depths, colors }; }3f:Tb42,cam02 = { const MCAT = [[0.7328, 0.4296, -0.1624], [-0.7036, 1.6975, 0.0061], [0.0030, 0.0136, 0.9834]]; const MCATINV = [[1.096124, -0.278869, 0.182745], [0.454369, 0.473533, 0.072098], [-0.009628, -0.005698, 1.015326]]; const MHPE = [[0.38971, 0.68898, -0.07868], [-0.22981, 1.18340, 0.04641], [0, 0, 1]]; const mul = (m, v) => [0, 1, 2].map(i => m[i][0] * v[0] + m[i][1] * v[1] + m[i][2] * v[2]); const toXYZ = c => [ (0.4124 * c[0] + 0.3576 * c[1] + 0.1805 * c[2]) * 100, (0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]) * 100, (0.0193 * c[0] + 0.1192 * c[1] + 0.9505 * c[2]) * 100 ]; const XYZw = [95.047, 100, 108.883], LW = 64, F = 1, c = 0.69, Nc = 1; const YB_DEFAULT = 20, YB_MIN = 0.5, YB_MAX = 99; const model = raw => { const Yb = Math.min(YB_MAX, Math.max(YB_MIN, raw)); const La = LW / Math.PI / (XYZw[1] / Yb); const n = Yb / XYZw[1], Nbb = 0.725 * Math.pow(1 / n, 0.2), z = 1.48 + Math.sqrt(n); const k4 = Math.pow(1 / (5 * La + 1), 4); const FL = 0.2 * k4 * (5 * La) + 0.1 * (1 - k4) * (1 - k4) * Math.pow(5 * La, 1 / 3); const D = Math.max(0, Math.min(1, F * (1 - (1 / 3.6) * Math.exp((-La - 42) / 92)))); const Drgb = mul(MCAT, XYZw).map(v => D * XYZw[1] / v + 1 - D); const adapt = v => mul(MHPE, mul(MCATINV, mul(MCAT, v).map((x, i) => x * Drgb[i]))); const compress = x => { const t = Math.pow(FL * Math.abs(x) / 100, 0.42); return Math.sign(x) * 400 * t / (27.13 + t) + 0.1; }; const achromatic = p => (2 * p[0] + p[1] + p[2] / 20 - 0.305) * Nbb; const Aw = achromatic(adapt(XYZw).map(compress)); const jab = lin => { const p = adapt(toXYZ(lin)).map(compress); const J = 100 * Math.pow(Math.max(0, achromatic(p)) / Aw, c * z); const a = p[0] - 12 * p[1] / 11 + p[2] / 11; const b = (p[0] + p[1] - 2 * p[2]) / 9; const h = Math.atan2(b, a); const et = 0.25 * (Math.cos(h + 2) + 3.8); const den = p[0] + p[1] + 21 * p[2] / 20; const t = den > 0 ? (50000 / 13 * Nc * Nbb * et * Math.hypot(a, b)) / den : 0; const C = Math.pow(t, 0.9) * Math.sqrt(J / 100) * Math.pow(1.64 - Math.pow(0.29, n), 0.73); const M = Math.log(1 + 0.0228 * C * Math.pow(FL, 0.25)) / 0.0228; return [1.7 * J / (1 + 0.007 * J), M * Math.cos(h), M * Math.sin(h)]; }; return { jab, Yb, La, FL, D, n, Nbb, z }; }; const cache = new Map(); const forYb = raw => { const key = Math.round(Math.min(YB_MAX, Math.max(YB_MIN, raw)) * 100) / 100; if (!cache.has(key)) cache.set(key, model(key)); return cache.get(key); }; const relY = lin => toXYZ(lin)[1]; const forBackground = lin => forYb(relY(lin)); const base = forYb(YB_DEFAULT); const deltaE = (p, q) => Math.hypot(p[0] - q[0], p[1] - q[1], p[2] - q[2]); return { jab: base.jab, deltaE, forYb, forBackground, relY, base, YB_DEFAULT }; }40:[{"id":"366f1c2fe31ba62c5a356e81995389a93553a911989f75ff13bf928733473e4e1d2137b820471d5a8954f7b1d8bdfa502315a505181aa0d008b63dec2f328604","href":"https://static.observableusercontent.com/files/366f1c2fe31ba62c5a356e81995389a93553a911989f75ff13bf928733473e4e1d2137b820471d5a8954f7b1d8bdfa502315a505181aa0d008b63dec2f328604","name":"image@1.png","type":"image/png","lastModified":1787928886631.994,"size":109811}] 2f:{"id":"fcb23b3412932f90","slug":null,"title":"Absorption Gradients","thumbnail":"7356c4b091ed1c60e4235201d42d5e7a69683bf9cf2617be99a7f83c965761c3","access_level":"public","create_time":"$D2026-08-27T04:35:08.103Z","update_time":"$D2026-09-10T22:42:14.721Z","view_time":null,"first_public_time":"$D2026-08-27T07:12:39.918Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":461,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Absorption Gradients","cells":[{"id":0,"value":"# Absorption Gradients\n## Physics based depth, density and concentration gradients","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"Click to select a gradient, drag to rotate 3D camera","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"Many natural spectras shift hues at different depths, displaying [dichromatism](https://en.wikipedia.org/wiki/Dichromatism).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"The [Abyss Table](https://www.duffylondon.com/collections/abyss), by Duffy London, layers glass and plywood:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"{\n const images = [\n \"https://images.squarespace-cdn.com/content/v1/67361fb1ff02c855f5b104ca/1741360926029-5A66BNKU60R0ZZEXUFN3/Abyss-Table_carousel-page_03.jpg?format=2500w\",\n \"https://images.squarespace-cdn.com/content/v1/67361fb1ff02c855f5b104ca/1741360926955-0TXHZJLP5D4PBAXQVRQ2/Abyss_dining_09c-1024x576.jpg?format=2500w\"\n ];\n\n const gap = 16; // px between images\n const minWidth = 280; // an image narrower than this wraps to its own line\n\n return html`

\n ${images.map(\n (src) => html`\n \n `\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"Perceptually uniform color scales are considered a best practice in data visualization: the same contrast in color should represent an even change in the data. However, we live in a physical world and use color to estimate the depth of water or thickness of fog despite the colors not being perceptually uniform. Using the physic of how light fades as it passes through a medium, we can create gradients we intuitively understand from our experience of the world, and are ideal for representing thickness, density and concertation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"Transmission of each wavelength of light decays at an exponential rate, which can be calculated by the absorption coefficient ${tex`k(\\lambda)`} and the distance d the light travels through the material ${tex`d`}, using the Beer-Lambert law:\n\n${tex.block`T(\\lambda, d) = e^{-k(\\lambda)\\, d}`}\n\nThis equation is for a single wavelength. White light spans a spectrum of wavelengths. To characterize color at different depths, we need to calculate the absorption of each wavelength and then add them together. This ignores scattering, fluorescence, and surface reflection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"Our eyes have three types of color receptor cells: Long, Medium and Short wavelength (LMS) cone cells. Each responds to a range of visible frequencies. This means two frequencies could look similar to us, but have different exponential decays through a medium. This is called metamerism.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"Consider this simplified example with two frequencies we see as red at half brightness, and two more frequencies we see as green and blue. Together, these 4 frequencies create white. The chart below allows changing the decay independently. If one of the red frequencies decays much faster than the other, we create a situation where the hue shifts as it fades to black, creating a dichromatic material. Graphing these exponential decays on a log scale creates sigmoid transmission curves that act like color stops. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"### Utility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"three = {\n // Three.js r160 + addons, all resolved through esm.sh so they share one instance\n const V = \"0.160.0\";\n const core = await import(`https://esm.sh/three@${V}`);\n const { OrbitControls } = await import(`https://esm.sh/three@${V}/examples/jsm/controls/OrbitControls.js`);\n const { Line2 } = await import(`https://esm.sh/three@${V}/examples/jsm/lines/Line2.js`);\n const { LineGeometry } = await import(`https://esm.sh/three@${V}/examples/jsm/lines/LineGeometry.js`);\n const { LineMaterial } = await import(`https://esm.sh/three@${V}/examples/jsm/lines/LineMaterial.js`);\n return Object.assign({}, core, { OrbitControls, Line2, LineGeometry, LineMaterial });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"2","titling":"auto"}} 30:"$2f:body"