| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Primordial Calculus — 300-Year Simulation</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inconsolata:wght@300;400;500&display=swap" rel="stylesheet"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script> |
| <style> |
| :root { |
| --parchment: #F2EBDD; |
| --parchment2: #EDE3CE; |
| --bark: #794626; |
| --bark-dark: #4F3826; |
| --amber: #C48A3A; |
| --amber-light: #D9A855; |
| --ink: #222222; |
| --ink-soft: #3a3028; |
| --rule: #C5B19E; |
| --rule-light: #DDD3C0; |
| --hir-green: #2D6A4F; |
| --hir-teal: #1B7A6A; |
| --oam-red: #8B1A1A; |
| --oam-crimson: #C0392B; |
| --shadow: rgba(79,56,38,0.15); |
| } |
| |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| body { |
| background: var(--parchment); |
| color: var(--ink); |
| font-family: 'EB Garamond', Georgia, serif; |
| line-height: 1.55; |
| font-size: 16px; |
| } |
| |
| |
| .masthead { |
| background: var(--bark-dark); |
| color: var(--parchment); |
| padding: 40px 48px 32px; |
| border-bottom: 3px solid var(--amber); |
| position: relative; |
| overflow: hidden; |
| } |
| .masthead::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: repeating-linear-gradient( |
| 0deg, |
| transparent, |
| transparent 40px, |
| rgba(255,255,255,0.02) 40px, |
| rgba(255,255,255,0.02) 41px |
| ); |
| pointer-events: none; |
| } |
| .masthead-inner { max-width: 1200px; margin: 0 auto; position: relative; } |
| .masthead-tag { |
| font-family: 'Inconsolata', monospace; |
| font-size: 11px; |
| letter-spacing: 3px; |
| color: var(--amber-light); |
| text-transform: uppercase; |
| margin-bottom: 12px; |
| } |
| .masthead h1 { |
| font-size: 36px; |
| font-weight: 500; |
| color: var(--parchment); |
| letter-spacing: 0.5px; |
| line-height: 1.2; |
| margin-bottom: 6px; |
| } |
| .masthead h1 em { |
| color: var(--amber-light); |
| font-style: italic; |
| } |
| .masthead-sub { |
| font-size: 15px; |
| color: var(--rule-light); |
| margin-bottom: 4px; |
| } |
| .masthead-author { |
| font-family: 'Inconsolata', monospace; |
| font-size: 12px; |
| color: var(--amber); |
| letter-spacing: 1.5px; |
| margin-top: 16px; |
| } |
| .masthead-hir { |
| position: absolute; |
| right: 0; |
| top: -10px; |
| font-size: 120px; |
| font-weight: 500; |
| color: rgba(196,138,58,0.08); |
| letter-spacing: -8px; |
| line-height: 1; |
| font-style: italic; |
| pointer-events: none; |
| user-select: none; |
| } |
| |
| |
| .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } |
| |
| |
| .controls-bar { |
| background: var(--parchment2); |
| border-bottom: 1px solid var(--rule); |
| padding: 20px 0; |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| box-shadow: 0 2px 12px var(--shadow); |
| } |
| .controls-inner { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 32px; |
| display: flex; |
| align-items: center; |
| gap: 24px; |
| flex-wrap: wrap; |
| } |
| .controls-label { |
| font-family: 'Inconsolata', monospace; |
| font-size: 11px; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| color: var(--bark); |
| font-weight: 500; |
| } |
| .btn { |
| padding: 8px 22px; |
| border: 1.5px solid var(--bark); |
| background: var(--bark); |
| color: var(--parchment); |
| font-family: 'EB Garamond', serif; |
| font-size: 15px; |
| cursor: pointer; |
| transition: all 0.18s; |
| letter-spacing: 0.5px; |
| } |
| .btn:hover { background: var(--bark-dark); border-color: var(--bark-dark); } |
| .btn.secondary { |
| background: transparent; |
| color: var(--bark); |
| } |
| .btn.secondary:hover { background: var(--bark); color: var(--parchment); } |
| |
| .slider-group { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| .slider-group label { |
| font-family: 'Inconsolata', monospace; |
| font-size: 12px; |
| color: var(--bark-dark); |
| white-space: nowrap; |
| } |
| .slider-group input[type=range] { |
| -webkit-appearance: none; |
| width: 100px; |
| height: 3px; |
| background: var(--rule); |
| border-radius: 0; |
| outline: none; |
| } |
| .slider-group input[type=range]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 14px; |
| height: 14px; |
| background: var(--bark); |
| border-radius: 0; |
| cursor: pointer; |
| } |
| .slider-val { |
| font-family: 'Inconsolata', monospace; |
| font-size: 12px; |
| color: var(--ink); |
| min-width: 36px; |
| } |
| |
| .toggle-btn { |
| padding: 7px 16px; |
| border: 1.5px solid currentColor; |
| background: transparent; |
| font-family: 'Inconsolata', monospace; |
| font-size: 11px; |
| letter-spacing: 1.5px; |
| text-transform: uppercase; |
| cursor: pointer; |
| transition: all 0.18s; |
| color: var(--hir-green); |
| } |
| .toggle-btn.active { |
| background: var(--hir-green); |
| color: var(--parchment); |
| } |
| .toggle-btn.oam { |
| color: var(--oam-red); |
| } |
| .toggle-btn.oam.active { |
| background: var(--oam-red); |
| color: var(--parchment); |
| } |
| |
| |
| .run-status { |
| font-family: 'Inconsolata', monospace; |
| font-size: 12px; |
| padding: 6px 12px; |
| border: 1px solid var(--rule); |
| background: var(--parchment); |
| color: var(--bark-dark); |
| letter-spacing: 1px; |
| } |
| .run-status.running { color: var(--amber); border-color: var(--amber); } |
| .run-status.done { color: var(--hir-green); border-color: var(--hir-green); } |
| |
| |
| .main-grid { |
| padding: 32px 0 64px; |
| } |
| |
| |
| .chart-section { |
| margin-bottom: 12px; |
| } |
| .chart-section h2 { |
| font-size: 13px; |
| font-family: 'Inconsolata', monospace; |
| letter-spacing: 2.5px; |
| text-transform: uppercase; |
| color: var(--bark); |
| margin-bottom: 24px; |
| padding-bottom: 8px; |
| border-bottom: 1px solid var(--rule); |
| display: flex; |
| align-items: baseline; |
| gap: 16px; |
| } |
| .chart-section h2 span.note { |
| font-size: 11px; |
| color: var(--rule); |
| letter-spacing: 1px; |
| font-weight: 400; |
| } |
| |
| .charts-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 24px; |
| margin-bottom: 24px; |
| } |
| .charts-row.single { grid-template-columns: 1fr; } |
| .charts-row.triple { grid-template-columns: 1fr 1fr 1fr; } |
| |
| .chart-card { |
| background: #FAF6EE; |
| border: 1px solid var(--rule); |
| padding: 20px 20px 16px; |
| position: relative; |
| } |
| .chart-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; right: 0; |
| height: 2px; |
| background: var(--bark); |
| } |
| .chart-card.hir-card::before { background: var(--hir-green); } |
| .chart-card.amber-card::before { background: var(--amber); } |
| |
| .chart-title { |
| font-size: 14px; |
| font-weight: 500; |
| color: var(--ink-soft); |
| margin-bottom: 4px; |
| letter-spacing: 0.3px; |
| } |
| .chart-equation { |
| font-family: 'Inconsolata', monospace; |
| font-size: 11px; |
| color: var(--rule); |
| margin-bottom: 14px; |
| letter-spacing: 0.5px; |
| } |
| .chart-wrap { |
| position: relative; |
| height: 220px; |
| } |
| |
| |
| .snapshot-section { |
| margin-top: 40px; |
| padding-top: 32px; |
| border-top: 1px solid var(--rule); |
| } |
| .snapshot-section h2 { |
| font-size: 13px; |
| font-family: 'Inconsolata', monospace; |
| letter-spacing: 2.5px; |
| text-transform: uppercase; |
| color: var(--bark); |
| margin-bottom: 20px; |
| } |
| .snapshot-tables { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 24px; |
| } |
| .snapshot-table-wrap h3 { |
| font-size: 12px; |
| font-family: 'Inconsolata', monospace; |
| letter-spacing: 2px; |
| color: var(--oam-red); |
| margin-bottom: 10px; |
| text-transform: uppercase; |
| } |
| .snapshot-table-wrap h3.hir { color: var(--hir-green); } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| font-family: 'Inconsolata', monospace; |
| font-size: 12px; |
| } |
| th { |
| background: var(--bark-dark); |
| color: var(--parchment); |
| padding: 6px 8px; |
| text-align: right; |
| letter-spacing: 0.5px; |
| font-weight: 400; |
| } |
| th:first-child { text-align: left; } |
| td { |
| padding: 5px 8px; |
| text-align: right; |
| border-bottom: 1px solid var(--rule-light); |
| color: var(--ink-soft); |
| } |
| td:first-child { text-align: left; font-weight: 500; } |
| tr:hover td { background: var(--parchment2); } |
| |
| |
| .equations-panel { |
| margin-top: 40px; |
| padding: 28px 32px; |
| border: 1px solid var(--rule); |
| background: #FAF6EE; |
| position: relative; |
| } |
| .equations-panel::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; bottom: 0; |
| width: 2px; |
| background: var(--amber); |
| } |
| .equations-panel h3 { |
| font-size: 13px; |
| font-family: 'Inconsolata', monospace; |
| letter-spacing: 2.5px; |
| text-transform: uppercase; |
| color: var(--bark); |
| margin-bottom: 20px; |
| } |
| .eq-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 24px 48px; |
| } |
| .eq-group h4 { |
| font-size: 12px; |
| font-family: 'Inconsolata', monospace; |
| letter-spacing: 1.5px; |
| color: var(--amber); |
| margin-bottom: 10px; |
| text-transform: uppercase; |
| } |
| .eq-group h4.hir { color: var(--hir-green); } |
| .eq-item { |
| margin-bottom: 8px; |
| padding-bottom: 8px; |
| border-bottom: 1px solid var(--rule-light); |
| } |
| .eq-item:last-child { border-bottom: none; } |
| .eq-name { |
| font-family: 'Inconsolata', monospace; |
| font-size: 11.5px; |
| color: var(--bark-dark); |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| gap: 8px; |
| } |
| .eq-formula { |
| font-family: 'Inconsolata', monospace; |
| font-size: 11px; |
| color: var(--ink-soft); |
| margin-top: 3px; |
| } |
| |
| |
| .legend { |
| display: flex; |
| gap: 20px; |
| margin-bottom: 8px; |
| flex-wrap: wrap; |
| } |
| .legend-item { |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| font-family: 'Inconsolata', monospace; |
| font-size: 11px; |
| color: var(--ink-soft); |
| } |
| .legend-dot { |
| width: 24px; |
| height: 2.5px; |
| border-radius: 0; |
| flex-shrink: 0; |
| } |
| .legend-dot.dashed { |
| background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px); |
| } |
| |
| |
| .collapse-toggle { |
| cursor: pointer; |
| font-family: 'Inconsolata', monospace; |
| font-size: 11px; |
| color: var(--bark); |
| letter-spacing: 1px; |
| text-decoration: none; |
| float: right; |
| } |
| .collapse-toggle:hover { text-decoration: underline; } |
| |
| |
| @media (max-width: 900px) { |
| .charts-row { grid-template-columns: 1fr; } |
| .charts-row.triple { grid-template-columns: 1fr 1fr; } |
| .snapshot-tables { grid-template-columns: 1fr; } |
| .eq-grid { grid-template-columns: 1fr; } |
| .masthead { padding: 28px 24px 24px; } |
| .container { padding: 0 20px; } |
| .controls-inner { padding: 0 20px; } |
| .masthead-hir { display: none; } |
| } |
| |
| |
| .year-marker { |
| font-family: 'Inconsolata', monospace; |
| font-size: 11px; |
| padding: 3px 8px; |
| border: 1px solid var(--rule); |
| background: var(--parchment2); |
| color: var(--bark-dark); |
| white-space: nowrap; |
| } |
| |
| |
| .section-divider { |
| border: none; |
| border-top: 1px solid var(--rule); |
| margin: 36px 0; |
| } |
| |
| |
| .sim-footer { |
| background: var(--bark-dark); |
| color: var(--rule-light); |
| padding: 20px 32px; |
| font-family: 'Inconsolata', monospace; |
| font-size: 11px; |
| letter-spacing: 1px; |
| margin-top: 64px; |
| } |
| .sim-footer span { color: var(--amber); } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <div class="masthead"> |
| <div class="masthead-inner"> |
| <div class="masthead-tag">Simulation Run — 2026–2326 · 300 Years · Annual Timestep</div> |
| <h1>Primordial Calculus — <em>The Abiogenesis Code</em></h1> |
| <div class="masthead-sub">HIR × OAM Dual-Scenario Simulation Engine v1.0</div> |
| <div class="masthead-sub" style="font-style:italic;color:var(--rule-light)"> |
| Honesty · Integrity · Respect — Base Constructive Terms · Outsourced Agency Model |
| </div> |
| <div class="masthead-author">Created and Developed by Collin D. Weber</div> |
| <div class="masthead-hir">HIR</div> |
| </div> |
| </div> |
|
|
| |
| <div class="container" style="margin-top:22px;"> |
| <div style="border:1px solid var(--rule); background:rgba(255,255,255,0.35); padding:18px 20px; box-shadow:0 6px 18px var(--shadow);"> |
| <div style="font-family:'Inconsolata',monospace; font-size:12px; letter-spacing:1px; color:var(--bark); text-transform:uppercase; margin-bottom:6px;">Claims Boundary</div> |
| <div style="font-size:14px; line-height:1.55; color:var(--ink-soft);"> |
| This is an internally reproducible synthetic dynamical model for exploring HIR/OAM pressure-form behavior under stated assumptions. Future years shown here are scenario checkpoints, not predictions, forecasts, or empirical claims about real-world outcomes. |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="controls-bar"> |
| <div class="controls-inner"> |
| <span class="controls-label">Scenarios</span> |
| <button class="toggle-btn oam active" id="toggleOAM" onclick="toggleScenario('oam')">▪ OAM Baseline</button> |
| <button class="toggle-btn active" id="toggleHIR" onclick="toggleScenario('hir')">▪ HIR Active</button> |
| |
| <div style="height:24px;border-left:1px solid var(--rule);margin:0 4px;"></div> |
| |
| <span class="controls-label">Parameters</span> |
| |
| <div class="slider-group"> |
| <label>k_D (degradation)</label> |
| <input type="range" id="slKD" min="0.010" max="0.050" step="0.002" value="0.026"> |
| <span class="slider-val" id="valKD">0.026</span> |
| </div> |
| <div class="slider-group"> |
| <label>k_N (agency loss)</label> |
| <input type="range" id="slKN" min="0.030" max="0.120" step="0.005" value="0.065"> |
| <span class="slider-val" id="valKN">0.065</span> |
| </div> |
| <div class="slider-group"> |
| <label>k_H (HIR growth)</label> |
| <input type="range" id="slKH" min="0.005" max="0.040" step="0.002" value="0.015"> |
| <span class="slider-val" id="valKH">0.015</span> |
| </div> |
| |
| <div style="flex:1"></div> |
| |
| <button class="btn" onclick="runAndRender()">Run Simulation</button> |
| <button class="btn secondary" onclick="resetParams()">Reset</button> |
| <span class="run-status done" id="runStatus">READY</span> |
| </div> |
| </div> |
|
|
| |
| <div class="container main-grid"> |
|
|
| |
| <div style="margin: 24px 0 8px; display:flex; gap: 28px; align-items:center; flex-wrap:wrap;"> |
| <div class="legend-item"> |
| <div class="legend-dot" style="background:var(--oam-red)"></div> |
| OAM Baseline (no HIR coupling) |
| </div> |
| <div class="legend-item"> |
| <div class="legend-dot" style="background:var(--hir-teal)"></div> |
| HIR Active (repair mechanism engaged) |
| </div> |
| <div style="font-family:'Inconsolata',monospace;font-size:11px;color:var(--rule);margin-left:auto;"> |
| Initial conditions: 2026 canonical baseline · Δt = 1 year |
| </div> |
| </div> |
|
|
| |
| <div class="chart-section" style="margin-top:16px;"> |
| <div class="charts-row"> |
| <div class="chart-card"> |
| <div class="chart-title">Accumulated Degradation D(t)</div> |
| <div class="chart-equation">ΔD = k_D · (N+E)/2 · (1 − B_local)</div> |
| <div class="chart-wrap"><canvas id="chartD"></canvas></div> |
| </div> |
| <div class="chart-card"> |
| <div class="chart-title">Agency Loss N(t) & Ecological Strain E(t)</div> |
| <div class="chart-equation">ΔN = k_N · N·(1−N)·(1 + D·λ) · (1 − S_core·μ)</div> |
| <div class="chart-wrap"><canvas id="chartNE"></canvas></div> |
| </div> |
| </div> |
|
|
| |
| <div class="charts-row"> |
| <div class="chart-card"> |
| <div class="chart-title">Alchemical Continuity Ac(t) & Population Response P(t)</div> |
| <div class="chart-equation">ΔAc = −k_Ac · Ac · (N+E) · (1+D·ε) | ΔP = −k_P · D · P</div> |
| <div class="chart-wrap"><canvas id="chartAcP"></canvas></div> |
| </div> |
| <div class="chart-card hir-card"> |
| <div class="chart-title">HIR Triad — Honesty · Integrity · Respect</div> |
| <div class="chart-equation">ΔH = k_H · H·(1−H) | F = (H+I)/2 | C = (R+I)/2</div> |
| <div class="chart-wrap"><canvas id="chartHIR"></canvas></div> |
| </div> |
| </div> |
|
|
| |
| <div class="charts-row"> |
| <div class="chart-card hir-card"> |
| <div class="chart-title">Resonance Chain — Rn, S_core, B_local (HIR active)</div> |
| <div class="chart-equation">ΔRn = k_Rn · F · C · (1−Rn) | S_core = Rn·(1+ζ·Grit) | B_local = S_core²</div> |
| <div class="chart-wrap"><canvas id="chartRn"></canvas></div> |
| </div> |
| <div class="chart-card amber-card"> |
| <div class="chart-title">Earned Grit G(t) & System Health Composite</div> |
| <div class="chart-equation">ΔG = k_G · Rn · (1−G) | Health = Ac·P·(1−D/D_ref)</div> |
| <div class="chart-wrap"><canvas id="chartHealth"></canvas></div> |
| </div> |
| </div> |
| </div> |
|
|
| <hr class="section-divider"> |
|
|
| |
| <div class="snapshot-section"> |
| <h2>Selected Year Snapshots</h2> |
| <div class="snapshot-tables"> |
| <div class="snapshot-table-wrap"> |
| <h3>OAM Baseline — No HIR Coupling</h3> |
| <table id="tableOAM"> |
| <thead> |
| <tr><th>Year</th><th>N</th><th>E</th><th>Ac</th><th>D</th><th>P</th><th>S_core</th></tr> |
| </thead> |
| <tbody></tbody> |
| </table> |
| </div> |
| <div class="snapshot-table-wrap"> |
| <h3 class="hir">HIR Active — Repair Mechanism Engaged</h3> |
| <table id="tableHIR"> |
| <thead> |
| <tr><th>Year</th><th>N</th><th>E</th><th>Ac</th><th>D</th><th>P</th><th>Rn</th><th>S_core</th></tr> |
| </thead> |
| <tbody></tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| <hr class="section-divider"> |
|
|
| |
| <div class="equations-panel"> |
| <h3>Canonical Equation Set — Reconstruction v1.0</h3> |
| <div class="eq-grid"> |
| <div class="eq-group"> |
| <h4>OAM Pressure Dynamics</h4> |
| <div class="eq-item"> |
| <div class="eq-name"><span>N — Agency Loss / Social Harm</span></div> |
| <div class="eq-formula">N[t+1] = min(1, N + k_N·N·(1−N)·(1+D·λ)·(1−S_core·μ))</div> |
| </div> |
| <div class="eq-item"> |
| <div class="eq-name"><span>E — Ecological Strain</span></div> |
| <div class="eq-formula">E[t+1] = min(E_cap, E + k_E·E·(E_cap−E)) ; E_cap = 1−ε·B_local</div> |
| </div> |
| <div class="eq-item"> |
| <div class="eq-name"><span>D — Accumulated Degradation</span></div> |
| <div class="eq-formula">D[t+1] = D + k_D·(N+E)/2·(1−B_local)</div> |
| </div> |
| <div class="eq-item"> |
| <div class="eq-name"><span>Ac — Alchemical Continuity</span></div> |
| <div class="eq-formula">Ac[t+1] = max(0, Ac − k_Ac·Ac·(N+E)·(1+D·0.2))</div> |
| </div> |
| <div class="eq-item"> |
| <div class="eq-name"><span>P — Population Response</span></div> |
| <div class="eq-formula">P[t+1] = max(0.15, P·(1 − k_P·D))</div> |
| </div> |
| </div> |
| <div class="eq-group"> |
| <h4 class="hir">HIR Constructive Chain</h4> |
| <div class="eq-item"> |
| <div class="eq-name"><span>H, I, R — Base Constructive Terms</span></div> |
| <div class="eq-formula">X[t+1] = min(1, X + k_X·X·(1−X)) for X ∈ {H, I, R}</div> |
| </div> |
| <div class="eq-item"> |
| <div class="eq-name"><span>F, C — Derived States</span></div> |
| <div class="eq-formula">F = (H+I)/2 ; C = (R+I)/2 [Fidelity, Cohesion]</div> |
| </div> |
| <div class="eq-item"> |
| <div class="eq-name"><span>Rn — Resonance</span></div> |
| <div class="eq-formula">Rn[t+1] = min(1, Rn + k_Rn·F·C·(1−Rn))</div> |
| </div> |
| <div class="eq-item"> |
| <div class="eq-name"><span>G — Earned Grit</span></div> |
| <div class="eq-formula">G[t+1] = min(1, G + k_G·Rn·(1−G))</div> |
| </div> |
| <div class="eq-item"> |
| <div class="eq-name"><span>S_core, B_local — Core Density & Field</span></div> |
| <div class="eq-formula">S_core = min(1, Rn·(1+ζ·G)) ; B_local = S_core²</div> |
| </div> |
| </div> |
| </div> |
| <div style="margin-top:20px; font-size:13px; color:var(--bark-dark); font-style:italic; border-top:1px solid var(--rule-light); padding-top:14px;"> |
| H + I → Fidelity (F) · R + I → Cohesion (C) · F + C → Resonance (Rn) |
| · Resonance × Pressure → Earned Grit (G) · Dense Core Sets Local Coherence Baseline |
| </div> |
| </div> |
|
|
| </div> |
|
|
| |
| <div class="sim-footer"> |
| <div style="max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;"> |
| <span>PRIMORDIAL CALCULUS · THE ABIOGENESIS CODE · Simulation Engine v1.0</span> |
| <span>Created and Developed by <span>Collin D. Weber</span> · OSF Canonical Package v1.0 · 2026</span> |
| </div> |
| </div> |
|
|
| <script> |
| |
| |
| |
| |
| const YEARS = 300; |
| const START = 2026; |
| |
| |
| const INIT = { |
| N:0.600, E:0.650, Ac:0.420, D:0.200, P:1.000, |
| S:0.800, A:0.250, W:44.0, |
| H:0.520, I:0.520, R:0.520, |
| F_hir:0.520, C_hir:0.520, Rn:0.520, |
| Grit:0.050, S_core:0.000, B_local:0.000 |
| }; |
| |
| function getParams() { |
| return { |
| kN: parseFloat(document.getElementById('slKN').value), |
| kE: 0.039, |
| kD: parseFloat(document.getElementById('slKD').value), |
| kAc: 0.024, |
| kP: 0.0074, |
| NDlambda: 0.30, |
| hirNblock: 0.45, |
| hirEcap: 0.23, |
| Pfloor: 0.15, |
| |
| kH: parseFloat(document.getElementById('slKH').value), |
| kI: parseFloat(document.getElementById('slKH').value) * 0.93, |
| kR: parseFloat(document.getElementById('slKH').value), |
| kRn: 0.054, |
| kGrit: 0.0142, |
| gritBoost: 0.57, |
| }; |
| } |
| |
| function runScenario(hirActive, params) { |
| let s = {...INIT}; |
| const data = [{t:0, year:START, ...s}]; |
| |
| for (let t = 1; t <= YEARS; t++) { |
| let {N, E, Ac, D, P, H, I, R, F_hir, C_hir, Rn, Grit, S_core, B_local, S, A, W} = s; |
| |
| |
| if (hirActive) { |
| H = Math.min(1.0, H + params.kH * H * (1-H)); |
| I = Math.min(1.0, I + params.kI * I * (1-I)); |
| R = Math.min(1.0, R + params.kR * R * (1-R)); |
| F_hir = (H + I) / 2; |
| C_hir = (R + I) / 2; |
| const dRn = params.kRn * F_hir * C_hir * (1 - Rn); |
| Rn = Math.min(1.0, Rn + dRn); |
| const dGrit = params.kGrit * Rn * (1 - Grit); |
| Grit = Math.min(1.0, Grit + dGrit); |
| S_core = Math.min(1.0, Rn * (1 + params.gritBoost * Grit)); |
| B_local = S_core * S_core; |
| } |
| |
| |
| |
| const dN = params.kN * N * (1-N) * (1 + D * params.NDlambda) * (1 - B_local * params.hirNblock); |
| N = Math.min(1.0, N + dN); |
| |
| |
| const E_cap = hirActive ? Math.max(0.1, 1.0 - params.hirEcap * B_local) : 1.0; |
| const dE = params.kE * E * (E_cap - E); |
| E = Math.min(E_cap, Math.max(0, E + dE)); |
| |
| |
| const dD = params.kD * (N + E) / 2 * (1 - B_local); |
| D = Math.max(0, D + dD); |
| |
| |
| const dAc = -params.kAc * Ac * (N + E) * (1 + D * 0.2); |
| Ac = Math.max(0, Ac + dAc); |
| |
| |
| P = Math.max(params.Pfloor, P * (1 - params.kP * D)); |
| |
| |
| S = Math.min(1.0, S + 0.003 * S * (1-S)); |
| A = Math.min(1.0, A + 0.018 * A * (1-A)); |
| W = Math.min(168, W + 0.12 * (1 + Math.min(D, 2) * 0.05)); |
| |
| s = {N, E, Ac, D, P, H, I, R, F_hir, C_hir, Rn, Grit, S_core, B_local, S, A, W}; |
| data.push({t, year: START + t, ...s}); |
| } |
| return data; |
| } |
| |
| |
| let oamData = [], hirData = []; |
| let showOAM = true, showHIR = true; |
| let charts = {}; |
| |
| |
| const PALETTE = { |
| oamRed: '#8B1A1A', |
| oamOrange: '#C0392B', |
| oamBrown: '#794626', |
| hirTeal: '#1B7A6A', |
| hirGreen: '#2D6A4F', |
| hirSage: '#3D8B6E', |
| amber: '#C48A3A', |
| amberDark: '#9B6820', |
| purple: '#6B3F6B', |
| navy: '#2C3E6B', |
| }; |
| |
| Chart.defaults.font.family = "'Inconsolata', monospace"; |
| Chart.defaults.font.size = 11; |
| Chart.defaults.color = '#3a3028'; |
| |
| function baseChartOpts(yLabel='', xMin=2026, xMax=2326) { |
| return { |
| animation: { duration: 600, easing: 'easeInOutQuart' }, |
| responsive: true, |
| maintainAspectRatio: false, |
| interaction: { mode: 'index', intersect: false }, |
| plugins: { |
| legend: { |
| display: true, |
| position: 'top', |
| align: 'start', |
| labels: { |
| boxWidth: 22, |
| boxHeight: 2, |
| padding: 10, |
| font: { size: 10.5, family: "'Inconsolata', monospace" }, |
| usePointStyle: false, |
| } |
| }, |
| tooltip: { |
| backgroundColor: 'rgba(34,22,14,0.92)', |
| titleColor: '#C48A3A', |
| bodyColor: '#EDE3CE', |
| borderColor: '#794626', |
| borderWidth: 1, |
| padding: 10, |
| callbacks: { |
| label: ctx => ` ${ctx.dataset.label}: ${ctx.parsed.y.toFixed(4)}`, |
| title: ctx => `Year ${ctx[0].label}` |
| } |
| } |
| }, |
| scales: { |
| x: { |
| type: 'linear', |
| min: xMin, max: xMax, |
| ticks: { stepSize: 50, callback: v => v }, |
| grid: { color: 'rgba(197,177,158,0.3)' }, |
| border: { color: '#C5B19E' } |
| }, |
| y: { |
| title: { display: !!yLabel, text: yLabel, font: { size: 10 } }, |
| grid: { color: 'rgba(197,177,158,0.3)' }, |
| border: { color: '#C5B19E' } |
| } |
| } |
| }; |
| } |
| |
| function makeDS(label, data, color, dash=false, fill=false) { |
| return { |
| label, |
| data: data.map(r => ({ x: r.year, y: r[label.split(' ')[0]] ?? undefined })), |
| borderColor: color, |
| backgroundColor: fill ? color + '18' : 'transparent', |
| borderWidth: 2.2, |
| borderDash: dash ? [5,4] : [], |
| pointRadius: 0, |
| pointHoverRadius: 4, |
| tension: 0.3, |
| fill: fill ? 'origin' : false, |
| }; |
| } |
| |
| function makeCustomDS(label, xArr, yArr, color, dash=false) { |
| return { |
| label, |
| data: xArr.map((x, i) => ({ x, y: yArr[i] })), |
| borderColor: color, |
| backgroundColor: 'transparent', |
| borderWidth: 2.2, |
| borderDash: dash ? [5,4] : [], |
| pointRadius: 0, |
| pointHoverRadius: 4, |
| tension: 0.3, |
| fill: false, |
| }; |
| } |
| |
| function buildCharts() { |
| const years = oamData.map(r => r.year); |
| |
| |
| Object.values(charts).forEach(c => c.destroy()); |
| charts = {}; |
| |
| |
| { |
| const datasets = []; |
| if (showOAM) datasets.push(makeCustomDS('D — OAM Baseline', |
| years, oamData.map(r=>r.D), PALETTE.oamRed)); |
| if (showHIR) datasets.push(makeCustomDS('D — HIR Active', |
| years, hirData.map(r=>r.D), PALETTE.hirTeal, true)); |
| |
| const opts = baseChartOpts('Degradation D(t)'); |
| opts.scales.y.min = 0; |
| charts.D = new Chart(document.getElementById('chartD'), { |
| type: 'line', data: { datasets }, options: opts |
| }); |
| } |
| |
| |
| { |
| const datasets = []; |
| if (showOAM) { |
| datasets.push(makeCustomDS('N — OAM', years, oamData.map(r=>r.N), PALETTE.oamRed)); |
| datasets.push(makeCustomDS('E — OAM', years, oamData.map(r=>r.E), PALETTE.oamOrange, true)); |
| } |
| if (showHIR) { |
| datasets.push(makeCustomDS('N — HIR', years, hirData.map(r=>r.N), PALETTE.hirTeal)); |
| datasets.push(makeCustomDS('E — HIR', years, hirData.map(r=>r.E), PALETTE.hirGreen, true)); |
| } |
| const opts = baseChartOpts(); |
| opts.scales.y.min = 0; |
| opts.scales.y.max = 1.05; |
| charts.NE = new Chart(document.getElementById('chartNE'), { |
| type: 'line', data: { datasets }, options: opts |
| }); |
| } |
| |
| |
| { |
| const datasets = []; |
| if (showOAM) { |
| datasets.push(makeCustomDS('Ac — OAM', years, oamData.map(r=>r.Ac), PALETTE.oamBrown)); |
| datasets.push(makeCustomDS('P — OAM', years, oamData.map(r=>r.P), PALETTE.oamRed, true)); |
| } |
| if (showHIR) { |
| datasets.push(makeCustomDS('Ac — HIR', years, hirData.map(r=>r.Ac), PALETTE.hirSage)); |
| datasets.push(makeCustomDS('P — HIR', years, hirData.map(r=>r.P), PALETTE.hirGreen, true)); |
| } |
| const opts = baseChartOpts(); |
| opts.scales.y.min = 0; |
| opts.scales.y.max = 1.05; |
| charts.AcP = new Chart(document.getElementById('chartAcP'), { |
| type: 'line', data: { datasets }, options: opts |
| }); |
| } |
| |
| |
| { |
| const src = hirData; |
| const datasets = [ |
| makeCustomDS('H — Honesty', years, src.map(r=>r.H), PALETTE.hirTeal), |
| makeCustomDS('I — Integrity', years, src.map(r=>r.I), PALETTE.hirGreen, true), |
| makeCustomDS('R — Respect', years, src.map(r=>r.R), PALETTE.hirSage), |
| makeCustomDS('F — Fidelity', years, src.map(r=>r.F_hir), PALETTE.amber), |
| makeCustomDS('C — Cohesion', years, src.map(r=>r.C_hir), PALETTE.amberDark, true), |
| ]; |
| const opts = baseChartOpts(); |
| opts.scales.y.min = 0.4; |
| opts.scales.y.max = 1.05; |
| charts.HIR = new Chart(document.getElementById('chartHIR'), { |
| type: 'line', data: { datasets }, options: opts |
| }); |
| } |
| |
| |
| { |
| const src = hirData; |
| const datasets = [ |
| makeCustomDS('Rn — Resonance', years, src.map(r=>r.Rn), PALETTE.hirTeal), |
| makeCustomDS('G — Earned Grit', years, src.map(r=>r.Grit), PALETTE.amber), |
| makeCustomDS('S_core — Core', years, src.map(r=>r.S_core), PALETTE.hirGreen), |
| makeCustomDS('B_local — Field', years, src.map(r=>r.B_local), PALETTE.hirSage, true), |
| ]; |
| const opts = baseChartOpts(); |
| opts.scales.y.min = 0; |
| opts.scales.y.max = 1.05; |
| charts.Rn = new Chart(document.getElementById('chartRn'), { |
| type: 'line', data: { datasets }, options: opts |
| }); |
| } |
| |
| |
| { |
| function health(r) { |
| |
| return Math.max(0, Math.min(1, r.Ac * 0.35 + r.P * 0.35 + (1 - Math.min(r.D/10, 1)) * 0.20 + (1-r.N)*0.10)); |
| } |
| const datasets = []; |
| if (showOAM) datasets.push(makeCustomDS('Health — OAM', years, oamData.map(health), PALETTE.oamRed)); |
| if (showHIR) datasets.push(makeCustomDS('Health — HIR', years, hirData.map(health), PALETTE.hirTeal)); |
| if (showHIR) datasets.push(makeCustomDS('Grit — HIR', years, hirData.map(r=>r.Grit), PALETTE.amber, true)); |
| const opts = baseChartOpts(); |
| opts.scales.y.min = 0; |
| opts.scales.y.max = 1.05; |
| charts.Health = new Chart(document.getElementById('chartHealth'), { |
| type: 'line', data: { datasets }, options: opts |
| }); |
| } |
| } |
| |
| |
| const SNAP_YEARS = [2026, 2033, 2040, 2050, 2065, 2085, 2100, 2126, 2171, 2226, 2276, 2326]; |
| |
| function f(v, n=3) { return v.toFixed(n); } |
| |
| function buildTables() { |
| const oamBody = document.querySelector('#tableOAM tbody'); |
| const hirBody = document.querySelector('#tableHIR tbody'); |
| oamBody.innerHTML = ''; |
| hirBody.innerHTML = ''; |
| |
| for (const yr of SNAP_YEARS) { |
| const ro = oamData.find(r => r.year === yr); |
| const rh = hirData.find(r => r.year === yr); |
| if (ro) { |
| const tr = document.createElement('tr'); |
| tr.innerHTML = `<td>${yr}</td><td>${f(ro.N)}</td><td>${f(ro.E)}</td><td>${f(ro.Ac)}</td><td>${f(ro.D,2)}</td><td>${f(ro.P)}</td><td>${f(ro.S_core)}</td>`; |
| oamBody.appendChild(tr); |
| } |
| if (rh) { |
| const tr = document.createElement('tr'); |
| tr.innerHTML = `<td>${yr}</td><td>${f(rh.N)}</td><td>${f(rh.E)}</td><td>${f(rh.Ac)}</td><td>${f(rh.D,2)}</td><td>${f(rh.P)}</td><td>${f(rh.Rn)}</td><td>${f(rh.S_core)}</td>`; |
| hirBody.appendChild(tr); |
| } |
| } |
| } |
| |
| |
| function runAndRender() { |
| const status = document.getElementById('runStatus'); |
| status.textContent = 'RUNNING…'; |
| status.className = 'run-status running'; |
| |
| setTimeout(() => { |
| const params = getParams(); |
| oamData = runScenario(false, params); |
| hirData = runScenario(true, params); |
| |
| buildCharts(); |
| buildTables(); |
| |
| status.textContent = `DONE · ${YEARS}yr · ${new Date().toLocaleTimeString()}`; |
| status.className = 'run-status done'; |
| }, 20); |
| } |
| |
| |
| function toggleScenario(which) { |
| if (which === 'oam') { |
| showOAM = !showOAM; |
| document.getElementById('toggleOAM').classList.toggle('active', showOAM); |
| } else { |
| showHIR = !showHIR; |
| document.getElementById('toggleHIR').classList.toggle('active', showHIR); |
| } |
| buildCharts(); |
| } |
| |
| |
| function wireSliders() { |
| const sliders = [ |
| {id:'slKD', val:'valKD', decimals:3}, |
| {id:'slKN', val:'valKN', decimals:3}, |
| {id:'slKH', val:'valKH', decimals:3}, |
| ]; |
| sliders.forEach(({id, val, decimals}) => { |
| const sl = document.getElementById(id); |
| const vd = document.getElementById(val); |
| sl.addEventListener('input', () => { |
| vd.textContent = parseFloat(sl.value).toFixed(decimals); |
| }); |
| }); |
| } |
| |
| function resetParams() { |
| document.getElementById('slKD').value = 0.026; |
| document.getElementById('valKD').textContent = '0.026'; |
| document.getElementById('slKN').value = 0.065; |
| document.getElementById('valKN').textContent = '0.065'; |
| document.getElementById('slKH').value = 0.015; |
| document.getElementById('valKH').textContent = '0.015'; |
| runAndRender(); |
| } |
| |
| |
| wireSliders(); |
| runAndRender(); |
| </script> |
| </body> |
| </html> |
|
|
