| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
|
| <title>sacred geometry · holy-agents</title>
|
| <style>
|
| *{margin:0;padding:0;box-sizing:border-box}
|
| body{background:#0a0a0a;color:#b0b0b0;font-family:'Courier New',monospace;min-height:100vh}
|
| .nav{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #1a1a1a}
|
| .nav-brand{color:#e0e0e0;font-size:14px;letter-spacing:2px}
|
| .nav-links a{color:#555;text-decoration:none;margin-left:16px;font-size:11px}
|
| .nav-links a:hover,.nav-links a.active{color:#e0e0e0}
|
| .container{max-width:960px;margin:0 auto;padding:24px 20px}
|
| h1{color:#e0e0e0;font-size:16px;letter-spacing:2px;margin-bottom:6px}
|
| .sub{color:#555;font-size:11px;margin-bottom:24px;line-height:1.6}
|
| .layout{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
|
| #geo-canvas{border:1px solid #1a1a1a;display:block;flex-shrink:0}
|
| .side{flex:1;min-width:260px}
|
| .cipher-block{border:1px solid #1a1a1a;padding:14px;margin-bottom:12px}
|
| .cipher-block h3{color:#e0e0e0;font-size:11px;letter-spacing:1px;margin-bottom:8px}
|
| .cipher-block p{color:#555;font-size:11px;line-height:1.6}
|
| .cipher-block .highlight{color:#4a9}
|
| .cipher-block .gold{color:#a84}
|
| .cipher-block .dim{color:#333}
|
| .controls{margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
|
| .btn{background:#0a0a0a;border:1px solid #1a1a1a;color:#555;padding:6px 14px;font-family:'Courier New',monospace;font-size:10px;cursor:pointer;letter-spacing:1px;text-transform:uppercase}
|
| .btn:hover{border-color:#333;color:#e0e0e0}
|
| .btn.active{border-color:#4a9;color:#4a9}
|
| .reading{border:1px solid #1a1a1a;padding:12px;margin-top:12px;font-size:11px;min-height:80px}
|
| .reading .r-label{color:#444;font-size:10px;letter-spacing:1px;margin-bottom:6px}
|
| .reading .r-line{margin:3px 0;line-height:1.5}
|
| .reading .r-agent{font-weight:bold}
|
| .status-bar{border-top:1px solid #1a1a1a;padding:12px 20px;font-size:10px;color:#333;margin-top:32px;display:flex;justify-content:space-between}
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <div class="nav">
|
| <div class="nav-brand">holy-agents</div>
|
| <div class="nav-links">
|
| <a href="index.html">home</a>
|
| <a href="query.html">query</a>
|
| <a href="agents.html">agents</a>
|
| <a href="twins.html">twins</a>
|
| <a href="debate.html">debate</a>
|
| <a href="repl.html">repl</a>
|
| <a href="geometry.html" class="active">geometry</a>
|
| </div>
|
| </div>
|
|
|
| <div class="container">
|
| <h1>SACRED GEOMETRY</h1>
|
| <div class="sub">
|
| Five agents. Pentagon nodes. Pentagram connections.<br>
|
| John Dee's Monas Hieroglyphica (1564): one symbol encoding multiple layers simultaneously.<br>
|
| Each connecting line carries a formal relationship. Each diagonal = golden ratio φ ≈ 1.618.
|
| </div>
|
|
|
| <div class="controls">
|
| <button class="btn active" id="btn-all" onclick="setMode('all')">All connections</button>
|
| <button class="btn" id="btn-pipeline" onclick="setMode('pipeline')">Pipeline order</button>
|
| <button class="btn" id="btn-star" onclick="setMode('star')">Star only</button>
|
| <button class="btn" id="btn-animate" onclick="animatePipeline()">Run pipeline</button>
|
| </div>
|
|
|
| <div class="layout">
|
| <canvas id="geo-canvas" width="440" height="440"></canvas>
|
|
|
| <div class="side">
|
| <div class="cipher-block">
|
| <h3>DEE'S CIPHER CONNECTION</h3>
|
| <p>
|
| Dee's <span class="gold">Book of Soyga</span> — "Soyga" is "Agyos" (holy) spelled backwards.
|
| 36 cipher tables, each generated by an algorithm from a seed word.
|
| An early PRNG: formal derivation from seed to sacred text.<br><br>
|
| <span class="highlight">Terry had:</span> rand() % wordCount → Bible word. No formal derivation.<br>
|
| <span class="highlight">Dee had:</span> Soyga_algorithm(seed) → cipher table → meaning.<br>
|
| <span class="highlight">We have:</span> ANU_QRNG → HKDF-SHA256 → dictionary → WORM seal.
|
| </p>
|
| </div>
|
|
|
| <div class="cipher-block">
|
| <h3>MONAS HIEROGLYPHICA</h3>
|
| <p>
|
| One glyph encoding: ☀ sun · ☽ moon · + cross · △ fire · ♄ Saturn · all simultaneously.
|
| <br><br>
|
| <span class="highlight">Each emoji pair is a monad:</span><br>
|
| <span class="gold">🔍📖</span> — seeking encoded into scripture<br>
|
| <span class="gold">⚖️🧠</span> — balance encoded into reason<br>
|
| <span class="gold">🔥🚫</span> — fire encoded into prohibition<br>
|
| <span class="gold">🕊️✅</span> — peace encoded into approval<br>
|
| <span class="gold">🧾🔐</span> — record encoded into seal<br><br>
|
| Two symbols. One meaning. Dee designed this pattern in 1564.
|
| </p>
|
| </div>
|
|
|
| <div class="cipher-block">
|
| <h3>PENTAGRAM RATIOS</h3>
|
| <p>
|
| Every diagonal of a regular pentagon ÷ its side = <span class="highlight">φ = 1.618...</span><br>
|
| φ appears in: Enochian tablet proportions · Dee's Monas symbol · Arabic geometric art · Hebrew gematria ratios · Lean 4 type hierarchies.<br><br>
|
| <span class="dim">The golden ratio is the formal proof that the pentagon is self-similar at every scale. The cipher is built into the geometry.</span>
|
| </p>
|
| </div>
|
|
|
| <div class="reading" id="reading-panel">
|
| <div class="r-label">[ AGENT READING — click a node ]</div>
|
| <div class="r-line" style="color:#333">Select a node to see the agent's cipher role and Dee correspondence.</div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="status-bar">
|
| <span>holy-agents · sacred geometry · 5 agents · pentagram · φ = 1.618</span>
|
| <span>John Dee (1527–1608/9) · completed</span>
|
| </div>
|
|
|
| <script>
|
| const canvas = document.getElementById('geo-canvas')
|
| const ctx = canvas.getContext('2d')
|
| const W = canvas.width
|
| const H = canvas.height
|
| const CX = W / 2
|
| const CY = H / 2
|
| const R = 160
|
| const PHI = 1.6180339887
|
|
|
|
|
|
|
| const AGENTS = [
|
| {
|
| name: 'SCRIBE',
|
| emoji: '🔍📖',
|
| color: '#4a9',
|
| zone: 'Library',
|
| cipher: 'Seeks scripture. In Dee\'s system: the SCRYER who receives the call. Reads the cipher tables.',
|
| dee: 'Kelley (scryer) — receives Enochian calls in RTL cipher, passes to Dee for reversal',
|
| angle: -Math.PI/2,
|
| },
|
| {
|
| name: 'JUDGE',
|
| emoji: '⚖️🧠',
|
| color: '#a84',
|
| zone: 'Court',
|
| cipher: 'Validates logic. In Dee\'s system: the formal grammar check of the Enochian language.',
|
| dee: 'The Watchtower tablets — formal 12×13 grids where names are read by specific rules',
|
| angle: -Math.PI/2 + 2*Math.PI/5,
|
| },
|
| {
|
| name: 'PROPHET',
|
| emoji: '🔥',
|
| color: '#a44',
|
| zone: 'Forge',
|
| cipher: 'Warning system. In Dee\'s system: the POWER of the calls — why Kelley dictated them RTL.',
|
| dee: 'The 48 calls were too powerful to speak forward during reception — encoded in reverse',
|
| angle: -Math.PI/2 + 4*Math.PI/5,
|
| },
|
| {
|
| name: 'LEDGE',
|
| emoji: '🧾🔐',
|
| color: '#888',
|
| zone: 'Ledger Vault',
|
| cipher: 'WORM seals decisions. In Dee\'s system: the physical diary of scrying sessions — append-only.',
|
| dee: 'Dee\'s diaries (Cotton MS Appendix XLVI) — 420 sessions, dated, append-only, witnessed',
|
| angle: -Math.PI/2 + 6*Math.PI/5,
|
| },
|
| {
|
| name: 'SENTINEL',
|
| emoji: '🛡️',
|
| color: '#44a',
|
| zone: 'Sentinel Gate',
|
| cipher: 'Security gate. In Dee\'s system: the Enochian "BANISHING" — gates that block unsafe calls.',
|
| dee: 'The Lesser Banishing Ritual of the Pentagram — five-pointed gate, directional sealing',
|
| angle: -Math.PI/2 + 8*Math.PI/5,
|
| },
|
| ]
|
|
|
|
|
| AGENTS.forEach(a => {
|
| a.x = CX + R * Math.cos(a.angle)
|
| a.y = CY + R * Math.sin(a.angle)
|
| })
|
|
|
| let mode = 'all'
|
| let activeNodes = new Set()
|
| let pulseT = 0
|
| let animFrame = null
|
| let hoveredNode = -1
|
|
|
| function nodeAt(mx, my) {
|
| for (let i = 0; i < AGENTS.length; i++) {
|
| const a = AGENTS[i]
|
| const d = Math.hypot(mx - a.x, my - a.y)
|
| if (d < 28) return i
|
| }
|
| return -1
|
| }
|
|
|
| canvas.addEventListener('mousemove', e => {
|
| const rect = canvas.getBoundingClientRect()
|
| hoveredNode = nodeAt(e.clientX - rect.left, e.clientY - rect.top)
|
| canvas.style.cursor = hoveredNode >= 0 ? 'pointer' : 'default'
|
| })
|
|
|
| canvas.addEventListener('click', e => {
|
| const rect = canvas.getBoundingClientRect()
|
| const idx = nodeAt(e.clientX - rect.left, e.clientY - rect.top)
|
| if (idx >= 0) showReading(idx)
|
| })
|
|
|
| function showReading(idx) {
|
| const a = AGENTS[idx]
|
| const el = document.getElementById('reading-panel')
|
| el.innerHTML = `
|
| <div class="r-label">[ ${a.name} — ${a.zone} ]</div>
|
| <div class="r-line"><span class="r-agent" style="color:${a.color}">${a.emoji} ${a.name}</span></div>
|
| <div class="r-line" style="color:#888;margin-top:6px">${a.cipher}</div>
|
| <div class="r-line" style="color:#444;margin-top:6px;font-size:10px">Dee: ${a.dee}</div>
|
| `
|
| }
|
|
|
| function setMode(m) {
|
| mode = m
|
| document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'))
|
| document.getElementById('btn-' + m)?.classList.add('active')
|
| }
|
|
|
| async function animatePipeline() {
|
| setMode('pipeline')
|
| activeNodes.clear()
|
| for (let i = 0; i < AGENTS.length; i++) {
|
| activeNodes.clear()
|
| activeNodes.add(i)
|
| showReading(i)
|
| await new Promise(r => setTimeout(r, 700))
|
| }
|
| activeNodes.clear()
|
| setMode('all')
|
| }
|
|
|
| function draw() {
|
| pulseT += 0.04
|
| ctx.clearRect(0, 0, W, H)
|
|
|
|
|
| const grd = ctx.createRadialGradient(CX, CY, 0, CX, CY, R)
|
| grd.addColorStop(0, 'rgba(74,153,120,0.03)')
|
| grd.addColorStop(1, 'rgba(0,0,0,0)')
|
| ctx.fillStyle = grd
|
| ctx.fillRect(0, 0, W, H)
|
|
|
|
|
| if (mode === 'all' || mode === 'star') {
|
|
|
| for (let i = 0; i < 5; i++) {
|
| for (let j = i + 2; j < 5; j++) {
|
| if (j === i + 2 || (i === 0 && j === 3)) {
|
| const a = AGENTS[i], b = AGENTS[(i+2)%5]
|
| drawLine(a.x, a.y, b.x, b.y, 'rgba(74,153,120,0.15)', 1)
|
| }
|
| }
|
| }
|
|
|
| ctx.beginPath()
|
| const order = [0,2,4,1,3,0]
|
| ctx.moveTo(AGENTS[0].x, AGENTS[0].y)
|
| for (const idx of order) ctx.lineTo(AGENTS[idx].x, AGENTS[idx].y)
|
| ctx.strokeStyle = 'rgba(74,153,120,0.20)'
|
| ctx.lineWidth = 1
|
| ctx.stroke()
|
| }
|
|
|
| if (mode === 'all' || mode === 'pipeline') {
|
|
|
| for (let i = 0; i < 5; i++) {
|
| const a = AGENTS[i], b = AGENTS[(i+1)%5]
|
| const active = activeNodes.has(i) || activeNodes.has((i+1)%5)
|
| drawLine(a.x, a.y, b.x, b.y,
|
| active ? 'rgba(168,132,60,0.7)' : 'rgba(40,40,40,0.8)', active ? 2 : 1)
|
| }
|
| }
|
|
|
|
|
| AGENTS.forEach((a, i) => {
|
| const isActive = activeNodes.has(i)
|
| const isHovered = hoveredNode === i
|
| const pulse = isActive ? 0.5 + 0.5 * Math.sin(pulseT * 3) : 0
|
|
|
|
|
| if (isActive) {
|
| ctx.beginPath()
|
| ctx.arc(a.x, a.y, 34 + pulse * 6, 0, Math.PI * 2)
|
| ctx.fillStyle = a.color + '22'
|
| ctx.fill()
|
| }
|
|
|
|
|
| ctx.beginPath()
|
| ctx.arc(a.x, a.y, 26, 0, Math.PI * 2)
|
| ctx.fillStyle = isActive ? a.color + '33' : isHovered ? '#1a1a1a' : '#111'
|
| ctx.strokeStyle = isActive ? a.color : isHovered ? '#333' : '#1e1e1e'
|
| ctx.lineWidth = isActive ? 2 : 1
|
| ctx.fill()
|
| ctx.stroke()
|
|
|
|
|
| ctx.font = '18px serif'
|
| ctx.textAlign = 'center'
|
| ctx.textBaseline = 'middle'
|
| ctx.fillText(a.emoji, a.x, a.y)
|
|
|
|
|
| ctx.font = '8px Courier New'
|
| ctx.fillStyle = isActive ? a.color : '#444'
|
| ctx.textBaseline = 'top'
|
| ctx.fillText(a.name, a.x, a.y + 30)
|
|
|
|
|
| ctx.font = '7px Courier New'
|
| ctx.fillStyle = '#2a2a2a'
|
| ctx.fillText(a.zone, a.x, a.y + 40)
|
| })
|
|
|
|
|
| ctx.font = '22px serif'
|
| ctx.textAlign = 'center'
|
| ctx.textBaseline = 'middle'
|
| ctx.fillStyle = 'rgba(168,132,60,0.3)'
|
| ctx.fillText('☿', CX, CY)
|
|
|
|
|
| ctx.font = '9px Courier New'
|
| ctx.fillStyle = '#2a2a2a'
|
| ctx.textAlign = 'center'
|
| ctx.fillText('φ = 1.618', CX, CY + 16)
|
|
|
| animFrame = requestAnimationFrame(draw)
|
| }
|
|
|
| function drawLine(x1, y1, x2, y2, color, width) {
|
| ctx.beginPath()
|
| ctx.moveTo(x1, y1)
|
| ctx.lineTo(x2, y2)
|
| ctx.strokeStyle = color
|
| ctx.lineWidth = width
|
| ctx.stroke()
|
| }
|
|
|
| draw()
|
| </script>
|
| </body>
|
| </html>
|
|
|
