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; }