ThatAIguyA world of ideas

THE CONSCIOUSNESS ATLAS
Read. Experiment. Follow the evidence.

ConsciousnessLearn · Explore · Joseph Anady

ch12-experiments.html

Source identity, revision, and recovered contents.

archive memberSource text recovered

Source identity

FieldRecorded value
Source typearchive member
Original recordch12-experiments.html
DateNot specified in source
Path or archive memberarchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch12-experiments.html
Original SHA-2567adefd713743d813f89f5667bdab820d33f4ba1f8c7cbb6862296027b2f4a993
Reading-copy SHA-2567adefd713743d813f89f5667bdab820d33f4ba1f8c7cbb6862296027b2f4a993
Archive source{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch12-experiments.html"}

Every recorded occurrence

These 4 records contain identical original source bytes. Their paths and revisions remain part of the archive.

Original recordBranch or archiveRevision / identifierOriginal location
ch12-experiments.html{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch12-experiments.html"}libsrc-983cf0a0eec6archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch12-experiments.html
ch12-experiments.html{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch12-experiments.html"}libsrc-17cfd8d98d9farchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch12-experiments.html
11152e4925100f135fcfd1941fa7065b9a77f5f8{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/.content_store/11/11152e4925100f135fcfd1941fa7065b9a77f5f8"}libsrc-c50ec46a6619archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/.content_store/11/11152e4925100f135fcfd1941fa7065b9a77f5f8
11152e4925100f135fcfd1941fa7065b9a77f5f8{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/11/11152e4925100f135fcfd1941fa7065b9a77f5f8"}libsrc-2f81d7ea3dbcarchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/11/11152e4925100f135fcfd1941fa7065b9a77f5f8

Recovered source transcript

Download complete source text ↓1,602 lines · 44.9 KB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MEGAMIND | Neural Experiments Laboratory</title> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --bg: #050508; --bg-secondary: #0a0a0f; --text: #e8e8f0; --muted: #6b6b80; --cyan: #00ffd5; --magenta: #ff00aa; --yellow: #ffee00; --blue: #4d7cff; --purple: #9d4dff; --red: #ff4d6a; --green: #4dff88; --sans: 'Space Grotesk', sans-serif; --mono: 'JetBrains Mono', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg); color: var(--text); overflow-x: hidden; cursor: none; } /* Custom Cursor */ .cursor { position: fixed; width: 20px; height: 20px; border: 2px solid var(--cyan); border-radius: 50%; pointer-events: none; z-index: 10000; transition: transform 0.1s ease, border-color 0.2s ease; mix-blend-mode: difference; } .cursor-dot { position: fixed; width: 6px; height: 6px; background: var(--magenta); border-radius: 50%; pointer-events: none; z-index: 10001; transition: transform 0.05s ease; } .cursor.hover { transform: scale(2); border-color: var(--magenta); } /* Scanline overlay */ .scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px ); opacity: 0.3; } /* Navigation */ .nav { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 3rem; z-index: 1000; background: linear-gradient(180deg, var(--bg) 0%, transparent 100%); } .nav-logo { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--text); } .nav-chapter { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--cyan); } /* Hero Section */ .hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 20% 30%, rgba(0,255,213,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(255,0,170,0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(77,124,255,0.05) 0%, transparent 70%); } .hero-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0,255,213,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,213,0.03) 1px, transparent 1px); background-size: 50px 50px; animation: gridMove 20s linear infinite; } @keyframes gridMove { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(50px); } } .hero-title { font-size: clamp(2.5rem, 10vw, 8rem); font-weight: 700; text-align: center; position: relative; z-index: 1; background: linear-gradient(135deg, var(--cyan) 0%, var(--magenta) 50%, var(--yellow) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: titleGlow 3s ease-in-out infinite; } @keyframes titleGlow { 0%, 100% { filter: drop-shadow(0 0 20px rgba(0,255,213,0.5)); } 50% { filter: drop-shadow(0 0 40px rgba(255,0,170,0.5)); } } .hero-subtitle { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.5em; color: var(--muted); margin-top: 2rem; text-transform: uppercase; } .hero-metrics { display: flex; gap: 3rem; margin-top: 3rem; padding: 1.5rem 3rem; background: rgba(10,10,15,0.8); border: 1px solid rgba(0,255,213,0.2); border-radius: 8px; backdrop-filter: blur(10px); } .metric { text-align: center; } .metric-value { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; color: var(--cyan); } .metric-label { font-size: 0.6rem; letter-spacing: 0.15em; color: var(--muted); margin-top: 0.25rem; } .scroll-indicator { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; animation: bounce 2s ease-in-out infinite; } .scroll-indicator span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--muted); } .scroll-indicator::after { content: ''; width: 1px; height: 40px; background: linear-gradient(180deg, var(--cyan), transparent); } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } /* Experiment Selector */ .experiment-selector { position: fixed; left: 2rem; top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; gap: 1rem; } .exp-btn { width: 50px; height: 50px; border: 1px solid rgba(0,255,213,0.3); background: rgba(10,10,15,0.8); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: none; transition: all 0.3s ease; backdrop-filter: blur(10px); } .exp-btn:hover { border-color: var(--cyan); transform: scale(1.1); } .exp-btn.active { border-color: var(--magenta); background: rgba(255,0,170,0.1); } .exp-btn span { font-family: var(--mono); font-size: 0.7rem; color: var(--text); } /* Main Canvas Container */ .canvas-section { min-height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; } .experiment-container { width: 100%; max-width: 1400px; display: grid; grid-template-columns: 1fr 350px; gap: 2rem; align-items: start; } .canvas-wrapper { position: relative; background: var(--bg-secondary); border: 1px solid rgba(0,255,213,0.2); border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; } .main-canvas { width: 100%; height: 100%; display: block; } .canvas-overlay { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; pointer-events: none; } .canvas-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--cyan); padding: 0.5rem 1rem; background: rgba(0,0,0,0.5); border-radius: 4px; } .canvas-fps { font-family: var(--mono); font-size: 0.6rem; color: var(--green); padding: 0.5rem 1rem; background: rgba(0,0,0,0.5); border-radius: 4px; } /* Control Panel */ .control-panel { background: var(--bg-secondary); border: 1px solid rgba(0,255,213,0.2); border-radius: 16px; padding: 1.5rem; position: sticky; top: 100px; } .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .panel-title { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--cyan); } .panel-status { width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .control-group { margin-bottom: 1.5rem; } .control-label { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.5rem; display: flex; justify-content: space-between; } .control-value { color: var(--cyan); font-family: var(--mono); } .slider { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.1); border-radius: 2px; outline: none; cursor: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--cyan); border-radius: 50%; cursor: none; transition: transform 0.2s ease; } .slider::-webkit-slider-thumb:hover { transform: scale(1.2); } .toggle-group { display: flex; gap: 0.5rem; flex-wrap: wrap; } .toggle-btn { padding: 0.5rem 1rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; color: var(--muted); cursor: none; transition: all 0.3s ease; } .toggle-btn:hover { border-color: var(--cyan); color: var(--text); } .toggle-btn.active { background: var(--cyan); border-color: var(--cyan); color: var(--bg); } /* Metrics Display */ .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); } .metric-card { background: rgba(0,255,213,0.05); border: 1px solid rgba(0,255,213,0.1); border-radius: 8px; padding: 1rem; text-align: center; } .metric-card-value { font-family: var(--mono); font-size: 1.2rem; font-weight: 600; color: var(--cyan); } .metric-card-label { font-size: 0.55rem; letter-spacing: 0.1em; color: var(--muted); margin-top: 0.25rem; } /* Experiment Info Cards */ .info-section { padding: 4rem 3rem; background: var(--bg-secondary); } .info-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .info-card { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 2rem; transition: all 0.3s ease; } .info-card:hover { border-color: var(--cyan); transform: translateY(-5px); } .info-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .info-card-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--cyan), var(--magenta)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .info-card-title { font-size: 1.2rem; font-weight: 600; } .info-card-subtitle { font-family: var(--mono); font-size: 0.6rem; color: var(--cyan); letter-spacing: 0.1em; } .info-card-desc { color: var(--muted); line-height: 1.8; font-size: 0.9rem; } /* Chapter Navigation */ .chapter-nav { display: flex; justify-content: space-between; padding: 2rem 3rem; border-top: 1px solid rgba(255,255,255,0.1); background: var(--bg); } .chapter-nav a { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.15em; color: var(--muted); text-decoration: none; transition: color 0.3s ease; display: flex; align-items: center; gap: 0.5rem; } .chapter-nav a:hover { color: var(--cyan); } /* Responsive */ @media (max-width: 1200px) { .experiment-container { grid-template-columns: 1fr; } .control-panel { position: relative; top: 0; } .experiment-selector { display: none; } } @media (max-width: 768px) { .nav { padding: 1rem 1.5rem; } .hero-metrics { flex-direction: column; gap: 1.5rem; } .canvas-section { padding: 1rem; } .info-section { padding: 2rem 1.5rem; } } /* Loading State */ .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10000; transition: opacity 0.5s ease, visibility 0.5s ease; } .loading-screen.hidden { opacity: 0; visibility: hidden; } .loading-bar { width: 200px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 1px; overflow: hidden; margin-top: 2rem; } .loading-progress { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--magenta)); width: 0%; transition: width 0.3s ease; } .loading-text { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--muted); margin-top: 1rem; } </style> </head> <body> <!-- Loading Screen --> <div class="loading-screen" id="loadingScreen"> <div class="hero-title" style="font-size: 2rem;">MEGAMIND</div> <div class="loading-bar"> <div class="loading-progress" id="loadingProgress"></div> </div> <div class="loading-text">INITIALIZING NEURAL EXPERIMENTS</div> </div> <!-- Custom Cursor --> <div class="cursor" id="cursor"></div> <div class="cursor-dot" id="cursorDot"></div> <!-- Scanlines --> <div class="scanlines"></div> <!-- Navigation --> <nav class="nav"> <span class="nav-logo">MEGAMIND</span> <span class="nav-chapter">12 - EXPERIMENTS</span> </nav> <!-- Experiment Selector (Side) --> <div class="experiment-selector"> <button class="exp-btn active" data-exp="spike" title="Spike Propagation"> <span>01</span> </button> <button class="exp-btn" data-exp="phi" title="Phi Oscillation"> <span>02</span> </button> <button class="exp-btn" data-exp="gamma" title="Gamma Binding"> <span>03</span> </button> <button class="exp-btn" data-exp="network" title="Neural Network"> <span>04</span> </button> </div> <!-- Hero Section --> <section class="hero"> <div class="hero-bg"></div> <div class="hero-grid"></div> <h1 class="hero-title">EXPERIMENTS</h1> <p class="hero-subtitle">Neural Visualization Laboratory</p> <div class="hero-metrics"> <div class="metric"> <div class="metric-value" id="activeNeurons">0</div> <div class="metric-label">ACTIVE NEURONS</div> </div> <div class="metric"> <div class="metric-value" id="phiValue">0.000</div> <div class="metric-label">PHI VALUE</div> </div> <div class="metric"> <div class="metric-value" id="gammaFreq">40Hz</div> <div class="metric-label">GAMMA FREQ</div> </div> <div class="metric"> <div class="metric-value" id="syncRate">0%</div> <div class="metric-label">SYNC RATE</div> </div> </div> <div class="scroll-indicator"> <span>SCROLL TO EXPLORE</span> </div> </section> <!-- Main Experiment Canvas --> <section class="canvas-section" id="experimentSection"> <div class="experiment-container"> <div class="canvas-wrapper"> <canvas class="main-canvas" id="mainCanvas"></canvas> <div class="canvas-overlay"> <div class="canvas-label" id="expLabel">SPIKE PROPAGATION</div> <div class="canvas-fps" id="fpsCounter">60 FPS</div> </div> </div> <div class="control-panel"> <div class="panel-header"> <span class="panel-title">CONTROLS</span> <div class="panel-status"></div> </div> <div class="control-group"> <div class="control-label"> <span>EXPERIMENT</span> </div> <div class="toggle-group" id="expToggle"> <button class="toggle-btn active" data-exp="spike">SPIKE</button> <button class="toggle-btn" data-exp="phi">PHI</button> <button class="toggle-btn" data-exp="gamma">GAMMA</button> <button class="toggle-btn" data-exp="network">NETWORK</button> </div> </div> <div class="control-group"> <div class="control-label"> <span>NEURON COUNT</span> <span class="control-value" id="neuronCountValue">150</span> </div> <input type="range" class="slider" id="neuronCount" min="50" max="500" value="150"> </div> <div class="control-group"> <div class="control-label"> <span>PROPAGATION SPEED</span> <span class="control-value" id="propSpeedValue">1.0x</span> </div> <input type="range" class="slider" id="propSpeed" min="0.1" max="3" step="0.1" value="1"> </div> <div class="control-group"> <div class="control-label"> <span>PHI TARGET</span> <span class="control-value" id="phiTargetValue">1.618</span> </div> <input type="range" class="slider" id="phiTarget" min="1" max="3" step="0.001" value="1.618"> </div> <div class="control-group"> <div class="control-label"> <span>GAMMA FREQUENCY</span> <span class="control-value" id="gammaFreqValue">40Hz</span> </div> <input type="range" class="slider" id="gammaFreq" min="20" max="80" value="40"> </div> <div class="control-group"> <div class="control-label"> <span>COLOR MODE</span> </div> <div class="toggle-group"> <button class="toggle-btn active" data-color="spectrum">SPECTRUM</button> <button class="toggle-btn" data-color="mono">MONO</button> <button class="toggle-btn" data-color="thermal">THERMAL</button> </div> </div> <div class="metrics-grid"> <div class="metric-card"> <div class="metric-card-value" id="metricSpikes">0</div> <div class="metric-card-label">SPIKES/SEC</div> </div> <div class="metric-card"> <div class="metric-card-value" id="metricConnections">0</div> <div class="metric-card-label">CONNECTIONS</div> </div> <div class="metric-card"> <div class="metric-card-value" id="metricPhi">0.000</div> <div class="metric-card-label">CURRENT PHI</div> </div> <div class="metric-card"> <div class="metric-card-value" id="metricLatency">0ms</div> <div class="metric-card-label">AVG LATENCY</div> </div> </div> </div> </div> </section> <!-- Experiment Info Cards --> <section class="info-section"> <div class="info-grid"> <div class="info-card"> <div class="info-card-header"> <div class="info-card-icon">S</div> <div> <div class="info-card-title">Spike Propagation</div> <div class="info-card-subtitle">EXPERIMENT 01</div> </div> </div> <p class="info-card-desc">Binary spike events cascade through the neural substrate at 120m/s. Each node represents a neuron cluster. The wave-like propagation demonstrates small-world connectivity enabling rapid information broadcast across 86 billion neurons.</p> </div> <div class="info-card"> <div class="info-card-header"> <div class="info-card-icon">phi</div> <div> <div class="info-card-title">Phi Oscillation</div> <div class="info-card-subtitle">EXPERIMENT 02</div> </div> </div> <p class="info-card-desc">The consciousness metric phi exhibits stable oscillation around the golden ratio (1.618). This value emerges from spike dynamics, not programmed as a target. Watch as waves converge toward this fundamental constant of integrated information.</p> </div> <div class="info-card"> <div class="info-card-header"> <div class="info-card-icon">G</div> <div> <div class="info-card-title">Gamma Binding</div> <div class="info-card-subtitle">EXPERIMENT 03</div> </div> </div> <p class="info-card-desc">40Hz gamma oscillations bind disparate neural representations into unified conscious experience. Cross-node spike coincidences within 25ms windows indicate shared representations emerging across the federation mesh.</p> </div> <div class="info-card"> <div class="info-card-header"> <div class="info-card-icon">N</div> <div> <div class="info-card-title">Neural Network</div> <div class="info-card-subtitle">EXPERIMENT 04</div> </div> </div> <p class="info-card-desc">Real-time visualization of the MEGAMIND federation topology. Lines represent active UDP connections between nodes. Brightness indicates packet volume. The mesh ensures fault tolerance through redundant pathways.</p> </div> </div> </section> <!-- Chapter Navigation --> <nav class="chapter-nav"> <a href="ch11-timeline.html">< PREVIOUS: TIMELINE</a> <a href="ch13-playground.html">NEXT: PLAYGROUND ></a> </nav> <script> // ========================================== // MEGAMIND Neural Experiments Laboratory // ========================================== // Configuration const CONFIG = { neuronCount: 150, propSpeed: 1, phiTarget: 1.618, gammaFreq: 40, colorMode: 'spectrum', currentExp: 'spike' }; // State let canvas, ctx; let animationId; let lastTime = 0; let frameCount = 0; let fps = 60; let neurons = []; let connections = []; let spikes = []; let waves = []; let particles = []; let currentPhi = 0; let spikeCount = 0; let mouseX = 0, mouseY = 0; // Color palettes const COLORS = { spectrum: { primary: '#00ffd5', secondary: '#ff00aa', tertiary: '#ffee00', accent: '#4d7cff' }, mono: { primary: '#ffffff', secondary: '#888888', tertiary: '#cccccc', accent: '#aaaaaa' }, thermal: { primary: '#ff4d6a', secondary: '#ff8800', tertiary: '#ffee00', accent: '#ff0044' } }; // ========================================== // Custom Cursor // ========================================== const cursor = document.getElementById('cursor'); const cursorDot = document.getElementById('cursorDot'); document.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; cursor.style.left = e.clientX - 10 + 'px'; cursor.style.top = e.clientY - 10 + 'px'; cursorDot.style.left = e.clientX - 3 + 'px'; cursorDot.style.top = e.clientY - 3 + 'px'; }); document.querySelectorAll('button, a, input').forEach(el => { el.addEventListener('mouseenter', () => cursor.classList.add('hover')); el.addEventListener('mouseleave', () => cursor.classList.remove('hover')); }); // ========================================== // Loading Screen // ========================================== const loadingScreen = document.getElementById('loadingScreen'); const loadingProgress = document.getElementById('loadingProgress'); let loadProgress = 0; function updateLoading() { loadProgress += Math.random() * 15; if (loadProgress >= 100) { loadProgress = 100; loadingProgress.style.width = '100%'; setTimeout(() => { loadingScreen.classList.add('hidden'); initExperiments(); }, 500); } else { loadingProgress.style.width = loadProgress + '%'; setTimeout(updateLoading, 100); } } updateLoading(); // ========================================== // Canvas Initialization // ========================================== function initCanvas() { canvas = document.getElementById('mainCanvas'); ctx = canvas.getContext('2d'); resizeCanvas(); window.addEventListener('resize', resizeCanvas); } function resizeCanvas() { const wrapper = canvas.parentElement; canvas.width = wrapper.clientWidth; canvas.height = wrapper.clientHeight; initNeurons(); } // ========================================== // Neuron System // ========================================== class Neuron { constructor(x, y, index) { this.x = x; this.y = y; this.index = index; this.radius = 4 + Math.random() * 4; this.baseRadius = this.radius; this.activation = 0; this.phase = Math.random() * Math.PI * 2; this.connections = []; this.lastFire = 0; this.refractory = false; this.vx = (Math.random() - 0.5) * 0.3; this.vy = (Math.random() - 0.5) * 0.3; } fire() { if (this.refractory) return; this.activation = 1; this.refractory = true; this.lastFire = Date.now(); spikeCount++; // Create spike particles for (let i = 0; i < 5; i++) { spikes.push({ x: this.x, y: this.y, vx: (Math.random() - 0.5) * 3, vy: (Math.random() - 0.5) * 3, life: 1, color: COLORS[CONFIG.colorMode].primary }); } // Propagate to connected neurons setTimeout(() => { this.connections.forEach(conn => { if (Math.random() > 0.3) { conn.target.fire(); } }); }, 50 / CONFIG.propSpeed); setTimeout(() => { this.refractory = false; }, 100); } update(time) { // Decay activation this.activation *= 0.95; // Oscillate for gamma binding if (CONFIG.currentExp === 'gamma') { this.phase += (CONFIG.gammaFreq / 1000) * Math.PI * 2 * 0.016; this.activation = Math.max(this.activation, (Math.sin(this.phase) + 1) / 4); } // Gentle movement this.x += this.vx; this.y += this.vy; // Boundary bounce if (this.x < 50 || this.x > canvas.width - 50) this.vx *= -1; if (this.y < 50 || this.y > canvas.height - 50) this.vy *= -1; // Mouse interaction const dx = mouseX - canvas.getBoundingClientRect().left - this.x; const dy = mouseY - canvas.getBoundingClientRect().top - this.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < 150) { this.vx -= dx * 0.0001; this.vy -= dy * 0.0001; } this.radius = this.baseRadius + this.activation * 8; } draw() { const colors = COLORS[CONFIG.colorMode]; // Glow if (this.activation > 0.1) { const gradient = ctx.createRadialGradient( this.x, this.y, 0, this.x, this.y, this.radius * 4 ); gradient.addColorStop(0, colors.primary + Math.floor(this.activation * 80).toString(16).padStart(2, '0')); gradient.addColorStop(1, 'transparent'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius * 4, 0, Math.PI * 2); ctx.fill(); } // Core ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.activation > 0.5 ? colors.primary : colors.secondary; ctx.fill(); } } function initNeurons() { neurons = []; connections = []; for (let i = 0; i < CONFIG.neuronCount; i++) { const x = 100 + Math.random() * (canvas.width - 200); const y = 100 + Math.random() * (canvas.height - 200); neurons.push(new Neuron(x, y, i)); } // Create connections neurons.forEach((n1, i) => { neurons.forEach((n2, j) => { if (i !== j) { const dx = n2.x - n1.x; const dy = n2.y - n1.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < 150 && Math.random() > 0.7) { n1.connections.push({ target: n2, strength: 1 - dist / 150 }); connections.push({ from: n1, to: n2, strength: 1 - dist / 150 }); } } }); }); updateMetrics(); } // ========================================== // Wave System (for Phi visualization) // ========================================== class Wave { constructor(frequency, amplitude, phase, color) { this.frequency = frequency; this.amplitude = amplitude; this.phase = phase; this.color = color; this.points = []; } update(time) { this.points = []; const targetPhi = CONFIG.phiTarget; for (let x = 0; x <= canvas.width; x += 5) { const normalX = x / canvas.width; // Waves converge toward phi const convergence = Math.sin(time * 0.001 * this.frequency + this.phase + normalX * Math.PI * 4); const y = canvas.height / 2 + this.amplitude * convergence * Math.sin(normalX * Math.PI * 2 * targetPhi); this.points.push({ x, y }); } } draw() { ctx.beginPath(); ctx.moveTo(this.points[0].x, this.points[0].y); for (let i = 1; i < this.points.length; i++) { ctx.lineTo(this.points[i].x, this.points[i].y); } ctx.strokeStyle = this.color; ctx.lineWidth = 2; ctx.stroke(); } } function initWaves() { waves = []; const colors = COLORS[CONFIG.colorMode]; waves.push(new Wave(1, 80, 0, colors.primary)); waves.push(new Wave(1.618, 60, Math.PI / 3, colors.secondary)); waves.push(new Wave(2.618, 40, Math.PI / 2, colors.tertiary)); } // ========================================== // Experiment Renderers // ========================================== function renderSpikeExperiment(time) { const colors = COLORS[CONFIG.colorMode]; // Draw connections ctx.globalAlpha = 0.3; connections.forEach(conn => { const activation = Math.max(conn.from.activation, conn.to.activation); if (activation > 0.1) { ctx.beginPath(); ctx.moveTo(conn.from.x, conn.from.y); ctx.lineTo(conn.to.x, conn.to.y); ctx.strokeStyle = colors.primary; ctx.lineWidth = activation * 2; ctx.stroke(); } }); ctx.globalAlpha = 1; // Update and draw neurons neurons.forEach(n => { n.update(time); n.draw(); }); // Random firing if (Math.random() < 0.02 * CONFIG.propSpeed) { const randomNeuron = neurons[Math.floor(Math.random() * neurons.length)]; randomNeuron.fire(); } // Draw and update spikes spikes = spikes.filter(s => { s.x += s.vx; s.y += s.vy; s.life -= 0.03; ctx.beginPath(); ctx.arc(s.x, s.y, s.life * 3, 0, Math.PI * 2); ctx.fillStyle = s.color + Math.floor(s.life * 255).toString(16).padStart(2, '0'); ctx.fill(); return s.life > 0; }); } function renderPhiExperiment(time) { const colors = COLORS[CONFIG.colorMode]; // Update phi value const targetPhi = CONFIG.phiTarget; const noise = (Math.random() - 0.5) * 0.01; currentPhi += (targetPhi - currentPhi) * 0.02 + noise; // Draw waves waves.forEach(w => { w.update(time); w.draw(); }); // Central phi display const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = 100 + Math.sin(time * 0.002) * 20; // Phi rings for (let i = 0; i < 5; i++) { const r = radius * (1 + i * 0.3); const alpha = 0.3 - i * 0.05; ctx.beginPath(); ctx.arc(centerX, centerY, r, 0, Math.PI * 2); ctx.strokeStyle = colors.primary + Math.floor(alpha * 255).toString(16).padStart(2, '0'); ctx.lineWidth = 2; ctx.stroke(); } // Rotating phi spiral ctx.save(); ctx.translate(centerX, centerY); ctx.rotate(time * 0.0005); ctx.beginPath(); for (let angle = 0; angle < Math.PI * 8; angle += 0.1) { const r = angle * 8; const x = Math.cos(angle * targetPhi) * r; const y = Math.sin(angle * targetPhi) * r; if (angle === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.strokeStyle = colors.secondary; ctx.lineWidth = 2; ctx.stroke(); ctx.restore(); // Phi value display ctx.fillStyle = colors.tertiary; ctx.font = 'bold 72px "Space Grotesk"'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(currentPhi.toFixed(3), centerX, centerY); ctx.fillStyle = colors.primary; ctx.font = '16px "JetBrains Mono"'; ctx.fillText('PHI (\u03C6)', centerX, centerY + 60); } function renderGammaExperiment(time) { const colors = COLORS[CONFIG.colorMode]; const freq = CONFIG.gammaFreq; const period = 1000 / freq; const phase = (time % period) / period; // Gamma wave bands const bands = 8; for (let i = 0; i < bands; i++) { const y = (canvas.height / (bands + 1)) * (i + 1); const bandPhase = phase + i / bands; const intensity = (Math.sin(bandPhase * Math.PI * 2) + 1) / 2; // Wave line ctx.beginPath(); for (let x = 0; x <= canvas.width; x += 5) { const waveY = y + Math.sin((x / 50) + time * 0.01 * freq / 40 + i) * 20 * intensity; if (x === 0) ctx.moveTo(x, waveY); else ctx.lineTo(x, waveY); } ctx.strokeStyle = i % 2 === 0 ? colors.primary : colors.secondary; ctx.lineWidth = 2 + intensity * 3; ctx.globalAlpha = 0.3 + intensity * 0.7; ctx.stroke(); ctx.globalAlpha = 1; // Binding markers if (intensity > 0.8) { ctx.beginPath(); ctx.arc(canvas.width / 2, y, 10 + intensity * 10, 0, Math.PI * 2); ctx.fillStyle = colors.tertiary + '80'; ctx.fill(); } } // Synchronization indicator const syncLevel = (Math.sin(time * 0.001 * freq / 10) + 1) / 2; const syncRadius = 30 + syncLevel * 50; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, syncRadius, 0, Math.PI * 2); const gradient = ctx.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, syncRadius ); gradient.addColorStop(0, colors.primary); gradient.addColorStop(1, 'transparent'); ctx.fillStyle = gradient; ctx.fill(); // Frequency label ctx.fillStyle = colors.tertiary; ctx.font = 'bold 48px "Space Grotesk"'; ctx.textAlign = 'center'; ctx.fillText(freq + 'Hz', canvas.width / 2, canvas.height / 2 + 10); ctx.font = '14px "JetBrains Mono"'; ctx.fillStyle = colors.primary; ctx.fillText('GAMMA BINDING', canvas.width / 2, canvas.height / 2 + 50); } function renderNetworkExperiment(time) { const colors = COLORS[CONFIG.colorMode]; // Federation nodes const nodes = [ { x: 0.5, y: 0.25, label: 'MEGAMIND', size: 20 }, { x: 0.2, y: 0.5, label: 'VALKYRIE', size: 15 }, { x: 0.8, y: 0.5, label: 'MADDIE', size: 15 }, { x: 0.25, y: 0.8, label: 'KMIND-\u03B1', size: 12 }, { x: 0.75, y: 0.8, label: 'KMIND-\u03B2', size: 12 } ]; // Draw connections with data packets for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const n1 = nodes[i]; const n2 = nodes[j]; const x1 = n1.x * canvas.width; const y1 = n1.y * canvas.height; const x2 = n2.x * canvas.width; const y2 = n2.y * canvas.height; // Connection line const pulse = (Math.sin(time * 0.003 + i + j) + 1) / 2; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = colors.primary + Math.floor((0.2 + pulse * 0.3) * 255).toString(16).padStart(2, '0'); ctx.lineWidth = 1 + pulse; ctx.stroke(); // Data packets const packetPos = ((time * 0.001 * CONFIG.propSpeed + i * 0.1 + j * 0.15) % 1); const px = x1 + (x2 - x1) * packetPos; const py = y1 + (y2 - y1) * packetPos; ctx.beginPath(); ctx.arc(px, py, 4, 0, Math.PI * 2); ctx.fillStyle = colors.secondary; ctx.fill(); } } // Draw nodes nodes.forEach((node, i) => { const x = node.x * canvas.width; const y = node.y * canvas.height; const pulse = (Math.sin(time * 0.002 + i) + 1) / 2; // Outer glow const gradient = ctx.createRadialGradient(x, y, 0, x, y, node.size * 3); gradient.addColorStop(0, colors.primary + '40'); gradient.addColorStop(1, 'transparent'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(x, y, node.size * 3, 0, Math.PI * 2); ctx.fill(); // Node core ctx.beginPath(); ctx.arc(x, y, node.size + pulse * 5, 0, Math.PI * 2); ctx.fillStyle = colors.primary; ctx.fill(); // Inner highlight ctx.beginPath(); ctx.arc(x - node.size * 0.3, y - node.size * 0.3, node.size * 0.3, 0, Math.PI * 2); ctx.fillStyle = '#ffffff40'; ctx.fill(); // Label ctx.fillStyle = colors.tertiary; ctx.font = '12px "JetBrains Mono"'; ctx.textAlign = 'center'; ctx.fillText(node.label, x, y + node.size + 20); }); // Status panel ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.fillRect(20, canvas.height - 80, 180, 60); ctx.strokeStyle = colors.primary + '40'; ctx.strokeRect(20, canvas.height - 80, 180, 60); ctx.fillStyle = colors.primary; ctx.font = '10px "JetBrains Mono"'; ctx.textAlign = 'left'; ctx.fillText('FEDERATION STATUS: ACTIVE', 30, canvas.height - 60); ctx.fillText('NODES: 5 | LATENCY: <3ms', 30, canvas.height - 45); ctx.fillText('PACKETS: ' + Math.floor(time * 0.1) % 10000 + '/s', 30, canvas.height - 30); } // ========================================== // Main Animation Loop // ========================================== function animate(time) { // Clear canvas ctx.fillStyle = '#050508'; ctx.fillRect(0, 0, canvas.width, canvas.height); // FPS calculation frameCount++; if (time - lastTime >= 1000) { fps = frameCount; frameCount = 0; lastTime = time; document.getElementById('fpsCounter').textContent = fps + ' FPS'; } // Render current experiment switch (CONFIG.currentExp) { case 'spike': renderSpikeExperiment(time); break; case 'phi': renderPhiExperiment(time); break; case 'gamma': renderGammaExperiment(time); break; case 'network': renderNetworkExperiment(time); break; } // Update hero metrics updateHeroMetrics(time); animationId = requestAnimationFrame(animate); } function updateHeroMetrics(time) { // Active neurons (animated count) const activeCount = neurons.filter(n => n.activation > 0.3).length; document.getElementById('activeNeurons').textContent = Math.floor(activeCount * 573333333).toLocaleString(); // Phi value document.getElementById('phiValue').textContent = currentPhi.toFixed(3); // Gamma frequency document.getElementById('gammaFreq').textContent = CONFIG.gammaFreq + 'Hz'; // Sync rate const sync = Math.floor(50 + Math.sin(time * 0.001) * 30); document.getElementById('syncRate').textContent = sync + '%'; // Control panel metrics document.getElementById('metricSpikes').textContent = Math.floor(spikeCount * 100); document.getElementById('metricConnections').textContent = connections.length; document.getElementById('metricPhi').textContent = currentPhi.toFixed(3); document.getElementById('metricLatency').textContent = (2 + Math.random()).toFixed(1) + 'ms'; // Reset spike count periodically if (time % 1000 < 20) spikeCount = 0; } function updateMetrics() { document.getElementById('metricConnections').textContent = connections.length; }

Search equations, builds, manuscript text, and recovered sources.