Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | ch12-experiments.html |
| Date | Not specified in source |
| Path or archive member | archives/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-256 | 7adefd713743d813f89f5667bdab820d33f4ba1f8c7cbb6862296027b2f4a993 |
| Reading-copy SHA-256 | 7adefd713743d813f89f5667bdab820d33f4ba1f8c7cbb6862296027b2f4a993 |
| 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 record | Branch or archive | Revision / identifier | Original 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-983cf0a0eec6 | archives/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-17cfd8d98d9f | archives/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-c50ec46a6619 | archives/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-2f81d7ea3dbc | archives/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;
}