File size: 13,205 Bytes

662ceed

<!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   // pentagon circumradius

const PHI     = 1.6180339887



// Five agents at pentagon vertices

// Start from top, go clockwise

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,  // top

  },

  {

    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,

  },

]



// Compute x,y from angle + radius

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)



  // Background glow at center

  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)



  // Draw connections based on mode

  if (mode === 'all' || mode === 'star') {

    // Pentagram diagonals (star connections — skip adjacent, connect every other)

    for (let i = 0; i < 5; i++) {

      for (let j = i + 2; j < 5; j++) {

        if (j === i + 2 || (i === 0 && j === 3)) { // pentagram diagonals only

          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)

        }

      }

    }

    // Actually draw proper pentagram: connect every vertex to vertex+2

    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') {

    // Pentagon edges (adjacent connections)

    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)

    }

  }



  // Nodes

  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



    // Outer glow for active

    if (isActive) {

      ctx.beginPath()

      ctx.arc(a.x, a.y, 34 + pulse * 6, 0, Math.PI * 2)

      ctx.fillStyle = a.color + '22'

      ctx.fill()

    }



    // Node circle

    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()



    // Emoji

    ctx.font         = '18px serif'

    ctx.textAlign    = 'center'

    ctx.textBaseline = 'middle'

    ctx.fillText(a.emoji, a.x, a.y)



    // Agent name below

    ctx.font         = '8px Courier New'

    ctx.fillStyle    = isActive ? a.color : '#444'

    ctx.textBaseline = 'top'

    ctx.fillText(a.name, a.x, a.y + 30)



    // Zone label

    ctx.font         = '7px Courier New'

    ctx.fillStyle    = '#2a2a2a'

    ctx.fillText(a.zone, a.x, a.y + 40)

  })



  // Center symbol — Monas Hieroglyphica approximation

  ctx.font         = '22px serif'

  ctx.textAlign    = 'center'

  ctx.textBaseline = 'middle'

  ctx.fillStyle    = 'rgba(168,132,60,0.3)'

  ctx.fillText('☿', CX, CY)



  // φ label

  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>