2b:null 2c:["$","title",null,{"children":"3D Color Picker | Lao | Observable"}] 31:Te595,viewof color3D = { const ZWSP = '\u200B'; const CONFIG = { radiusDeltaE: 2.5, subdivisions: 2, tweakRadius: 30, crosshair: 7, transitionDuration: 1200, maxFrameStep: 40, warmLineChunk: 4, warmBlobChunk: 12, lerpSteps: 200, timeDelay: 200, ease: d3.easeQuadOut, cameraFOV: 45, cameraDistance: 100, rotateSpeed: 0.2, dampingFactor: 0.2, defaultWidth: 700, defaultHeight: 700, minWidth: 500, sceneHeight: 700, breakAfterCommas: true, ambientLightColor: 0x404040, directionalLightIntensity: 0.5, projectionLineColor: 0xFFFFFF, projectionLineWidth: 3, crosshairLineWidth: 2, rgbLineOpacity: 1, rgbExtremes: ['#FFFFFF', '#000000', '#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#FF00FF'] }; const state = { currentColorSpace: 'jab', currentVision: 'normal', isAnimating: false, isTransitioning: false, transitionProgress: 0, transitionLastTime: 0, animationFrameId: null, updateTimeoutId: null, isDragging: false, draggedMesh: null, draggedColorIndex: -1, draggedHexColor: null, draggedColorFormat: null, dragType: null, dragPlane: null, hoveredMesh: null, currentPalette: [], colorMeshes: [], drawnColors: new Map(), animationTargets: new Map(), rgbLineTransitions: [], colorBlobTransitions: [], needsRGBUpdate: true, geometryNeedsUpdate: false, needsTextFit: true, lastTextWidth: 0, activeColorIndex: -1, textHoverIndex: -1, highlightSpans: [], spanRects: null, blackPos: null, whitePos: null }; const utils = { isColor: (strColor) => { const s = new Option().style; s.color = strColor; return s.color !== ''; }, toHex: (value) => { if (!utils.isColor(value)) return null; const parsed = d3.color(value); return parsed ? parsed.hex() : null; }, parse: (s) => { const sLength = s.length; const result = []; let left = 0, right = 0; let section = ''; let startIndex = 0; const skip = ['#']; const cut = [',', ' ', '\n', 'x', '[', ']', "'", '"', ';', ZWSP]; for (let i = 0; i <= sLength; i++) { const char = s.charAt(i); if (char === '(') left++; if (char === ')') right++; if (left !== 0) { section += char; if (left === right) { left = 0; right = 0; } } else { if (skip.includes(char)) { } else if (cut.includes(char) || i === sLength) { let fillColor = ''; let keep = true; const direct = utils.toHex(section); const hashed = direct ? null : utils.toHex('#' + section); if (direct) { fillColor = direct; } else if (hashed) { fillColor = hashed; } else { keep = false; } if (keep) { const textColor = d3.lab(d3.color(fillColor)).l > 65 ? '#000000' : '#FFFFFF'; result.push({ string: section, startIndex: startIndex, endIndex: i, fillColor: fillColor, textColor: textColor }); } startIndex = i + 1; section = ''; } else { section += char; } } } return result; }, stripBreaks: (text) => { return text.split(ZWSP).join(''); }, breakPositions: (clean) => { const positions = []; if (!CONFIG.breakAfterCommas) return positions; let depth = 0; for (let i = 0; i < clean.length; i++) { const char = clean[i]; if (char === '(') depth++; else if (char === ')') depth = Math.max(0, depth - 1); if (depth === 0 && char === ',' && i + 1 < clean.length && !/\s/.test(clean[i + 1])) { positions.push(i + 1); } } return positions; }, insertBreaks: (clean, positions) => { let out = ''; let previous = 0; for (let i = 0; i < positions.length; i++) { out += clean.slice(previous, positions[i]) + ZWSP; previous = positions[i]; } return out + clean.slice(previous); }, normalizeBreaks: (text) => { const clean = utils.stripBreaks(text); return utils.insertBreaks(clean, utils.breakPositions(clean)); }, applyBreakOpportunities: (textAreaEditing) => { const before = textAreaEditing.value; const clean = utils.stripBreaks(before); const positions = utils.breakPositions(clean); const after = utils.insertBreaks(clean, positions); if (after === before) return false; const toClean = (index) => index - utils.countBreaks(before.slice(0, index)); const shift = (index) => { let moved = index; for (let i = 0; i < positions.length; i++) { if (positions[i] < index) moved++; } return moved; }; const newStart = shift(toClean(textAreaEditing.selectionStart)); const newEnd = shift(toClean(textAreaEditing.selectionEnd)); textAreaEditing.value = after; textAreaEditing.setSelectionRange(newStart, newEnd); return true; }, countBreaks: (text) => { return text.split(ZWSP).length - 1; }, detectColorFormat: (token) => { const text = String(token).trim(); const functional = text.match(/^([A-Za-z]+)\s*$\s*([\s\S]*?)\s*$$/); if (functional) { const body = functional[2]; const slashParts = body.split('/'); const main = slashParts[0]; const args = main.split(/[\s,]+/).filter(part => part.length > 0); const commas = main.indexOf(',') !== -1; let alpha = null; if (slashParts.length > 1) { alpha = slashParts.slice(1).join('/').trim(); } else if (args.length > 3) { alpha = args[3]; } return { type: 'function', name: functional[1], commas: commas, spacedCommas: /,\s/.test(main), percent: main.indexOf('%') !== -1, alpha: alpha, slashAlpha: slashParts.length > 1 }; } const hex = text.match(/^(#?)([0-9A-Fa-f]{3,8})$/); if (hex) { return { type: 'hex', hash: hex[1] === '#', digits: hex[2].length, uppercase: /[A-Fa-f]/.test(hex[2]) && hex[2] === hex[2].toUpperCase() }; } return { type: 'other' }; }, shortenHex: (hex) => { const digits = hex.slice(1); if (digits.length !== 6) return null; if (digits[0] !== digits[1] || digits[2] !== digits[3] || digits[4] !== digits[5]) return null; return '#' + digits[0] + digits[2] + digits[4]; }, formatFunctional: (color, format) => { const name = format.name.toLowerCase(); let values = null; if (name === 'rgb' || name === 'rgba') { const rgb = color.rgb(); values = format.percent ? rgb.map(value => Math.round((value / 255) * 100) + '%') : rgb.map(value => String(Math.round(value))); } else if (name === 'hsl' || name === 'hsla') { const hsl = color.hsl(); const hue = isNaN(hsl[0]) ? 0 : hsl[0]; values = [ String(Math.round(hue)), Math.round(hsl[1] * 100) + '%', Math.round(hsl[2] * 100) + '%' ]; } else { try { const css = color.css(name); if (typeof css === 'string' && css.toLowerCase().indexOf(name) === 0) return css; } catch (error) { return null; } return null; } const separator = format.commas ? (format.spacedCommas ? ', ' : ',') : ' '; if (format.alpha && format.slashAlpha) { return format.name + '(' + values.join(separator) + ' / ' + format.alpha + ')'; } if (format.alpha) { return format.name + '(' + values.concat([format.alpha]).join(separator) + ')'; } return format.name + '(' + values.join(separator) + ')'; }, formatColor: (hexColor, format) => { const color = chroma(hexColor); if (format && format.type === 'function') { const functional = utils.formatFunctional(color, format); if (functional) return functional; } let out = color.hex(); if (format && format.type === 'hex') { if (format.digits === 3) { const short = utils.shortenHex(out); if (short) out = short; } if (format.uppercase) out = out.toUpperCase(); if (!format.hash) out = out.slice(1); } return out; }, escapeHTML: (text) => { return text .replace(/&/g, '&') .replace(//g, '>'); }, formatPre: (text, highlights) => { let out = ''; let cursor = 0; for (let i = 0; i < highlights.length; i++) { const h = highlights[i]; if (h.startIndex < cursor) continue; out += utils.escapeHTML(text.slice(cursor, h.startIndex)); out += `` + utils.escapeHTML(text.slice(h.startIndex, h.endIndex)) + ''; cursor = h.endIndex; } out += utils.escapeHTML(text.slice(cursor)); return out + '\n'; }, getStorageKey: () => { return new URL(document.baseURI).pathname.substring(1).replace('/', '-') + '-color3d'; }, updateContainerValue: (container, textAreaEditing) => { if (state.updateTimeoutId) { clearTimeout(state.updateTimeoutId); } state.updateTimeoutId = setTimeout(() => { const currentText = textAreaEditing.value; const parsedColors = utils.parse(currentText); container.value = parsedColors.map(c => c.fillColor); container.dispatchEvent(new CustomEvent('input')); }, CONFIG.timeDelay); }, getRGBPairs: () => { const pairs = []; for (let i = 0; i < CONFIG.rgbExtremes.length; i++) { for (let j = i + 1; j < CONFIG.rgbExtremes.length; j++) { pairs.push([i, j]); } } return pairs; } }; const cache = { xyzCache: new Map(), tweakCache: new Map(), blobCache: new Map(), rgbLineCache: new Map(), rgbHexCache: null, limit: (map, max) => { if (map.size > max) map.clear(); }, hexToXYZ: (hex, colorSpace, vision) => { const cacheKey = hex + '|' + colorSpace + '|' + vision; let point = cache.xyzCache.get(cacheKey); if (point === undefined) { const raw = hexToXYZ(hex, colorSpace, vision); point = { x: raw.x, y: raw.y, z: raw.z }; cache.xyzCache.set(cacheKey, point); cache.limit(cache.xyzCache, 60000); } return point; }, tweaksFor: (hex) => { let tweaks = cache.tweakCache.get(hex); if (tweaks === undefined) { const base = chroma(hex); const rgb = base.rgb(); tweaks = sphereData.vertices.map((vertex) => { const r = Math.max(0, Math.min(255, rgb[0] + vertex[0] * CONFIG.tweakRadius)); const g = Math.max(0, Math.min(255, rgb[1] + vertex[1] * CONFIG.tweakRadius)); const b = Math.max(0, Math.min(255, rgb[2] + vertex[2] * CONFIG.tweakRadius)); const tweaked = chroma(r, g, b); return { hex: tweaked.hex(), deltaE: chroma.deltaE(base, tweaked) }; }); cache.tweakCache.set(hex, tweaks); cache.limit(cache.tweakCache, 4000); } return tweaks; }, blobVertices: (hex, colorSpace, vision) => { const cacheKey = hex + '|' + colorSpace + '|' + vision; let positions = cache.blobCache.get(cacheKey); if (positions === undefined) { const center = cache.hexToXYZ(hex, colorSpace, vision); const tweaks = cache.tweaksFor(hex); positions = new Float32Array(tweaks.length * 3); for (let i = 0; i < tweaks.length; i++) { const tweak = tweaks[i]; const tweakedPos = cache.hexToXYZ(tweak.hex, colorSpace, vision); const scale = tweak.deltaE > 0 ? CONFIG.radiusDeltaE / tweak.deltaE : 0; let x = center.x + (tweakedPos.x - center.x) * scale; let y = center.y + (tweakedPos.y - center.y) * scale; let z = center.z + (tweakedPos.z - center.z) * scale; const clampedHex = xyzToHex({ x: x, y: y, z: z }, colorSpace); if (clampedHex) { const clamped = cache.hexToXYZ(clampedHex, colorSpace, vision); x = clamped.x; y = clamped.y; z = clamped.z; } positions[i * 3] = x; positions[i * 3 + 1] = y; positions[i * 3 + 2] = z; } cache.blobCache.set(cacheKey, positions); cache.limit(cache.blobCache, 3000); } return positions; }, rgbHexes: () => { if (cache.rgbHexCache === null) { const pairs = utils.getRGBPairs(); const steps = CONFIG.lerpSteps; cache.rgbHexCache = []; for (let i = 0; i < pairs.length; i++) { const interpolate = d3.interpolateRgb( CONFIG.rgbExtremes[pairs[i][0]], CONFIG.rgbExtremes[pairs[i][1]] ); const line = []; for (let j = 0; j < steps; j++) { line.push(d3.rgb(interpolate(j / (steps - 1))).hex()); } cache.rgbHexCache.push(line); } } return cache.rgbHexCache; }, rgbLineEntry: (colorSpace, vision) => { const cacheKey = colorSpace + '|' + vision; let entry = cache.rgbLineCache.get(cacheKey); if (entry === undefined) { entry = { positions: [], colors: [], built: 0 }; cache.rgbLineCache.set(cacheKey, entry); } return entry; }, buildRGBLines: (colorSpace, vision, maxLines) => { const hexes = cache.rgbHexes(); const entry = cache.rgbLineEntry(colorSpace, vision); const steps = CONFIG.lerpSteps; const limit = maxLines > 0 ? Math.min(hexes.length, entry.built + maxLines) : hexes.length; while (entry.built < limit) { const i = entry.built; const linePositions = new Float32Array(steps * 3); const lineColors = new Float32Array(steps * 3); for (let j = 0; j < steps; j++) { const hex = hexes[i][j]; const point = cache.hexToXYZ(hex, colorSpace, vision); const shifted = colorblind[vision](hex, true); linePositions[j * 3] = point.x; linePositions[j * 3 + 1] = point.y; linePositions[j * 3 + 2] = point.z; lineColors[j * 3] = shifted.R / 255; lineColors[j * 3 + 1] = shifted.G / 255; lineColors[j * 3 + 2] = shifted.B / 255; } entry.positions[i] = linePositions; entry.colors[i] = lineColors; entry.built++; } return entry; }, rgbLinesReady: (colorSpace, vision) => { return cache.rgbLineEntry(colorSpace, vision).built >= cache.rgbHexes().length; }, rgbLineData: (colorSpace, vision) => { return cache.buildRGBLines(colorSpace, vision, 0); } }; const warmup = { tasks: [], handle: null, usesIdle: typeof requestIdleCallback === 'function', seed: () => { const spaces = Array.prototype.slice.call(colorSpaceSelect.options).map(option => option.value); warmup.tasks = []; spaces.forEach(space => { if (space === state.currentColorSpace) return; warmup.tasks.push({ space: space, kind: 'lines' }); warmup.tasks.push({ space: space, kind: 'blobs', index: 0 }); }); warmup.schedule(120); }, cancel: () => { if (warmup.handle === null) return; if (warmup.usesIdle && typeof cancelIdleCallback === 'function') cancelIdleCallback(warmup.handle); else clearTimeout(warmup.handle); warmup.handle = null; }, schedule: (delay) => { warmup.cancel(); if (!warmup.tasks.length) return; if (warmup.usesIdle && !delay) { warmup.handle = requestIdleCallback(warmup.step, { timeout: 3000 }); } else { warmup.handle = setTimeout(() => { warmup.handle = null; warmup.step(null); }, delay || 200); } }, chunk: () => { const task = warmup.tasks[0]; const vision = state.currentVision; if (task.kind === 'lines') { cache.buildRGBLines(task.space, vision, CONFIG.warmLineChunk); if (cache.rgbLinesReady(task.space, vision)) warmup.tasks.shift(); return; } const meshes = state.colorMeshes; const end = Math.min(meshes.length, task.index + CONFIG.warmBlobChunk); for (let i = task.index; i < end; i++) { cache.blobVertices(colorblind[vision](meshes[i].hexColor, false), task.space, vision); } task.index = end; if (task.index >= meshes.length) warmup.tasks.shift(); }, step: (deadline) => { warmup.handle = null; if (!warmup.tasks.length) return; if (state.isDragging || state.isTransitioning) { warmup.schedule(400); return; } const hasTime = () => !deadline || typeof deadline.timeRemaining !== 'function' || deadline.timeRemaining() > 10; if (!hasTime()) { warmup.schedule(400); return; } warmup.chunk(); while (warmup.tasks.length && hasTime()) { warmup.chunk(); } warmup.schedule(); } }; const geometry = { getBlobCenter: (mesh) => { return mesh.userData.centerPosition.clone(); }, createPlaneFromPoints: (p1, p2, p3, size) => { const v1 = new THREE.Vector3().subVectors(p2, p1); const v2 = new THREE.Vector3().subVectors(p3, p1); const normal = new THREE.Vector3().crossVectors(v1, v2).normalize(); const center = new THREE.Vector3().add(p1).add(p2).divideScalar(2); const planeGeometry = new THREE.PlaneGeometry(size, size); const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x808080, transparent: true, opacity: 0, side: THREE.DoubleSide, depthWrite: false, depthTest: false }); const plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.position.copy(center); plane.lookAt(center.clone().add(normal)); plane.renderOrder = -1; return plane; }, updateBlob: (mesh, newHexColor, newCenterPosition, sphereData) => { mesh.userData.centerPosition.copy(newCenterPosition); const positions = cache.blobVertices(newHexColor, state.currentColorSpace, state.currentVision); const vertices = mesh.geometry.vertices; for (let i = 0; i < vertices.length; i++) { vertices[i].set(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]); } mesh.material.color.set(newHexColor); mesh.geometry.verticesNeedUpdate = true; mesh.geometry.computeBoundingSphere(); mesh.geometry.computeBoundingBox(); }, createColorBlob: (hexValue, colorIndex, sphereData) => { const originalPos = cache.hexToXYZ(hexValue, state.currentColorSpace, state.currentVision); const positions = cache.blobVertices(hexValue, state.currentColorSpace, state.currentVision); const geometryObj = new THREE.Geometry(); for (let i = 0; i < sphereData.vertices.length; i++) { geometryObj.vertices.push(new THREE.Vector3( positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2] )); } sphereData.faces.forEach((face) => { geometryObj.faces.push(new THREE.Face3(face[0], face[1], face[2])); }); const material = new THREE.MeshBasicMaterial({ color: new THREE.Color(hexValue), }); const mesh = new THREE.Mesh(geometryObj, material); mesh.userData.hexColor = hexValue; mesh.userData.colorIndex = colorIndex; mesh.userData.centerPosition = new THREE.Vector3(originalPos.x, originalPos.y, originalPos.z); return mesh; } }; const visualization = { updateProjectionLine: (blobCenter, hexColor, dragTypeParam, projectionLine, crosshairLines) => { const t = (blobCenter.y - state.blackPos.y) / (state.whitePos.y - state.blackPos.y); const clampedT = Math.max(0, Math.min(1, t)); const projectionPoint = new THREE.Vector3( state.blackPos.x + clampedT * (state.whitePos.x - state.blackPos.x), blobCenter.y, state.blackPos.z + clampedT * (state.whitePos.z - state.blackPos.z) ); projectionLine.geometry.vertices[0].copy(blobCenter); projectionLine.geometry.vertices[1].copy(projectionPoint); projectionLine.geometry.verticesNeedUpdate = true; if (hexColor) { projectionLine.material.color.set(hexColor); crosshairLines.forEach(line => { line.material.color.set(hexColor); }); } projectionLine.visible = true; if (dragTypeParam === 'diagonal' || dragTypeParam === 'horizontal') { crosshairLines.forEach(line => line.visible = true); if (dragTypeParam === 'diagonal') { const blobToProj = new THREE.Vector3().subVectors(projectionPoint, blobCenter).normalize(); crosshairLines[0].geometry.vertices[0].copy(blobCenter); crosshairLines[0].geometry.vertices[1].copy( blobCenter.clone().add(blobToProj.clone().multiplyScalar(-CONFIG.crosshair)) ); crosshairLines[1].geometry.vertices[0].copy(blobCenter); crosshairLines[1].geometry.vertices[1].copy( blobCenter.clone().add(new THREE.Vector3(0, CONFIG.crosshair, 0)) ); crosshairLines[2].geometry.vertices[0].copy(blobCenter); crosshairLines[2].geometry.vertices[1].copy( blobCenter.clone().add(new THREE.Vector3(0, -CONFIG.crosshair, 0)) ); } else if (dragTypeParam === 'horizontal') { const toProjection = new THREE.Vector3( projectionPoint.x - blobCenter.x, 0, projectionPoint.z - blobCenter.z ).normalize(); if (toProjection.length() < 0.01) { toProjection.set(1, 0, 0); } const perpendicular = new THREE.Vector3(-toProjection.z, 0, toProjection.x); crosshairLines[0].geometry.vertices[0].copy(blobCenter); crosshairLines[0].geometry.vertices[1].copy( blobCenter.clone().add(toProjection.clone().multiplyScalar(-CONFIG.crosshair)) ); crosshairLines[1].geometry.vertices[0].copy(blobCenter); crosshairLines[1].geometry.vertices[1].copy( blobCenter.clone().add(perpendicular.clone().multiplyScalar(CONFIG.crosshair)) ); crosshairLines[2].geometry.vertices[0].copy(blobCenter); crosshairLines[2].geometry.vertices[1].copy( blobCenter.clone().add(perpendicular.clone().multiplyScalar(-CONFIG.crosshair)) ); } crosshairLines.forEach(line => { line.geometry.verticesNeedUpdate = true; }); } else { crosshairLines.forEach(line => line.visible = false); } }, updateRGBLines: (lineList, pairs) => { if (!state.needsRGBUpdate || state.isTransitioning) return; const data = cache.rgbLineData(state.currentColorSpace, state.currentVision); for (let i = 0; i < lineList.length; i++) { const vertices = lineList[i].geometry.vertices; const colors = lineList[i].geometry.colors; const positions = data.positions[i]; const lineColors = data.colors[i]; for (let j = 0; j < vertices.length; j++) { const at = j * 3; vertices[j].set(positions[at], positions[at + 1], positions[at + 2]); colors[j].setRGB(lineColors[at], lineColors[at + 1], lineColors[at + 2]); } lineList[i].geometry.verticesNeedUpdate = true; lineList[i].geometry.colorsNeedUpdate = true; } state.needsRGBUpdate = false; }, setActiveColor: (index) => { if (state.activeColorIndex === index) return; state.activeColorIndex = index; ui.applyActiveSpan(); }, updateColorPalette: (newColors, scene, sphereData) => { state.colorMeshes.forEach(item => { scene.remove(item.mesh); item.mesh.geometry.dispose(); item.mesh.material.dispose(); }); state.colorMeshes.length = 0; state.drawnColors.clear(); newColors.forEach((colorData, index) => { const hexColor = colorblind[state.currentVision](colorData.fillColor, false); const mesh = geometry.createColorBlob(hexColor, index, sphereData); state.colorMeshes.push({ mesh: mesh, hexColor: hexColor, colorIndex: index }); scene.add(mesh); if (!state.drawnColors.has(hexColor)) { state.drawnColors.set(hexColor, mesh); } }); state.currentPalette = newColors; state.isAnimating = true; state.needsRGBUpdate = true; warmup.seed(); } }; const animation = { captureRGBLineState: (lineList) => { return lineList.map((line, lineIndex) => { const vertices = line.geometry.vertices; const colors = line.geometry.colors; const sourceVertices = new Float32Array(vertices.length * 3); const sourceColors = new Float32Array(vertices.length * 3); for (let j = 0; j < vertices.length; j++) { const at = j * 3; sourceVertices[at] = vertices[j].x; sourceVertices[at + 1] = vertices[j].y; sourceVertices[at + 2] = vertices[j].z; sourceColors[at] = colors[j].r; sourceColors[at + 1] = colors[j].g; sourceColors[at + 2] = colors[j].b; } return { line: line, lineIndex: lineIndex, sourceVertices: sourceVertices, sourceColors: sourceColors, targetVertices: null, targetColors: null }; }); }, captureColorBlobState: () => { return state.colorMeshes.map(item => { const vertices = item.mesh.geometry.vertices; const sourceVertices = new Float32Array(vertices.length * 3); for (let j = 0; j < vertices.length; j++) { const at = j * 3; sourceVertices[at] = vertices[j].x; sourceVertices[at + 1] = vertices[j].y; sourceVertices[at + 2] = vertices[j].z; } const color = item.mesh.material.color; const center = item.mesh.userData.centerPosition; return { mesh: item.mesh, hexColor: item.hexColor, colorIndex: item.colorIndex, sourceVertices: sourceVertices, sourceColor: { r: color.r, g: color.g, b: color.b }, sourceCenter: { x: center.x, y: center.y, z: center.z }, targetVertices: null, targetColor: null, targetCenter: null }; }); }, calculateRGBLineTargets: (rgbLineState, newColorSpace, newVision, pairs) => { const data = cache.rgbLineData(newColorSpace, newVision); rgbLineState.forEach((lineData, lineIndex) => { lineData.targetVertices = data.positions[lineIndex]; lineData.targetColors = data.colors[lineIndex]; }); }, calculateColorBlobTargets: (colorBlobState, newColorSpace, newVision, sphereData) => { colorBlobState.forEach(blobData => { const hexColor = colorblind[newVision](blobData.hexColor, false); const targetPos = cache.hexToXYZ(hexColor, newColorSpace, newVision); const targetColor = new THREE.Color(hexColor); blobData.targetVertices = cache.blobVertices(hexColor, newColorSpace, newVision); blobData.targetColor = { r: targetColor.r, g: targetColor.g, b: targetColor.b }; blobData.targetCenter = { x: targetPos.x, y: targetPos.y, z: targetPos.z }; }); }, updateTransitions: (renderer, scene, camera) => { if (!state.isTransitioning) return; const now = (typeof performance !== 'undefined' ? performance.now() : Date.now()); const step = Math.min(now - state.transitionLastTime, CONFIG.maxFrameStep); state.transitionLastTime = now; state.transitionProgress = Math.min( state.transitionProgress + step / CONFIG.transitionDuration, 1 ); const progress = state.transitionProgress; const t = CONFIG.ease(progress); state.rgbLineTransitions.forEach(lineData => { const vertices = lineData.line.geometry.vertices; const colors = lineData.line.geometry.colors; const sourceVertices = lineData.sourceVertices; const targetVertices = lineData.targetVertices; const sourceColors = lineData.sourceColors; const targetColors = lineData.targetColors; for (let j = 0; j < vertices.length; j++) { const at = j * 3; const vertex = vertices[j]; const color = colors[j]; vertex.x = sourceVertices[at] + (targetVertices[at] - sourceVertices[at]) * t; vertex.y = sourceVertices[at + 1] + (targetVertices[at + 1] - sourceVertices[at + 1]) * t; vertex.z = sourceVertices[at + 2] + (targetVertices[at + 2] - sourceVertices[at + 2]) * t; color.r = sourceColors[at] + (targetColors[at] - sourceColors[at]) * t; color.g = sourceColors[at + 1] + (targetColors[at + 1] - sourceColors[at + 1]) * t; color.b = sourceColors[at + 2] + (targetColors[at + 2] - sourceColors[at + 2]) * t; } lineData.line.geometry.verticesNeedUpdate = true; lineData.line.geometry.colorsNeedUpdate = true; }); state.colorBlobTransitions.forEach(blobData => { const vertices = blobData.mesh.geometry.vertices; const sourceVertices = blobData.sourceVertices; const targetVertices = blobData.targetVertices; for (let j = 0; j < vertices.length; j++) { const at = j * 3; const vertex = vertices[j]; vertex.x = sourceVertices[at] + (targetVertices[at] - sourceVertices[at]) * t; vertex.y = sourceVertices[at + 1] + (targetVertices[at + 1] - sourceVertices[at + 1]) * t; vertex.z = sourceVertices[at + 2] + (targetVertices[at + 2] - sourceVertices[at + 2]) * t; } const center = blobData.mesh.userData.centerPosition; center.x = blobData.sourceCenter.x + (blobData.targetCenter.x - blobData.sourceCenter.x) * t; center.y = blobData.sourceCenter.y + (blobData.targetCenter.y - blobData.sourceCenter.y) * t; center.z = blobData.sourceCenter.z + (blobData.targetCenter.z - blobData.sourceCenter.z) * t; const color = blobData.mesh.material.color; color.r = blobData.sourceColor.r + (blobData.targetColor.r - blobData.sourceColor.r) * t; color.g = blobData.sourceColor.g + (blobData.targetColor.g - blobData.sourceColor.g) * t; color.b = blobData.sourceColor.b + (blobData.targetColor.b - blobData.sourceColor.b) * t; blobData.mesh.geometry.verticesNeedUpdate = true; }); if (progress >= 1) { state.isTransitioning = false; state.rgbLineTransitions.forEach(lineData => { const vertices = lineData.line.geometry.vertices; const colors = lineData.line.geometry.colors; for (let j = 0; j < vertices.length; j++) { const at = j * 3; vertices[j].set( lineData.targetVertices[at], lineData.targetVertices[at + 1], lineData.targetVertices[at + 2] ); colors[j].setRGB( lineData.targetColors[at], lineData.targetColors[at + 1], lineData.targetColors[at + 2] ); } lineData.line.geometry.verticesNeedUpdate = true; lineData.line.geometry.colorsNeedUpdate = true; }); state.colorBlobTransitions.forEach(blobData => { const vertices = blobData.mesh.geometry.vertices; for (let j = 0; j < vertices.length; j++) { const at = j * 3; vertices[j].set( blobData.targetVertices[at], blobData.targetVertices[at + 1], blobData.targetVertices[at + 2] ); } blobData.mesh.material.color.setRGB( blobData.targetColor.r, blobData.targetColor.g, blobData.targetColor.b ); blobData.mesh.userData.centerPosition.set( blobData.targetCenter.x, blobData.targetCenter.y, blobData.targetCenter.z ); blobData.mesh.geometry.verticesNeedUpdate = true; blobData.mesh.geometry.computeBoundingBox(); blobData.mesh.geometry.computeBoundingSphere(); }); state.rgbLineTransitions = []; state.colorBlobTransitions = []; state.needsRGBUpdate = false; state.geometryNeedsUpdate = false; renderer.render(scene, camera); } }, startTransition: (newColorSpace, newVision, lineList, pairs, sphereData) => { state.rgbLineTransitions = animation.captureRGBLineState(lineList); state.colorBlobTransitions = animation.captureColorBlobState(); animation.calculateRGBLineTargets(state.rgbLineTransitions, newColorSpace, newVision, pairs); animation.calculateColorBlobTargets(state.colorBlobTransitions, newColorSpace, newVision, sphereData); state.isTransitioning = true; state.transitionProgress = 0; state.transitionLastTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()); state.needsRGBUpdate = false; state.geometryNeedsUpdate = true; } }; const ui = { fitText: (textAreaEditing, textAreaHighlight) => { if (textAreaEditing == null || textAreaHighlight == null) return; if (!textAreaEditing.isConnected) { state.needsTextFit = true; return; } textAreaEditing.style.height = 'auto'; const borders = textAreaEditing.offsetHeight - textAreaEditing.clientHeight; const contentHeight = Math.max( textAreaHighlight.scrollHeight, textAreaEditing.scrollHeight ) + borders; textAreaEditing.style.height = contentHeight + 'px'; state.needsTextFit = false; state.lastTextWidth = textAreaEditing.clientWidth; state.spanRects = null; }, updatePre: (textAreaHighlight, text) => { if (textAreaHighlight == null) return; textAreaHighlight.innerHTML = text; state.highlightSpans = Array.prototype.slice.call( textAreaHighlight.querySelectorAll('.highlight') ); state.spanRects = null; ui.applyActiveSpan(); }, applyActiveSpan: () => { for (let i = 0; i < state.highlightSpans.length; i++) { if (i === state.activeColorIndex) { state.highlightSpans[i].classList.add('is-active'); } else { state.highlightSpans[i].classList.remove('is-active'); } } }, spanRects: () => { if (state.spanRects) return state.spanRects; const boxes = []; for (let i = 0; i < state.highlightSpans.length; i++) { const rects = state.highlightSpans[i].getClientRects(); for (let r = 0; r < rects.length; r++) { const rect = rects[r]; boxes.push({ index: i, left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom }); } } state.spanRects = boxes; return boxes; }, findTokenAtPoint: (x, y) => { const boxes = ui.spanRects(); for (let i = 0; i < boxes.length; i++) { const box = boxes[i]; if (x >= box.left && x <= box.right && y >= box.top && y <= box.bottom) { return box.index; } } return -1; }, scrollTokenIntoView: (index) => { const panel = rightPanel; const span = state.highlightSpans[index]; if (!panel || !span) return; if (panel.scrollHeight <= panel.clientHeight) return; const panelRect = panel.getBoundingClientRect(); const spanRect = span.getBoundingClientRect(); const margin = 40; if (spanRect.top < panelRect.top + margin) { panel.scrollTop -= (panelRect.top + margin) - spanRect.top; } else if (spanRect.bottom > panelRect.bottom - margin) { panel.scrollTop += spanRect.bottom - (panelRect.bottom - margin); } }, resize: (threejsContainer, renderer, camera) => { const rect = threejsContainer.getBoundingClientRect(); const w = Math.max(CONFIG.minWidth, Math.round(rect.width)); const h = CONFIG.sceneHeight; const currentSize = renderer.getSize(new THREE.Vector2()); if (currentSize.x !== w || currentSize.y !== h) { renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); } } }; const container = document.createElement('div'); container.className = 'color3d-container'; const key = utils.getStorageKey(); let savedPaletteText = localStorage.getItem(key); if (savedPaletteText === null || savedPaletteText === '') { savedPaletteText = `'#fde725', '#d2e21b', '#a5db36', '#7ad151', '#54c568', '#35b779', '#22a884', '#1f988b', '#23888e', '#2a788e', '#31688e', '#39568c', '#414487', '#472f7d', '#481a6c', '#440154'`; } savedPaletteText = utils.normalizeBreaks(savedPaletteText); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(CONFIG.cameraFOV, 1, 1, 800); camera.position.set(0, CONFIG.cameraDistance, CONFIG.cameraDistance); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setClearColor(0x000000, 0); renderer.setSize(CONFIG.defaultWidth, CONFIG.defaultHeight); const ambientLight = new THREE.AmbientLight(CONFIG.ambientLightColor); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, CONFIG.directionalLightIntensity); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); const sphereData = createGeodesicSphere(CONFIG.subdivisions); state.blackPos = hexToXYZ('#010101', state.currentColorSpace, state.currentVision); state.whitePos = hexToXYZ('#FEFEFE', state.currentColorSpace, state.currentVision); const projectionLineGeometry = new THREE.Geometry(); projectionLineGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); projectionLineGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); const projectionLineMaterial = new THREE.LineBasicMaterial({ color: CONFIG.projectionLineColor, linewidth: CONFIG.projectionLineWidth }); const projectionLine = new THREE.Line(projectionLineGeometry, projectionLineMaterial); projectionLine.visible = false; scene.add(projectionLine); const crosshairLines = []; for (let i = 0; i < 3; i++) { const crosshairGeometry = new THREE.Geometry(); crosshairGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); crosshairGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); const material = new THREE.LineBasicMaterial({ color: CONFIG.projectionLineColor, linewidth: CONFIG.crosshairLineWidth, }); const line = new THREE.Line(crosshairGeometry, material.clone()); line.visible = false; crosshairLines.push(line); scene.add(line); } const pairs = utils.getRGBPairs(); const lineList = []; const rgbHexes = cache.rgbHexes(); for (let i = 0; i < pairs.length; i++) { const geoRGBLine = new THREE.Geometry(); for (let j = 0; j < CONFIG.lerpSteps; j++) { geoRGBLine.vertices.push(new THREE.Vector3(0, 0, 0)); geoRGBLine.colors[j] = new THREE.Color(rgbHexes[i][j]); } const material = new THREE.LineBasicMaterial({ color: 0xffffff, vertexColors: THREE.VertexColors, opacity: CONFIG.rgbLineOpacity, transparent: true }); const RGBLine = new THREE.Line(geoRGBLine, material); lineList.push(RGBLine); scene.add(RGBLine); } const eventHandlers = { handleColorSpaceChange: (e, sphereData) => { const newColorSpace = e.target.value; if (newColorSpace === state.currentColorSpace) return; animation.startTransition(newColorSpace, state.currentVision, lineList, pairs, sphereData); state.currentColorSpace = newColorSpace; warmup.seed(); state.blackPos = hexToXYZ('#010101', state.currentColorSpace, state.currentVision); state.whitePos = hexToXYZ('#FEFEFE', state.currentColorSpace, state.currentVision); }, handleVisionChange: (e, sphereData) => { const newVision = e.target.value; if (newVision === state.currentVision) return; animation.startTransition(state.currentColorSpace, newVision, lineList, pairs, sphereData); state.currentVision = newVision; warmup.seed(); state.blackPos = hexToXYZ('#010101', state.currentColorSpace, state.currentVision); state.whitePos = hexToXYZ('#FEFEFE', state.currentColorSpace, state.currentVision); }, handleTextareaInput: (e) => { utils.applyBreakOpportunities(e.target); const text = e.target.value; const parsedColors = utils.parse(text); ui.updatePre(textAreaHighlight, utils.formatPre(text, parsedColors)); ui.fitText(textAreaEditing, textAreaHighlight); visualization.updateColorPalette(parsedColors, scene, sphereData); localStorage.setItem(key, utils.stripBreaks(text)); utils.updateContainerValue(container, textAreaEditing); }, handleTextareaKeydown: (e) => { if (!CONFIG.breakAfterCommas) return; if (e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return; const ta = e.target; const start = ta.selectionStart; const end = ta.selectionEnd; if (start !== end) return; const value = ta.value; if (e.key === 'Backspace' && start >= 2 && value[start - 1] === ZWSP) { ta.setSelectionRange(start - 2, start); return; } if (e.key === 'Delete' && value[start] === ZWSP && start + 2 <= value.length) { ta.setSelectionRange(start, start + 2); return; } if (e.key === 'ArrowLeft' && start >= 1 && value[start - 1] === ZWSP) { ta.setSelectionRange(start - 1, start - 1); return; } if (e.key === 'ArrowRight' && value[start] === ZWSP) { ta.setSelectionRange(start + 1, start + 1); } }, handleTextareaCopy: (e) => { const ta = e.target; const selected = ta.value.slice(ta.selectionStart, ta.selectionEnd); if (!selected || utils.countBreaks(selected) === 0) return; if (!e.clipboardData) return; e.clipboardData.setData('text/plain', utils.stripBreaks(selected)); e.preventDefault(); if (e.type === 'cut') { ta.setRangeText('', ta.selectionStart, ta.selectionEnd, 'end'); ta.dispatchEvent(new Event('input', { bubbles: true })); } }, handleTextHover: (e) => { if (state.isDragging) return; const index = ui.findTokenAtPoint(e.clientX, e.clientY); if (index === state.textHoverIndex) return; state.textHoverIndex = index; visualization.setActiveColor(index); const item = index >= 0 ? state.colorMeshes[index] : null; if (item) { visualization.updateProjectionLine( geometry.getBlobCenter(item.mesh), item.mesh.userData.hexColor, 'diagonal', projectionLine, crosshairLines ); } else { projectionLine.visible = false; crosshairLines.forEach(line => line.visible = false); } }, handleTextLeave: () => { if (state.isDragging) return; state.textHoverIndex = -1; visualization.setActiveColor(-1); projectionLine.visible = false; crosshairLines.forEach(line => line.visible = false); }, updateTextareaForDrag: (newHexColor) => { const currentText = textAreaEditing.value; const currentColors = utils.parse(currentText); if (state.draggedColorIndex >= 0 && state.draggedColorIndex < currentColors.length) { const targetColor = currentColors[state.draggedColorIndex]; const originalToken = currentText.slice(targetColor.startIndex, targetColor.endIndex); const format = state.draggedColorFormat || utils.detectColorFormat(originalToken); const replacement = utils.formatColor(newHexColor, format); const newText = currentText.slice(0, targetColor.startIndex) + replacement + currentText.slice(targetColor.endIndex); textAreaEditing.value = newText; const newParsed = utils.parse(newText); ui.updatePre(textAreaHighlight, utils.formatPre(newText, newParsed)); ui.fitText(textAreaEditing, textAreaHighlight); ui.scrollTokenIntoView(state.draggedColorIndex); localStorage.setItem(key, utils.stripBreaks(newText)); utils.updateContainerValue(container, textAreaEditing); } } }; const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); const mouseHandlers = { onMouseDown: (event) => { event.preventDefault(); const rect = renderer.domElement.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, camera); const meshes = state.colorMeshes.map(item => item.mesh).filter(mesh => mesh && mesh.geometry && mesh.material); const intersects = raycaster.intersectObjects(meshes, false); if (intersects.length > 0) { state.isDragging = true; state.draggedMesh = intersects[0].object; state.draggedColorIndex = state.draggedMesh.userData.colorIndex; state.draggedHexColor = state.draggedMesh.userData.hexColor; state.draggedColorFormat = null; const dragText = textAreaEditing.value; const dragTokens = utils.parse(dragText); const dragToken = dragTokens[state.draggedColorIndex]; if (dragToken) { state.draggedColorFormat = utils.detectColorFormat( dragText.slice(dragToken.startIndex, dragToken.endIndex) ); } state.textHoverIndex = -1; visualization.setActiveColor(state.draggedColorIndex); ui.scrollTokenIntoView(state.draggedColorIndex); controls.enabled = false; const center = geometry.getBlobCenter(state.draggedMesh); visualization.updateProjectionLine( center, state.draggedHexColor, event.button === 2 ? 'horizontal' : 'diagonal', projectionLine, crosshairLines ); if (event.button === 2) { state.dragType = 'horizontal'; const planeGeometry = new THREE.PlaneGeometry(100, 100); const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x808080, transparent: true, opacity: 0, side: THREE.DoubleSide, depthWrite: false, depthTest: false }); state.dragPlane = new THREE.Mesh(planeGeometry, planeMaterial); state.dragPlane.rotation.x = -Math.PI / 2; state.dragPlane.position.y = center.y; state.dragPlane.renderOrder = -1; scene.add(state.dragPlane); } else if (event.button === 0) { state.dragType = 'diagonal'; state.dragPlane = geometry.createPlaneFromPoints( new THREE.Vector3(state.blackPos.x, state.blackPos.y, state.blackPos.z), new THREE.Vector3(state.whitePos.x, state.whitePos.y, state.whitePos.z), center, 100 ); scene.add(state.dragPlane); } } }, onMouseMove: (event) => { event.preventDefault(); const rect = renderer.domElement.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, camera); if (state.isDragging && state.draggedMesh && state.dragPlane) { const planeIntersects = raycaster.intersectObject(state.dragPlane); if (planeIntersects.length > 0) { const currentPoint = planeIntersects[0].point; let newPosition = new THREE.Vector3(currentPoint.x, currentPoint.y, currentPoint.z); let newHexColor = xyzToHex({x: newPosition.x, y: newPosition.y, z: newPosition.z}, state.currentColorSpace); if (!newHexColor) { if (state.currentColorSpace === 'rgb') { newPosition.x = Math.max(0, Math.min(255, newPosition.x)); newPosition.y = Math.max(0, Math.min(255, newPosition.y)); newPosition.z = Math.max(0, Math.min(255, newPosition.z)); } else if (state.currentColorSpace === 'lab' || state.currentColorSpace === 'oklab') { newPosition.x = Math.max(0, Math.min(100, newPosition.x)); newPosition.y = Math.max(-128, Math.min(127, newPosition.y)); newPosition.z = Math.max(-128, Math.min(127, newPosition.z)); } newHexColor = xyzToHex({x: newPosition.x, y: newPosition.y, z: newPosition.z}, state.currentColorSpace); } if (newHexColor) { const color = chroma(newHexColor); const rgb = color.rgb(); const clampedColor = chroma.rgb( Math.max(0, Math.min(255, rgb[0])), Math.max(0, Math.min(255, rgb[1])), Math.max(0, Math.min(255, rgb[2])) ); newHexColor = clampedColor.hex(); const clampedPos = hexToXYZ(newHexColor, state.currentColorSpace, state.currentVision); newPosition = new THREE.Vector3(clampedPos.x, clampedPos.y, clampedPos.z); geometry.updateBlob(state.draggedMesh, newHexColor, newPosition, sphereData); state.draggedMesh.userData.hexColor = newHexColor; const meshItem = state.colorMeshes.find(item => item.mesh === state.draggedMesh); if (meshItem) { meshItem.hexColor = newHexColor; } state.draggedHexColor = newHexColor; eventHandlers.updateTextareaForDrag(newHexColor); } visualization.updateProjectionLine( geometry.getBlobCenter(state.draggedMesh), state.draggedHexColor || state.draggedMesh.userData.hexColor, state.dragType, projectionLine, crosshairLines ); } } else { const meshes = state.colorMeshes.map(item => item.mesh).filter(mesh => mesh && mesh.geometry && mesh.material); const intersects = raycaster.intersectObjects(meshes, false); if (intersects.length > 0) { const newHoveredMesh = intersects[0].object; if (newHoveredMesh !== state.hoveredMesh) { state.hoveredMesh = newHoveredMesh; renderer.domElement.style.cursor = 'pointer'; const center = geometry.getBlobCenter(state.hoveredMesh); const hexColor = state.hoveredMesh.userData.hexColor; visualization.updateProjectionLine(center, hexColor, null, projectionLine, crosshairLines); visualization.setActiveColor(state.hoveredMesh.userData.colorIndex); } } else { if (state.hoveredMesh) { state.hoveredMesh = null; visualization.setActiveColor(-1); projectionLine.visible = false; crosshairLines.forEach(line => line.visible = false); renderer.domElement.style.cursor = 'default'; } } } }, onMouseUp: (event) => { if (!state.isDragging) return; state.isDragging = false; state.draggedMesh = null; state.draggedHexColor = null; state.draggedColorFormat = null; state.dragType = null; state.draggedColorIndex = -1; if (state.dragPlane) { scene.remove(state.dragPlane); state.dragPlane.geometry.dispose(); state.dragPlane.material.dispose(); state.dragPlane = null; } controls.enabled = true; projectionLine.visible = false; crosshairLines.forEach(line => line.visible = false); state.hoveredMesh = null; visualization.setActiveColor(-1); }, onContextMenu: (event) => { event.preventDefault(); } }; container.innerHTML = `

Color Space:

Vision:

`; const colorSpaceSelect = container.querySelector('#colorSpace'); const visionSelect = container.querySelector('#vision'); const threejsContainer = container.querySelector('#threejs-container'); const rightPanel = container.querySelector('.color3d-right'); const textAreaEditing = container.querySelector('#textArea_editing'); const textAreaHighlight = container.querySelector('#textArea_highlight'); textAreaEditing.value = savedPaletteText; threejsContainer.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom = false; controls.enablePan = false; controls.enableRotate = true; controls.rotateSpeed = CONFIG.rotateSpeed; controls.enableDamping = true; controls.dampingFactor = CONFIG.dampingFactor; colorSpaceSelect.addEventListener('change', (e) => eventHandlers.handleColorSpaceChange(e, sphereData)); visionSelect.addEventListener('change', (e) => eventHandlers.handleVisionChange(e, sphereData)); textAreaEditing.addEventListener('input', eventHandlers.handleTextareaInput); textAreaEditing.addEventListener('keydown', eventHandlers.handleTextareaKeydown); textAreaEditing.addEventListener('copy', eventHandlers.handleTextareaCopy); textAreaEditing.addEventListener('cut', eventHandlers.handleTextareaCopy); textAreaEditing.addEventListener('mousemove', eventHandlers.handleTextHover); textAreaEditing.addEventListener('mouseleave', eventHandlers.handleTextLeave); rightPanel.addEventListener('scroll', () => { state.spanRects = null; }); renderer.domElement.addEventListener('mousedown', mouseHandlers.onMouseDown, false); renderer.domElement.addEventListener('mousemove', mouseHandlers.onMouseMove, false); renderer.domElement.addEventListener('mouseup', mouseHandlers.onMouseUp, false); renderer.domElement.addEventListener('contextmenu', mouseHandlers.onContextMenu, false); let resizeObserver = null; if (typeof ResizeObserver !== 'undefined') { resizeObserver = new ResizeObserver(() => { if (textAreaEditing.clientWidth !== state.lastTextWidth) { ui.fitText(textAreaEditing, textAreaHighlight); } }); resizeObserver.observe(container); } if (document.fonts && document.fonts.ready) { document.fonts.ready.then(() => ui.fitText(textAreaEditing, textAreaHighlight)); } const initialParsed = utils.parse(savedPaletteText); ui.updatePre(textAreaHighlight, utils.formatPre(savedPaletteText, initialParsed)); ui.fitText(textAreaEditing, textAreaHighlight); visualization.updateColorPalette(initialParsed, scene, sphereData); container.value = initialParsed.map(c => c.fillColor); const render = function() { state.animationFrameId = requestAnimationFrame(render); if (state.needsTextFit && textAreaEditing.isConnected) { ui.fitText(textAreaEditing, textAreaHighlight); } ui.resize(threejsContainer, renderer, camera); controls.update(); if (state.isTransitioning) { animation.updateTransitions(renderer, scene, camera); } else { if (state.needsRGBUpdate) { visualization.updateRGBLines(lineList, pairs); } } renderer.render(scene, camera); }; visualization.updateRGBLines(lineList, pairs); render(); const onWindowResize = () => { state.spanRects = null; ui.fitText(textAreaEditing, textAreaHighlight); }; window.addEventListener('resize', onWindowResize); container.dispose = () => { if (state.animationFrameId) { cancelAnimationFrame(state.animationFrameId); } if (state.updateTimeoutId) { clearTimeout(state.updateTimeoutId); } warmup.cancel(); window.removeEventListener('resize', onWindowResize); if (resizeObserver) { resizeObserver.disconnect(); } renderer.dispose(); state.colorMeshes.forEach(item => { item.mesh.geometry.dispose(); item.mesh.material.dispose(); }); lineList.forEach(line => { line.geometry.dispose(); line.material.dispose(); }); }; yield container; }32:T4ab3,viewof HyABList = { let padding = ({left:75, right:0, top:35, bottom:15}) let cellSize = 50 let tablePadding = 20 // Create shape functions const shapes = { 'Square diagonal': (svg, data, cellSize, tablePadding, padding) => { let line = d3 .line() .x((d) => d[0]+padding.left) .y((d) => d[1]+padding.top) return data.map((d, i) => { if (i % 2 === 0) { // First color (bottom-left triangle) return { element: 'path', attrs: { fill: d.color, stroke: d.color, d: line([ [(i/2)*(cellSize+tablePadding), 0], [(i/2)*(cellSize+tablePadding), cellSize], [(i/2)*(cellSize+tablePadding)+cellSize, cellSize], [(i/2)*(cellSize+tablePadding), 0] ]) } } } else { // Second color (top-right triangle) return { element: 'path', attrs: { fill: d.color, stroke: d.color, d: line([ [(Math.floor(i/2))*(cellSize+tablePadding), 0], [(Math.floor(i/2))*(cellSize+tablePadding)+cellSize, 0], [(Math.floor(i/2))*(cellSize+tablePadding)+cellSize, cellSize], [(Math.floor(i/2))*(cellSize+tablePadding), 0] ]) } } } }) }, 'Intersecting lines': (svg, data, cellSize, tablePadding, padding) => { return data.map((d, i) => { const baseX = Math.floor(i/2)*(cellSize+tablePadding) + padding.left const baseY = padding.top const strokeWidth = 3 const lineMargin = 10 if (i % 2 === 0) { // First color diagonal line return { element: 'line', attrs: { x1: baseX + lineMargin, y1: baseY + lineMargin, x2: baseX + cellSize - lineMargin, y2: baseY + cellSize - lineMargin, stroke: d.color, 'stroke-width': strokeWidth, 'stroke-linecap': 'round' } } } else { // Second color diagonal line return { element: 'line', attrs: { x1: baseX + cellSize - lineMargin, y1: baseY + lineMargin, x2: baseX + lineMargin, y2: baseY + cellSize - lineMargin, stroke: d.color, 'stroke-width': strokeWidth, 'stroke-linecap': 'round' } } } }) }, 'Two Dots': (svg, data, cellSize, tablePadding, padding) => { const circleRadius = 10 const gap = 10 const offset = (gap + 2 * circleRadius) / 2 / Math.sqrt(2) return data.map((d, i) => { const baseX = Math.floor(i/2)*(cellSize+tablePadding) + padding.left + cellSize/2 const baseY = padding.top + cellSize/2 if (i % 2 === 0) { // First color circle (bottom-left) return { element: 'circle', attrs: { cx: baseX - offset, cy: baseY + offset, r: circleRadius, fill: d.color } } } else { // Second color circle (top-right) return { element: 'circle', attrs: { cx: baseX + offset, cy: baseY - offset, r: circleRadius, fill: d.color } } } }) }, 'Text': (svg, data, cellSize, tablePadding, padding) => { const elements = [] for (let i = 0; i < data.length; i += 2) { const baseX = (i/2)*(cellSize+tablePadding) + padding.left const baseY = padding.top const rectHeight = cellSize/2 - 2 const rectWidth = cellSize const cornerRadius = rectHeight/2 // Top pill elements.push({ element: 'rect', attrs: { x: baseX, y: baseY, width: rectWidth, height: rectHeight, rx: cornerRadius, ry: cornerRadius, fill: data[i].color } }) // Top text elements.push({ element: 'text', attrs: { x: baseX + rectWidth/2, y: baseY + rectHeight/2, fill: data[i+1].color, 'text-anchor': 'middle', 'dominant-baseline': 'middle', 'font-family': 'sans-serif', 'font-size': '12px', 'font-weight': 'bold' }, text: 'Test' }) // Bottom pill elements.push({ element: 'rect', attrs: { x: baseX, y: baseY + cellSize/2 + 2, width: rectWidth, height: rectHeight, rx: cornerRadius, ry: cornerRadius, fill: data[i+1].color } }) // Bottom text elements.push({ element: 'text', attrs: { x: baseX + rectWidth/2, y: baseY + cellSize/2 + 2 + rectHeight/2, fill: data[i].color, 'text-anchor': 'middle', 'dominant-baseline': 'middle', 'font-family': 'sans-serif', 'font-size': '12px', 'font-weight': 'bold' }, text: 'Test' }) } return elements }, 'Gradient square': (svg, data, cellSize, tablePadding, padding) => { const elements = [] const defs = svg.append('defs') for (let i = 0; i < data.length; i += 2) { const baseX = (i/2)*(cellSize+tablePadding) + padding.left const baseY = padding.top const gradientId = `gradient-${i}` const reverseGradientId = `gradient-reverse-${i}` // Create gradient const gradient = defs.append('linearGradient') .attr('id', gradientId) .attr('x1', '0%').attr('y1', '100%') .attr('x2', '100%').attr('y2', '0%') gradient.append('stop') .attr('offset', '0%') .attr('style', `stop-color:${data[i].color}`) gradient.append('stop') .attr('offset', '100%') .attr('style', `stop-color:${data[i+1].color}`) // Create reverse gradient const reverseGradient = defs.append('linearGradient') .attr('id', reverseGradientId) .attr('x1', '100%').attr('y1', '0%') .attr('x2', '0%').attr('y2', '100%') reverseGradient.append('stop') .attr('offset', '0%') .attr('style', `stop-color:${data[i].color}`) reverseGradient.append('stop') .attr('offset', '100%') .attr('style', `stop-color:${data[i+1].color}`) // Outer square elements.push({ element: 'rect', attrs: { x: baseX, y: baseY, width: cellSize, height: cellSize, fill: `url(#${gradientId})` } }) // Inner square const innerSize = cellSize * 0.6 const innerOffset = (cellSize - innerSize) / 2 elements.push({ element: 'rect', attrs: { x: baseX + innerOffset, y: baseY + innerOffset, width: innerSize, height: innerSize, fill: `url(#${reverseGradientId})` } }) } return elements }, 'Side by side bars': (svg, data, cellSize, tablePadding, padding) => { return data.map((d, i) => { const baseX = Math.floor(i/2)*(cellSize+tablePadding) + padding.left const baseY = padding.top const barWidth = cellSize/2 - 2 if (i % 2 === 0) { // First color bar return { element: 'rect', attrs: { x: baseX, y: baseY, width: barWidth, height: cellSize, fill: d.color } } } else { // Second color bar return { element: 'rect', attrs: { x: baseX + cellSize/2 + 2, y: baseY, width: barWidth, height: cellSize, fill: d.color } } } }) }, 'Concentric circles': (svg, data, cellSize, tablePadding, padding) => { const elements = [] for (let i = 0; i < data.length; i += 2) { const centerX = (i/2)*(cellSize+tablePadding) + padding.left + cellSize/2 const centerY = padding.top + cellSize/2 // Outer circle elements.push({ element: 'circle', attrs: { cx: centerX, cy: centerY, r: cellSize/2, fill: data[i].color } }) // Middle circle elements.push({ element: 'circle', attrs: { cx: centerX, cy: centerY, r: cellSize/3, fill: data[i+1].color } }) // Inner circle (same color as outer) elements.push({ element: 'circle', attrs: { cx: centerX, cy: centerY, r: cellSize/6, fill: data[i].color } }) } return elements }, 'Scatter': (svg, data, cellSize, tablePadding, padding) => { const elements = [] const numPoints = 30 const pointRadius = 2 const gap = 10 const offset = (gap + 20) / 2 / Math.sqrt(2) // Similar offset to Two Circles // Box-Muller transform for normal distribution function gaussianRandom(mean = 0, stdev = 1) { let u = 0, v = 0; while(u === 0) u = Math.random(); // Converting [0,1) to (0,1) while(v === 0) v = Math.random(); return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v) * stdev + mean; } for (let i = 0; i < data.length; i += 2) { const baseX = (i/2)*(cellSize+tablePadding) + padding.left + cellSize/2 const baseY = padding.top + cellSize/2 // First color scatter (bottom-left) const center1X = baseX - offset const center1Y = baseY + offset for (let j = 0; j < numPoints; j++) { elements.push({ element: 'circle', attrs: { cx: gaussianRandom(center1X, 8), cy: gaussianRandom(center1Y, 8), r: pointRadius, fill: data[i].color, opacity: 1 } }) } // Second color scatter (top-right) const center2X = baseX + offset const center2Y = baseY - offset for (let j = 0; j < numPoints; j++) { elements.push({ element: 'circle', attrs: { cx: gaussianRandom(center2X, 8), cy: gaussianRandom(center2Y, 8), r: pointRadius, fill: data[i+1].color, opacity: 1 } }) } } return elements } } // Create metric select state let currentMetric = 'HyAB' // Create container const container = html`

Shape: Metric:

` const metricSelect = container.querySelector('#metricSelect') const shapeSelect = container.querySelector('#shapeSelect') const vizContainer = container.querySelector('#vizContainer') const scrollOverlay = container.querySelector('#scrollOverlay') const svgContainer = container.querySelector('#svgContainer') // Function to calculate color pairs with selected metric function calculateColorPairs(metric) { let list = [] let c1, c2 for(let i=0; i d3.lab(c2).l){ c1 = palette[j] c2 = palette[i] } let distance if (metric === 'HyAB') { distance = HyAB(c1, c2) } else if (metric === 'deltaE') { distance = chroma.deltaE(c1, c2) } else if (metric === 'contrastRatio') { // Calculate contrast ratio using chroma.js luminance const L1 = chroma(c1).luminance() const L2 = chroma(c2).luminance() // Ensure L1 is the lighter color (higher luminance) const lighter = Math.max(L1, L2) const darker = Math.min(L1, L2) // WCAG contrast ratio formula distance = (lighter + 0.05) / (darker + 0.05) } list.push({c1:c1, c2:c2, distance:distance}) }} list.sort((a, b) => (a.distance > b.distance) ? 1 : -1) // Create data arrays let data = [] let metricData = [] for(let i=0; i { if (shapeData.element === 'text' && shapeData.text) { const element = svg.append(shapeData.element) Object.entries(shapeData.attrs).forEach(([key, value]) => { element.attr(key, value) }) element.text(shapeData.text) } else { const element = svg.append(shapeData.element) Object.entries(shapeData.attrs).forEach(([key, value]) => { element.attr(key, value) }) } }) // Add metric text svg.selectAll('.metric-text') .data(metric) .enter() .append('text') .text(d => d.value) .attr('x', d => d.x) .attr('y', d => d.y) .style("font-size", "14px") .style("font-weight", "700") .attr("font-family", "sans-serif") .attr('text-anchor', 'middle') // Add color text svg.selectAll('.color-text') .data(data) .enter() .append('text') .text(d => d.color.substring(1)) .attr('x', d => d.x) .attr('y', d => d.y) .style("font-size", "12px") .attr("font-family", "sans-serif") .attr('text-anchor', 'middle') } // Initial render renderShapes('Square diagonal') // Set initial scroll overlay width scrollOverlay.style.width = w + 'px' // Metric change handler metricSelect.addEventListener('change', (e) => { currentMetric = e.target.value const result = calculateColorPairs(currentMetric) data = result.data metric = result.metric n = result.n w = padding.left + padding.right + cellSize*n + tablePadding*(n-1) renderShapes(shapeSelect.value) }) // Shape change handler shapeSelect.addEventListener('change', (e) => { renderShapes(e.target.value) }) // Drag scrolling let isDragging = false let startX = 0 let scrollLeft = 0 scrollOverlay.addEventListener('mousedown', (e) => { isDragging = true scrollOverlay.style.cursor = 'grabbing' startX = e.pageX - vizContainer.offsetLeft scrollLeft = vizContainer.scrollLeft e.preventDefault() }) scrollOverlay.addEventListener('mouseup', () => { isDragging = false scrollOverlay.style.cursor = 'grab' }) scrollOverlay.addEventListener('mouseleave', () => { isDragging = false scrollOverlay.style.cursor = 'grab' }) scrollOverlay.addEventListener('mousemove', (e) => { if (!isDragging) return e.preventDefault() const x = e.pageX - vizContainer.offsetLeft const walk = (x - startX) * 1.5 vizContainer.scrollLeft = scrollLeft - walk }) return container }33:Tb07,function createGeodesicSphere(subdivisions = 0) { // Create icosahedron vertices using golden ratio const t = (1 + Math.sqrt(5)) / 2; // Golden ratio // Create 12 vertices of icosahedron let vertices = [ [-1, t, 0], [ 1, t, 0], [-1, -t, 0], [ 1, -t, 0], [ 0, -1, t], [ 0, 1, t], [ 0, -1, -t], [ 0, 1, -t], [ t, 0, -1], [ t, 0, 1], [-t, 0, -1], [-t, 0, 1] ]; // Normalize vertices to unit sphere vertices = vertices.map(v => { const length = Math.sqrt(v[0]*v[0] + v[1]*v[1] + v[2]*v[2]); return [v[0]/length, v[1]/length, v[2]/length]; }); // Create 20 triangular faces of icosahedron // Each face is defined with vertices in CLOCKWISE order when viewed from outside (reversed) let faces = [ // 5 faces around point 0 [0, 5, 11], [0, 1, 5], [0, 7, 1], [0, 10, 7], [0, 11, 10], // 5 adjacent faces [1, 9, 5], [5, 4, 11], [11, 2, 10], [10, 6, 7], [7, 8, 1], // 5 faces around point 3 [3, 4, 9], [3, 2, 4], [3, 6, 2], [3, 8, 6], [3, 9, 8], // 5 adjacent faces [4, 5, 9], [2, 11, 4], [6, 10, 2], [8, 7, 6], [9, 1, 8] ]; // Subdivision function function subdivide() { const newFaces = []; const midpointCache = {}; // Get or create midpoint between two vertices function getMidpoint(v1, v2) { const key = v1 < v2 ? `${v1}-${v2}` : `${v2}-${v1}`; if (midpointCache[key] !== undefined) { return midpointCache[key]; } // Calculate midpoint const p1 = vertices[v1]; const p2 = vertices[v2]; const midpoint = [ (p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2, (p1[2] + p2[2]) / 2 ]; // Normalize to unit sphere const length = Math.sqrt(midpoint[0]**2 + midpoint[1]**2 + midpoint[2]**2); const normalized = [ midpoint[0] / length, midpoint[1] / length, midpoint[2] / length ]; // Add to vertices array const index = vertices.length; vertices.push(normalized); midpointCache[key] = index; return index; } // Subdivide each face into 4 triangles for (const face of faces) { const v0 = face[0]; const v1 = face[1]; const v2 = face[2]; // Get midpoints const m01 = getMidpoint(v0, v1); const m12 = getMidpoint(v1, v2); const m02 = getMidpoint(v0, v2); // Create 4 new triangles with CLOCKWISE winding order newFaces.push([v0, m02, m01]); newFaces.push([v1, m01, m12]); newFaces.push([v2, m12, m02]); newFaces.push([m01, m02, m12]); } faces = newFaces; } // Apply subdivisions for (let i = 0; i < subdivisions; i++) { subdivide(); } return { vertices: vertices, faces: faces }; }34:Tde3,style 35:T94b,function matrixInverse(matrix) { // Input validation if (!Array.isArray(matrix) || matrix.length === 0) { throw new Error("Input must be a non-empty array"); } const n = matrix.length; // Check if matrix is square for (let i = 0; i < n; i++) { if (!Array.isArray(matrix[i]) || matrix[i].length !== n) { throw new Error("Matrix must be square (n×n)"); } } // Create augmented matrix [A|I] where I is the identity matrix const augmented = []; for (let i = 0; i < n; i++) { augmented[i] = []; // Copy original matrix for (let j = 0; j < n; j++) { augmented[i][j] = matrix[i][j]; } // Add identity matrix for (let j = 0; j < n; j++) { augmented[i][n + j] = (i === j) ? 1 : 0; } } // Gaussian elimination with partial pivoting for (let i = 0; i < n; i++) { // Find pivot (largest absolute value in column i, from row i downward) let maxRow = i; for (let k = i + 1; k < n; k++) { if (Math.abs(augmented[k][i]) > Math.abs(augmented[maxRow][i])) { maxRow = k; } } // Check for singular matrix if (Math.abs(augmented[maxRow][i]) < 1e-12) { throw new Error("Matrix is singular and cannot be inverted"); } // Swap rows if needed if (maxRow !== i) { [augmented[i], augmented[maxRow]] = [augmented[maxRow], augmented[i]]; } // Scale pivot row to make diagonal element 1 const pivot = augmented[i][i]; for (let j = 0; j < 2 * n; j++) { augmented[i][j] /= pivot; } // Eliminate column i in all other rows for (let k = 0; k < n; k++) { if (k !== i) { const factor = augmented[k][i]; for (let j = 0; j < 2 * n; j++) { augmented[k][j] -= factor * augmented[i][j]; } } } } // Extract the inverse matrix from the right side of augmented matrix const inverse = []; for (let i = 0; i < n; i++) { inverse[i] = []; for (let j = 0; j < n; j++) { inverse[i][j] = augmented[i][n + j]; } } return inverse; } 36:T539,transformedMatrix = { const original = [[0,5000,0,0],[10000,0,0,-50],[0,0,5000,0],[0,0,0,1]] const pi = Math.PI let rx = 0; // Rotation around X-axis let ry = -.7; // Rotation around Y-axis let rz = 0; // Rotation around Z-axis let sx = 1; // Scale along X-axis let sy = 1; // Scale along Y-axis let sz = 1; // Scale along Z-axis let tx = 0; // Translation along X-axis let ty = -50; // Translation along Y-axis let tz = 0; // Translation along Z-axis const cos = (a) => Math.cos(a); const sin = (a) => Math.sin(a); let xRotate = [ [1, 0, 0, 0], [0, cos(rx), -sin(rx), 0], [0, sin(rx), cos(rx), 0], [0, 0, 0, 1] ]; let yRotate = [ [ cos(ry), 0, sin(ry), 0], [ 0, 1, 0, 0], [-sin(ry), 0, cos(ry), 0], [ 0, 0, 0, 1] ]; let zRotate = [ [cos(rz), -sin(rz), 0, 0], [sin(rz), cos(rz), 0, 0], [ 0, 0, 1, 0], [ 0, 0, 0, 1] ]; let scale = [ [sx, 0, 0, 0], [ 0, sy, 0, 0], [ 0, 0, sz, 0], [ 0, 0, 0, 1] ]; let translate = [ [1, 0, 0, tx], [0, 1, 0, ty], [0, 0, 1, tz], [0, 0, 0, 1] ]; return md`T = ${JSON.stringify( matrixMultiply( yRotate, original ) )}` }37:T422,hexToXYZMatrices = ({ rgb: [[0.14139218226572894,-0.17383364780006877,0.03244146553433985,0],[0.13071895424836602,0.13071895424836602,0.13071895424836602,-50],[0.11909299221074136,0.06290272563327017,-0.18199571784401153,0],[0,0,0,1]], xyz: [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1] ], lab: [[0,.5,0,0],[1,0,0,-50],[0,0,.5,0],[0,0,0,1]], lch: [[0,1,0,0],[1,0,0,-50],[0,0,1,0],[0,0,0,1]], oklab: [ [0, 200, 0, 0], [100, 0, 0, -50], [0, 0, 200, 0], [0, 0, 0, 1] ], jab: [[0,1,0,0],[1,0,0,-50],[0,0,1,0],[0,0,0,1]], jch: [[0,.5,0,0],[1,0,0,-50],[0,0,.5,0],[0,0,0,1]], hsv: [[0,3824.2109364224425,-3221.088436188455,0],[10000,0,0,-50],[0,3221.088436188455,3824.2109364224425,0],[0,0,0,1]], hcl: [[0,3824.2109364224425,-3221.088436188455,0],[10000,0,0,-50],[0,3221.088436188455,3824.2109364224425,0],[0,0,0,1]], hsl: [[0,3824.2109364224425,-3221.088436188455,0],[10000,0,0,-50],[0,3221.088436188455,3824.2109364224425,0],[0,0,0,1]], })38:T19d4,function hexToXYZ(hex, colorSpace = 'lab', colorBlindType = 'normal') { // Apply color blindness transformation const rgbObj = colorblind[colorBlindType](hex, true); // Helper function to handle decimal RGB values for d3 color spaces const averageDecimal = (rgbObj, colorSpaceFunc, extractCoords) => { const r = rgbObj.R; const g = rgbObj.G; const b = rgbObj.B; // Check which values are decimals const rIsDecimal = r % 1 !== 0; const gIsDecimal = g % 1 !== 0; const bIsDecimal = b % 1 !== 0; // If no decimals, just calculate once if (!rIsDecimal && !gIsDecimal && !bIsDecimal) { const color = chroma.rgb(r, g, b); const d3Color = colorSpaceFunc(d3.color(color.hex())); return extractCoords(d3Color); } // Calculate all combinations const rValues = rIsDecimal ? [Math.floor(r), Math.ceil(r)] : [r]; const gValues = gIsDecimal ? [Math.floor(g), Math.ceil(g)] : [g]; const bValues = bIsDecimal ? [Math.floor(b), Math.ceil(b)] : [b]; let totalX = 0, totalY = 0, totalZ = 0; // Calculate weight for each combination for (let ri = 0; ri < rValues.length; ri++) { for (let gi = 0; gi < gValues.length; gi++) { for (let bi = 0; bi < bValues.length; bi++) { const rVal = rValues[ri]; const gVal = gValues[gi]; const bVal = bValues[bi]; // Calculate weight based on how close we are to each value let weight = 1; if (rIsDecimal) { const rWeight = (ri === 0) ? (1 - (r % 1)) : (r % 1); weight *= rWeight; } if (gIsDecimal) { const gWeight = (gi === 0) ? (1 - (g % 1)) : (g % 1); weight *= gWeight; } if (bIsDecimal) { const bWeight = (bi === 0) ? (1 - (b % 1)) : (b % 1); weight *= bWeight; } // Calculate color and extract coordinates const color = chroma.rgb(rVal, gVal, bVal); const d3Color = colorSpaceFunc(d3.color(color.hex())); const coords = extractCoords(d3Color); // Add weighted coordinates totalX += coords.x * weight; totalY += coords.y * weight; totalZ += coords.z * weight; } } } return { x: totalX, y: totalY, z: totalZ }; }; // Create color object from the transformed RGB values const color = chroma.rgb(rgbObj.R, rgbObj.G, rgbObj.B); const cylindricalToCartesian = (l, c, h) => { const hRad = (h * Math.PI) / 180; return { x: l, y: c * Math.cos(hRad), z: c * Math.sin(hRad) }; }; let coordinates; switch(colorSpace) { case 'rgb': // Use the transformed RGB values directly coordinates = { x: rgbObj.R, y: rgbObj.G, z: rgbObj.B }; break; case 'lab': const lab = color.lab(); coordinates = { x: lab[0], y: lab[1], z: lab[2] }; break; case 'oklab': const oklab = color.oklab(); coordinates = { x: oklab[0], y: oklab[1], z: oklab[2] }; break; case 'oklch': const oklch = color.oklch(); coordinates = cylindricalToCartesian(oklch[0], oklch[1], oklch[2]); break; case 'hsl': const hsl = color.hsl(); // hsl[0] = hue (0-360), hsl[1] = saturation (0-100), hsl[2] = lightness (0-100) // Normalize saturation and lightness to 0-1 range let hslS = hsl[1] / 100; const hslL = hsl[2] / 100; let hslH = hsl[0]; // Handle NaN hue for grayscale colors if (isNaN(hslH) || hslS === 0) { hslH = 0; } // For pure black (L=0) or pure white (L=1), ensure saturation is 0 to center on axis if (hslL === 0 || hslL === 1) { hslS = 0; } coordinates = cylindricalToCartesian(hslL, hslS, hslH); break; case 'hsv': const hsv = color.hsv(); // hsv[0] = hue (0-360), hsv[1] = saturation (0-100), hsv[2] = value (0-100) // Normalize saturation and value to 0-1 range let hsvS = hsv[1] / 100; const hsvV = hsv[2] / 100; let hsvH = hsv[0]; // Handle NaN hue for grayscale colors if (isNaN(hsvH) || hsvS === 0) { hsvH = 0; } // For pure black (V=0), ensure saturation is 0 to center on axis // For pure white (V=1, S=0), it's already centered if (hsvV === 0) { hsvS = 0; } coordinates = cylindricalToCartesian(hsvV, hsvS, hsvH); break; case 'jab': if (typeof d3 !== 'undefined' && d3.jab) { coordinates = averageDecimal( rgbObj, d3.jab, (jabColor) => ({ x: jabColor.J, y: jabColor.a, z: jabColor.b }) ); } else { throw new Error('d3-cam02 library required for Jab color space'); } break; case 'jch': if (typeof d3 !== 'undefined' && d3.jch) { coordinates = averageDecimal( rgbObj, d3.jch, (jchColor) => cylindricalToCartesian(jchColor.J, jchColor.C, jchColor.h) ); } else { throw new Error('d3-cam02 library required for JCh color space'); } break; default: throw new Error(`Unknown color space: ${colorSpace}`); } // Apply affine transformation matrix const matrix = hexToXYZMatrices[colorSpace]; return applyAffineTransform(coordinates, matrix); }39:T129a,function xyzToHex({x, y, z}, colorSpace = 'lab') { // Apply inverse affine transformation matrix const matrix = xyzToHexMatrices[colorSpace]; const transformed = applyAffineTransform({x, y, z}, matrix); x = transformed.x; y = transformed.y; z = transformed.z; let color; const cartesianToCylindrical = (x, y, z) => { const l = x; const c = Math.sqrt(y * y + z * z); let h = (Math.atan2(z, y) * 180) / Math.PI; if (h < 0) h += 360; return { l, c, h }; }; try { switch(colorSpace) { case 'rgb': color = chroma.rgb( Math.max(0, Math.min(255, x)), Math.max(0, Math.min(255, y)), Math.max(0, Math.min(255, z)) ); break; case 'xyz': const xn = x / 100; const yn = y / 100; const zn = z / 100; let r = xn * 3.2404542 + yn * -1.5371385 + zn * -0.4985314; let g = xn * -0.9692660 + yn * 1.8760108 + zn * 0.0415560; let b = xn * 0.0556434 + yn * -0.2040259 + zn * 1.0572252; r = r > 0.0031308 ? 1.055 * Math.pow(r, 1 / 2.4) - 0.055 : 12.92 * r; g = g > 0.0031308 ? 1.055 * Math.pow(g, 1 / 2.4) - 0.055 : 12.92 * g; b = b > 0.0031308 ? 1.055 * Math.pow(b, 1 / 2.4) - 0.055 : 12.92 * b; color = chroma.rgb( Math.max(0, Math.min(255, r * 255)), Math.max(0, Math.min(255, g * 255)), Math.max(0, Math.min(255, b * 255)) ); break; case 'lab': color = chroma.lab(x, y, z); break; case 'oklab': color = chroma.oklab(x, y, z); break; case 'oklch': const oklchCyl = cartesianToCylindrical(x, y, z); color = chroma.oklch(oklchCyl.l, oklchCyl.c, oklchCyl.h); break; case 'hsl': const hslCyl = cartesianToCylindrical(x, y, z); // Convert back to HSL percentages // hslCyl.l = lightness (0-1), hslCyl.c = saturation (0-1), hslCyl.h = hue (0-360) const hslL = Math.max(0, Math.min(1, hslCyl.l)) * 100; const hslS = Math.max(0, Math.min(1, hslCyl.c)) * 100; let hslH = hslCyl.h; // Handle edge cases for black and white if (hslL === 0 || hslL === 100) { // For pure black or white, hue and saturation are irrelevant hslH = 0; } color = chroma.hsl(hslH, hslS, hslL); break; case 'hsv': const hsvCyl = cartesianToCylindrical(x, y, z); // Convert back to HSV percentages // hsvCyl.l = value (0-1), hsvCyl.c = saturation (0-1), hsvCyl.h = hue (0-360) const hsvV = Math.max(0, Math.min(1, hsvCyl.l)) * 100; const hsvS = Math.max(0, Math.min(1, hsvCyl.c)) * 100; let hsvH = hsvCyl.h; // Handle edge case for black if (hsvV === 0) { // For pure black, hue and saturation are irrelevant hsvH = 0; } color = chroma.hsv(hsvH, hsvS, hsvV); break; case 'jab': if (typeof d3 !== 'undefined' && d3.jab) { const jabColor = d3.jab(x, y, z); const rgbFromJab = d3.rgb(jabColor); color = chroma.rgb(rgbFromJab.r, rgbFromJab.g, rgbFromJab.b); } else { throw new Error('d3-cam02 library required for Jab color space'); } break; case 'jch': if (typeof d3 !== 'undefined' && d3.jch) { const jchCyl = cartesianToCylindrical(x, y, z); const jchColor = d3.jch(jchCyl.l, jchCyl.c, jchCyl.h); const rgbFromJch = d3.rgb(jchColor); color = chroma.rgb(rgbFromJch.r, rgbFromJch.g, rgbFromJch.b); } else { throw new Error('d3-cam02 library required for JCh color space'); } break; default: throw new Error(`Unknown color space: ${colorSpace}`); } return color.hex(); } catch (error) { console.error('Error converting coordinates to hex:', error); return null; } }3a:T420,matrixXYZtoRGB = ({ rgb: [[0.14139218226572894,-0.17383364780006877,0.03244146553433985,0],[0.13071895424836602,0.13071895424836602,0.13071895424836602,-50],[0.11909299221074136,0.06290272563327017,-0.18199571784401153,0],[0,0,0,1]], xyz: [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1] ], lab: [[0,.5,0,0],[1,0,0,-50],[0,0,.5,0],[0,0,0,1]], lch: [[0,1,0,0],[1,0,0,-50],[0,0,1,0],[0,0,0,1]], oklab: [ [0, 200, 0, 0], [100, 0, 0, -50], [0, 0, 200, 0], [0, 0, 0, 1] ], jab: [[0,1,0,0],[1,0,0,-50],[0,0,1,0],[0,0,0,1]], jch: [[0,.5,0,0],[1,0,0,-50],[0,0,.5,0],[0,0,0,1]], hsv: [[0,3824.2109364224425,-3221.088436188455,0],[10000,0,0,-50],[0,3221.088436188455,3824.2109364224425,0],[0,0,0,1]], hcl: [[0,3824.2109364224425,-3221.088436188455,0],[10000,0,0,-50],[0,3221.088436188455,3824.2109364224425,0],[0,0,0,1]], hsl: [[0,3824.2109364224425,-3221.088436188455,0],[10000,0,0,-50],[0,3221.088436188455,3824.2109364224425,0],[0,0,0,1]], })3b:T13ac,function XYZtoRGB({x, y, z}, colorSpace = 'lab') { // Apply inverse affine transformation matrix const matrix = xyzToHexMatrices[colorSpace]; const transformed = applyAffineTransform({x, y, z}, matrix); x = transformed.x; y = transformed.y; z = transformed.z; let color; const cartesianToCylindrical = (x, y, z) => { const l = x; const c = Math.sqrt(y * y + z * z); let h = (Math.atan2(z, y) * 180) / Math.PI; if (h < 0) h += 360; return { l, c, h }; }; try { switch(colorSpace) { case 'rgb': // Return continuous RGB values directly return { R: x, G: y, B: z }; case 'xyz': const xn = x / 100; const yn = y / 100; const zn = z / 100; let r = xn * 3.2404542 + yn * -1.5371385 + zn * -0.4985314; let g = xn * -0.9692660 + yn * 1.8760108 + zn * 0.0415560; let b = xn * 0.0556434 + yn * -0.2040259 + zn * 1.0572252; r = r > 0.0031308 ? 1.055 * Math.pow(r, 1 / 2.4) - 0.055 : 12.92 * r; g = g > 0.0031308 ? 1.055 * Math.pow(g, 1 / 2.4) - 0.055 : 12.92 * g; b = b > 0.0031308 ? 1.055 * Math.pow(b, 1 / 2.4) - 0.055 : 12.92 * b; return { R: r * 255, G: g * 255, B: b * 255 }; case 'lab': color = chroma.lab(x, y, z); break; case 'oklab': color = chroma.oklab(x, y, z); break; case 'oklch': const oklchCyl = cartesianToCylindrical(x, y, z); color = chroma.oklch(oklchCyl.l, oklchCyl.c, oklchCyl.h); break; case 'hsl': const hslCyl = cartesianToCylindrical(x, y, z); // Convert back to HSL percentages // hslCyl.l = lightness (0-1), hslCyl.c = saturation (0-1), hslCyl.h = hue (0-360) const hslL = Math.max(0, Math.min(1, hslCyl.l)) * 100; const hslS = Math.max(0, Math.min(1, hslCyl.c)) * 100; let hslH = hslCyl.h; // Handle edge cases for black and white if (hslL === 0 || hslL === 100) { // For pure black or white, hue and saturation are irrelevant hslH = 0; } color = chroma.hsl(hslH, hslS, hslL); break; case 'hsv': const hsvCyl = cartesianToCylindrical(x, y, z); // Convert back to HSV percentages // hsvCyl.l = value (0-1), hsvCyl.c = saturation (0-1), hsvCyl.h = hue (0-360) const hsvV = Math.max(0, Math.min(1, hsvCyl.l)) * 100; const hsvS = Math.max(0, Math.min(1, hsvCyl.c)) * 100; let hsvH = hsvCyl.h; // Handle edge case for black if (hsvV === 0) { // For pure black, hue and saturation are irrelevant hsvH = 0; } color = chroma.hsv(hsvH, hsvS, hsvV); break; case 'jab': if (typeof d3 !== 'undefined' && d3.jab) { const jabColor = d3.jab(x, y, z); const rgbFromJab = d3.rgb(jabColor); return { R: rgbFromJab.r, G: rgbFromJab.g, B: rgbFromJab.b }; } else { throw new Error('d3-cam02 library required for Jab color space'); } break; case 'jch': if (typeof d3 !== 'undefined' && d3.jch) { const jchCyl = cartesianToCylindrical(x, y, z); const jchColor = d3.jch(jchCyl.l, jchCyl.c, jchCyl.h); const rgbFromJch = d3.rgb(jchColor); return { R: rgbFromJch.r, G: rgbFromJch.g, B: rgbFromJch.b }; } else { throw new Error('d3-cam02 library required for JCh color space'); } break; default: throw new Error(`Unknown color space: ${colorSpace}`); } // For color spaces that use chroma.js, extract gl values, and then multiply to if (color) { const gl = color.gl(); return { r: gl[0]*255, g: gl[1]*255, b: gl[2]*255 }; } } catch (error) { console.error('Error converting coordinates to RGB:', error); return null; } }3c:T420,matrixRGBtoXYZ = ({ rgb: [[0.14139218226572894,-0.17383364780006877,0.03244146553433985,0],[0.13071895424836602,0.13071895424836602,0.13071895424836602,-50],[0.11909299221074136,0.06290272563327017,-0.18199571784401153,0],[0,0,0,1]], xyz: [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1] ], lab: [[0,.5,0,0],[1,0,0,-50],[0,0,.5,0],[0,0,0,1]], lch: [[0,1,0,0],[1,0,0,-50],[0,0,1,0],[0,0,0,1]], oklab: [ [0, 200, 0, 0], [100, 0, 0, -50], [0, 0, 200, 0], [0, 0, 0, 1] ], jab: [[0,1,0,0],[1,0,0,-50],[0,0,1,0],[0,0,0,1]], jch: [[0,.5,0,0],[1,0,0,-50],[0,0,.5,0],[0,0,0,1]], hsv: [[0,3824.2109364224425,-3221.088436188455,0],[10000,0,0,-50],[0,3221.088436188455,3824.2109364224425,0],[0,0,0,1]], hcl: [[0,3824.2109364224425,-3221.088436188455,0],[10000,0,0,-50],[0,3221.088436188455,3824.2109364224425,0],[0,0,0,1]], hsl: [[0,3824.2109364224425,-3221.088436188455,0],[10000,0,0,-50],[0,3221.088436188455,3824.2109364224425,0],[0,0,0,1]], })3d:T19f9,function RGBtoXYZ(rgbObj, colorSpace = 'lab', colorBlindType = 'normal') { // Normalize RGB input - handle both lowercase and uppercase property names const rgb = { R: rgbObj.R !== undefined ? rgbObj.R : rgbObj.r, G: rgbObj.G !== undefined ? rgbObj.G : rgbObj.g, B: rgbObj.B !== undefined ? rgbObj.B : rgbObj.b }; // Validate RGB values if (rgb.R === undefined || rgb.G === undefined || rgb.B === undefined) { throw new Error('Invalid RGB object: must contain r,g,b or R,G,B properties'); } // Ensure RGB values are in 0-255 range ['R', 'G', 'B'].forEach(channel => { if (rgb[channel] < 0 || rgb[channel] > 255) { throw new Error(`RGB ${channel} value must be between 0 and 255`); } }); // Apply color blindness transformation if available let transformedRGB = rgb; if (typeof colorblind !== 'undefined' && colorBlindType !== 'normal') { if (typeof colorblind[colorBlindType] === 'function') { transformedRGB = colorblind[colorBlindType](rgb, true); } else { console.warn(`Color blind type '${colorBlindType}' not found, using normal vision`); } } // Create color object from the transformed RGB values if (typeof chroma === 'undefined') { throw new Error('Chroma.js library is required for color space conversions'); } const color = chroma.rgb(transformedRGB.R, transformedRGB.G, transformedRGB.B); // Helper function to convert cylindrical to Cartesian coordinates const cylindricalToCartesian = (l, c, h) => { const hRad = (h * Math.PI) / 180; return { x: l, y: c * Math.cos(hRad), z: c * Math.sin(hRad) }; }; let coordinates; switch(colorSpace) { case 'rgb': // Normalize RGB values to 0-1 range for consistency with other color spaces coordinates = { x: transformedRGB.R / 255, y: transformedRGB.G / 255, z: transformedRGB.B / 255 }; break; case 'lab': const lab = color.lab(); // L*a*b* values: L* (0-100), a* and b* (typically -128 to 127) coordinates = { x: lab[0] / 100, // Normalize L* to 0-1 y: lab[1] / 128, // Normalize a* to roughly -1 to 1 z: lab[2] / 128 // Normalize b* to roughly -1 to 1 }; break; case 'oklab': const oklab = color.oklab(); // OKLab values are already in a good range coordinates = { x: oklab[0], y: oklab[1], z: oklab[2] }; break; case 'oklch': const oklch = color.oklch(); // Convert from cylindrical (L, C, H) to Cartesian coordinates = cylindricalToCartesian(oklch[0], oklch[1], oklch[2]); break; case 'hsl': const hsl = color.hsl(); // hsl[0] = hue (0-360), hsl[1] = saturation (0-100), hsl[2] = lightness (0-100) let hslH = hsl[0]; let hslS = hsl[1] / 100; // Normalize to 0-1 const hslL = hsl[2] / 100; // Normalize to 0-1 // Handle edge cases for grayscale colors if (isNaN(hslH) || hslS === 0) { hslH = 0; // Default hue for grayscale hslS = 0; // No saturation for grayscale } // For pure black or white, ensure saturation is 0 if (hslL === 0 || hslL === 1) { hslS = 0; } // Convert cylindrical HSL to Cartesian coordinates coordinates = cylindricalToCartesian(hslL, hslS, hslH); break; case 'hsv': const hsv = color.hsv(); // hsv[0] = hue (0-360), hsv[1] = saturation (0-100), hsv[2] = value (0-100) let hsvH = hsv[0]; let hsvS = hsv[1] / 100; // Normalize to 0-1 const hsvV = hsv[2] / 100; // Normalize to 0-1 // Handle edge cases for grayscale colors if (isNaN(hsvH) || hsvS === 0) { hsvH = 0; // Default hue for grayscale hsvS = 0; // No saturation for grayscale } // For pure black, ensure saturation is 0 if (hsvV === 0) { hsvS = 0; } // Convert cylindrical HSV to Cartesian coordinates coordinates = cylindricalToCartesian(hsvV, hsvS, hsvH); break; case 'jab': if (typeof d3 !== 'undefined' && d3.jab && d3.rgb) { const d3Color = d3.rgb(transformedRGB.R, transformedRGB.G, transformedRGB.B); const jabColor = d3.jab(d3Color); coordinates = { x: jabColor.J / 100, // Normalize J to 0-1 y: jabColor.a / 100, // Normalize a z: jabColor.b / 100 // Normalize b }; } else { throw new Error('d3-cam02 library required for Jab color space'); } break; case 'jch': if (typeof d3 !== 'undefined' && d3.jch && d3.rgb) { const d3Color = d3.rgb(transformedRGB.R, transformedRGB.G, transformedRGB.B); const jchColor = d3.jch(d3Color); // Convert cylindrical JCh to Cartesian coordinates = cylindricalToCartesian( jchColor.J / 100, // Normalize J to 0-1 jchColor.C / 100, // Normalize C jchColor.h // h is already in degrees ); } else { throw new Error('d3-cam02 library required for JCh color space'); } break; default: throw new Error(`Unknown color space: ${colorSpace}`); } // Apply affine transformation matrix if available if (typeof matrixRGBtoXYZ !== 'undefined' && matrixRGBtoXYZ[colorSpace]) { if (typeof applyAffineTransform === 'function') { return applyAffineTransform(coordinates, matrixRGBtoXYZ[colorSpace]); } else { console.warn('applyAffineTransform function not found, returning raw coordinates'); } } return coordinates; }3e:[] 2f:{"id":"ef1d08dd03704d74","slug":null,"title":"3D Color Picker","thumbnail":"09700a2b0113d944759fa6f0d96170be138dfcf233ff0b36aef1fe277487644d","access_level":"public","create_time":"$D2025-06-11T20:29:21.540Z","update_time":"$D2026-09-17T13:38:22.028Z","view_time":null,"first_public_time":"$D2025-06-16T04:58:34.989Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":1041,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Color Picker","cells":[{"id":0,"value":"# 3D Color Picker\n## Intuitively space colors using perceptual distance","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"**Left Click Drag**: lightness + saturation
\n**Right Click Drag**: hue + saturation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"tex.block`HyAB = |\\Delta L ^*| + \\sqrt{ (a^*_1 - a^*_2)^2 + (b^*_1 - b^*_2)^2 }`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"HyAB is better than ΔE for measuring perceptual different when ΔE > 5 ([source](http://markfairchild.org/PDFs/PAP40.pdf))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":813,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"## Function and Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":815,"value":"palette = color3D","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"function HyAB (c1, c2){\n c1 = d3.lab(c1)\n c2 = d3.lab(c2)\n return (\n Math.abs(c1.l-c2.l)\n + Math.sqrt(\n (c1.a-c2.a)**2\n + (c1.b-c2.b)**2\n )\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"### Matrix functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"function matrixMultiply(A, B) {\n const n = A.length;\n const m = B[0].length;\n const result = [];\n \n for (let i = 0; i < n; i++) {\n result[i] = [];\n for (let j = 0; j < m; j++) {\n result[i][j] = 0;\n for (let k = 0; k < A[0].length; k++) {\n result[i][j] += A[i][k] * B[k][j];\n }\n }\n }\n \n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"function applyAffineTransform(point, matrix) {\n const [x, y, z] = [point.x, point.y, point.z];\n const w = 1; // Homogeneous coordinate\n \n return {\n x: matrix[0][0] * x + matrix[0][1] * y + matrix[0][2] * z + matrix[0][3] * w,\n y: matrix[1][0] * x + matrix[1][1] * y + matrix[1][2] * z + matrix[1][3] * w,\n z: matrix[2][0] * x + matrix[2][1] * y + matrix[2][2] * z + matrix[2][3] * w\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"----------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"### Convert between hex color and xyz coordinates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"xyzToHexMatrices = {\n function invertAllTransforms(transformObject) {\n const inverted = {};\n \n for (const [key, transform] of Object.entries(transformObject)) {\n inverted[key] = matrixInverse(transform);\n }\n \n return inverted;\n }\n return invertAllTransforms( hexToXYZMatrices )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"-----------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1000,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"c1 = XYZtoRGB({x:24.245764, y:50, z:5.87}, 'lab')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"p1 = RGBtoXYZ( c1, 'lab' )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"c2 = d3.rgb( 230.1702650099133, 180.72398499008668, 202.5605947309922 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"d3.jab(c2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"{\n var rgbColor = d3.rgb(170.5, 85.3, 200.7); // Continuous RGB values\n return d3.jab(rgbColor); // Convert to JAB\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":667,"value":"### Load external libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.96/build/three.min.js\");\n await require(\"three@0.96/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3\", \"d3-hsv\", \"d3-cam02\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"colorBlindLibrary = import('https://cdn.skypack.dev/color-blind@0.1.3?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"colorblind = { // adds normal function to color blind library\n let mod = colorBlindLibrary.default\n mod.normal = (B,R) => R===true ? ({R:d3.rgb(B).r, G:d3.rgb(B).g, B:d3.rgb(B).b}) : B\n let lightness\n mod.greyscale = (B,R) => {\n lightness = 2.55 * chroma.hex(B).hcl()[2]\n return R===true ? ({R:lightness, G:lightness, B:lightness}) : d3.rgb(lightness, lightness, lightness).hex()\n }\n return mod\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"colorblind['protanomaly']('#123456');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 30:"$2f:body"