3e:null 3f:["$","title",null,{"children":"3D Genetic RNA Codon 4x4x4 Cube | David Hurley | Observable"}] 45:T96a8,chart = { fonts; // Text rendering offset for perfect centering const textOffsetY = 3; const maxWidth = 800; let width = Math.min(window.innerWidth, maxWidth); // Crop ratio: how much of the top to cut off (0.15 = remove top 15% of the full view) const topCrop = 0.10; let fullHeight = width; // the virtual full render height (square) let height = Math.round(fullHeight * (1 - topCrop)); // the visible canvas height const container = DOM.element('div'); container.style.width = width + 'px'; container.style.height = height + 'px'; // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // Fog near/far will be updated dynamically relative to camera distance const cubeHalfDiag = Math.sqrt(3) * 18; // half-diagonal of the 36x36x36 codon cube const fogPadding = 15; // extra padding beyond the cube edges scene.fog = new THREE.Fog(0xffffff, 50, 175); const camera = new THREE.PerspectiveCamera(45, width / fullHeight, 1, 1000); camera.setViewOffset(width, fullHeight, 0, Math.round(fullHeight * topCrop), width, height); camera.position.set(30, 40, 85); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); container.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom = true; controls.enablePan = false; controls.enableRotate = true; controls.enableDamping = true; controls.dampingFactor = 0.2; controls.rotateSpeed = 0.15; controls.zoomSpeed = 2; controls.minDistance = 40; controls.maxDistance = 150; controls.autoRotate = true; controls.autoRotateSpeed = .05; // Resize handling function handleResize(newWidth) { newWidth = Math.min(newWidth, maxWidth); if (newWidth !== width) { width = newWidth; fullHeight = width; height = Math.round(fullHeight * (1 - topCrop)); container.style.width = width + 'px'; container.style.height = height + 'px'; renderer.setSize(width, height); camera.aspect = width / fullHeight; camera.setViewOffset(width, fullHeight, 0, Math.round(fullHeight * topCrop), width, height); camera.updateProjectionMatrix(); } } const resizeObserver = new ResizeObserver(() => { const newWidth = container.parentElement ? container.parentElement.clientWidth : window.innerWidth; handleResize(newWidth); }); resizeObserver.observe(container); // Also listen for window resize as a fallback const onWindowResize = () => { const newWidth = container.parentElement ? container.parentElement.clientWidth : window.innerWidth; handleResize(newWidth); }; window.addEventListener('resize', onWindowResize); // Clean up on invalidation (Observable pattern) invalidation.then(() => { resizeObserver.disconnect(); window.removeEventListener('resize', onWindowResize); renderer.dispose(); }); // Differentiate trackpad from mouse wheel and adjust zoom let lastWheelTime = 0; renderer.domElement.addEventListener('wheel', (event) => { const now = Date.now(); const timeDelta = now - lastWheelTime; lastWheelTime = now; // Trackpad events typically have smaller deltaY and come in rapid succession // Mouse wheel events have larger deltaY and more time between events const isTrackpad = Math.abs(event.deltaY) < 50 && timeDelta < 50; if (isTrackpad) { controls.zoomSpeed = 1; // Half the zoom speed for trackpad } else { controls.zoomSpeed = 2; // Full zoom speed for mouse wheel } }, { passive: false }); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.8); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); directionalLight.position.set(10, 10, 10); scene.add(directionalLight); const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.4); directionalLight2.position.set(-10, -10, -10); scene.add(directionalLight2); // Helper functions for textures function createCodonTexture(codon, color, highlightMask = [false, false, false]) { const canvas = document.createElement('canvas'); const boxSize = 70; canvas.width = boxSize * 3; canvas.height = boxSize; const ctx = canvas.getContext('2d'); const allHighlighted = highlightMask[0] && highlightMask[1] && highlightMask[2]; if (allHighlighted) { ctx.fillStyle = '#000000'; } else { ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`; } ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = '600 52px "Atkinson Hyperlegible Mono", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const letterSpacing = boxSize; const startX = boxSize / 2; for (let i = 0; i < 3; i++) { if (highlightMask[i] && !allHighlighted) { ctx.fillStyle = '#000000'; ctx.fillRect(i * boxSize, 0, boxSize, boxSize); } ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 2; ctx.strokeText(codon[i], startX + i * letterSpacing, canvas.height / 2 + textOffsetY); ctx.fillStyle = '#ffffff'; ctx.fillText(codon[i], startX + i * letterSpacing, canvas.height / 2 + textOffsetY); } return new THREE.CanvasTexture(canvas); } function createLabelTexture(text, color) { const canvas = document.createElement('canvas'); canvas.width = 420; canvas.height = 140; const ctx = canvas.getContext('2d'); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`; ctx.font = '800 52px "Atkinson Hyperlegible Mono", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, canvas.width / 2, canvas.height / 2 + textOffsetY); return new THREE.CanvasTexture(canvas); } function createAxisLabelTexture(text, highlighted = false) { const canvas = document.createElement('canvas'); const boxSize = 70; canvas.width = boxSize * 3; canvas.height = boxSize; const ctx = canvas.getContext('2d'); if (highlighted) { ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, canvas.width, canvas.height); } if (highlighted) { ctx.fillStyle = '#ffffff'; } else { ctx.fillStyle = '#000000'; } ctx.font = '600 52px "Atkinson Hyperlegible Mono", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, canvas.width / 2, canvas.height / 2 + textOffsetY); return new THREE.CanvasTexture(canvas); } // Texture cache const textureCache = new Map(); function getCachedTexture(codon, color, highlightMask) { const key = `${codon}-${highlightMask.join('')}`; if (!textureCache.has(key)) { textureCache.set(key, createCodonTexture(codon, color, highlightMask)); } return textureCache.get(key); } // Create codon data const codonData = []; const codonMeshes = []; const axisLabelMeshes = []; for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { for (let k = 0; k < 4; k++) { const codon = config.bases[i] + config.bases[j] + config.bases[k]; const info = config.geneticCode[codon]; const position = new THREE.Vector3( (i - 1.5) * config.spacing, (j - 1.5) * config.spacing, (k - 1.5) * config.spacing ); const texture = createCodonTexture(codon, info.color); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true }); const geometry = new THREE.PlaneGeometry(config.plateWidth, config.plateHeight); const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(position); const data = { codon: codon, position: position, baseIndices: [i, j, k], color: info.color, aa: info.aa, mesh: mesh, originalTexture: texture }; codonData.push(data); codonMeshes.push(mesh); scene.add(mesh); } } } const transparentMeshes = []; const aaConnections = {}; const aaLines = []; // Track all connection lines with their amino acid // Create connections between codons of same amino acid for (let i = 0; i < codonData.length; i++) { for (let j = i + 1; j < codonData.length; j++) { const d1 = codonData[i]; const d2 = codonData[j]; if (d1.aa === d2.aa) { const diff = [ Math.abs(d1.baseIndices[0] - d2.baseIndices[0]), Math.abs(d1.baseIndices[1] - d2.baseIndices[1]), Math.abs(d1.baseIndices[2] - d2.baseIndices[2]) ]; const diffSum = diff[0] + diff[1] + diff[2]; if (diffSum === 1) { const points = [d1.position, d2.position]; const geometry = new THREE.BufferGeometry().setFromPoints(points); const lineMaterial = new THREE.LineBasicMaterial({ color: d1.color, linewidth: 1 }); const line = new THREE.Line(geometry, lineMaterial); line.userData.aminoAcid = d1.aa; // Store amino acid reference scene.add(line); aaLines.push(line); if (!aaConnections[d1.aa]) { aaConnections[d1.aa] = []; } aaConnections[d1.aa].push({ start: d1.position, end: d2.position }); } } } } // Marching cubes function function vertexInterp(isolevel, p1, p2, valp1, valp2) { if (Math.abs(isolevel - valp1) < 0.00001) return p1.clone(); if (Math.abs(isolevel - valp2) < 0.00001) return p2.clone(); if (Math.abs(valp1 - valp2) < 0.00001) return p1.clone(); const mu = (isolevel - valp1) / (valp2 - valp1); return new THREE.Vector3( p1.x + mu * (p2.x - p1.x), p1.y + mu * (p2.y - p1.y), p1.z + mu * (p2.z - p1.z) ); } function marchingCubes(codonPositions, color, connections, gridSize = 1.0, threshold = 2.8) { const bounds = { min: new THREE.Vector3(Infinity, Infinity, Infinity), max: new THREE.Vector3(-Infinity, -Infinity, -Infinity) }; codonPositions.forEach(pos => { bounds.min.x = Math.min(bounds.min.x, pos.x); bounds.min.y = Math.min(bounds.min.y, pos.y); bounds.min.z = Math.min(bounds.min.z, pos.z); bounds.max.x = Math.max(bounds.max.x, pos.x); bounds.max.y = Math.max(bounds.max.y, pos.y); bounds.max.z = Math.max(bounds.max.z, pos.z); }); const expansion = 8; bounds.min.subScalar(expansion); bounds.max.addScalar(expansion); function distanceToLineSegment(point, start, end) { const line = new THREE.Vector3().subVectors(end, start); const len = line.length(); if (len === 0) return point.distanceTo(start); const t = Math.max(0, Math.min(1, new THREE.Vector3().subVectors(point, start).dot(line) / (len * len) )); const projection = new THREE.Vector3().copy(start).add( line.multiplyScalar(t) ); return point.distanceTo(projection); } const vertices = []; const faces = []; for (let x = bounds.min.x; x < bounds.max.x; x += gridSize) { for (let y = bounds.min.y; y < bounds.max.y; y += gridSize) { for (let z = bounds.min.z; z < bounds.max.z; z += gridSize) { const cubeCorners = [ new THREE.Vector3(x, y, z), new THREE.Vector3(x + gridSize, y, z), new THREE.Vector3(x + gridSize, y, z + gridSize), new THREE.Vector3(x, y, z + gridSize), new THREE.Vector3(x, y + gridSize, z), new THREE.Vector3(x + gridSize, y + gridSize, z), new THREE.Vector3(x + gridSize, y + gridSize, z + gridSize), new THREE.Vector3(x, y + gridSize, z + gridSize) ]; const values = cubeCorners.map(corner => { let minDist = Infinity; codonPositions.forEach(pos => { const dist = corner.distanceTo(pos); minDist = Math.min(minDist, dist); }); connections.forEach(conn => { const dist = distanceToLineSegment(corner, conn.start, conn.end); minDist = Math.min(minDist, dist); }); return minDist; }); let cubeIndex = 0; for (let i = 0; i < 8; i++) { if (values[i] < threshold) cubeIndex |= (1 << i); } if (marchingCubesData.edgeTable[cubeIndex] === 0) continue; const vertList = []; if (marchingCubesData.edgeTable[cubeIndex] & 1) vertList[0] = vertexInterp(threshold, cubeCorners[0], cubeCorners[1], values[0], values[1]); if (marchingCubesData.edgeTable[cubeIndex] & 2) vertList[1] = vertexInterp(threshold, cubeCorners[1], cubeCorners[2], values[1], values[2]); if (marchingCubesData.edgeTable[cubeIndex] & 4) vertList[2] = vertexInterp(threshold, cubeCorners[2], cubeCorners[3], values[2], values[3]); if (marchingCubesData.edgeTable[cubeIndex] & 8) vertList[3] = vertexInterp(threshold, cubeCorners[3], cubeCorners[0], values[3], values[0]); if (marchingCubesData.edgeTable[cubeIndex] & 16) vertList[4] = vertexInterp(threshold, cubeCorners[4], cubeCorners[5], values[4], values[5]); if (marchingCubesData.edgeTable[cubeIndex] & 32) vertList[5] = vertexInterp(threshold, cubeCorners[5], cubeCorners[6], values[5], values[6]); if (marchingCubesData.edgeTable[cubeIndex] & 64) vertList[6] = vertexInterp(threshold, cubeCorners[6], cubeCorners[7], values[6], values[7]); if (marchingCubesData.edgeTable[cubeIndex] & 128) vertList[7] = vertexInterp(threshold, cubeCorners[7], cubeCorners[4], values[7], values[4]); if (marchingCubesData.edgeTable[cubeIndex] & 256) vertList[8] = vertexInterp(threshold, cubeCorners[0], cubeCorners[4], values[0], values[4]); if (marchingCubesData.edgeTable[cubeIndex] & 512) vertList[9] = vertexInterp(threshold, cubeCorners[1], cubeCorners[5], values[1], values[5]); if (marchingCubesData.edgeTable[cubeIndex] & 1024) vertList[10] = vertexInterp(threshold, cubeCorners[2], cubeCorners[6], values[2], values[6]); if (marchingCubesData.edgeTable[cubeIndex] & 2048) vertList[11] = vertexInterp(threshold, cubeCorners[3], cubeCorners[7], values[3], values[7]); for (let i = 0; marchingCubesData.triTable[cubeIndex][i] !== undefined; i += 3) { const baseIndex = vertices.length / 3; vertices.push( vertList[marchingCubesData.triTable[cubeIndex][i]].x, vertList[marchingCubesData.triTable[cubeIndex][i]].y, vertList[marchingCubesData.triTable[cubeIndex][i]].z, vertList[marchingCubesData.triTable[cubeIndex][i + 1]].x, vertList[marchingCubesData.triTable[cubeIndex][i + 1]].y, vertList[marchingCubesData.triTable[cubeIndex][i + 1]].z, vertList[marchingCubesData.triTable[cubeIndex][i + 2]].x, vertList[marchingCubesData.triTable[cubeIndex][i + 2]].y, vertList[marchingCubesData.triTable[cubeIndex][i + 2]].z ); faces.push(baseIndex, baseIndex + 1, baseIndex + 2); } } } } if (vertices.length === 0) return null; const geometry = new THREE.BufferGeometry(); geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); geometry.setIndex(faces); geometry.computeVertexNormals(); const material = new THREE.MeshPhongMaterial({ color: color, transparent: true, opacity: 0.08, side: THREE.DoubleSide, depthWrite: false, shininess: 30 }); return new THREE.Mesh(geometry, material); } // Create amino acid shells const aminoAcids = {}; codonData.forEach(d => { if (!aminoAcids[d.aa]) { aminoAcids[d.aa] = { positions: [], color: d.color }; } aminoAcids[d.aa].positions.push(d.position); }); Object.keys(aminoAcids).forEach(aa => { const data = aminoAcids[aa]; const connections = aaConnections[aa] || []; const mesh = marchingCubes(data.positions, data.color, connections); if (mesh) { mesh.userData.aminoAcid = aa; // Store amino acid reference transparentMeshes.push(mesh); scene.add(mesh); } }); // Create amino acid labels const labelMeshes = []; Object.keys(aminoAcids).forEach(aa => { const data = aminoAcids[aa]; const avgPos = new THREE.Vector3(); data.positions.forEach(p => avgPos.add(p)); avgPos.divideScalar(data.positions.length); avgPos.y += config.plateHeight + config.labelHeight / 2; const texture = createLabelTexture(config.aaFullNames[aa] || aa, data.color); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true, blending: THREE.MultiplyBlending, depthWrite: false }); const geometry = new THREE.PlaneGeometry(8.4, config.labelHeight); const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(avgPos); mesh.userData.aminoAcid = aa; // Store amino acid reference labelMeshes.push(mesh); scene.add(mesh); }); // Create axis groups const xAxisGroups = []; const yAxisGroups = []; const zAxisGroups = []; const xAxisEdges = [ { y: -18, z: -18, id: 0 }, { y: -18, z: 18, id: 1 }, { y: 18, z: -18, id: 2 }, { y: 18, z: 18, id: 3 } ]; const yAxisEdges = [ { x: -18, z: -18, id: 0 }, { x: -18, z: 18, id: 1 }, { x: 18, z: -18, id: 2 }, { x: 18, z: 18, id: 3 } ]; const zAxisEdges = [ { x: -18, y: -18, id: 0 }, { x: -18, y: 18, id: 1 }, { x: 18, y: -18, id: 2 }, { x: 18, y: 18, id: 3 } ]; // Create X axis groups xAxisEdges.forEach(edge => { const group = new THREE.Group(); group.userData.edgeId = edge.id; group.userData.opacity = 0; const offsetY = edge.y < 0 ? -3 : 3; const offsetZ = edge.z < 0 ? -3 : 3; const lineY = edge.y + offsetY; const lineZ = edge.z + offsetZ; const xAxisGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(-18, lineY, lineZ), new THREE.Vector3(18, lineY, lineZ) ]); const xAxisLine = new THREE.Line(xAxisGeometry, new THREE.LineBasicMaterial({ color: config.axisLineColor, transparent: true, opacity: 0 })); group.add(xAxisLine); const labelOffsetY = edge.y < 0 ? -2 : 2; const labelOffsetZ = edge.z < 0 ? -2 : 2; const labelY = lineY + labelOffsetY; const labelZ = lineZ + labelOffsetZ; for (let i = 0; i < 4; i++) { const xPos = (i - 1.5) * config.spacing; const label = config.bases[i] + ' _ _'; const texture = createAxisLabelTexture(label); const highlightedTexture = createAxisLabelTexture(label, true); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true, opacity: 0, depthWrite: false }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), material); mesh.position.set(xPos, labelY, labelZ); mesh.userData.base = config.bases[i]; mesh.userData.position = 0; mesh.userData.normalTexture = texture; mesh.userData.highlightedTexture = highlightedTexture; axisLabelMeshes.push(mesh); group.add(mesh); } xAxisGroups.push(group); scene.add(group); }); // Create Y axis groups yAxisEdges.forEach(edge => { const group = new THREE.Group(); group.userData.edgeId = edge.id; group.userData.opacity = 0; const offsetX = edge.x < 0 ? -3 : 3; const offsetZ = edge.z < 0 ? -3 : 3; const lineX = edge.x + offsetX; const lineZ = edge.z + offsetZ; const yAxisGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(lineX, -18, lineZ), new THREE.Vector3(lineX, 18, lineZ) ]); const yAxisLine = new THREE.Line(yAxisGeometry, new THREE.LineBasicMaterial({ color: config.axisLineColor, transparent: true, opacity: 0 })); group.add(yAxisLine); const labelOffsetX = edge.x < 0 ? -2 : 2; const labelOffsetZ = edge.z < 0 ? -2 : 2; const labelX = lineX + labelOffsetX; const labelZ = lineZ + labelOffsetZ; for (let j = 0; j < 4; j++) { const yPos = (j - 1.5) * config.spacing; const label = '_ ' + config.bases[j] + ' _'; const texture = createAxisLabelTexture(label); const highlightedTexture = createAxisLabelTexture(label, true); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true, opacity: 0, depthWrite: false }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), material); mesh.position.set(labelX, yPos, labelZ); mesh.userData.base = config.bases[j]; mesh.userData.position = 1; mesh.userData.normalTexture = texture; mesh.userData.highlightedTexture = highlightedTexture; axisLabelMeshes.push(mesh); group.add(mesh); } yAxisGroups.push(group); scene.add(group); }); // Create Z axis groups zAxisEdges.forEach(edge => { const group = new THREE.Group(); group.userData.edgeId = edge.id; group.userData.opacity = 0; const offsetX = edge.x < 0 ? -3 : 3; const offsetY = edge.y < 0 ? -3 : 3; const lineX = edge.x + offsetX; const lineY = edge.y + offsetY; const zAxisGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(lineX, lineY, -18), new THREE.Vector3(lineX, lineY, 18) ]); const zAxisLine = new THREE.Line(zAxisGeometry, new THREE.LineBasicMaterial({ color: config.axisLineColor, transparent: true, opacity: 0 })); group.add(zAxisLine); const labelOffsetX = edge.x < 0 ? -2 : 2; const labelOffsetY = edge.y < 0 ? -2 : 2; const labelX = lineX + labelOffsetX; const labelY = lineY + labelOffsetY; for (let k = 0; k < 4; k++) { const zPos = (k - 1.5) * config.spacing; const label = '_ _ ' + config.bases[k]; const texture = createAxisLabelTexture(label); const highlightedTexture = createAxisLabelTexture(label, true); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true, opacity: 0, depthWrite: false }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), material); mesh.position.set(labelX, labelY, zPos); mesh.userData.base = config.bases[k]; mesh.userData.position = 2; mesh.userData.normalTexture = texture; mesh.userData.highlightedTexture = highlightedTexture; axisLabelMeshes.push(mesh); group.add(mesh); } zAxisGroups.push(group); scene.add(group); }); // Interaction handling const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let isDragging = false; let hoveredCodon = null; let hoveredAxisLabel = null; let lockedHoveredCodon = null; let lockedHoveredAxisLabel = null; // Tap selection: persists until user taps empty space or another element let tappedCodon = null; let tappedAxisLabel = null; let touchStartPos = null; let touchStartTime = 0; const TAP_THRESHOLD = 10; // max pixel movement to count as a tap const TAP_TIME = 300; // max ms to count as a tap container.addEventListener('mousemove', (event) => { const rect = container.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / height) * 2 + 1; }); container.addEventListener('touchstart', (event) => { if (event.touches.length === 1) { touchStartPos = { x: event.touches[0].clientX, y: event.touches[0].clientY }; touchStartTime = Date.now(); } }, { passive: true }); container.addEventListener('touchend', (event) => { if (!touchStartPos) return; const touch = event.changedTouches[0]; const dx = touch.clientX - touchStartPos.x; const dy = touch.clientY - touchStartPos.y; const dist = Math.sqrt(dx * dx + dy * dy); const elapsed = Date.now() - touchStartTime; touchStartPos = null; if (dist < TAP_THRESHOLD && elapsed < TAP_TIME) { // It's a tap — raycast at tap position const rect = container.getBoundingClientRect(); mouse.x = ((touch.clientX - rect.left) / width) * 2 - 1; mouse.y = -((touch.clientY - rect.top) / height) * 2 + 1; raycaster.setFromCamera(mouse, camera); const codonIntersects = raycaster.intersectObjects(codonMeshes); if (codonIntersects.length > 0) { const hit = codonData.find(d => d.mesh === codonIntersects[0].object); if (tappedCodon === hit) { // Tap same element again to deselect tappedCodon = null; tappedAxisLabel = null; } else { tappedCodon = hit; tappedAxisLabel = null; } } else { const visibleAxisLabels = axisLabelMeshes.filter(m => m.visible && m.material.opacity > 0.01); const axisIntersects = raycaster.intersectObjects(visibleAxisLabels); if (axisIntersects.length > 0) { const mesh = axisIntersects[0].object; const newLabel = { base: mesh.userData.base, position: mesh.userData.position }; if (tappedAxisLabel && tappedAxisLabel.base === newLabel.base && tappedAxisLabel.position === newLabel.position) { tappedCodon = null; tappedAxisLabel = null; } else { tappedCodon = null; tappedAxisLabel = newLabel; } } else { // Tapped empty space — clear selection tappedCodon = null; tappedAxisLabel = null; } } updateTextures(tappedCodon, tappedAxisLabel); } }, { passive: true }); controls.addEventListener('start', () => { isDragging = true; lockedHoveredCodon = hoveredCodon || tappedCodon; lockedHoveredAxisLabel = hoveredAxisLabel || tappedAxisLabel; }); controls.addEventListener('end', () => { isDragging = false; lockedHoveredCodon = null; lockedHoveredAxisLabel = null; }); function updateTextures(selectedCodon, axisLabel) { // Reset all axis labels to normal axisLabelMeshes.forEach(mesh => { if (mesh.material.map !== mesh.userData.normalTexture) { mesh.material.map = mesh.userData.normalTexture; mesh.material.needsUpdate = true; } }); if (!selectedCodon && !axisLabel) { codonData.forEach(d => { if (d.mesh.material.map !== d.originalTexture) { d.mesh.material.map = d.originalTexture; d.mesh.material.needsUpdate = true; } d.mesh.visible = true; }); // Show all lines, shells, and labels aaLines.forEach(line => line.visible = true); transparentMeshes.forEach(mesh => mesh.visible = true); labelMeshes.forEach(mesh => mesh.visible = true); return; } if (selectedCodon) { codonData.forEach(d => { let newTexture; if (d === selectedCodon) { newTexture = getCachedTexture(d.codon, 0x000000, [true, true, true]); } else { const highlightMask = [ d.baseIndices[0] === selectedCodon.baseIndices[0], d.baseIndices[1] === selectedCodon.baseIndices[1], d.baseIndices[2] === selectedCodon.baseIndices[2] ]; const matchCount = highlightMask.filter(m => m).length; const finalHighlightMask = matchCount === 2 ? highlightMask : [false, false, false]; newTexture = getCachedTexture(d.codon, d.color, finalHighlightMask); } if (d.mesh.material.map !== newTexture) { d.mesh.material.map = newTexture; d.mesh.material.needsUpdate = true; } d.mesh.visible = true; }); // Show all lines, shells, and labels when hovering codon aaLines.forEach(line => line.visible = true); transparentMeshes.forEach(mesh => mesh.visible = true); labelMeshes.forEach(mesh => mesh.visible = true); } else if (axisLabel) { // Highlight the hovered axis label axisLabelMeshes.forEach(mesh => { if (mesh.userData.base === axisLabel.base && mesh.userData.position === axisLabel.position && mesh.visible && mesh.material.opacity > 0.01) { mesh.material.map = mesh.userData.highlightedTexture; mesh.material.needsUpdate = true; } }); // Track which amino acids have visible codons const visibleAminoAcids = new Set(); // Highlight matching codons and hide non-matching ones codonData.forEach(d => { const highlightMask = [false, false, false]; if (d.codon[axisLabel.position] === axisLabel.base) { highlightMask[axisLabel.position] = true; d.mesh.visible = true; visibleAminoAcids.add(d.aa); } else { d.mesh.visible = false; } const newTexture = getCachedTexture(d.codon, d.color, highlightMask); if (d.mesh.material.map !== newTexture) { d.mesh.material.map = newTexture; d.mesh.material.needsUpdate = true; } }); // Hide/show lines based on amino acid visibility aaLines.forEach(line => { line.visible = visibleAminoAcids.has(line.userData.aminoAcid); }); // Hide/show shells based on amino acid visibility transparentMeshes.forEach(mesh => { mesh.visible = visibleAminoAcids.has(mesh.userData.aminoAcid); }); // Hide/show labels based on amino acid visibility labelMeshes.forEach(mesh => { mesh.visible = visibleAminoAcids.has(mesh.userData.aminoAcid); }); } } // Animation loop function animate() { requestAnimationFrame(animate); // Update fog so front and back of the cube have consistent fog regardless of zoom const camDist = camera.position.length(); // distance from origin scene.fog.near = camDist - cubeHalfDiag - fogPadding; scene.fog.far = camDist + cubeHalfDiag + fogPadding; // Billboard codon meshes codonMeshes.forEach(mesh => { mesh.quaternion.copy(camera.quaternion); const direction = new THREE.Vector3(); direction.subVectors(camera.position, mesh.position).normalize(); const offset = direction.multiplyScalar(0.5); mesh.position.copy(codonData.find(d => d.mesh === mesh).position).add(offset); }); // Billboard label meshes labelMeshes.forEach(mesh => { mesh.quaternion.copy(camera.quaternion); }); // Determine best edges for each axis let bestYEdge = null; let lowestYScore = Infinity; yAxisGroups.forEach(group => { const edgeId = group.userData.edgeId; const edge = yAxisEdges[edgeId]; const midpoint = new THREE.Vector3(edge.x, 0, edge.z); const screenPos = midpoint.clone().project(camera); const score = screenPos.x; if (score < lowestYScore) { lowestYScore = score; bestYEdge = edgeId; } }); const yEdge = yAxisEdges[bestYEdge]; const topPoint = new THREE.Vector3(yEdge.x, 18, yEdge.z); const bottomPoint = new THREE.Vector3(yEdge.x, -18, yEdge.z); const topScreen = topPoint.clone().project(camera); const bottomScreen = bottomPoint.clone().project(camera); const yBottom = bottomScreen.y < topScreen.y ? bottomPoint.y : topPoint.y; // Independently determine X axis position const xEdgeZNeg = new THREE.Vector3(0, yBottom, -18); const xEdgeZPos = new THREE.Vector3(0, yBottom, 18); const xEdgeZNegScreen = xEdgeZNeg.clone().project(camera); const xEdgeZPosScreen = xEdgeZPos.clone().project(camera); const bestXZ = xEdgeZNegScreen.y > xEdgeZPosScreen.y ? 18 : -18; // Independently determine Z axis position const zEdgeXNeg = new THREE.Vector3(-18, yBottom, 0); const zEdgeXPos = new THREE.Vector3(18, yBottom, 0); const zEdgeXNegScreen = zEdgeXNeg.clone().project(camera); const zEdgeXPosScreen = zEdgeXPos.clone().project(camera); const bestZX = zEdgeXNegScreen.y > zEdgeXPosScreen.y ? 18 : -18; let bestXEdge = null; let bestZEdge = null; xAxisEdges.forEach((edge, idx) => { if (edge.y === yBottom && edge.z === bestXZ) { bestXEdge = idx; } }); zAxisEdges.forEach((edge, idx) => { if (edge.x === bestZX && edge.y === yBottom) { bestZEdge = idx; } }); if (bestXEdge === null) bestXEdge = 0; if (bestZEdge === null) bestZEdge = 0; // Fade axis groups xAxisGroups.forEach(group => { const targetOpacity = group.userData.edgeId === bestXEdge ? 1 : 0; const currentOpacity = group.userData.opacity; const delta = targetOpacity - currentOpacity; const newOpacity = currentOpacity + delta * 0.15; group.userData.opacity = Math.abs(delta) < 0.01 ? targetOpacity : newOpacity; group.children.forEach(child => { if (child.material) { child.material.opacity = group.userData.opacity; child.visible = group.userData.opacity > 0.001; } if (child.type === 'Mesh') { child.quaternion.copy(camera.quaternion); } }); }); yAxisGroups.forEach(group => { const targetOpacity = group.userData.edgeId === bestYEdge ? 1 : 0; const currentOpacity = group.userData.opacity; const delta = targetOpacity - currentOpacity; const newOpacity = currentOpacity + delta * 0.15; group.userData.opacity = Math.abs(delta) < 0.01 ? targetOpacity : newOpacity; group.children.forEach(child => { if (child.material) { child.material.opacity = group.userData.opacity; child.visible = group.userData.opacity > 0.001; } if (child.type === 'Mesh') { child.quaternion.copy(camera.quaternion); } }); }); zAxisGroups.forEach(group => { const targetOpacity = group.userData.edgeId === bestZEdge ? 1 : 0; const currentOpacity = group.userData.opacity; const delta = targetOpacity - currentOpacity; const newOpacity = currentOpacity + delta * 0.15; group.userData.opacity = Math.abs(delta) < 0.01 ? targetOpacity : newOpacity; group.children.forEach(child => { if (child.material) { child.material.opacity = group.userData.opacity; child.visible = group.userData.opacity > 0.001; } if (child.type === 'Mesh') { child.quaternion.copy(camera.quaternion); } }); }); // Raycasting for hover (desktop) / tap selection persists (mobile) if (tappedCodon || tappedAxisLabel) { // A tap selection is active — use it, ignore hover updateTextures(tappedCodon, tappedAxisLabel); } else if (!isDragging) { raycaster.setFromCamera(mouse, camera); const codonIntersects = raycaster.intersectObjects(codonMeshes); if (codonIntersects.length > 0) { const intersectedMesh = codonIntersects[0].object; const newHovered = codonData.find(d => d.mesh === intersectedMesh); if (newHovered !== hoveredCodon) { hoveredCodon = newHovered; hoveredAxisLabel = null; updateTextures(hoveredCodon, null); } } else { const visibleAxisLabels = axisLabelMeshes.filter(m => m.visible && m.material.opacity > 0.01); const axisIntersects = raycaster.intersectObjects(visibleAxisLabels); if (axisIntersects.length > 0) { const intersectedMesh = axisIntersects[0].object; const newHoveredAxisLabel = { base: intersectedMesh.userData.base, position: intersectedMesh.userData.position }; if (!hoveredAxisLabel || hoveredAxisLabel.base !== newHoveredAxisLabel.base || hoveredAxisLabel.position !== newHoveredAxisLabel.position) { hoveredCodon = null; hoveredAxisLabel = newHoveredAxisLabel; updateTextures(null, hoveredAxisLabel); } } else { if (hoveredCodon || hoveredAxisLabel) { hoveredCodon = null; hoveredAxisLabel = null; updateTextures(null, null); } } } } else { updateTextures(lockedHoveredCodon, lockedHoveredAxisLabel); } controls.update(); renderer.render(scene, camera); } animate(); // Re-render all textures once the font loads document.fonts.ready.then(() => { // Clear the texture cache so highlights get regenerated with the correct font textureCache.clear(); // Rebuild codon original textures codonData.forEach(d => { const newTexture = createCodonTexture(d.codon, d.color); d.originalTexture = newTexture; d.mesh.material.map = newTexture; d.mesh.material.needsUpdate = true; }); // Rebuild amino acid label textures labelMeshes.forEach(mesh => { const aa = mesh.userData.aminoAcid; const color = aminoAcids[aa].color; const newTexture = createLabelTexture(config.aaFullNames[aa] || aa, color); mesh.material.map = newTexture; mesh.material.needsUpdate = true; }); // Rebuild axis label textures axisLabelMeshes.forEach(mesh => { let label; const pos = mesh.userData.position; if (pos === 0) label = mesh.userData.base + ' _ _'; else if (pos === 1) label = '_ ' + mesh.userData.base + ' _'; else label = '_ _ ' + mesh.userData.base; mesh.userData.normalTexture = createAxisLabelTexture(label); mesh.userData.highlightedTexture = createAxisLabelTexture(label, true); mesh.material.map = mesh.userData.normalTexture; mesh.material.needsUpdate = true; }); }); return container; }46:T5c2,fonts = { const family = "Atkinson Hyperlegible Mono"; const href = "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap"; // Inject preconnects + stylesheet once (guard against duplicates on re-run) if (!document.head.querySelector(`link[href="${href}"]`)) { const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" }); const preconnect2 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }); document.head.append(preconnect1, preconnect2); const stylesheet = Object.assign(document.createElement("link"), { rel: "stylesheet", href }); // Wait for the stylesheet so the @font-face rules are registered before we load() const sheetLoaded = new Promise((resolve, reject) => { stylesheet.onload = resolve; stylesheet.onerror = reject; }); document.head.append(stylesheet); await sheetLoaded; } // Force the actual font files to download (upright + italic faces of the variable font) await Promise.all([ document.fonts.load(`400 16px "${family}"`), document.fonts.load(`700 16px "${family}"`), document.fonts.load(`italic 400 16px "${family}"`), document.fonts.load(`italic 700 16px "${family}"`) ]); await document.fonts.ready; return family; }47:Tdeb,config = ({ // Genetic code mapping with colors geneticCode: { 'UUU': { aa: 'Phe', color: 0xa1005c }, 'UUC': { aa: 'Phe', color: 0xa1005c }, 'UUA': { aa: 'Leu', color: 0xf4799f }, 'UUG': { aa: 'Leu', color: 0xf4799f }, 'CUU': { aa: 'Leu', color: 0xf4799f }, 'CUC': { aa: 'Leu', color: 0xf4799f }, 'CUA': { aa: 'Leu', color: 0xf4799f }, 'CUG': { aa: 'Leu', color: 0xf4799f }, 'AUU': { aa: 'Ile', color: 0xb995ff }, 'AUC': { aa: 'Ile', color: 0xb995ff }, 'AUA': { aa: 'Ile', color: 0xb995ff }, 'AUG': { aa: 'Met', color: 0x62af00 }, 'GUU': { aa: 'Val', color: 0x1E90FF }, 'GUC': { aa: 'Val', color: 0x1E90FF }, 'GUA': { aa: 'Val', color: 0x1E90FF }, 'GUG': { aa: 'Val', color: 0x1E90FF }, 'UCU': { aa: 'Ser', color: 0xf4cd00 }, 'UCC': { aa: 'Ser', color: 0xf4cd00 }, 'UCA': { aa: 'Ser', color: 0xf4cd00 }, 'UCG': { aa: 'Ser', color: 0xf4cd00 }, 'AGU': { aa: 'Ser', color: 0xf4cd00 }, 'AGC': { aa: 'Ser', color: 0xf4cd00 }, 'CCU': { aa: 'Pro', color: 0x6ba3ad }, 'CCC': { aa: 'Pro', color: 0x6ba3ad }, 'CCA': { aa: 'Pro', color: 0x6ba3ad }, 'CCG': { aa: 'Pro', color: 0x6ba3ad }, 'ACU': { aa: 'Thr', color: 0xb55500 }, 'ACC': { aa: 'Thr', color: 0xb55500 }, 'ACA': { aa: 'Thr', color: 0xb55500 }, 'ACG': { aa: 'Thr', color: 0xb55500 }, 'GCU': { aa: 'Ala', color: 0x45e97a }, 'GCC': { aa: 'Ala', color: 0x45e97a }, 'GCA': { aa: 'Ala', color: 0x45e97a }, 'GCG': { aa: 'Ala', color: 0x45e97a }, 'UAU': { aa: 'Tyr', color: 0xdf55da }, 'UAC': { aa: 'Tyr', color: 0xdf55da }, 'UAA': { aa: 'Stop', color: 0x818080 }, 'UAG': { aa: 'Stop', color: 0x818080 }, 'UGA': { aa: 'Stop', color: 0x818080 }, 'CAU': { aa: 'His', color: 0x585ceb }, 'CAC': { aa: 'His', color: 0x585ceb }, 'CAA': { aa: 'Gln', color: 0x14bc8b }, 'CAG': { aa: 'Gln', color: 0x14bc8b }, 'AAU': { aa: 'Asn', color: 0x9c5598 }, 'AAC': { aa: 'Asn', color: 0x9c5598 }, 'AAA': { aa: 'Lys', color: 0xff8d1c }, 'AAG': { aa: 'Lys', color: 0xff8d1c }, 'GAU': { aa: 'Asp', color: 0x00c7f5 }, 'GAC': { aa: 'Asp', color: 0x00c7f5 }, 'GAA': { aa: 'Glu', color: 0xb9f300 }, 'GAG': { aa: 'Glu', color: 0xb9f300 }, 'UGU': { aa: 'Cys', color: 0xf40057 }, 'UGC': { aa: 'Cys', color: 0xf40057 }, 'UGG': { aa: 'Trp', color: 0x6c1db3 }, 'CGU': { aa: 'Arg', color: 0x67ede6 }, 'CGC': { aa: 'Arg', color: 0x67ede6 }, 'CGA': { aa: 'Arg', color: 0x67ede6 }, 'CGG': { aa: 'Arg', color: 0x67ede6 }, 'AGA': { aa: 'Arg', color: 0x67ede6 }, 'AGG': { aa: 'Arg', color: 0x67ede6 }, 'GGU': { aa: 'Gly', color: 0xd08c00 }, 'GGC': { aa: 'Gly', color: 0xd08c00 }, 'GGA': { aa: 'Gly', color: 0xd08c00 }, 'GGG': { aa: 'Gly', color: 0xd08c00 } }, // Base order for each axis bases: ['U', 'C', 'A', 'G'], // Spatial parameters spacing: 12, plateHeight: 1.4, get plateWidth() { return this.plateHeight * 3; }, labelHeight: 2.8, // Axis configuration axisLineColor: 0x808080, // Amino acid full names aaFullNames: { 'Phe': 'Phenylalanine', 'Leu': 'Leucine', 'Ile': 'Isoleucine', 'Met': 'Methionine', 'Val': 'Valine', 'Ser': 'Serine', 'Pro': 'Proline', 'Thr': 'Threonine', 'Ala': 'Alanine', 'Tyr': 'Tyrosine', 'Stop': 'Stop', 'His': 'Histidine', 'Gln': 'Glutamine', 'Asn': 'Asparagine', 'Lys': 'Lysine', 'Asp': 'Aspartate', 'Glu': 'Glutamate', 'Cys': 'Cysteine', 'Trp': 'Tryptophan', 'Arg': 'Arginine', 'Gly': 'Glycine' } })48:T278c,marchingCubesData = ({ edgeTable: [0x0, 0x109, 0x203, 0x30a, 0x406, 0x50f, 0x605, 0x70c, 0x80c, 0x905, 0xa0f, 0xb06, 0xc0a, 0xd03, 0xe09, 0xf00, 0x190, 0x99, 0x393, 0x29a, 0x596, 0x49f, 0x795, 0x69c, 0x99c, 0x895, 0xb9f, 0xa96, 0xd9a, 0xc93, 0xf99, 0xe90, 0x230, 0x339, 0x33, 0x13a, 0x636, 0x73f, 0x435, 0x53c, 0xa3c, 0xb35, 0x83f, 0x936, 0xe3a, 0xf33, 0xc39, 0xd30, 0x3a0, 0x2a9, 0x1a3, 0xaa, 0x7a6, 0x6af, 0x5a5, 0x4ac, 0xbac, 0xaa5, 0x9af, 0x8a6, 0xfaa, 0xea3, 0xda9, 0xca0, 0x460, 0x569, 0x663, 0x76a, 0x66, 0x16f, 0x265, 0x36c, 0xc6c, 0xd65, 0xe6f, 0xf66, 0x86a, 0x963, 0xa69, 0xb60, 0x5f0, 0x4f9, 0x7f3, 0x6fa, 0x1f6, 0xff, 0x3f5, 0x2fc, 0xdfc, 0xcf5, 0xfff, 0xef6, 0x9fa, 0x8f3, 0xbf9, 0xaf0, 0x650, 0x759, 0x453, 0x55a, 0x256, 0x35f, 0x55, 0x15c, 0xe5c, 0xf55, 0xc5f, 0xd56, 0xa5a, 0xb53, 0x859, 0x950, 0x7c0, 0x6c9, 0x5c3, 0x4ca, 0x3c6, 0x2cf, 0x1c5, 0xcc, 0xfcc, 0xec5, 0xdcf, 0xcc6, 0xbca, 0xac3, 0x9c9, 0x8c0, 0x8c0, 0x9c9, 0xac3, 0xbca, 0xcc6, 0xdcf, 0xec5, 0xfcc, 0xcc, 0x1c5, 0x2cf, 0x3c6, 0x4ca, 0x5c3, 0x6c9, 0x7c0, 0x950, 0x859, 0xb53, 0xa5a, 0xd56, 0xc5f, 0xf55, 0xe5c, 0x15c, 0x55, 0x35f, 0x256, 0x55a, 0x453, 0x759, 0x650, 0xaf0, 0xbf9, 0x8f3, 0x9fa, 0xef6, 0xfff, 0xcf5, 0xdfc, 0x2fc, 0x3f5, 0xff, 0x1f6, 0x6fa, 0x7f3, 0x4f9, 0x5f0, 0xb60, 0xa69, 0x963, 0x86a, 0xf66, 0xe6f, 0xd65, 0xc6c, 0x36c, 0x265, 0x16f, 0x66, 0x76a, 0x663, 0x569, 0x460, 0xca0, 0xda9, 0xea3, 0xfaa, 0x8a6, 0x9af, 0xaa5, 0xbac, 0x4ac, 0x5a5, 0x6af, 0x7a6, 0xaa, 0x1a3, 0x2a9, 0x3a0, 0xd30, 0xc39, 0xf33, 0xe3a, 0x936, 0x83f, 0xb35, 0xa3c, 0x53c, 0x435, 0x73f, 0x636, 0x13a, 0x33, 0x339, 0x230, 0xe90, 0xf99, 0xc93, 0xd9a, 0xa96, 0xb9f, 0x895, 0x99c, 0x69c, 0x795, 0x49f, 0x596, 0x29a, 0x393, 0x99, 0x190, 0xf00, 0xe09, 0xd03, 0xc0a, 0xb06, 0xa0f, 0x905, 0x80c, 0x70c, 0x605, 0x50f, 0x406, 0x30a, 0x203, 0x109, 0x0], triTable: [[], [0, 8, 3], [0, 1, 9], [1, 8, 3, 9, 8, 1], [1, 2, 10], [0, 8, 3, 1, 2, 10], [9, 2, 10, 0, 2, 9], [2, 8, 3, 2, 10, 8, 10, 9, 8], [3, 11, 2], [0, 11, 2, 8, 11, 0], [1, 9, 0, 2, 3, 11], [1, 11, 2, 1, 9, 11, 9, 8, 11], [3, 10, 1, 11, 10, 3], [0, 10, 1, 0, 8, 10, 8, 11, 10], [3, 9, 0, 3, 11, 9, 11, 10, 9], [9, 8, 10, 10, 8, 11], [4, 7, 8], [4, 3, 0, 7, 3, 4], [0, 1, 9, 8, 4, 7], [4, 1, 9, 4, 7, 1, 7, 3, 1], [1, 2, 10, 8, 4, 7], [3, 4, 7, 3, 0, 4, 1, 2, 10], [9, 2, 10, 9, 0, 2, 8, 4, 7], [2, 10, 9, 2, 9, 7, 2, 7, 3, 7, 9, 4], [8, 4, 7, 3, 11, 2], [11, 4, 7, 11, 2, 4, 2, 0, 4], [9, 0, 1, 8, 4, 7, 2, 3, 11], [4, 7, 11, 9, 4, 11, 9, 11, 2, 9, 2, 1], [3, 10, 1, 3, 11, 10, 7, 8, 4], [1, 11, 10, 1, 4, 11, 1, 0, 4, 7, 11, 4], [4, 7, 8, 9, 0, 11, 9, 11, 10, 11, 0, 3], [4, 7, 11, 4, 11, 9, 9, 11, 10], [9, 5, 4], [9, 5, 4, 0, 8, 3], [0, 5, 4, 1, 5, 0], [8, 5, 4, 8, 3, 5, 3, 1, 5], [1, 2, 10, 9, 5, 4], [3, 0, 8, 1, 2, 10, 4, 9, 5], [5, 2, 10, 5, 4, 2, 4, 0, 2], [2, 10, 5, 3, 2, 5, 3, 5, 4, 3, 4, 8], [9, 5, 4, 2, 3, 11], [0, 11, 2, 0, 8, 11, 4, 9, 5], [0, 5, 4, 0, 1, 5, 2, 3, 11], [2, 1, 5, 2, 5, 8, 2, 8, 11, 4, 8, 5], [10, 3, 11, 10, 1, 3, 9, 5, 4], [4, 9, 5, 0, 8, 1, 8, 10, 1, 8, 11, 10], [5, 4, 0, 5, 0, 11, 5, 11, 10, 11, 0, 3], [5, 4, 8, 5, 8, 10, 10, 8, 11], [9, 7, 8, 5, 7, 9], [9, 3, 0, 9, 5, 3, 5, 7, 3], [0, 7, 8, 0, 1, 7, 1, 5, 7], [1, 5, 3, 3, 5, 7], [9, 7, 8, 9, 5, 7, 10, 1, 2], [10, 1, 2, 9, 5, 0, 5, 3, 0, 5, 7, 3], [8, 0, 2, 8, 2, 5, 8, 5, 7, 10, 5, 2], [2, 10, 5, 2, 5, 3, 3, 5, 7], [7, 9, 5, 7, 8, 9, 3, 11, 2], [9, 5, 7, 9, 7, 2, 9, 2, 0, 2, 7, 11], [2, 3, 11, 0, 1, 8, 1, 7, 8, 1, 5, 7], [11, 2, 1, 11, 1, 7, 7, 1, 5], [9, 5, 8, 8, 5, 7, 10, 1, 3, 10, 3, 11], [5, 7, 0, 5, 0, 9, 7, 11, 0, 1, 0, 10, 11, 10, 0], [11, 10, 0, 11, 0, 3, 10, 5, 0, 8, 0, 7, 5, 7, 0], [11, 10, 5, 7, 11, 5], [10, 6, 5], [0, 8, 3, 5, 10, 6], [9, 0, 1, 5, 10, 6], [1, 8, 3, 1, 9, 8, 5, 10, 6], [1, 6, 5, 2, 6, 1], [1, 6, 5, 1, 2, 6, 3, 0, 8], [9, 6, 5, 9, 0, 6, 0, 2, 6], [5, 9, 8, 5, 8, 2, 5, 2, 6, 3, 2, 8], [2, 3, 11, 10, 6, 5], [11, 0, 8, 11, 2, 0, 10, 6, 5], [0, 1, 9, 2, 3, 11, 5, 10, 6], [5, 10, 6, 1, 9, 2, 9, 11, 2, 9, 8, 11], [6, 3, 11, 6, 5, 3, 5, 1, 3], [0, 8, 11, 0, 11, 5, 0, 5, 1, 5, 11, 6], [3, 11, 6, 0, 3, 6, 0, 6, 5, 0, 5, 9], [6, 5, 9, 6, 9, 11, 11, 9, 8], [5, 10, 6, 4, 7, 8], [4, 3, 0, 4, 7, 3, 6, 5, 10], [1, 9, 0, 5, 10, 6, 8, 4, 7], [10, 6, 5, 1, 9, 7, 1, 7, 3, 7, 9, 4], [6, 1, 2, 6, 5, 1, 4, 7, 8], [1, 2, 5, 5, 2, 6, 3, 0, 4, 3, 4, 7], [8, 4, 7, 9, 0, 5, 0, 6, 5, 0, 2, 6], [7, 3, 9, 7, 9, 4, 3, 2, 9, 5, 9, 6, 2, 6, 9], [3, 11, 2, 7, 8, 4, 10, 6, 5], [5, 10, 6, 4, 7, 2, 4, 2, 0, 2, 7, 11], [0, 1, 9, 4, 7, 8, 2, 3, 11, 5, 10, 6], [9, 2, 1, 9, 11, 2, 9, 4, 11, 7, 11, 4, 5, 10, 6], [8, 4, 7, 3, 11, 5, 3, 5, 1, 5, 11, 6], [5, 1, 11, 5, 11, 6, 1, 0, 11, 7, 11, 4, 0, 4, 11], [0, 5, 9, 0, 6, 5, 0, 3, 6, 11, 6, 3, 8, 4, 7], [6, 5, 9, 6, 9, 11, 4, 7, 9, 7, 11, 9], [10, 4, 9, 6, 4, 10], [4, 10, 6, 4, 9, 10, 0, 8, 3], [10, 0, 1, 10, 6, 0, 6, 4, 0], [8, 3, 1, 8, 1, 6, 8, 6, 4, 6, 1, 10], [1, 4, 9, 1, 2, 4, 2, 6, 4], [3, 0, 8, 1, 2, 9, 2, 4, 9, 2, 6, 4], [0, 2, 4, 4, 2, 6], [8, 3, 2, 8, 2, 4, 4, 2, 6], [10, 4, 9, 10, 6, 4, 11, 2, 3], [0, 8, 2, 2, 8, 11, 4, 9, 10, 4, 10, 6], [3, 11, 2, 0, 1, 6, 0, 6, 4, 6, 1, 10], [6, 4, 1, 6, 1, 10, 4, 8, 1, 2, 1, 11, 8, 11, 1], [9, 6, 4, 9, 3, 6, 9, 1, 3, 11, 6, 3], [8, 11, 1, 8, 1, 0, 11, 6, 1, 9, 1, 4, 6, 4, 1], [3, 11, 6, 3, 6, 0, 0, 6, 4], [6, 4, 8, 11, 6, 8], [7, 10, 6, 7, 8, 10, 8, 9, 10], [0, 7, 3, 0, 10, 7, 0, 9, 10, 6, 7, 10], [10, 6, 7, 1, 10, 7, 1, 7, 8, 1, 8, 0], [10, 6, 7, 10, 7, 1, 1, 7, 3], [1, 2, 6, 1, 6, 8, 1, 8, 9, 8, 6, 7], [2, 6, 9, 2, 9, 1, 6, 7, 9, 0, 9, 3, 7, 3, 9], [7, 8, 0, 7, 0, 6, 6, 0, 2], [7, 3, 2, 6, 7, 2], [2, 3, 11, 10, 6, 8, 10, 8, 9, 8, 6, 7], [2, 0, 7, 2, 7, 11, 0, 9, 7, 6, 7, 10, 9, 10, 7], [1, 8, 0, 1, 7, 8, 1, 10, 7, 6, 7, 10, 2, 3, 11], [11, 2, 1, 11, 1, 7, 10, 6, 1, 6, 7, 1], [8, 9, 6, 8, 6, 7, 9, 1, 6, 11, 6, 3, 1, 3, 6], [0, 9, 1, 11, 6, 7], [7, 8, 0, 7, 0, 6, 3, 11, 0, 11, 6, 0], [7, 11, 6], [7, 6, 11], [3, 0, 8, 11, 7, 6], [0, 1, 9, 11, 7, 6], [8, 1, 9, 8, 3, 1, 11, 7, 6], [10, 1, 2, 6, 11, 7], [1, 2, 10, 3, 0, 8, 6, 11, 7], [2, 9, 0, 2, 10, 9, 6, 11, 7], [6, 11, 7, 2, 10, 3, 10, 8, 3, 10, 9, 8], [7, 2, 3, 6, 2, 7], [7, 0, 8, 7, 6, 0, 6, 2, 0], [2, 7, 6, 2, 3, 7, 0, 1, 9], [1, 6, 2, 1, 8, 6, 1, 9, 8, 8, 7, 6], [10, 7, 6, 10, 1, 7, 1, 3, 7], [10, 7, 6, 1, 7, 10, 1, 8, 7, 1, 0, 8], [0, 3, 7, 0, 7, 10, 0, 10, 9, 6, 10, 7], [7, 6, 10, 7, 10, 8, 8, 10, 9], [6, 8, 4, 11, 8, 6], [3, 6, 11, 3, 0, 6, 0, 4, 6], [8, 6, 11, 8, 4, 6, 9, 0, 1], [9, 4, 6, 9, 6, 3, 9, 3, 1, 11, 3, 6], [6, 8, 4, 6, 11, 8, 2, 10, 1], [1, 2, 10, 3, 0, 11, 0, 6, 11, 0, 4, 6], [4, 11, 8, 4, 6, 11, 0, 2, 9, 2, 10, 9], [10, 9, 3, 10, 3, 2, 9, 4, 3, 11, 3, 6, 4, 6, 3], [8, 2, 3, 8, 4, 2, 4, 6, 2], [0, 4, 2, 4, 6, 2], [1, 9, 0, 2, 3, 4, 2, 4, 6, 4, 3, 8], [1, 9, 4, 1, 4, 2, 2, 4, 6], [8, 1, 3, 8, 6, 1, 8, 4, 6, 6, 10, 1], [10, 1, 0, 10, 0, 6, 6, 0, 4], [4, 6, 3, 4, 3, 8, 6, 10, 3, 0, 3, 9, 10, 9, 3], [10, 9, 4, 6, 10, 4], [4, 9, 5, 7, 6, 11], [0, 8, 3, 4, 9, 5, 11, 7, 6], [5, 0, 1, 5, 4, 0, 7, 6, 11], [11, 7, 6, 8, 3, 4, 3, 5, 4, 3, 1, 5], [9, 5, 4, 10, 1, 2, 7, 6, 11], [6, 11, 7, 1, 2, 10, 0, 8, 3, 4, 9, 5], [7, 6, 11, 5, 4, 10, 4, 2, 10, 4, 0, 2], [3, 4, 8, 3, 5, 4, 3, 2, 5, 10, 5, 2, 11, 7, 6], [7, 2, 3, 7, 6, 2, 5, 4, 9], [9, 5, 4, 0, 8, 6, 0, 6, 2, 6, 8, 7], [3, 6, 2, 3, 7, 6, 1, 5, 0, 5, 4, 0], [6, 2, 8, 6, 8, 7, 2, 1, 8, 4, 8, 5, 1, 5, 8], [9, 5, 4, 10, 1, 6, 1, 7, 6, 1, 3, 7], [1, 6, 10, 1, 7, 6, 1, 0, 7, 8, 7, 0, 9, 5, 4], [4, 0, 10, 4, 10, 5, 0, 3, 10, 6, 10, 7, 3, 7, 10], [7, 6, 10, 7, 10, 8, 5, 4, 10, 4, 8, 10], [6, 9, 5, 6, 11, 9, 11, 8, 9], [3, 6, 11, 0, 6, 3, 0, 5, 6, 0, 9, 5], [0, 11, 8, 0, 5, 11, 0, 1, 5, 5, 6, 11], [6, 11, 3, 6, 3, 5, 5, 3, 1], [1, 2, 10, 9, 5, 11, 9, 11, 8, 11, 5, 6], [0, 11, 3, 0, 6, 11, 0, 9, 6, 5, 6, 9, 1, 2, 10], [11, 8, 5, 11, 5, 6, 8, 0, 5, 10, 5, 2, 0, 2, 5], [6, 11, 3, 6, 3, 5, 2, 10, 3, 10, 5, 3], [5, 8, 9, 5, 2, 8, 5, 6, 2, 3, 8, 2], [9, 5, 6, 9, 6, 0, 0, 6, 2], [1, 5, 8, 1, 8, 0, 5, 6, 8, 3, 8, 2, 6, 2, 8], [1, 5, 6, 2, 1, 6], [1, 3, 6, 1, 6, 10, 3, 8, 6, 5, 6, 9, 8, 9, 6], [10, 1, 0, 10, 0, 6, 9, 5, 0, 5, 6, 0], [0, 3, 8, 5, 6, 10], [10, 5, 6], [11, 5, 10, 7, 5, 11], [11, 5, 10, 11, 7, 5, 8, 3, 0], [5, 11, 7, 5, 10, 11, 1, 9, 0], [10, 7, 5, 10, 11, 7, 9, 8, 1, 8, 3, 1], [11, 1, 2, 11, 7, 1, 7, 5, 1], [0, 8, 3, 1, 2, 7, 1, 7, 5, 7, 2, 11], [9, 7, 5, 9, 2, 7, 9, 0, 2, 2, 11, 7], [7, 5, 2, 7, 2, 11, 5, 9, 2, 3, 2, 8, 9, 8, 2], [2, 5, 10, 2, 3, 5, 3, 7, 5], [8, 2, 0, 8, 5, 2, 8, 7, 5, 10, 2, 5], [9, 0, 1, 5, 10, 3, 5, 3, 7, 3, 10, 2], [9, 8, 2, 9, 2, 1, 8, 7, 2, 10, 2, 5, 7, 5, 2], [1, 3, 5, 3, 7, 5], [0, 8, 7, 0, 7, 1, 1, 7, 5], [9, 0, 3, 9, 3, 5, 5, 3, 7], [9, 8, 7, 5, 9, 7], [5, 8, 4, 5, 10, 8, 10, 11, 8], [5, 0, 4, 5, 11, 0, 5, 10, 11, 11, 3, 0], [0, 1, 9, 8, 4, 10, 8, 10, 11, 10, 4, 5], [10, 11, 4, 10, 4, 5, 11, 3, 4, 9, 4, 1, 3, 1, 4], [2, 5, 1, 2, 8, 5, 2, 11, 8, 4, 5, 8], [0, 4, 11, 0, 11, 3, 4, 5, 11, 2, 11, 1, 5, 1, 11], [0, 2, 5, 0, 5, 9, 2, 11, 5, 4, 5, 8, 11, 8, 5], [9, 4, 5, 2, 11, 3], [2, 5, 10, 3, 5, 2, 3, 4, 5, 3, 8, 4], [5, 10, 2, 5, 2, 4, 4, 2, 0], [3, 10, 2, 3, 5, 10, 3, 8, 5, 4, 5, 8, 0, 1, 9], [5, 10, 2, 5, 2, 4, 1, 9, 2, 9, 4, 2], [8, 4, 5, 8, 5, 3, 3, 5, 1], [0, 4, 5, 1, 0, 5], [8, 4, 5, 8, 5, 3, 9, 0, 5, 0, 3, 5], [9, 4, 5], [4, 11, 7, 4, 9, 11, 9, 10, 11], [0, 8, 3, 4, 9, 7, 9, 11, 7, 9, 10, 11], [1, 10, 11, 1, 11, 4, 1, 4, 0, 7, 4, 11], [3, 1, 4, 3, 4, 8, 1, 10, 4, 7, 4, 11, 10, 11, 4], [4, 11, 7, 9, 11, 4, 9, 2, 11, 9, 1, 2], [9, 7, 4, 9, 11, 7, 9, 1, 11, 2, 11, 1, 0, 8, 3], [11, 7, 4, 11, 4, 2, 2, 4, 0], [11, 7, 4, 11, 4, 2, 8, 3, 4, 3, 2, 4], [2, 9, 10, 2, 7, 9, 2, 3, 7, 7, 4, 9], [9, 10, 7, 9, 7, 4, 10, 2, 7, 8, 7, 0, 2, 0, 7], [3, 7, 10, 3, 10, 2, 7, 4, 10, 1, 10, 0, 4, 0, 10], [1, 10, 2, 8, 7, 4], [4, 9, 1, 4, 1, 7, 7, 1, 3], [4, 9, 1, 4, 1, 7, 0, 8, 1, 8, 7, 1], [4, 0, 3, 7, 4, 3], [4, 8, 7], [9, 10, 8, 10, 11, 8], [3, 0, 9, 3, 9, 11, 11, 9, 10], [0, 1, 10, 0, 10, 8, 8, 10, 11], [3, 1, 10, 11, 3, 10], [1, 2, 11, 1, 11, 9, 9, 11, 8], [3, 0, 9, 3, 9, 11, 1, 2, 9, 2, 11, 9], [0, 2, 11, 8, 0, 11], [3, 2, 11], [2, 3, 8, 2, 8, 10, 10, 8, 9], [9, 10, 2, 0, 9, 2], [2, 3, 8, 2, 8, 10, 0, 1, 8, 1, 10, 8], [1, 10, 2], [1, 3, 8, 9, 1, 8], [0, 9, 1], [0, 3, 8], []] })49:[] 43:{"id":"15d31bf525e15e94","slug":"3-d-genetic-rna-codon-4x4x4-cube","title":"3D Genetic RNA Codon 4x4x4 Cube","thumbnail":"19120eef9659a3db5d6eeb7d1deb43fffec2918cb2505556ecce40c383ffc142","access_level":"public","create_time":"$D2026-09-16T22:11:50.220Z","update_time":"$D2026-10-14T19:00:10.894Z","view_time":null,"first_public_time":"$D2026-09-16T22:20:29.717Z","has_unpublished_edits":null,"fork":{"id":"68408541cbf03fab","slug":null,"title":"3D Genetic RNA Codon 4x4x4 Cube","owner":{"id":"cf45be0120eccaad","login":"laotzunami","name":"Lao"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d8ddd341130c8779","login":"waveydave","name":"David Hurley","avatar_url":"https://avatars-next.observableusercontent.com/cf41cba1939f9adabaac279c6e686c7fbbbb0a52be31a3f0ad8b65fa26cfc318","tier":"starter_2024","bio":""},"version":578,"publish_version":578,"role":null,"authored":false,"authors":[{"type":"individual","id":"a03a9100aeb669c1","login":"waveydave","name":"David Hurley","avatar_url":"https://avatars-next.observableusercontent.com/cf41cba1939f9adabaac279c6e686c7fbbbb0a52be31a3f0ad8b65fa26cfc318","tier":null,"bio":""}],"members":[{"type":"team","id":"d8ddd341130c8779","login":"waveydave","name":"David Hurley","avatar_url":"https://avatars-next.observableusercontent.com/cf41cba1939f9adabaac279c6e686c7fbbbb0a52be31a3f0ad8b65fa26cfc318","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Genetic RNA Codon 4x4x4 Cube","cells":[{"id":4,"value":"# 3D Genetic RNA Codon 4x4x4 Cube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"This idea was shared with me by Bernhard Pfennigschmidt. \n\nCheck out his work at [https://rnacube.cancun.net/](https://rnacube.cancun.net/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":543,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.96/build/three.min.js\");\n await require(\"three@0.96/examples/js/controls/OrbitControls.js\").catch(() => {});\n //await require(\"three@0.96/examples/js/postprocessing/EffectComposer.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"