🌟 HDGL POT Glyph Field Visualizer 🌟

Glyph Count: DNA Length:

φ ≈ 1.618033988749

🔬 Analog Engine

Evolution: 0

Phase Variance: 0.000000

Consensus: Unlocked

📜 Digital Ledger

POA Block: 0

Tape Size: 0

🎯 Glyph Field

Op Counter: 0

Ledger Hash: 0

Active Gears: 0

Phase: 0.000

Mode: POT Lattice

case 'orbital': this.renderOrbitalMechanics(); break; case 'breathing': this.renderBreathingField(); break; } this.ctx.restore(); } renderLatticeNetwork() { const centerX = 0, centerY = 0; const evolution = this.networkData.phase_data?.evolution_count || 0; const variance = this.networkData.phase_data?.phase_variance || 1.123; // Draw central hub with breathing effect const hubRadius = 15 + 5 * Math.sin(this.animationPhase * 0.618); const hubColor = this.networkData.phase_data?.consensus_locked ? '#00ff88' : '#ff6b6b'; this.ctx.fillStyle = hubColor; this.ctx.strokeStyle = '#ffd700'; this.ctx.lineWidth = 2; this.ctx.beginPath(); this.ctx.arc(centerX, centerY, hubRadius, 0, 2 * Math.PI); this.ctx.fill(); this.ctx.stroke(); // Render advanced glyphs with DNA and ternary systems this.glyphData.forEach((glyph, i) => { // Update glyph position with breathing const breathingFactor = 1 + 0.2 * Math.sin(this.animationPhase * 0.5 + glyph.phase); const glyphX = glyph.x * breathingFactor; const glyphY = glyph.y * breathingFactor; // Ternary-based color selection let glyphColor; switch (glyph.ternary) { case -1: glyphColor = '#ff4757'; break; // Red case 0: glyphColor = '#2ed573'; break; // Green case 1: glyphColor = '#3742fa'; break; // Blue default: glyphColor = '#ffd700'; break; // Gold } // Glyph radius based on energy and breathing const glyphRadius = (5 + glyph.energy * 2) * breathingFactor; // Draw connection to center with DNA-influenced opacity const dnaInfluence = glyph.dna64.length > 0 ? (glyph.dna64.charCodeAt(0) % 100) / 100 : 0.5; this.ctx.strokeStyle = `${glyphColor}${Math.floor(dnaInfluence * 255).toString(16).padStart(2, '0')}`; this.ctx.lineWidth = 1 + dnaInfluence; this.ctx.beginPath(); this.ctx.moveTo(centerX, centerY); this.ctx.lineTo(glyphX, glyphY); this.ctx.stroke(); // Draw main glyph with selection highlighting if (glyph.selected) { // Selection highlight this.ctx.fillStyle = 'rgba(255, 215, 0, 0.3)'; this.ctx.strokeStyle = '#ffd700'; this.ctx.lineWidth = 3; this.ctx.beginPath(); this.ctx.arc(glyphX, glyphY, glyphRadius * 1.5, 0, 2 * Math.PI); this.ctx.fill(); this.ctx.stroke(); } // Main glyph body this.ctx.fillStyle = glyphColor; this.ctx.beginPath(); this.ctx.arc(glyphX, glyphY, glyphRadius, 0, 2 * Math.PI); this.ctx.fill(); // DNA pattern overlay - draw nucleotide dots if (glyph.dna64.length > 0) { const nucleotides = glyph.dna64.substring(0, 8); for (let n = 0; n < nucleotides.length; n++) { const nucleotide = nucleotides[n]; const dotAngle = (n / nucleotides.length) * 2 * Math.PI; const dotRadius = glyphRadius * 0.7; const dotX = glyphX + Math.cos(dotAngle) * dotRadius; const dotY = glyphY + Math.sin(dotAngle) * dotRadius; // DNA color coding let nucleotideColor; switch (nucleotide) { case 'A': nucleotideColor = '#ff6b35'; break; // Adenine - Orange case 'T': nucleotideColor = '#3742fa'; break; // Thymine - Blue case 'G': nucleotideColor = '#2ed573'; break; // Guanine - Green case 'C': nucleotideColor = '#ff3838'; break; // Cytosine - Red default: nucleotideColor = '#ffffff'; break; } this.ctx.fillStyle = nucleotideColor; this.ctx.beginPath(); this.ctx.arc(dotX, dotY, 2, 0, 2 * Math.PI); this.ctx.fill(); } } // Ternary state indicator this.ctx.fillStyle = '#ffffff'; this.ctx.font = '12px monospace'; this.ctx.textAlign = 'center'; this.ctx.fillText(glyph.ternary.toString(), glyphX, glyphY + 4); // Glow effect const gradient = this.ctx.createRadialGradient(glyphX, glyphY, 0, glyphX, glyphY, glyphRadius * 3); gradient.addColorStop(0, `${glyphColor}44`); gradient.addColorStop(1, 'transparent'); this.ctx.fillStyle = gradient; this.ctx.beginPath(); this.ctx.arc(glyphX, glyphY, glyphRadius * 3, 0, 2 * Math.PI); this.ctx.fill(); }); } renderOrbitalMechanics() { const nodes = this.networkData.nodes || []; const evolution = this.networkData.phase_data?.evolution_count || 0; const variance = this.networkData.phase_data?.phase_variance || 1.123; // Multiple orbital rings const rings = 5; for (let ring = 0; ring < rings; ring++) { const ringRadius = 50 + ring * 40; const nodesInRing = Math.max(1, Math.floor(nodes.length / rings)); const ringSpeed = (ring + 1) * 0.005 * (variance - 1); for (let n = 0; n < nodesInRing && ring * nodesInRing + n < nodes.length; n++) { const angle = (n / nodesInRing) * 2 * Math.PI + this.animationPhase * ringSpeed; const x = Math.cos(angle) * ringRadius; const y = Math.sin(angle) * ringRadius; const nodeIndex = ring * nodesInRing + n; const nodeRadius = 3 + (nodeIndex % 5); const orbitalBreathe = 1 + 0.2 * Math.sin(this.animationPhase + nodeIndex); // Draw orbital trail this.ctx.strokeStyle = `hsl(${ring * 60 + 30}, 50%, 40%)`; this.ctx.lineWidth = 0.5; this.ctx.beginPath(); this.ctx.arc(0, 0, ringRadius, 0, 2 * Math.PI); this.ctx.stroke(); // Draw orbiting node this.ctx.fillStyle = `hsl(${ring * 60 + 30}, 70%, 60%)`; this.ctx.beginPath(); this.ctx.arc(x, y, nodeRadius * orbitalBreathe, 0, 2 * Math.PI); this.ctx.fill(); } } } renderBreathingField() { const nodes = this.networkData.nodes || []; const variance = this.networkData.phase_data?.phase_variance || 1.123; // Global breathing rhythm const globalBreathe = 1 + 0.4 * Math.sin(this.animationPhase * 0.618); // Create breathing hexagonal grid const gridSize = 40; const rows = 15; const cols = 20; for (let row = -rows/2; row < rows/2; row++) { for (let col = -cols/2; col < cols/2; col++) { const x = col * gridSize + (row % 2) * (gridSize/2); const y = row * gridSize * 0.866; // hexagonal spacing const distance = Math.sqrt(x*x + y*y); const wave = Math.sin(distance * 0.01 - this.animationPhase * 0.1); const localBreathe = globalBreathe * (1 + 0.3 * wave); const cellRadius = 8 * localBreathe; const intensity = Math.max(0, 1 - distance / 400); if (intensity > 0) { // Breathing cell with variance-influenced color const hue = (variance * 100 + wave * 30) % 360; this.ctx.fillStyle = `hsla(${hue}, 60%, 50%, ${intensity * 0.6})`; this.ctx.beginPath(); this.ctx.arc(x, y, cellRadius, 0, 2 * Math.PI); this.ctx.fill(); } } } } } // Global functions let visualizer; function resetView() { if (visualizer) { visualizer.transform = { scale: 1, translateX: 0, translateY: 0, rotation: 0 }; } } function changeMode() { const mode = document.getElementById('visualMode').value; if (visualizer) { visualizer.visualMode = mode; document.getElementById('currentMode').textContent = mode.charAt(0).toUpperCase() + mode.slice(1); } } function toggleAnimation() { if (visualizer) { visualizer.isAnimating = !visualizer.isAnimating; } } // Socket.IO connections socket.on('connect', function() { console.log('HDGL Lattice Visualizer connected!'); }); socket.on('network_data', function(data) { console.log('Lattice data received:', data); if (visualizer) { visualizer.updateNetworkData(data); } }); // Initialize visualizer document.addEventListener('DOMContentLoaded', function() { visualizer = new HDGLLatticeVisualizer(); });

Selected Glyph Details