29:null 2a:["$","title",null,{"children":"3D Color Picker | Lao | Observable"}] 2f:Tb2f9,viewof color3D = { /* Note to Claude: This is JavaScript code from an observable notebook. Do not create functions that are used in this code but not defined because they are defined in other cells. If asked to modify this cell return the full code that can be copy and pasted, starting with the keyword viewof. */ // ============================================ // CONFIGURATION - All tweakable parameters // ============================================ const CONFIG = { // Visual parameters radiusDeltaE: 2.5, // Size of color blobs subdivisions: 2, // Geodesic sphere subdivisions tweakRadius: 30, // RGB offset for blob vertices crosshair: 7, // Crosshair line length // Animation parameters transitionDuration: 1200, // Color space transition duration (ms) lerpSteps: 200, // Steps for RGB line interpolation timeDelay: 200, // Debounce delay for updates (ms) ease: d3.easeQuadOut, // Easing function for transitions // Camera and rendering cameraFOV: 45, cameraDistance: 100, rotateSpeed: 0.2, dampingFactor: 0.2, // Dimensions defaultWidth: 700, defaultHeight: 700, minWidth: 500, minHeight: 700, // Colors and materials ambientLightColor: 0x404040, directionalLightIntensity: 0.5, projectionLineColor: 0xFFFFFF, projectionLineWidth: 3, crosshairLineWidth: 2, rgbLineOpacity: 1, // RGB extremes for cube visualization rgbExtremes: ['#FFFFFF', '#000000', '#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#FF00FF'] }; // ============================================ // STATE MANAGEMENT // ============================================ const state = { // Current settings currentColorSpace: 'jab', currentVision: 'normal', // Animation state isAnimating: false, isTransitioning: false, transitionStartTime: 0, animationFrameId: null, updateTimeoutId: null, // Interaction state isDragging: false, draggedMesh: null, draggedColorIndex: -1, draggedHexColor: null, dragType: null, dragPlane: null, hoveredMesh: null, // Data structures currentPalette: [], colorMeshes: [], drawnColors: new Map(), animationTargets: new Map(), rgbLineTransitions: [], colorBlobTransitions: [], // Flags needsRGBUpdate: true, geometryNeedsUpdate: false, // Cached positions blackPos: null, whitePos: null }; // ============================================ // UTILITY FUNCTIONS // ============================================ const utils = { // Color validation isColor: (strColor) => { const s = new Option().style; s.color = strColor; return s.color !== ''; }, // Parse color string into structured data parse: (s) => { const sLength = s.length; const result = []; let left = 0, right = 0; let section = ''; let startIndex = 0; const skip = ['#']; const cut = [',', ' ', '\n', 'x', '[', ']', "'", '"', ';']; 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)) { // Skip } else if (cut.includes(char) || i === sLength) { let fillColor = ''; let keep = true; if (utils.isColor(section)) { fillColor = d3.color(section).hex(); } else if (utils.isColor('#' + section)) { fillColor = d3.color('#' + section).hex(); } 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; }, // Format text with color highlights formatPre: (text, highlights) => { for (let i = highlights.length - 1; i >= 0; i--) { const h = highlights[i]; text = text.slice(0, h.startIndex) + `` + text.slice(h.startIndex, h.endIndex) + '' + text.slice(h.endIndex); } return text; }, // Get localStorage key getStorageKey: () => { return new URL(document.baseURI).pathname.substring(1).replace('/', '-') + '-color3d'; }, // Debounced container update 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); }, // Calculate RGB pairs for cube lines 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; } }; // ============================================ // 3D GEOMETRY FUNCTIONS // ============================================ const geometry = { // Get center of a mesh - returns the stored color position getBlobCenter: (mesh) => { // Return the stored center position of the color return mesh.userData.centerPosition.clone(); }, // Calculate vertex position for a color blob based on deltaE calculateVertexPosition: (originalHexColor, centerPosition, sphereVertex, colorSpace = state.currentColorSpace, vision = state.currentVision) => { const originalColor = chroma(originalHexColor); const originalRGB = originalColor.rgb(); const [r, g, b] = originalRGB; // Calculate RGB offsets based on sphere vertex const dr = sphereVertex[0] * CONFIG.tweakRadius; const dg = sphereVertex[1] * CONFIG.tweakRadius; const db = sphereVertex[2] * CONFIG.tweakRadius; // Create tweaked color with offsets const newR = Math.max(0, Math.min(255, r + dr)); const newG = Math.max(0, Math.min(255, g + dg)); const newB = Math.max(0, Math.min(255, b + db)); const tweakedColor = chroma(newR, newG, newB); const deltaE = chroma.deltaE(originalColor, tweakedColor); // Get position of tweaked color in color space const tweakedHex = tweakedColor.hex(); const tweakedPos = hexToXYZ(tweakedHex, colorSpace, vision); // Calculate direction from center to tweaked position const dx = tweakedPos.x - centerPosition.x; const dy = tweakedPos.y - centerPosition.y; const dz = tweakedPos.z - centerPosition.z; // Scale position based on deltaE const posScale = deltaE > 0 ? CONFIG.radiusDeltaE / deltaE : 0; const proposedX = centerPosition.x + dx * posScale; const proposedY = centerPosition.y + dy * posScale; const proposedZ = centerPosition.z + dz * posScale; // Try to clamp to valid color const clampedHex = xyzToHex({x: proposedX, y: proposedY, z: proposedZ}, colorSpace); if (clampedHex) { const clampedPos = hexToXYZ(clampedHex, colorSpace, vision); return new THREE.Vector3(clampedPos.x, clampedPos.y, clampedPos.z); } else { return new THREE.Vector3(proposedX, proposedY, proposedZ); } }, // Create plane from three points 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, // Prevent invisible plane from blocking view depthTest: false // Ensure plane doesn't interfere with depth testing }); const plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.position.copy(center); plane.lookAt(center.clone().add(normal)); plane.renderOrder = -1; // Render before other objects return plane; }, // Update blob geometry and color updateBlob: (mesh, newHexColor, newCenterPosition, sphereData) => { // Update stored center position mesh.userData.centerPosition.copy(newCenterPosition); let vertexIndex = 0; sphereData.vertices.forEach((vertex) => { const newVertexPos = geometry.calculateVertexPosition(newHexColor, newCenterPosition, vertex); mesh.geometry.vertices[vertexIndex].set(newVertexPos.x, newVertexPos.y, newVertexPos.z); vertexIndex++; }); mesh.material.color.set(newHexColor); mesh.geometry.verticesNeedUpdate = true; mesh.geometry.computeFaceNormals(); mesh.geometry.computeVertexNormals(); mesh.geometry.computeBoundingSphere(); mesh.geometry.computeBoundingBox(); }, // Create color blob mesh createColorBlob: (hexValue, colorIndex, sphereData) => { const originalPos = hexToXYZ(hexValue, state.currentColorSpace, state.currentVision); const geometryObj = new THREE.Geometry(); sphereData.vertices.forEach((vertex) => { const vertexPos = geometry.calculateVertexPosition(hexValue, originalPos, vertex); geometryObj.vertices.push(vertexPos); }); sphereData.faces.forEach((face) => { geometryObj.faces.push(new THREE.Face3(face[0], face[1], face[2])); }); geometryObj.computeFaceNormals(); geometryObj.computeVertexNormals(); 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; // Store the center position (the actual color's XYZ position) mesh.userData.centerPosition = new THREE.Vector3(originalPos.x, originalPos.y, originalPos.z); return mesh; } }; // ============================================ // VISUALIZATION UPDATES // ============================================ const visualization = { // Update projection line and crosshair 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); } }, // Update RGB cube lines updateRGBLines: (lineList, pairs) => { if (!state.needsRGBUpdate || state.isTransitioning) return; for (let i = 0; i < lineList.length; i++) { for (let j = 0; j < CONFIG.lerpSteps; j++) { const hex = d3.rgb(d3.interpolateRgb( CONFIG.rgbExtremes[pairs[i][0]], CONFIG.rgbExtremes[pairs[i][1]] )(j / (CONFIG.lerpSteps - 1))).hex(); const color = colorblind[state.currentVision](hex, true); const point = hexToXYZ(hex, state.currentColorSpace, state.currentVision); lineList[i].geometry.vertices[j].set(point.x, point.y, point.z); lineList[i].geometry.verticesNeedUpdate = true; lineList[i].geometry.colors[j].setRGB(color.R / 255, color.G / 255, color.B / 255); lineList[i].geometry.colorsNeedUpdate = true; } } state.needsRGBUpdate = false; }, // Update color palette updateColorPalette: (newColors, scene, sphereData) => { // Clean up existing meshes state.colorMeshes.forEach(item => { scene.remove(item.mesh); item.mesh.geometry.dispose(); item.mesh.material.dispose(); }); state.colorMeshes.length = 0; state.drawnColors.clear(); // Add new colors 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; } }; // ============================================ // ANIMATION SYSTEM // ============================================ const animation = { // Capture transition states captureRGBLineState: (lineList) => { return lineList.map((line, lineIndex) => ({ line: line, lineIndex: lineIndex, sourceVertices: line.geometry.vertices.map(v => v.clone()), sourceColors: line.geometry.colors.map(c => c.clone()), targetVertices: [], targetColors: [] })); }, captureColorBlobState: () => { return state.colorMeshes.map(item => ({ mesh: item.mesh, hexColor: item.hexColor, colorIndex: item.colorIndex, sourceVertices: item.mesh.geometry.vertices.map(v => v.clone()), sourceColor: item.mesh.material.color.clone(), sourceCenterPosition: item.mesh.userData.centerPosition.clone(), targetVertices: [], targetColor: null, targetCenterPosition: null })); }, // Calculate target states calculateRGBLineTargets: (rgbLineState, newColorSpace, newVision, pairs) => { rgbLineState.forEach((lineData, lineIndex) => { lineData.targetVertices = []; lineData.targetColors = []; for (let j = 0; j < CONFIG.lerpSteps; j++) { const hex = d3.rgb(d3.interpolateRgb( CONFIG.rgbExtremes[pairs[lineIndex][0]], CONFIG.rgbExtremes[pairs[lineIndex][1]] )(j / (CONFIG.lerpSteps - 1))).hex(); const color = colorblind[newVision](hex, true); const point = hexToXYZ(hex, newColorSpace, newVision); lineData.targetVertices.push(new THREE.Vector3(point.x, point.y, point.z)); lineData.targetColors.push(new THREE.Color(color.R / 255, color.G / 255, color.B / 255)); } }); }, calculateColorBlobTargets: (colorBlobState, newColorSpace, newVision, sphereData) => { colorBlobState.forEach(blobData => { const hexColor = colorblind[newVision](blobData.hexColor, false); const targetPos = hexToXYZ(hexColor, newColorSpace, newVision); blobData.targetVertices = []; blobData.targetColor = new THREE.Color(hexColor); blobData.targetCenterPosition = new THREE.Vector3(targetPos.x, targetPos.y, targetPos.z); sphereData.vertices.forEach((vertex) => { const vertexPos = geometry.calculateVertexPosition(hexColor, targetPos, vertex, newColorSpace, newVision); blobData.targetVertices.push(vertexPos); }); }); }, // Update transitions updateTransitions: (renderer, scene, camera) => { if (!state.isTransitioning) return; const elapsed = Date.now() - state.transitionStartTime; const progress = Math.min(elapsed / CONFIG.transitionDuration, 1); const easedProgress = CONFIG.ease(progress); // Update RGB line transitions state.rgbLineTransitions.forEach(lineData => { for (let j = 0; j < lineData.sourceVertices.length; j++) { const interpolateX = d3.interpolate(lineData.sourceVertices[j].x, lineData.targetVertices[j].x); const interpolateY = d3.interpolate(lineData.sourceVertices[j].y, lineData.targetVertices[j].y); const interpolateZ = d3.interpolate(lineData.sourceVertices[j].z, lineData.targetVertices[j].z); lineData.line.geometry.vertices[j].x = interpolateX(easedProgress); lineData.line.geometry.vertices[j].y = interpolateY(easedProgress); lineData.line.geometry.vertices[j].z = interpolateZ(easedProgress); const sourceColor = d3.rgb(lineData.sourceColors[j].r * 255, lineData.sourceColors[j].g * 255, lineData.sourceColors[j].b * 255); const targetColor = d3.rgb(lineData.targetColors[j].r * 255, lineData.targetColors[j].g * 255, lineData.targetColors[j].b * 255); const interpolateColor = d3.interpolateRgb(sourceColor, targetColor); const currentColor = d3.rgb(interpolateColor(easedProgress)); lineData.line.geometry.colors[j].setRGB(currentColor.r / 255, currentColor.g / 255, currentColor.b / 255); } lineData.line.geometry.verticesNeedUpdate = true; lineData.line.geometry.colorsNeedUpdate = true; }); // Update color blob transitions state.colorBlobTransitions.forEach(blobData => { for (let j = 0; j < blobData.sourceVertices.length; j++) { const interpolateX = d3.interpolate(blobData.sourceVertices[j].x, blobData.targetVertices[j].x); const interpolateY = d3.interpolate(blobData.sourceVertices[j].y, blobData.targetVertices[j].y); const interpolateZ = d3.interpolate(blobData.sourceVertices[j].z, blobData.targetVertices[j].z); blobData.mesh.geometry.vertices[j].x = interpolateX(easedProgress); blobData.mesh.geometry.vertices[j].y = interpolateY(easedProgress); blobData.mesh.geometry.vertices[j].z = interpolateZ(easedProgress); } // Interpolate center position const interpolateCenterX = d3.interpolate(blobData.sourceCenterPosition.x, blobData.targetCenterPosition.x); const interpolateCenterY = d3.interpolate(blobData.sourceCenterPosition.y, blobData.targetCenterPosition.y); const interpolateCenterZ = d3.interpolate(blobData.sourceCenterPosition.z, blobData.targetCenterPosition.z); blobData.mesh.userData.centerPosition.x = interpolateCenterX(easedProgress); blobData.mesh.userData.centerPosition.y = interpolateCenterY(easedProgress); blobData.mesh.userData.centerPosition.z = interpolateCenterZ(easedProgress); const sourceColorHex = '#' + blobData.sourceColor.getHexString(); const targetColorHex = '#' + blobData.targetColor.getHexString(); const interpolateColor = d3.interpolateRgb(sourceColorHex, targetColorHex); const currentColorHex = interpolateColor(easedProgress); blobData.mesh.material.color.set(currentColorHex); blobData.mesh.geometry.verticesNeedUpdate = true; blobData.mesh.geometry.computeFaceNormals(); blobData.mesh.geometry.computeVertexNormals(); }); // Check if transition is complete if (progress >= 1) { state.isTransitioning = false; // Final cleanup state.rgbLineTransitions.forEach(lineData => { for (let j = 0; j < lineData.targetVertices.length; j++) { lineData.line.geometry.vertices[j].copy(lineData.targetVertices[j]); lineData.line.geometry.colors[j].copy(lineData.targetColors[j]); } lineData.line.geometry.verticesNeedUpdate = true; lineData.line.geometry.colorsNeedUpdate = true; }); state.colorBlobTransitions.forEach(blobData => { for (let j = 0; j < blobData.targetVertices.length; j++) { blobData.mesh.geometry.vertices[j].copy(blobData.targetVertices[j]); } blobData.mesh.material.color.copy(blobData.targetColor); blobData.mesh.userData.centerPosition.copy(blobData.targetCenterPosition); blobData.mesh.geometry.verticesNeedUpdate = true; blobData.mesh.geometry.computeFaceNormals(); blobData.mesh.geometry.computeVertexNormals(); blobData.mesh.geometry.computeBoundingBox(); blobData.mesh.geometry.computeBoundingSphere(); }); state.rgbLineTransitions = []; state.colorBlobTransitions = []; state.needsRGBUpdate = false; state.geometryNeedsUpdate = false; renderer.render(scene, camera); } }, // Start transition 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.transitionStartTime = Date.now(); state.needsRGBUpdate = false; state.geometryNeedsUpdate = true; } }; // ============================================ // UI FUNCTIONS // ============================================ const ui = { resizeTextarea: (textAreaEditing) => { if (textAreaEditing != null) { textAreaEditing.style.height = "auto"; const newHeight = textAreaEditing.scrollHeight - 19; textAreaEditing.style.height = newHeight + "px"; } }, updatePre: (textAreaHighlight, text) => { if (textAreaHighlight != null) { textAreaHighlight.innerHTML = text; } }, resize: (threejsContainer, renderer, camera) => { const rect = threejsContainer.getBoundingClientRect(); const w = Math.max(CONFIG.minWidth, rect.width); const h = Math.max(CONFIG.minHeight, rect.height); const currentSize = renderer.getSize(new THREE.Vector2()); if (currentSize.x !== w || currentSize.y !== h) { renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); } } }; // ============================================ // MAIN SETUP // ============================================ // Create main container const container = document.createElement('div'); container.className = 'color3d-container'; // Get saved palette 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'`; } // Create Three.js scene 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); // Lighting 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); // Create geodesic sphere data const sphereData = createGeodesicSphere(CONFIG.subdivisions); // Initialize positions state.blackPos = hexToXYZ('#010101', state.currentColorSpace, state.currentVision); state.whitePos = hexToXYZ('#FEFEFE', state.currentColorSpace, state.currentVision); // Create projection line 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); // Create crosshair lines const crosshairLines = []; for (let i = 0; i < 3; i++) { const geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(0, 0, 0)); geometry.vertices.push(new THREE.Vector3(0, 0, 0)); const material = new THREE.LineBasicMaterial({ color: CONFIG.projectionLineColor, linewidth: CONFIG.crosshairLineWidth, }); const line = new THREE.Line(geometry, material.clone()); line.visible = false; crosshairLines.push(line); scene.add(line); } // Create RGB cube lines const pairs = utils.getRGBPairs(); const lineList = []; for (let i = 0; i < pairs.length; i++) { const verts = []; const colorList = []; for (let j = 0; j < CONFIG.lerpSteps; j++) { const color = d3.rgb(d3.interpolateRgb( CONFIG.rgbExtremes[pairs[i][0]], CONFIG.rgbExtremes[pairs[i][1]] )(j / (CONFIG.lerpSteps - 1))); colorList.push(color); verts.push(new THREE.Vector3(0, 0, 0)); } const geoRGBLine = new THREE.Geometry(); geoRGBLine.vertices = verts; for (let j = 0; j < geoRGBLine.vertices.length; j++) { geoRGBLine.colors[j] = new THREE.Color( colorList[j].r / 255, colorList[j].g / 255, colorList[j].b / 255 ); } 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); } // ============================================ // EVENT HANDLERS // ============================================ 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; state.blackPos = hexToXYZ('#010101', state.currentColorSpace, state.currentVision); state.whitePos = hexToXYZ('#FEFEFE', state.currentColorSpace, state.currentVision); utils.updateContainerValue(container, textAreaEditing); }, handleVisionChange: (e, sphereData) => { const newVision = e.target.value; if (newVision === state.currentVision) return; animation.startTransition(state.currentColorSpace, newVision, lineList, pairs, sphereData); state.currentVision = newVision; state.blackPos = hexToXYZ('#010101', state.currentColorSpace, state.currentVision); state.whitePos = hexToXYZ('#FEFEFE', state.currentColorSpace, state.currentVision); utils.updateContainerValue(container, textAreaEditing); }, handleTextareaInput: (e) => { const text = e.target.value; const parsedColors = utils.parse(text); ui.updatePre(textAreaHighlight, utils.formatPre(text, parsedColors)); ui.resizeTextarea(textAreaEditing); visualization.updateColorPalette(parsedColors, scene, sphereData); localStorage.setItem(key, text); utils.updateContainerValue(container, textAreaEditing); }, 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 getQuoteStyle = (text, startIndex, endIndex) => { let quoteChar = ''; if (startIndex > 0) { const charBefore = text[startIndex - 1]; if (charBefore === "'" || charBefore === '"') { quoteChar = charBefore; } } if (!quoteChar && endIndex < text.length) { const charAfter = text[endIndex]; if (charAfter === "'" || charAfter === '"') { quoteChar = charAfter; } } return quoteChar; }; const quoteChar = getQuoteStyle(currentText, targetColor.startIndex, targetColor.endIndex); let replacement = newHexColor; if (quoteChar) { replacement = quoteChar + replacement + quoteChar; } let actualStart = targetColor.startIndex; if (quoteChar && actualStart > 0 && currentText[actualStart - 1] === quoteChar) { actualStart--; } let actualEnd = targetColor.endIndex; if (quoteChar && actualEnd < currentText.length && currentText[actualEnd] === quoteChar) { actualEnd++; } const hasHashBefore = actualStart > 0 && currentText[actualStart - 1] === '#'; let newText; if (hasHashBefore) { newText = currentText.slice(0, actualStart - 1) + replacement + currentText.slice(actualEnd); } else { newText = currentText.slice(0, actualStart) + replacement + currentText.slice(actualEnd); } textAreaEditing.value = newText; const newParsed = utils.parse(newText); ui.updatePre(textAreaHighlight, utils.formatPre(newText, newParsed)); ui.resizeTextarea(textAreaEditing); localStorage.setItem(key, newText); utils.updateContainerValue(container, textAreaEditing); } } }; // Mouse interaction setup 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; 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, // Prevent invisible plane from blocking view depthTest: false // Ensure plane doesn't interfere with depth testing }); state.dragPlane = new THREE.Mesh(planeGeometry, planeMaterial); state.dragPlane.rotation.x = -Math.PI / 2; state.dragPlane.position.y = center.y; state.dragPlane.renderOrder = -1; // Render before other objects 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); } } else { if (state.hoveredMesh) { state.hoveredMesh = null; 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.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; }, onContextMenu: (event) => { event.preventDefault(); } }; // ============================================ // HTML STRUCTURE (moved to bottom) // ============================================ container.innerHTML = `

Color Space:

Vision:

`; // Get references to elements const colorSpaceSelect = container.querySelector('#colorSpace'); const visionSelect = container.querySelector('#vision'); const threejsContainer = container.querySelector('#threejs-container'); const textAreaEditing = container.querySelector('#textArea_editing'); const textAreaHighlight = container.querySelector('#textArea_highlight'); // Append renderer threejsContainer.appendChild(renderer.domElement); // Camera controls 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; // Event listeners colorSpaceSelect.addEventListener('change', (e) => eventHandlers.handleColorSpaceChange(e, sphereData)); visionSelect.addEventListener('change', (e) => eventHandlers.handleVisionChange(e, sphereData)); textAreaEditing.addEventListener('input', eventHandlers.handleTextareaInput); 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); // Initial setup const initialParsed = utils.parse(savedPaletteText); ui.updatePre(textAreaHighlight, utils.formatPre(savedPaletteText, initialParsed)); ui.resizeTextarea(textAreaEditing); visualization.updateColorPalette(initialParsed, scene, sphereData); container.value = initialParsed.map(c => c.fillColor); // ============================================ // RENDER LOOP // ============================================ const render = function() { state.animationFrameId = requestAnimationFrame(render); 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); }; // Initial RGB update and start render loop visualization.updateRGBLines(lineList, pairs); render(); // Window resize listener window.addEventListener('resize', () => { ui.resizeTextarea(textAreaEditing); }); // Cleanup container.dispose = () => { if (state.animationFrameId) { cancelAnimationFrame(state.animationFrameId); } if (state.updateTimeoutId) { clearTimeout(state.updateTimeoutId); } 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; } 30: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 }31: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 }; }32:Td38,33: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; } 34: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 ) )}` }35: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]], })36: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); }37: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; } }38: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]], })39: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; } }3a: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]], })3b: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; }3c:[] 2d:{"id":"ef1d08dd03704d74","slug":null,"title":"3D Color Picker","thumbnail":"09700a2b0113d944759fa6f0d96170be138dfcf233ff0b36aef1fe277487644d","access_level":"public","create_time":"$D2025-06-11T20:29:21.540Z","update_time":"$D2026-08-31T05:18:56.608Z","view_time":null,"first_public_time":"$D2025-06-16T04:58:34.989Z","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":1020,"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,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"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"},{"id":786,"value":"**Left Click Drag**: lightness + saturation
\n**Right Click Drag**: hue + saturation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":813,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":676,"value":"## Function and Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":815,"value":"palette = color3D","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":344,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":566,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":39,"value":"### Matrix functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":152,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":684,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"----------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":197,"value":"### Convert between hex color and xyz coordinates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":189,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":45,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"-----------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1000,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":717,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":987,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":952,"value":"p1 = RGBtoXYZ( c1, 'lab' )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":929,"value":"c2 = d3.rgb( 230.1702650099133, 180.72398499008668, 202.5605947309922 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":937,"value":"d3.jab(c2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":665,"value":"------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":667,"value":"### Load external libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":9,"value":"d3 = require(\"d3\", \"d3-hsv\", \"d3-cam02\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":844,"value":"colorblind['protanomaly']('#123456');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 2e:"$2d:body"