2b:null 2c:["$","title",null,{"children":"3D Genetic RNA Codon 4x4x4 Cube | Lao | Observable"}] 31:T8188,chart = { fonts; const textOffsetY = 3; // vertical nudge (px) for centering text on all canvas textures const maxWidth = 800; // maximum width of the chart in px const topCrop = 0.10; // fraction of the top of the square view to crop away const fogPadding = 15; // extra fog distance beyond the cube's front and back const shellOpacity = 0.08; // opacity of shell polygons facing straight at the camera const shellHighlightOpacity = 0.4; // same, for the hovered amino acid group's shell const shellSideOpacityMultiplier = 3; // side-on polygons get this many times the facing opacity const shellSideFalloff = 2; // curve of the center-to-side blend (higher = thinner opaque rim) const shellGridSize = 1.0; // marching cubes resolution for shells (smaller = smoother but slower) const shellThickness = 2.8; // distance from codons/connections where the shell surface sits const shellExpansion = 8; // padding around each group's bounds when building its shell const shellSmoothIterations = 3; // passes of surface smoothing on the shells (0 = none) const shellSmoothStrength = 0.5; // how far each smoothing pass moves vertices (0–1) const labelPaddingX = 20; // horizontal padding (px) around amino acid label text, ~matches codon plates const labelHighlightTextColor = '#ffffff'; // text color of a hovered amino acid label const axisLineOffset = 3; // distance of axis lines from the cube edge const axisLabelOffset = 2; // distance of axis labels beyond their axis line const axisFadeSpeed = 0.15; // how fast axis labels fade when switching edges (0–1) const tapThreshold = 10; // max finger movement in px that still counts as a tap const tapTime = 300; // max touch duration in ms that still counts as a tap const visibilityMargin = '100px'; // how far off-screen the chart starts/stops animating let width = Math.min(window.innerWidth, maxWidth); let fullHeight = width; let height = Math.round(fullHeight * (1 - topCrop)); const container = DOM.element('div'); container.style.width = width + 'px'; container.style.height = height + 'px'; const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); const cubeHalfDiag = Math.sqrt(3) * 18; 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); // starting camera position 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; // rotation inertia (lower = longer glide) controls.rotateSpeed = 0.15; // drag rotation sensitivity controls.zoomSpeed = 2; controls.minDistance = 40; // closest zoom controls.maxDistance = 150; // farthest zoom controls.autoRotate = true; controls.autoRotateSpeed = .05; // idle spin speed 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); const onWindowResize = () => { const newWidth = container.parentElement ? container.parentElement.clientWidth : window.innerWidth; handleResize(newWidth); }; window.addEventListener('resize', onWindowResize); invalidation.then(() => { stopAnimation(); visibilityObserver.disconnect(); resizeObserver.disconnect(); window.removeEventListener('resize', onWindowResize); renderer.dispose(); }); let lastWheelTime = 0; renderer.domElement.addEventListener('wheel', (event) => { const now = Date.now(); const timeDelta = now - lastWheelTime; lastWheelTime = now; const isTrackpad = Math.abs(event.deltaY) < 50 && timeDelta < 50; controls.zoomSpeed = isTrackpad ? 1 : 2; // zoom speed for trackpad : mouse wheel }, { passive: false }); const toHex = color => `#${color.toString(16).padStart(6, '0')}`; 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]; ctx.fillStyle = allHighlighted ? '#000000' : toHex(color); ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = '600 52px "Atkinson Hyperlegible Mono", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; for (let i = 0; i < 3; i++) { if (highlightMask[i] && !allHighlighted) { ctx.fillStyle = '#000000'; ctx.fillRect(i * boxSize, 0, boxSize, boxSize); } const x = boxSize / 2 + i * boxSize; const y = canvas.height / 2 + textOffsetY; ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 2; ctx.strokeText(codon[i], x, y); ctx.fillStyle = '#ffffff'; ctx.fillText(codon[i], x, y); } return new THREE.CanvasTexture(canvas); } function createLabelTexture(text, color, highlighted = false) { const font = '800 52px "Atkinson Hyperlegible Mono", sans-serif'; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.font = font; canvas.width = Math.ceil(ctx.measureText(text).width + labelPaddingX * 2); canvas.height = 70; ctx.fillStyle = highlighted ? toHex(color) : '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = highlighted ? labelHighlightTextColor : toHex(color); ctx.font = font; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, canvas.width / 2, canvas.height / 2 + textOffsetY); return new THREE.CanvasTexture(canvas); } function createAxisLabelTexture(text, highlightColor = null) { const canvas = document.createElement('canvas'); const boxSize = 70; canvas.width = boxSize * 3; canvas.height = boxSize; const ctx = canvas.getContext('2d'); const highlighted = highlightColor !== null; if (highlighted) { ctx.fillStyle = toHex(highlightColor); ctx.fillRect(0, 0, canvas.width, canvas.height); } ctx.fillStyle = highlighted ? '#ffffff' : '#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); } const labelPlateWidth = texture => (texture.image.width / texture.image.height) * config.plateHeight; const axisLabelText = (base, position) => ['_', '_', '_'].map((c, i) => (i === position ? base : c)).join(' '); const textureCache = new Map(); const axisSpanTextureCache = new Map(); function axisSpanTexture(mesh, color) { const key = `${mesh.userData.base}-${mesh.userData.position}-${color}`; if (!axisSpanTextureCache.has(key)) { axisSpanTextureCache.set(key, createAxisLabelTexture(axisLabelText(mesh.userData.base, mesh.userData.position), color)); } return axisSpanTextureCache.get(key); } function textureFor(d, mask) { if (!mask.some(Boolean)) return d.originalTexture; const key = `${d.codon}-${mask.join('')}`; if (!textureCache.has(key)) { textureCache.set(key, createCodonTexture(d.codon, d.color, mask)); } return textureCache.get(key); } 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 mesh = new THREE.Mesh( new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true }) ); mesh.position.copy(position); mesh.userData.kind = 'codon'; mesh.userData.index = codonData.length; codonData.push({ codon, position, baseIndices: [i, j, k], color: info.color, aa: info.aa, mesh, originalTexture: texture }); codonMeshes.push(mesh); scene.add(mesh); } } } const transparentMeshes = []; const aaConnections = {}; const aaLines = []; 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) continue; const diffSum = Math.abs(d1.baseIndices[0] - d2.baseIndices[0]) + Math.abs(d1.baseIndices[1] - d2.baseIndices[1]) + Math.abs(d1.baseIndices[2] - d2.baseIndices[2]); if (diffSum === 1) { const geometry = new THREE.BufferGeometry().setFromPoints([d1.position, d2.position]); const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: d1.color, linewidth: 1 })); line.userData.aminoAcid = d1.aa; scene.add(line); aaLines.push(line); if (!aaConnections[d1.aa]) aaConnections[d1.aa] = []; aaConnections[d1.aa].push({ start: d1.position, end: d2.position }); } } } 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 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 cubeEdges = [[0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [1, 5], [2, 6], [3, 7]]; function marchingCubes(codonPositions, color, connections, gridSize, threshold) { const bounds = { min: new THREE.Vector3(Infinity, Infinity, Infinity), max: new THREE.Vector3(-Infinity, -Infinity, -Infinity) }; codonPositions.forEach(pos => { bounds.min.min(pos); bounds.max.max(pos); }); bounds.min.subScalar(shellExpansion); bounds.max.addScalar(shellExpansion); const fieldAt = corner => { let minDist = Infinity; codonPositions.forEach(pos => { minDist = Math.min(minDist, corner.distanceTo(pos)); }); connections.forEach(conn => { minDist = Math.min(minDist, distanceToLineSegment(corner, conn.start, conn.end)); }); return minDist; }; const vertices = []; 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(fieldAt); let cubeIndex = 0; for (let i = 0; i < 8; i++) { if (values[i] < threshold) cubeIndex |= (1 << i); } const edgeMask = marchingCubesData.edgeTable[cubeIndex]; if (edgeMask === 0) continue; const vertList = []; cubeEdges.forEach(([a, b], e) => { if (edgeMask & (1 << e)) { vertList[e] = vertexInterp(threshold, cubeCorners[a], cubeCorners[b], values[a], values[b]); } }); const tri = marchingCubesData.triTable[cubeIndex]; for (let i = 0; tri[i] !== undefined; i += 3) { for (let v = 0; v < 3; v++) { const p = vertList[tri[i + v]]; vertices.push(p.x, p.y, p.z); } } } } } if (vertices.length === 0) return null; let positions = []; const indexByKey = new Map(); const merged = []; for (let i = 0; i < vertices.length; i += 3) { const key = `${Math.round(vertices[i] * 1e4)},${Math.round(vertices[i + 1] * 1e4)},${Math.round(vertices[i + 2] * 1e4)}`; let index = indexByKey.get(key); if (index === undefined) { index = positions.length / 3; indexByKey.set(key, index); positions.push(vertices[i], vertices[i + 1], vertices[i + 2]); } merged.push(index); } const triangles = []; for (let i = 0; i < merged.length; i += 3) { const a = merged[i]; const b = merged[i + 1]; const c = merged[i + 2]; if (a !== b && b !== c && a !== c) triangles.push(a, b, c); } const vertexCount = positions.length / 3; const neighbors = Array.from({ length: vertexCount }, () => new Set()); for (let i = 0; i < triangles.length; i += 3) { const a = triangles[i]; const b = triangles[i + 1]; const c = triangles[i + 2]; neighbors[a].add(b).add(c); neighbors[b].add(a).add(c); neighbors[c].add(a).add(b); } for (let pass = 0; pass < shellSmoothIterations; pass++) { const next = positions.slice(); for (let v = 0; v < vertexCount; v++) { const count = neighbors[v].size; if (count === 0) continue; let sx = 0; let sy = 0; let sz = 0; neighbors[v].forEach(n => { sx += positions[n * 3]; sy += positions[n * 3 + 1]; sz += positions[n * 3 + 2]; }); next[v * 3] += shellSmoothStrength * (sx / count - positions[v * 3]); next[v * 3 + 1] += shellSmoothStrength * (sy / count - positions[v * 3 + 1]); next[v * 3 + 2] += shellSmoothStrength * (sz / count - positions[v * 3 + 2]); } positions = next; } const vertexAt = i => new THREE.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]); let signedVolume = 0; for (let i = 0; i < triangles.length; i += 3) { signedVolume += vertexAt(triangles[i]).dot(vertexAt(triangles[i + 1]).cross(vertexAt(triangles[i + 2]))); } if (signedVolume < 0) { for (let i = 0; i < triangles.length; i += 3) { const tmp = triangles[i + 1]; triangles[i + 1] = triangles[i + 2]; triangles[i + 2] = tmp; } } const geometry = new THREE.BufferGeometry(); geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3)); geometry.setIndex(triangles); geometry.computeVertexNormals(); return new THREE.Mesh(geometry, createShellMaterial(color)); } const shellVertexShader = ` varying vec3 vNormal; varying vec3 vViewDir; #include void main() { vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vNormal = normalize(normalMatrix * normal); vViewDir = normalize(-mvPosition.xyz); gl_Position = projectionMatrix * mvPosition; #include } `; const shellFragmentShader = ` uniform vec3 shellColor; uniform float centerOpacity; uniform float sideOpacity; uniform float sideFalloff; varying vec3 vNormal; varying vec3 vViewDir; #include void main() { float facing = clamp(dot(normalize(vNormal), normalize(vViewDir)), 0.0, 1.0); float alpha = mix(centerOpacity, sideOpacity, pow(1.0 - facing, sideFalloff)); gl_FragColor = vec4(shellColor, alpha); #include } `; function createShellMaterial(color) { return new THREE.ShaderMaterial({ uniforms: THREE.UniformsUtils.merge([ THREE.UniformsLib.fog, { shellColor: { value: new THREE.Color(color) }, centerOpacity: { value: shellOpacity }, sideOpacity: { value: shellOpacity * shellSideOpacityMultiplier }, sideFalloff: { value: shellSideFalloff } } ]), vertexShader: shellVertexShader, fragmentShader: shellFragmentShader, transparent: true, side: THREE.FrontSide, depthWrite: false, fog: true }); } function setShellOpacity(mesh, opacity) { mesh.material.uniforms.centerOpacity.value = opacity; mesh.material.uniforms.sideOpacity.value = opacity * shellSideOpacityMultiplier; } const aminoAcids = {}; codonData.forEach(d => { if (!aminoAcids[d.aa]) { aminoAcids[d.aa] = { positions: [], color: d.color, spans: [new Set(), new Set(), new Set()] }; } aminoAcids[d.aa].positions.push(d.position); for (let p = 0; p < 3; p++) aminoAcids[d.aa].spans[p].add(d.codon[p]); }); Object.keys(aminoAcids).forEach(aa => { const data = aminoAcids[aa]; const mesh = marchingCubes(data.positions, data.color, aaConnections[aa] || [], shellGridSize, shellThickness); if (mesh) { mesh.userData.aminoAcid = aa; mesh.renderOrder = -1; transparentMeshes.push(mesh); scene.add(mesh); } }); 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 * 1.5; const text = config.aaFullNames[aa] || aa; const normalTexture = createLabelTexture(text, data.color); const normalMaterial = new THREE.MeshBasicMaterial({ map: normalTexture, side: THREE.DoubleSide, transparent: true, blending: THREE.MultiplyBlending, depthWrite: false }); const highlightedMaterial = new THREE.MeshBasicMaterial({ map: createLabelTexture(text, data.color, true), side: THREE.DoubleSide, transparent: true, depthWrite: false }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(labelPlateWidth(normalTexture), config.plateHeight), normalMaterial); mesh.position.copy(avgPos); mesh.userData = { kind: 'aa', aminoAcid: aa, text, normalMaterial, highlightedMaterial }; labelMeshes.push(mesh); scene.add(mesh); }); 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 } ]; function buildAxisGroups(edges, position) { const axisKey = ['x', 'y', 'z'][position]; const fixedKeys = ['x', 'y', 'z'].filter(key => key !== axisKey); return edges.map(edge => { const group = new THREE.Group(); group.userData.edgeId = edge.id; group.userData.opacity = 0; const lineCoords = {}; const labelCoords = {}; fixedKeys.forEach(key => { const sign = edge[key] < 0 ? -1 : 1; lineCoords[key] = edge[key] + sign * axisLineOffset; labelCoords[key] = lineCoords[key] + sign * axisLabelOffset; }); const start = Object.assign(new THREE.Vector3(), lineCoords, { [axisKey]: -18 }); const end = Object.assign(new THREE.Vector3(), lineCoords, { [axisKey]: 18 }); const axisLine = new THREE.Line( new THREE.BufferGeometry().setFromPoints([start, end]), new THREE.LineBasicMaterial({ color: config.axisLineColor, transparent: true, opacity: 0 }) ); group.add(axisLine); for (let b = 0; b < 4; b++) { const base = config.bases[b]; const label = axisLabelText(base, position); const normalTexture = createAxisLabelTexture(label); const highlightedTexture = createAxisLabelTexture(label, 0x000000); const mesh = new THREE.Mesh( new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), new THREE.MeshBasicMaterial({ map: normalTexture, side: THREE.DoubleSide, transparent: true, opacity: 0, depthWrite: false }) ); const labelPos = Object.assign({}, labelCoords, { [axisKey]: (b - 1.5) * config.spacing }); mesh.position.set(labelPos.x, labelPos.y, labelPos.z); mesh.userData = { kind: 'axis', base, position, normalTexture, highlightedTexture }; axisLabelMeshes.push(mesh); group.add(mesh); } scene.add(group); return group; }); } const xAxisGroups = buildAxisGroups(xAxisEdges, 0); const yAxisGroups = buildAxisGroups(yAxisEdges, 1); const zAxisGroups = buildAxisGroups(zAxisEdges, 2); const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(-10, -10); let isDragging = false; let hoveredSelection = null; let lockedSelection = null; let tappedSelection = null; let touchStartPos = null; let touchStartTime = 0; function sameSelection(a, b) { if (a === b) return true; if (!a || !b || a.type !== b.type) return false; if (a.type === 'codon') return a.codon === b.codon; if (a.type === 'axis') return a.base === b.base && a.position === b.position; return a.aa === b.aa; } function pick() { raycaster.setFromCamera(mouse, camera); const targets = codonMeshes.filter(m => m.visible) .concat(axisLabelMeshes.filter(m => m.visible && m.material.opacity > 0.01)) .concat(labelMeshes.filter(m => m.visible)); const hits = raycaster.intersectObjects(targets); if (hits.length === 0) return null; const ud = hits[0].object.userData; if (ud.kind === 'codon') return { type: 'codon', codon: codonData[ud.index] }; if (ud.kind === 'axis') return { type: 'axis', base: ud.base, position: ud.position }; return { type: 'aa', aa: ud.aminoAcid }; } function setPointer(clientX, clientY) { const rect = container.getBoundingClientRect(); mouse.x = ((clientX - rect.left) / width) * 2 - 1; mouse.y = -((clientY - rect.top) / height) * 2 + 1; } container.addEventListener('mousemove', event => setPointer(event.clientX, event.clientY)); container.addEventListener('mouseleave', () => mouse.set(-10, -10)); 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 dist = Math.hypot(touch.clientX - touchStartPos.x, touch.clientY - touchStartPos.y); const elapsed = Date.now() - touchStartTime; touchStartPos = null; if (dist < tapThreshold && elapsed < tapTime) { setPointer(touch.clientX, touch.clientY); const hit = pick(); tappedSelection = hit && !sameSelection(hit, tappedSelection) ? hit : null; applySelection(tappedSelection); } }, { passive: true }); controls.addEventListener('start', () => { isDragging = true; lockedSelection = hoveredSelection || tappedSelection; }); controls.addEventListener('end', () => { isDragging = false; lockedSelection = null; }); function setMap(mesh, texture) { if (mesh.material.map !== texture) { mesh.material.map = texture; mesh.material.needsUpdate = true; } } function showGroups(isVisible) { aaLines.forEach(line => { line.visible = isVisible(line.userData.aminoAcid); }); transparentMeshes.forEach(mesh => { mesh.visible = isVisible(mesh.userData.aminoAcid); }); labelMeshes.forEach(mesh => { mesh.visible = isVisible(mesh.userData.aminoAcid); }); } function applySelection(sel) { axisLabelMeshes.forEach(mesh => { setMap(mesh, mesh.userData.normalTexture); mesh.renderOrder = 0; }); transparentMeshes.forEach(mesh => { setShellOpacity(mesh, shellOpacity); mesh.renderOrder = -1; }); labelMeshes.forEach(mesh => { mesh.material = mesh.userData.normalMaterial; mesh.renderOrder = 0; }); codonMeshes.forEach(mesh => { mesh.renderOrder = 0; }); if (!sel) { codonData.forEach(d => { setMap(d.mesh, d.originalTexture); d.mesh.visible = true; }); showGroups(() => true); return; } if (sel.type === 'codon') { codonData.forEach(d => { let mask; if (d === sel.codon) { mask = [true, true, true]; } else { mask = d.baseIndices.map((b, p) => b === sel.codon.baseIndices[p]); if (mask.filter(Boolean).length !== 2) mask = [false, false, false]; } setMap(d.mesh, textureFor(d, mask)); d.mesh.visible = true; }); showGroups(() => true); return; } if (sel.type === 'axis') { axisLabelMeshes.forEach(mesh => { if (mesh.userData.base === sel.base && mesh.userData.position === sel.position) { setMap(mesh, mesh.userData.highlightedTexture); } }); const visibleAminoAcids = new Set(); codonData.forEach(d => { const mask = [false, false, false]; const match = d.codon[sel.position] === sel.base; if (match) { mask[sel.position] = true; visibleAminoAcids.add(d.aa); } d.mesh.visible = match; setMap(d.mesh, textureFor(d, mask)); }); showGroups(aa => visibleAminoAcids.has(aa)); return; } if (sel.type === 'aa') { const spans = aminoAcids[sel.aa].spans; axisLabelMeshes.forEach(mesh => { if (spans[mesh.userData.position].has(mesh.userData.base)) { setMap(mesh, axisSpanTexture(mesh, aminoAcids[sel.aa].color)); } mesh.renderOrder = 2; }); codonData.forEach(d => { const inGroup = d.aa === sel.aa; setMap(d.mesh, textureFor(d, [inGroup, inGroup, inGroup])); d.mesh.visible = true; d.mesh.renderOrder = inGroup ? 2 : 0; }); showGroups(() => true); transparentMeshes.forEach(mesh => { const inGroup = mesh.userData.aminoAcid === sel.aa; mesh.visible = inGroup; if (inGroup) { setShellOpacity(mesh, shellHighlightOpacity); mesh.renderOrder = 1; } }); labelMeshes.forEach(mesh => { if (mesh.userData.aminoAcid === sel.aa) mesh.material = mesh.userData.highlightedMaterial; mesh.renderOrder = 2; }); } } function fadeAxisGroups(groups, bestEdge) { groups.forEach(group => { const target = group.userData.edgeId === bestEdge ? 1 : 0; const delta = target - group.userData.opacity; group.userData.opacity = Math.abs(delta) < 0.01 ? target : group.userData.opacity + delta * axisFadeSpeed; group.children.forEach(child => { child.material.opacity = group.userData.opacity; child.visible = group.userData.opacity > 0.001; if (child.type === 'Mesh') child.quaternion.copy(camera.quaternion); }); }); } let animationFrameId = null; function animate() { animationFrameId = requestAnimationFrame(animate); const camDist = camera.position.length(); scene.fog.near = camDist - cubeHalfDiag - fogPadding; scene.fog.far = camDist + cubeHalfDiag + fogPadding; codonData.forEach(d => { d.mesh.quaternion.copy(camera.quaternion); const offset = new THREE.Vector3().subVectors(camera.position, d.position).normalize().multiplyScalar(0.5); d.mesh.position.copy(d.position).add(offset); }); labelMeshes.forEach(mesh => mesh.quaternion.copy(camera.quaternion)); let bestYEdge = null; let lowestYScore = Infinity; yAxisGroups.forEach(group => { const edge = yAxisEdges[group.userData.edgeId]; const score = new THREE.Vector3(edge.x, 0, edge.z).project(camera).x; if (score < lowestYScore) { lowestYScore = score; bestYEdge = group.userData.edgeId; } }); const yEdge = yAxisEdges[bestYEdge]; const topScreen = new THREE.Vector3(yEdge.x, 18, yEdge.z).project(camera); const bottomScreen = new THREE.Vector3(yEdge.x, -18, yEdge.z).project(camera); const yBottom = bottomScreen.y < topScreen.y ? -18 : 18; const xEdgeZNegScreen = new THREE.Vector3(0, yBottom, -18).project(camera); const xEdgeZPosScreen = new THREE.Vector3(0, yBottom, 18).project(camera); const bestXZ = xEdgeZNegScreen.y > xEdgeZPosScreen.y ? 18 : -18; const zEdgeXNegScreen = new THREE.Vector3(-18, yBottom, 0).project(camera); const zEdgeXPosScreen = new THREE.Vector3(18, yBottom, 0).project(camera); const bestZX = zEdgeXNegScreen.y > zEdgeXPosScreen.y ? 18 : -18; let bestXEdge = xAxisEdges.findIndex(edge => edge.y === yBottom && edge.z === bestXZ); let bestZEdge = zAxisEdges.findIndex(edge => edge.x === bestZX && edge.y === yBottom); if (bestXEdge === -1) bestXEdge = 0; if (bestZEdge === -1) bestZEdge = 0; fadeAxisGroups(xAxisGroups, bestXEdge); fadeAxisGroups(yAxisGroups, bestYEdge); fadeAxisGroups(zAxisGroups, bestZEdge); if (tappedSelection) { applySelection(tappedSelection); } else if (isDragging) { applySelection(lockedSelection); } else { const next = pick(); if (!sameSelection(next, hoveredSelection)) { hoveredSelection = next; applySelection(hoveredSelection); } } controls.update(); renderer.render(scene, camera); } function startAnimation() { if (animationFrameId === null) animate(); } function stopAnimation() { if (animationFrameId !== null) { cancelAnimationFrame(animationFrameId); animationFrameId = null; } } const visibilityObserver = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) startAnimation(); else stopAnimation(); }); }, { rootMargin: visibilityMargin }); visibilityObserver.observe(container); document.fonts.ready.then(() => { textureCache.clear(); axisSpanTextureCache.clear(); codonData.forEach(d => { d.originalTexture = createCodonTexture(d.codon, d.color); }); labelMeshes.forEach(mesh => { const { text, aminoAcid, normalMaterial, highlightedMaterial } = mesh.userData; const color = aminoAcids[aminoAcid].color; normalMaterial.map = createLabelTexture(text, color); normalMaterial.needsUpdate = true; highlightedMaterial.map = createLabelTexture(text, color, true); highlightedMaterial.needsUpdate = true; mesh.geometry.dispose(); mesh.geometry = new THREE.PlaneGeometry(labelPlateWidth(normalMaterial.map), config.plateHeight); }); axisLabelMeshes.forEach(mesh => { const label = axisLabelText(mesh.userData.base, mesh.userData.position); mesh.userData.normalTexture = createAxisLabelTexture(label); mesh.userData.highlightedTexture = createAxisLabelTexture(label, 0x000000); }); applySelection(tappedSelection || (isDragging ? lockedSelection : hoveredSelection)); }); return container; }32:T4784,// Observable Notebooks 2.0 cell: the outer { } keeps these variables local. // Uses the notebook's `config` (geneticCode colours) and `fonts` cells, like the 3D chart. { fonts; const el = html`

	U		C		A		G
U	UUU	Phe	UCU	Ser	UAU	Tyr	UGU	Cys	U
	UUC	Phe	UCC		UAC	Tyr	UGC	Cys	C
	UUA	Leu	UCA		UAA	Stop	UGA	Stop	A
	UUG	Leu	UCG		UAG	Stop	UGG	Trp	G
C	CUU	Leu	CCU	Pro	CAU	His	CGU	Arg	U
	CUC		CCC		CAC	His	CGC		C
	CUA		CCA		CAA	Gln	CGA		A
	CUG		CCG		CAG	Gln	CGG		G
A	AUU	Ile	ACU	Thr	AAU	Asn	AGU	Ser	U
	AUC		ACC		AAC	Asn	AGC	Ser	C
	AUA		ACA		AAA	Lys	AGA	Arg	A
	AUG	Met	ACG		AAG	Lys	AGG	Arg	G
G	GUU	Val	GCU	Ala	GAU	Asp	GGU	Gly	U
	GUC		GCC		GAC	Asp	GGC		C
	GUA		GCA		GAA	Glu	GGA		A
	GUG		GCG		GAG	Glu	GGG		G

`; const toHex = (color) => `#${color.toString(16).padStart(6, "0")}`; const rowHighlightMix = 0.2; // share of the group colour in the row highlight (rest is white) // Mix a colour with white: amount 0 = white, 1 = the colour itself const tint = (color, amount) => { const mix = (shift) => Math.round(255 + (((color >> shift) & 255) - 255) * amount); return `rgb(${mix(16)}, ${mix(8)}, ${mix(0)})`; }; const code = config.geneticCode; // same colours and amino acids as the 3D chart // Each amino acid's colour, and the bases it uses at each codon position // (used to highlight the axis labels when an amino acid is hovered) const aaInfo = {}; for (const [codon, { aa, color }] of Object.entries(code)) { aaInfo[aa] ??= { color: toHex(color), rowTint: tint(color, rowHighlightMix), spans: [new Set(), new Set(), new Set()] }; for (let p = 0; p < 3; p++) aaInfo[aa].spans[p].add(codon[p]); } const boxes = (letters) => letters.map((l) => `${l}`).join(""); // Codon plates: three letter boxes on the amino acid's colour const plates = [...el.querySelectorAll("td.codon")].map((td) => { const codon = td.textContent.trim(); const { aa } = code[codon]; td.dataset.codon = codon; // the whole cell is the hover target td.innerHTML = `${boxes([...codon])}`; const plate = td.firstElementChild; plate.style.background = aaInfo[aa].color; return { codon, aa, td, plate, boxes: [...plate.children] }; }); // Amino acid labels (the brace span in each cell is kept) const labels = [...el.querySelectorAll("td.aa")].map((td) => { const aa = td.textContent.trim(); [...td.childNodes].forEach((n) => { if (n.nodeType === Node.TEXT_NODE) n.remove(); }); const label = document.createElement("span"); label.className = "aa-label"; label.textContent = aa; label.style.setProperty("--aa", aaInfo[aa].color); td.append(label); td.dataset.aa = aa; // the whole cell (bracket + name) is the hover target // The codons this label's bracket covers: the codon just left of it, and the // ones below it for as many rows as the cell spans const first = td.previousElementSibling.textContent.trim(); const start = "UCAG".indexOf(first[2]); const codons = Array.from({ length: td.rowSpan }, (_, k) => first.slice(0, 2) + "UCAG"[start + k]); return { aa, td, label, codons }; }); // Axis labels in the 3D chart's style: "U__", "_U_", "__U" const axisCells = [ ...[...el.querySelectorAll(".first")].map((cell) => [cell, 0]), ...[...el.querySelectorAll(".head")].map((cell) => [cell, 1]), ...[...el.querySelectorAll(".third")].map((cell) => [cell, 2]) ]; const axes = axisCells.map(([cell, position]) => { const base = cell.textContent.trim(); const letters = ["_", "_", "_"]; letters[position] = base; cell.dataset.base = base; // the whole cell is the hover target cell.dataset.position = position; cell.innerHTML = `${letters.join("")}`; return { base, position, plate: cell.firstElementChild }; }); // ---- Mouse-over logic, matching the 3D chart ---- // codon: that codon turns black; codons one mutation away get their two // shared letters in black // axis label: label turns black; only codons with that base at that position // stay visible, with that letter in black; brackets with none of // those codons hide // amino acid: label fills with its colour; its codons turn black and its // codon and label cells get a light tint of its colour; the axis // labels it spans fill with its colour const applySelection = (sel) => { plates.forEach((p) => { p.plate.classList.remove("hidden"); p.boxes.forEach((b) => b.classList.remove("on")); p.td.style.removeProperty("background-color"); }); labels.forEach((l) => { l.td.classList.remove("hidden"); l.label.classList.remove("hl"); l.td.style.removeProperty("background-color"); }); axes.forEach((a) => { a.plate.classList.remove("hl"); a.plate.style.removeProperty("--hl"); }); if (!sel) return; if (sel.type === "codon") { plates.forEach((p) => { let mask = [...p.codon].map((b, i) => b === sel.codon[i]); if (p.codon !== sel.codon && mask.filter(Boolean).length !== 2) mask = [false, false, false]; mask.forEach((on, i) => p.boxes[i].classList.toggle("on", on)); }); } else if (sel.type === "axis") { axes.forEach((a) => { if (a.base === sel.base && a.position === sel.position) a.plate.classList.add("hl"); }); plates.forEach((p) => { const match = p.codon[sel.position] === sel.base; p.plate.classList.toggle("hidden", !match); if (match) p.boxes[sel.position].classList.add("on"); }); labels.forEach((l) => { const anyVisible = l.codons.some((c) => c[sel.position] === sel.base); l.td.classList.toggle("hidden", !anyVisible); }); } else if (sel.type === "aa") { const info = aaInfo[sel.aa]; labels.forEach((l) => { if (l.aa !== sel.aa) return; l.label.classList.add("hl"); l.td.style.backgroundColor = info.rowTint; }); plates.forEach((p) => { if (p.aa !== sel.aa) return; p.boxes.forEach((b) => b.classList.add("on")); p.td.style.backgroundColor = info.rowTint; }); axes.forEach((a) => { if (info.spans[a.position].has(a.base)) { a.plate.classList.add("hl"); a.plate.style.setProperty("--hl", info.color); } }); } }; const selectionFrom = (target) => { const t = target.closest?.("[data-codon], [data-aa], [data-base]"); if (!t || !el.contains(t)) return null; if (t.dataset.codon) return { type: "codon", codon: t.dataset.codon }; if (t.dataset.aa) return { type: "aa", aa: t.dataset.aa }; return { type: "axis", base: t.dataset.base, position: +t.dataset.position }; }; const sameSelection = (a, b) => a === b || (!!a && !!b && a.type === b.type && a.codon === b.codon && a.aa === b.aa && a.base === b.base && a.position === b.position); // Mouse: hover. Touch: tap to select, tap again (or tap elsewhere) to clear. let hovered = null; let tapped = null; let lastPointerType = "mouse"; el.addEventListener("pointerdown", (e) => { lastPointerType = e.pointerType; }); el.addEventListener("pointerover", (e) => { if (e.pointerType === "touch" || tapped) return; const sel = selectionFrom(e.target); if (!sameSelection(sel, hovered)) { hovered = sel; applySelection(sel); } }); el.addEventListener("pointerleave", (e) => { if (e.pointerType === "touch" || tapped) return; hovered = null; applySelection(null); }); el.addEventListener("click", (e) => { if (lastPointerType !== "touch") return; const sel = selectionFrom(e.target); tapped = sel && !sameSelection(sel, tapped) ? sel : null; applySelection(tapped); }); // ---- Curly braces ---- // Each "}" is a single SVG path at the exact pixel height of its cell. // The line sits on x = 6.5 so a 1px stroke lands on one pixel column (stays crisp). const drawBrace = (brace, h) => { if (h < 20) return; const m = h / 2; brace.innerHTML = ``; }; // ---- Grid shadow ---- // Size the shadow box to the outer edges of the codon and amino acid cells const shadow = el.querySelector(".grid-shadow"); const gridCells = el.querySelectorAll("td.codon, td.aa"); const placeShadow = () => { const box = el.getBoundingClientRect(); if (box.width === 0) return; let top = Infinity, left = Infinity, right = -Infinity, bottom = -Infinity; for (const td of gridCells) { const r = td.getBoundingClientRect(); top = Math.min(top, r.top); left = Math.min(left, r.left); right = Math.max(right, r.right); bottom = Math.max(bottom, r.bottom); } Object.assign(shadow.style, { top: `${top - box.top}px`, left: `${left - box.left}px`, width: `${right - left}px`, height: `${bottom - top}px` }); }; // Redraw braces and reposition the shadow whenever sizes change // (first render, font load, window resize, zoom) const ro = new ResizeObserver((entries) => { for (const entry of entries) { if (entry.target.classList.contains("brace")) { drawBrace(entry.target, entry.contentRect.height); } } placeShadow(); }); el.querySelectorAll(".brace").forEach((b) => ro.observe(b)); ro.observe(el.querySelector("table")); invalidation.then(() => ro.disconnect()); display(el); }33: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; }34: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' } })35: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], []] })36:[] 2f:{"id":"68408541cbf03fab","slug":null,"title":"3D Genetic RNA Codon 4x4x4 Cube","thumbnail":"19120eef9659a3db5d6eeb7d1deb43fffec2918cb2505556ecce40c383ffc142","access_level":"public","create_time":"$D2026-01-24T04:58:11.735Z","update_time":"$D2026-10-03T18:45:19.459Z","view_time":null,"first_public_time":"$D2026-01-24T07:24:10.871Z","has_unpublished_edits":null,"fork":{"id":"4a3be36a8c428177","slug":"three-js-templates","title":"Three JS Templates","owner":{"id":"cf45be0120eccaad","login":"laotzunami","name":"Lao"}},"stars":14,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":605,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"In biology textbooks, codon tables are often represented as nested 4x4 grids. This visualization is simply taking the third letter, and giving it its own spatial dimension.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"$32","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 30:"$2f:body"