Mafia8 - Analog Prismatic Engine Scripts (HDGL)

Charg (CHG) Software Development
1

image
image1919×1078 2.42 MB

(rendered on prismatic5z.py) SOURCE:

The Prismatic Computer is real. And I’ve built some. I was even a little surprised it was possible, myself. I admit, I looked a little abstract at the time when I was describing them in Cheyenne, WY almost three years ago…

Except the version I had envisioned was all hardware ( titillating :brain:. ) And these versions are software retrofits of the old hardware. Which makes sense, because there is a LOT of cheap hardware lying around just waiting to be optimized back to fire-breathing.

You can go over here to see the primitives -

There’s literally an unlimited number of development paths. Its… a little overwhelming. But fear not, for all your chosen routes, there’s Mafia8, a good starting point of sandbox scripts.

As with all of my code, you can’t use these commercially without my permission (write to me), but feel free to play around with them. It’s pretty cool, actually. Without further wait, here are Mafia8:

Script 1


import sys, time
import numpy as np
from OpenGL.GL import *
from OpenGL.GLUT import *
from OpenGL.GL.shaders import compileProgram, compileShader

# ---------- Shader Sources ----------
VERTEX_SRC = """
#version 330
layout(location = 0) in vec2 pos;
out vec2 texCoord;
void main(){
    texCoord = (pos + 1.0)*0.5;
    gl_Position = vec4(pos,0,1);
}
"""

FRAGMENT_SRC = """
#version 330
in vec2 texCoord;
out vec4 fragColor;

uniform float cycle;
uniform float omegaTime;
uniform float r_dim;
uniform vec4 D_slots[8]; // 8 vec4 = 32 slots

void main(){
    float r = length(texCoord - 0.5) * 2.0;

    float val = 0.0;
    for(int i=0;i<8;i++){
        vec4 slot = D_slots[i];
        float Omega = 0.5 + 0.5*sin(omegaTime + float(i)*0.1);
        val += (slot.x + slot.y + slot.z + slot.w) * Omega * r_dim;
    }

    float phase = sin(cycle*0.01 + val);
    fragColor = vec4(val, phase, r, 1.0);
}
"""

# ---------- Globals ----------
window = None
shader = None
vao = None
cycle = 0.0
omega_time = 0.0
r_dim = 0.5  # radial superposition weight

# Precompute lookup tables
phi = 1.6180339887
fib_table = np.array([((phi**n - (-1/phi)**n)/np.sqrt(5)) for n in range(128)], dtype=np.float32)
prime_table = np.array([2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,
                        59,61,67,71,73,79,83,89,97,101,103,107,109,113,127], dtype=np.float32)

# Compute D_slots[32] for 8 instances x 4 slots
D_slots = np.zeros(32, dtype=np.float32)
for n in range(32):
    F_n = fib_table[n % 128]
    P_n = prime_table[n % len(prime_table)]
    dyadic = 2 ** (n % 16)
    D_slots[n] = np.sqrt(phi * F_n * dyadic * P_n)

D_vec4s = D_slots.reshape(8,4)

# ---------- OpenGL Init ----------
def init_gl():
    global shader, vao
    shader = compileProgram(compileShader(VERTEX_SRC, GL_VERTEX_SHADER),
                            compileShader(FRAGMENT_SRC, GL_FRAGMENT_SHADER))

    # Fullscreen quad
    verts = np.array([-1,-1,1,-1,-1,1,1,-1,1,1,-1,1], dtype=np.float32)
    vao = glGenVertexArrays(1)
    glBindVertexArray(vao)
    vbo = glGenBuffers(1)
    glBindBuffer(GL_ARRAY_BUFFER, vbo)
    glBufferData(GL_ARRAY_BUFFER, verts.nbytes, verts, GL_STATIC_DRAW)
    glVertexAttribPointer(0,2,GL_FLOAT,GL_FALSE,0,None)
    glEnableVertexAttribArray(0)

    glUseProgram(shader)
    loc = glGetUniformLocation(shader, "D_slots")
    glUniform4fv(loc, 8, D_vec4s.flatten())
    glUniform1f(glGetUniformLocation(shader, "r_dim"), r_dim)

# ---------- Display ----------
def display():
    global cycle, omega_time
    glClear(GL_COLOR_BUFFER_BIT)
    glUseProgram(shader)
    glUniform1f(glGetUniformLocation(shader,"cycle"), cycle)
    glUniform1f(glGetUniformLocation(shader,"omegaTime"), omega_time)
    glBindVertexArray(vao)
    glDrawArrays(GL_TRIANGLES,0,6)

    glutSwapBuffers()
    cycle += 1.0
    omega_time += 0.05

# ---------- Idle ----------
def idle():
    glutPostRedisplay()

# ---------- Main ----------
def main():
    glutInit(sys.argv)
    glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE)
    glutInitWindowSize(1280,720)
    glutCreateWindow(b"HDGL Prismatic Superposition (Single-Pass)")
    init_gl()
    glutDisplayFunc(display)
    glutIdleFunc(idle)
    glutMainLoop()

if __name__=="__main__":
    main()

Script 2

import sys, time
import numpy as np
from OpenGL.GL import *
from OpenGL.GLUT import *
from OpenGL.GL.shaders import compileProgram, compileShader

# ---------- Shaders ----------
VERTEX_SRC = """
#version 330
layout(location = 0) in vec2 pos;
out vec2 texCoord;
void main(){
    texCoord = (pos + 1.0)*0.5;
    gl_Position = vec4(pos,0,1);
}
"""

FRAGMENT_SRC = """
#version 330
in vec2 texCoord;
out vec4 fragColor;

// Seed uniforms (small, recursive)
uniform float cycle;
uniform float omegaTime;
uniform float phi;
uniform float phiInv;
uniform int instanceID;

// Preloaded lookup tables
uniform float fibTable[128];
uniform float primeTable[128];

float prismatic_recursion(int id, float r){
    // Golden ratio scaling
    float phi_harm = pow(phi, mod(id, 16));

    // Fibonacci harmonic
    float fib_harm = fibTable[id % 128];

    // Dyadic (binary granularity)
    float dyadic = float(1 << (id % 16));

    // Prime entropy injection
    float prime_harm = primeTable[id % 128];

    // Field tension Ω ~ sinusoidal sweep
    float Omega = 0.5 + 0.5*sin(omegaTime + float(id)*0.01);

    // Radial exponent (analog dimension)
    float r_dim = pow(r, (id % 7)+1);

    // Continuous superposition
    return sqrt(phi_harm * fib_harm * dyadic * prime_harm * Omega) * r_dim;
}

void main(){
    // Map fragment coord → analog radius
    float r = length(texCoord - 0.5) * 2.0;

    // Compute recursive analog slot for this instance
    float val = prismatic_recursion(instanceID, r);

    // Phase coloring (analog brain-channeling)
    float phase = sin(cycle*0.01 + val);
    fragColor = vec4(val, phase, r, 1.0);
}
"""

# ---------- Globals ----------
window = None
shader = None
vao = None
cycle = 0.0
omega_time = 0.0
num_instances = 207_000_000  # FLOPs-limited ceiling

# Precompute lookup tables
fib_table = np.array([((1.6180339887**n - (1-1.6180339887)**n)/np.sqrt(5)) for n in range(128)], dtype=np.float32)
prime_table = np.array([2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97,101,103,107,109,113,127,131,
                        137,139,149,151,157,163,167,173,179,181,191,193,197,199,211,223,227,229,233,239,241,251,257,263,
                        269,271,277,281,283,293,307,311,313,317,331,337,347,349,353,359,367,373,379,383,389,397,401,409,
                        419,421,431,433,439,443,449,457,461,463,467,479,487,491,499,503,509,521,523,541,547,557,563,569,
                        571,577,587,593,599,601,607,613,617,619,631,641,643,647,653,659,661,673,677,683,691], dtype=np.float32)

# ---------- OpenGL Init ----------
def init_gl():
    global shader, vao
    shader = compileProgram(compileShader(VERTEX_SRC, GL_VERTEX_SHADER),
                            compileShader(FRAGMENT_SRC, GL_FRAGMENT_SHADER))
    verts = np.array([-1,-1,1,-1,-1,1,1,-1,1,1,-1,1], dtype=np.float32)
    vao = glGenVertexArrays(1)
    glBindVertexArray(vao)
    vbo = glGenBuffers(1)
    glBindBuffer(GL_ARRAY_BUFFER, vbo)
    glBufferData(GL_ARRAY_BUFFER, verts.nbytes, verts, GL_STATIC_DRAW)
    glVertexAttribPointer(0,2,GL_FLOAT,GL_FALSE,0,None)
    glEnableVertexAttribArray(0)

    glUseProgram(shader)
    glUniform1f(glGetUniformLocation(shader,"phi"), 1.6180339887)
    glUniform1f(glGetUniformLocation(shader,"phiInv"), 0.6180339887)
    glUniform1fv(glGetUniformLocation(shader,"fibTable"),128,fib_table)
    glUniform1fv(glGetUniformLocation(shader,"primeTable"),128,prime_table)

# ---------- Display ----------
def display():
    global cycle, omega_time
    glClear(GL_COLOR_BUFFER_BIT)
    glUseProgram(shader)
    glUniform1f(glGetUniformLocation(shader,"cycle"), cycle)
    glUniform1f(glGetUniformLocation(shader,"omegaTime"), omega_time)
    glUniform1i(glGetUniformLocation(shader,"instanceID"), int(cycle) % num_instances)
    glBindVertexArray(vao)
    glDrawArrays(GL_TRIANGLES,0,6)

    glutSwapBuffers()
    cycle += 1.0
    omega_time += 0.05

# ---------- Idle ----------
def idle():
    glutPostRedisplay()

# ---------- Main ----------
def main():
    glutInit(sys.argv)
    glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE)
    glutInitWindowSize(1280,720)
    glutCreateWindow(b"HDGL Prismatic Recursion (FLOPs Saturation)")
    init_gl()
    glutDisplayFunc(display)
    glutIdleFunc(idle)
    glutMainLoop()

if __name__=="__main__":
    main()

Script 3

import sys, time, ctypes
import numpy as np
from OpenGL.GL import *
from OpenGL.GLUT import *
from OpenGL.GL.shaders import compileProgram, compileShader

# ---------------- Globals ----------------
window = None
shaderProgram = None

NUM_SUPER = 65536
NUM_INSTANCES = 4096
MAX_SLICE = 8
VIRT_WIDTH = 4096
VIRT_HEIGHT = 4096

t0 = time.time()

# Precompute Fibonacci & primes for prismatic recursion
fibTable = np.array([1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987]*8,dtype=np.float32)
primeTable = np.array([2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53]*8,dtype=np.float32)
phi = 1.6180339887

# ---------------- Shaders ----------------
VERTEX_SHADER = """
#version 330
layout(location=0) in vec2 position;
void main(){ gl_Position = vec4(position,0.0,1.0); }
"""

FRAGMENT_SHADER = f"""
#version 330
out vec4 fragColor;

uniform float t;
uniform int NUM_SUPER;
uniform int NUM_INSTANCES;
uniform int MAX_SLICE;
uniform float phi;
uniform float fibTable[128];
uniform float primeTable[128];

float prismatic_recursion(int id, float r){{
    float phi_harm = pow(phi,float(mod(id,16)));
    float fib_harm = fibTable[id % 128];
    float dyadic = float(1 << int(mod(float(id),16.0)));
    float prime_harm = primeTable[id % 128];
    float Omega = 0.5 + 0.5*sin(t + float(id)*0.01);
    float r_dim = pow(r, float(mod(id,7)+1));
    return sqrt(phi_harm*fib_harm*dyadic*prime_harm*Omega)*r_dim;
}}

void main(){{
    vec2 uv = gl_FragCoord.xy / vec2({VIRT_WIDTH},{VIRT_HEIGHT});
    float r = length(uv-0.5)*2.0;
    float val = 0.0;

    for(int s=0;s<NUM_SUPER;s++){{
        int idx = (int(gl_FragCoord.x)*NUM_SUPER+s) % NUM_INSTANCES;
        val += prismatic_recursion(idx,r);
    }}
    val /= float(NUM_SUPER);

    float phase = sin(t*0.01 + val);
    float slice = mod(gl_FragCoord.x,float(MAX_SLICE));

    // Encode glyph intensity in alpha channel
    float glyphAlpha = 0.2 + 0.8*abs(sin(t*0.05 + val));
    fragColor = vec4(val, phase, r, glyphAlpha);
}}
"""

# ---------------- OpenGL Init ----------------
def init_gl():
    global shaderProgram
    shaderProgram = compileProgram(
        compileShader(VERTEX_SHADER, GL_VERTEX_SHADER),
        compileShader(FRAGMENT_SHADER, GL_FRAGMENT_SHADER)
    )

    # Fullscreen quad
    vertices = np.array([-1,-1, 1,-1, -1,1, 1,1],dtype=np.float32)
    vao = glGenVertexArrays(1)
    vbo = glGenBuffers(1)
    glBindVertexArray(vao)
    glBindBuffer(GL_ARRAY_BUFFER, vbo)
    glBufferData(GL_ARRAY_BUFFER, vertices.nbytes, vertices, GL_STATIC_DRAW)
    glEnableVertexAttribArray(0)
    glVertexAttribPointer(0,2,GL_FLOAT,GL_FALSE,0,None)

    # Set uniform arrays
    glUseProgram(shaderProgram)
    glUniform1fv(glGetUniformLocation(shaderProgram,"fibTable"),128,fibTable)
    glUniform1fv(glGetUniformLocation(shaderProgram,"primeTable"),128,primeTable)
    glUniform1f(glGetUniformLocation(shaderProgram,"phi"),phi)

def display():
    glClear(GL_COLOR_BUFFER_BIT)
    glUseProgram(shaderProgram)
    glUniform1f(glGetUniformLocation(shaderProgram,"t"), time.time()-t0)
    glUniform1i(glGetUniformLocation(shaderProgram,"NUM_SUPER"), NUM_SUPER)
    glUniform1i(glGetUniformLocation(shaderProgram,"NUM_INSTANCES"), NUM_INSTANCES)
    glUniform1i(glGetUniformLocation(shaderProgram,"MAX_SLICE"), MAX_SLICE)
    glDrawArrays(GL_TRIANGLE_STRIP,0,4)
    glutSwapBuffers()
    glutPostRedisplay()

def main():
    global window
    glutInit(sys.argv)
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB)
    glutInitWindowSize(1024,1024)
    window = glutCreateWindow(b"HDGL Prismatic BaseI + Composite Glyphs")
    init_gl()
    glutDisplayFunc(display)
    glutMainLoop()

if __name__=="__main__":
    main()

Script 4

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>HDGL — GPU Superglyph Engine</title>
<style>
  html,body{height:100%;margin:0;background:#0b0b0f;font-family:monospace;color:#ffd700;overflow:hidden}
  #ui{position:fixed;left:12px;top:12px;z-index:20;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  #ui input[type=number]{width:90px}
  #asciiCanvas{position:absolute;left:0;top:0;pointer-events:none}
  canvas{display:block}
  button,input,select{background:#111;border:1px solid #222;color:#ffd700;padding:6px;border-radius:6px}
</style>
</head>
<body>
<div id="ui">
  <button id="toggleRec">Recursion: OFF</button>
  <label>Particles: <input id="particleCount" type="number" value="30000" min="1000" max="150000" step="1000"></label>
  <label>Glyphs: <input id="glyphCount" type="number" value="8000" min="100" max="50000" step="100"></label>
  <label>Offset: <input id="offset" type="number" step="0.1" value="2"></label>
  <label>Zoom: <input id="zoom" type="number" step="0.01" value="0.22"></label>
  <label><input id="overlayOn" type="checkbox" checked> ASCII overlay</label>
  <button id="regen">Regenerate</button>
</div>

<canvas id="asciiCanvas"></canvas>

<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>

<script>
// ---------- HDGL Class ----------
class HDGL {
  constructor(){
    this.phi = 1.6180339887;
    this.phi_phi = 2.6180339887;
    this.P3 = 4.2360679775;
    this.P7 = 29.0344465435;
    this.recursionActive = false;
    this.time = 0;
  }
  toggleRecursion(){ this.recursionActive = !this.recursionActive; }
  computeChannels(t){
    const p = this.phi * Math.sin(t*this.phi);
    const pp = this.phi_phi * Math.sin(t*this.phi_phi);
    const p3 = this.P3 * Math.sin(t*this.P3);
    let rec = this.phi*Math.sin(t*this.phi) + this.phi_phi*Math.cos(t*this.phi_phi);
    if(this.recursionActive) rec *= this.P7/this.P3;
    return {phi:p, phi_phi:pp, P3:p3, recursion:rec};
  }
}
const hdgl = new HDGL();

// ---------- THREE Scene ----------
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 5000);
camera.position.set(0,0,300);
const renderer = new THREE.WebGLRenderer({antialias:false});
renderer.setPixelRatio(window.devicePixelRatio || 1);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
scene.add(new THREE.AmbientLight(0x222222));
scene.add(new THREE.PointLight(0xffd700, 1.5, 2000));

// ---------- ASCII overlay ----------
const asciiCanvas = document.getElementById('asciiCanvas');
const aCtx = asciiCanvas.getContext('2d');
function resizeOverlay(){
  asciiCanvas.width = innerWidth;
  asciiCanvas.height = innerHeight;
  asciiCanvas.style.width = innerWidth+'px';
  asciiCanvas.style.height = innerHeight+'px';
}
resizeOverlay();
window.addEventListener('resize', ()=>{ resizeOverlay(); camera.aspect = innerWidth/innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); });

// ---------- UI ----------
let particleCountEl = document.getElementById('particleCount');
let glyphCountEl = document.getElementById('glyphCount');
let offsetEl = document.getElementById('offset');
let zoomEl = document.getElementById('zoom');
let overlayOn = document.getElementById('overlayOn');
let toggleRecBtn = document.getElementById('toggleRec');
let regenBtn = document.getElementById('regen');

let particleCount = parseInt(particleCountEl.value,10);
let glyphCount = parseInt(glyphCountEl.value,10);
let offset = parseFloat(offsetEl.value);
let zoom = parseFloat(zoomEl.value);
let overlayEnabled = overlayOn.checked;

toggleRecBtn.addEventListener('click', ()=>{ hdgl.toggleRecursion(); toggleRecBtn.innerText = 'Recursion: '+(hdgl.recursionActive?'ON':'OFF'); });
regenBtn.addEventListener('click', ()=> { particleCount = parseInt(particleCountEl.value,10)||particleCount; glyphCount = parseInt(glyphCountEl.value,10)||glyphCount; offset = parseFloat(offsetEl.value)||offset; zoom = parseFloat(zoomEl.value)||zoom; buildParticles(particleCount); });
particleCountEl.addEventListener('change', ()=>{ particleCount = parseInt(particleCountEl.value,10); });
glyphCountEl.addEventListener('change', ()=>{ glyphCount = parseInt(glyphCountEl.value,10); });
offsetEl.addEventListener('input', ()=>{ offset = parseFloat(offsetEl.value); });
zoomEl.addEventListener('input', ()=>{ zoom = parseFloat(zoomEl.value); });
overlayOn.addEventListener('change', ()=>{ overlayEnabled = overlayOn.checked; });

// ---------- Particle System ----------
const PHI = (1+Math.sqrt(5))/2;
let positionsBuf = null;
let goldenSpiral = [];
let points;

function buildParticles(count){
  if(points){ scene.remove(points); points.geometry.dispose(); points = null; }
  particleCount = Math.max(1000, Math.min(150000, parseInt(count,10)));
  positionsBuf = new Float32Array(particleCount*3);
  goldenSpiral.length = 0;
  for(let i=0;i<particleCount;i++){
    const theta = i * 2*Math.PI / PHI;
    const r = Math.sqrt(i + 1);
    const z = (i - particleCount/2) * 0.005;
    goldenSpiral.push({theta:theta, r:r, z:z});
    positionsBuf[3*i] = r*Math.cos(theta);
    positionsBuf[3*i+1] = r*Math.sin(theta);
    positionsBuf[3*i+2] = z;
  }
  const geom = new THREE.BufferGeometry();
  geom.setAttribute('position', new THREE.BufferAttribute(positionsBuf,3));
  const mat = new THREE.PointsMaterial({color:0xffd700, size:0.6, sizeAttenuation:false});
  points = new THREE.Points(geom, mat);
  scene.add(points);
}
buildParticles(particleCount);

// ---------- ASCII Overlay ----------
function drawASCIIOverlay(sampleCount){
  if(!overlayEnabled) return;
  aCtx.fillStyle = 'rgba(11,11,15,0.20)';
  aCtx.fillRect(0,0,asciiCanvas.width, asciiCanvas.height);
  const midX = asciiCanvas.width/2;
  const midY = asciiCanvas.height/2;
  const step = Math.max(1, Math.floor(particleCount / sampleCount));
  const v = new THREE.Vector3();
  aCtx.fillStyle = '#ffd700';
  aCtx.font = Math.max(10, Math.floor(Math.min(asciiCanvas.width, asciiCanvas.height)/80)) + 'px monospace';
  for(let i=0,drawn=0; i<particleCount && drawn<sampleCount; i+=step){
    const px = positionsBuf[3*i], py = positionsBuf[3*i+1], pz = positionsBuf[3*i+2];
    v.set(px, py, pz);
    v.project(camera);
    const sx = Math.round((v.x * 0.5 + 0.5) * asciiCanvas.width);
    const sy = Math.round((-v.y * 0.5 + 0.5) * asciiCanvas.height);
    if(sx>=0 && sx < asciiCanvas.width && sy>=0 && sy < asciiCanvas.height){
      const glyph = String.fromCharCode(33 + (i % 93));
      aCtx.fillText(glyph, sx, sy);
      drawn++;
    }
  }
}

// ---------- Animation ----------
let t = 0;
function animate(){
  requestAnimationFrame(animate);
  t += 0.02;
  hdgl.time = t;

  const ch = hdgl.computeChannels(t);
  const phiW = 0.20, phiPhiW = 0.15, P3W = 0.10, recW = 0.05;

  for(let i=0;i<particleCount;i++){
    const g = goldenSpiral[i];
    const rTotal = g.r + ch.phi*phiW + ch.phi_phi*phiPhiW + ch.P3*P3W + ch.recursion*recW;
    const theta = g.theta + t*0.05 + (i % 7) * 0.002;
    positionsBuf[3*i] = Math.floor((rTotal * Math.cos(theta) + Math.sin(i*0.1 + t) * offset) * zoom);
    positionsBuf[3*i+1] = Math.floor((rTotal * Math.sin(theta) + Math.cos(i*0.1 + t) * offset) * zoom);
    positionsBuf[3*i+2] = Math.floor((g.z * zoom) + ch.recursion*0.05);
  }

  points.geometry.attributes.position.needsUpdate = true;
  controls.update();
  renderer.render(scene, camera);

  const sampleGlyphs = Math.max(100, Math.min(50000, parseInt(glyphCountEl.value,10) || 8000));
  drawASCIIOverlay(sampleGlyphs);
}

animate();
</script>
</body>
</html>

Script 5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>HDGL Superglyphs — Infinite Prismatic Engine</title>
<style>
html, body { margin:0; height:100%; background:#0b0b0f; overflow:hidden; font-family:monospace; }
#ui { position:fixed; left:12px; top:12px; z-index:20; display:flex; flex-wrap:wrap; gap:8px; }
#ui input, #ui button { padding:6px; border-radius:6px; border:1px solid #222; background:#111; color:#ffd700; }
</style>
</head>
<body>
<div id="ui">
  <label>Slots: <input id="numSlots" type="number" value="2048" min="128" max="8192" step="128"></label>
  <label>Layers: <input id="numLayers" type="number" value="8" min="1" max="64" step="1"></label>
  <label>Strands: <input id="numStrands" type="number" value="8" min="1" max="16" step="1"></label>
  <label>Zoom: <input id="zoom" type="number" value="0.22" step="0.01"></label>
  <button id="regen">Regenerate</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>

<script>
// ---------- Globals ----------
let scene, camera, renderer, controls, points;
let material, geometry;
let t = 0;

// UI Elements
const numSlotsEl = document.getElementById('numSlots');
const numLayersEl = document.getElementById('numLayers');
const numStrandsEl = document.getElementById('numStrands');
const zoomEl = document.getElementById('zoom');
const regenBtn = document.getElementById('regen');

// ---------- Init Scene ----------
function initScene() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 10000);
    camera.position.set(0,0,300);
    renderer = new THREE.WebGLRenderer({antialias:false});
    renderer.setPixelRatio(window.devicePixelRatio || 1);
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.06;

    scene.add(new THREE.AmbientLight(0x222222));
    scene.add(new THREE.PointLight(0xffd700, 1.5, 2000));

    window.addEventListener('resize', ()=>{
        camera.aspect = innerWidth/innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(innerWidth, innerHeight);
    });
}

// ---------- Shader Material ----------
function createMaterial() {
    const vertexShader = `
    uniform float time;
    uniform float numSlots;
    uniform float numLayers;
    uniform float numStrands;
    uniform float zoom;

    varying float vDepth;
    varying float vLayerAlpha;
    varying vec3 vColor;

    void main(){
        float i = float(gl_VertexID % int(numSlots));
        float layerID = float(gl_VertexID / int(numSlots) % int(numLayers));
        float strandID = float(gl_VertexID / int(numSlots*numLayers) % int(numStrands));

        float phi = 1.6180339887;
        float theta = i*6.283185307/phi + strandID*0.314159;
        float rBase = sqrt(mod(i+1.0,numSlots))*zoom*10.0;

        float r = rBase*(1.0+0.05*layerID*sin(time*0.5 + i*0.001));
        float z = mod(i,numSlots/2.0)*0.05 - 50.0 + layerID*5.0*sin(time*0.3 + i*0.002);

        vec3 pos = vec3(
            r*cos(theta + time*0.05*(layerID+1.0)),
            r*sin(theta + time*0.05*(layerID+1.0)),
            z
        );

        vDepth = log(1.0 + length(pos));
        vLayerAlpha = 1.0 - layerID/numLayers;
        vColor = vec3(
            0.5 + 0.5*sin(strandID + time),
            0.5 + 0.5*cos(strandID + time*0.7),
            0.5 + 0.5*sin(strandID*1.3 + time)
        );

        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
        gl_PointSize = 2.0 + 3.0/(0.001+vDepth/5.0) * vLayerAlpha;
    }
    `;

    const fragmentShader = `
    varying float vDepth;
    varying float vLayerAlpha;
    varying vec3 vColor;

    void main(){
        float blurFactor = smoothstep(1.0, 6.0, vDepth);
        float alpha = vLayerAlpha * (1.0 - blurFactor);
        gl_FragColor = vec4(vColor, alpha);
    }
    `;

    material = new THREE.ShaderMaterial({
        vertexShader,
        fragmentShader,
        uniforms: {
            time: { value: 0 },
            numSlots: { value: parseFloat(numSlotsEl.value) },
            numLayers: { value: parseFloat(numLayersEl.value) },
            numStrands: { value: parseFloat(numStrandsEl.value) },
            zoom: { value: parseFloat(zoomEl.value) }
        },
        transparent:true,
        depthTest:true
    });
}

// ---------- Geometry ----------
function createGeometry() {
    const totalVertices = parseInt(numSlotsEl.value)*parseInt(numLayersEl.value)*parseInt(numStrandsEl.value);
    geometry = new THREE.BufferGeometry();
    const positions = new Float32Array(totalVertices*3);
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
}

// ---------- Build Points ----------
function buildPoints() {
    if(points){
        scene.remove(points);
        geometry.dispose();
        points.material.dispose();
    }
    createGeometry();
    createMaterial();
    points = new THREE.Points(geometry, material);
    scene.add(points);
}

// ---------- UI Events ----------
regenBtn.addEventListener('click', buildPoints);
numSlotsEl.addEventListener('change', ()=>{ material.uniforms.numSlots.value = parseFloat(numSlotsEl.value); buildPoints(); });
numLayersEl.addEventListener('change', ()=>{ material.uniforms.numLayers.value = parseFloat(numLayersEl.value); buildPoints(); });
numStrandsEl.addEventListener('change', ()=>{ material.uniforms.numStrands.value = parseFloat(numStrandsEl.value); buildPoints(); });
zoomEl.addEventListener('input', ()=>{ material.uniforms.zoom.value = parseFloat(zoomEl.value); });

// ---------- Animate ----------
function animate() {
    requestAnimationFrame(animate);
    t += 0.02;
    material.uniforms.time.value = t;
    controls.update();
    renderer.render(scene, camera);
}

// ---------- Init ----------
initScene();
buildPoints();
animate();
</script>
</body>
</html>

Script 6

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>HDGL Hybrid: Superposition + Infinite Prismatic Engine</title>
<style>
html, body { margin:0; height:100%; background:#0b0b0f; overflow:hidden; font-family:monospace; }
#ui { position:fixed; left:12px; top:12px; z-index:20; display:flex; flex-wrap:wrap; gap:8px; }
#ui input, #ui button { padding:6px; border-radius:6px; border:1px solid #222; background:#111; color:#ffd700; }
</style>
</head>
<body>
<div id="ui">
  <label>Slots: <input id="numSlots" type="number" value="1024" min="128" max="4096" step="128"></label>
  <label>Layers: <input id="numLayers" type="number" value="4" min="1" max="32" step="1"></label>
  <label>Strands: <input id="numStrands" type="number" value="4" min="1" max="8" step="1"></label>
  <label>Zoom: <input id="zoom" type="number" value="0.5" step="0.01"></label>
  <label>r_dim: <input id="r_dim" type="number" value="0.5" step="0.01"></label>
  <button id="regen">Regenerate</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>

<script>
// ---------- Globals ----------
let scene, camera, renderer, controls, points;
let material, geometry;
let t = 0;

// UI Elements
const numSlotsEl = document.getElementById('numSlots');
const numLayersEl = document.getElementById('numLayers');
const numStrandsEl = document.getElementById('numStrands');
const zoomEl = document.getElementById('zoom');
const rDimEl = document.getElementById('r_dim');
const regenBtn = document.getElementById('regen');

// Precomputed D_slots from Script 1 (explicit vec4[8] for clarity)
const dSlots = [
  [0.0, 3.1157992, 5.6886449, 13.461791],
  [29.228786, 58.013023, 118.67336, 226.17639],
  [447.28812, 903.78943, 1680.7611, 3303.3506],
  [6255.2832, 11523.939, 21673.217, 41402.031],
  [306.95761, 561.46954, 1058.5405, 1960.2347],
  [3575.6018, 6691.2935, 12337.989, 22983.129],
  [43162.727, 79230.516, 143932.62, 263901.19],
  [479150.0, 877619.56, 1673700.5, 377832.84]
];

// ---------- Init Scene ----------
function initScene() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 10000);
    camera.position.set(0, 0, 150); // Adjusted closer to view points
    renderer = new THREE.WebGLRenderer({antialias:false});
    renderer.setPixelRatio(window.devicePixelRatio || 1);
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.06;

    scene.add(new THREE.AmbientLight(0x444444)); // Brighter ambient
    scene.add(new THREE.PointLight(0xffd700, 2.0, 2000)); // Stronger light

    window.addEventListener('resize', ()=>{
        camera.aspect = innerWidth/innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(innerWidth, innerHeight);
    });

    // Debug WebGL context
    const gl = renderer.getContext();
    console.log('WebGL context:', gl.getParameter(gl.VERSION));
    console.log('Max vertex uniforms:', gl.getParameter(gl.MAX_VERTEX_UNIFORM_VECTORS));
}

// ---------- Shader Material ----------
function createMaterial() {
    const vertexShader = `
    uniform float time;
    uniform float numSlots;
    uniform float numLayers;
    uniform float numStrands;
    uniform float zoom;

    varying vec2 vTexCoord;
    varying float vDepth;
    varying float vLayerAlpha;
    varying vec3 vColor;

    void main(){
        float i = float(gl_VertexID % int(numSlots));
        float layerID = float(gl_VertexID / int(numSlots) % int(numLayers));
        float strandID = float(gl_VertexID / int(numSlots*numLayers) % int(numStrands));

        float phi = 1.6180339887;
        float theta = i * 6.283185307 / phi + strandID * 0.314159;
        float rBase = sqrt(mod(i + 1.0, numSlots)) * zoom * 5.0; // Reduced scale

        float r = rBase * (1.0 + 0.05 * layerID * sin(time * 0.5 + i * 0.001));
        float z = mod(i, numSlots / 2.0) * 0.05 - 25.0 + layerID * 2.0 * sin(time * 0.3 + i * 0.002); // Adjusted z range

        vec3 pos = vec3(
            r * cos(theta + time * 0.05 * (layerID + 1.0)),
            r * sin(theta + time * 0.05 * (layerID + 1.0)),
            z
        );

        // Clamp to avoid NaN/infinity
        pos = clamp(pos, -1000.0, 1000.0);
        vTexCoord = vec2(pos.xy / 200.0 + 0.5); // Normalized for frag
        vDepth = log(1.0 + length(pos));
        vLayerAlpha = 1.0 - layerID / numLayers;
        vColor = vec3(
            0.5 + 0.5 * sin(strandID + time),
            0.5 + 0.5 * cos(strandID + time * 0.7),
            0.5 + 0.5 * sin(strandID * 1.3 + time)
        );

        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
        gl_PointSize = 3.0 + 5.0 / (0.01 + vDepth / 2.0) * vLayerAlpha; // Increased base size
    }
    `;

    const fragmentShader = `
    varying vec2 vTexCoord;
    varying float vDepth;
    varying float vLayerAlpha;
    varying vec3 vColor;

    uniform float time;
    uniform float r_dim;
    uniform vec4 D_slots[8];

    void main(){
        float r = length(vTexCoord - 0.5) * 2.0;

        float val = 0.0;
        for(int i = 0; i < 8; i++){
            vec4 slot = D_slots[i];
            float Omega = 0.5 + 0.5 * sin(time + float(i) * 0.1);
            val += (slot.x + slot.y + slot.z + slot.w) * Omega * r_dim;
        }
        val = clamp(val, 0.0, 1.0); // Prevent overflow

        float phase = sin(time * 0.01 + val);
        vec4 superColor = vec4(val, phase, r, 1.0);

        float blurFactor = smoothstep(0.5, 3.0, vDepth); // Adjusted range
        float alpha = vLayerAlpha * (1.0 - blurFactor);
        alpha = clamp(alpha, 0.1, 1.0); // Ensure visibility

        gl_FragColor = mix(vec4(vColor, alpha), superColor, 0.5);
    }
    `;

    material = new THREE.ShaderMaterial({
        vertexShader,
        fragmentShader,
        uniforms: {
            time: { value: 0 },
            numSlots: { value: parseFloat(numSlotsEl.value) },
            numLayers: { value: parseFloat(numLayersEl.value) },
            numStrands: { value: parseFloat(numStrandsEl.value) },
            zoom: { value: parseFloat(zoomEl.value) },
            r_dim: { value: parseFloat(rDimEl.value) },
            D_slots: { value: dSlots } // Explicit vec4 array
        },
        transparent: true,
        depthTest: true
    });

    // Debug shader compilation
    const gl = renderer.getContext();
    console.log('Vertex Shader:', gl.getShaderParameter(material.vertexShader, gl.COMPILE_STATUS));
    console.log('Fragment Shader:', gl.getShaderParameter(material.fragmentShader, gl.COMPILE_STATUS));
}

// ---------- Geometry ----------
function createGeometry() {
    const totalVertices = parseInt(numSlotsEl.value) * parseInt(numLayersEl.value) * parseInt(numStrandsEl.value);
    geometry = new THREE.BufferGeometry();
    const positions = new Float32Array(totalVertices * 3).fill(0); // Zero-initialized
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    console.log('Vertex count:', totalVertices); // Debug
}

// ---------- Build Points ----------
function buildPoints() {
    if(points){
        scene.remove(points);
        geometry.dispose();
        points.material.dispose();
    }
    createGeometry();
    createMaterial();
    points = new THREE.Points(geometry, material);
    scene.add(points);
}

// ---------- UI Events ----------
regenBtn.addEventListener('click', buildPoints);
numSlotsEl.addEventListener('change', ()=>{ material.uniforms.numSlots.value = parseFloat(numSlotsEl.value); buildPoints(); });
numLayersEl.addEventListener('change', ()=>{ material.uniforms.numLayers.value = parseFloat(numLayersEl.value); buildPoints(); });
numStrandsEl.addEventListener('change', ()=>{ material.uniforms.numStrands.value = parseFloat(numStrandsEl.value); buildPoints(); });
zoomEl.addEventListener('input', ()=>{ material.uniforms.zoom.value = parseFloat(zoomEl.value); });
rDimEl.addEventListener('input', ()=>{ material.uniforms.r_dim.value = parseFloat(rDimEl.value); });

// ---------- Animate ----------
function animate() {
    requestAnimationFrame(animate);
    t += 0.02;
    material.uniforms.time.value = t;
    controls.update();
    renderer.render(scene, camera);
}

// ---------- Init ----------
initScene();
buildPoints();
animate();
</script>
</body>
</html>

Script 7

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>HDGL Hybrid: Prismatic Superposition Engine</title>
<style>
html, body { margin:0; height:100%; background:#0b0b0f; overflow:hidden; font-family:monospace; }
#ui { position:fixed; left:12px; top:12px; z-index:20; display:flex; flex-wrap:wrap; gap:8px; }
#ui input, #ui button { padding:6px; border-radius:6px; border:1px solid #222; background:#111; color:#ffd700; }
</style>
</head>
<body>
<div id="ui">
  <label>Slots: <input id="numSlots" type="number" value="2048" min="128" max="8192" step="128"></label>
  <label>Layers: <input id="numLayers" type="number" value="8" min="1" max="64" step="1"></label>
  <label>Strands: <input id="numStrands" type="number" value="8" min="1" max="16" step="1"></label>
  <label>Zoom: <input id="zoom" type="number" value="0.22" step="0.01"></label>
  <label>r_dim: <input id="r_dim" type="number" value="0.5" step="0.01"></label>
  <button id="regen">Regenerate</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>

<script>
// ---------- Globals ----------
let scene, camera, renderer, controls, points;
let material, geometry;
let t = 0;

// UI
const numSlotsEl = document.getElementById('numSlots');
const numLayersEl = document.getElementById('numLayers');
const numStrandsEl = document.getElementById('numStrands');
const zoomEl = document.getElementById('zoom');
const rDimEl = document.getElementById('r_dim');
const regenBtn = document.getElementById('regen');

// Fibonacci + prime tables
const fibTable = new Float32Array([1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987]);
const primeTable = new Float32Array([2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53]);
const phi = 1.6180339887;

// ---------- Init Scene ----------
function initScene() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 10000);
  camera.position.set(0,0,300);
  renderer = new THREE.WebGLRenderer({antialias:false});
  renderer.setPixelRatio(window.devicePixelRatio || 1);
  renderer.setSize(innerWidth, innerHeight);
  document.body.appendChild(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.06;

  scene.add(new THREE.AmbientLight(0x222222));
  scene.add(new THREE.PointLight(0xffd700, 1.5, 2000));

  window.addEventListener('resize', ()=>{
    camera.aspect = innerWidth/innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(innerWidth, innerHeight);
  });
}

// ---------- Shader Material ----------
function createMaterial() {
  const vertexShader = `
  uniform float time;
  uniform float numSlots;
  uniform float numLayers;
  uniform float numStrands;
  uniform float zoom;
  uniform float r_dim;
  uniform float fibTable[16];
  uniform float primeTable[16];
  uniform float phi;

  varying float vDepth;
  varying float vLayerAlpha;
  varying vec3 vColor;

  float prismaticRecursion(int id, float r){
    float phi_harm = pow(phi,float(mod(float(id),16.0)));
    float fib_harm = fibTable[id % 16];
    float dyadic = pow(2.0, float(id % 16));
    float prime_harm = primeTable[id % 16];
    float Omega = 0.5 + 0.5*sin(time + float(id)*0.01);
    float rpow = pow(r, float((id % 7)+1));
    return sqrt(phi_harm*fib_harm*dyadic*prime_harm*Omega)*rpow;
  }

  void main(){
    int i = int(gl_VertexID % int(numSlots));
    int layerID = int(gl_VertexID / int(numSlots) % int(numLayers));
    int strandID = int(gl_VertexID / int(numSlots*numLayers) % int(numStrands));

    float theta = float(i)*6.283185307/phi + float(strandID)*0.314159;
    float rBase = sqrt(float(i+1))*zoom*10.0;
    float r = rBase*(1.0+0.05*float(layerID)*sin(time*0.5 + float(i)*0.001));

    float z = mod(float(i),numSlots/2.0)*0.05 - 50.0 + float(layerID)*5.0*sin(time*0.3 + float(i)*0.002);

    vec3 pos = vec3(
      r*cos(theta + time*0.05*(float(layerID)+1.0)),
      r*sin(theta + time*0.05*(float(layerID)+1.0)),
      z
    );

    float recurseVal = prismaticRecursion(i, r_dim);
    vDepth = log(1.0 + length(pos) + recurseVal*0.001);
    vLayerAlpha = 1.0 - float(layerID)/numLayers;
    vColor = vec3(
      0.5 + 0.5*sin(float(strandID) + time),
      0.5 + 0.5*cos(float(strandID) + time*0.7),
      0.5 + 0.5*sin(float(strandID)*1.3 + time)
    );

    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
    gl_PointSize = 2.0 + 3.0/(0.001+vDepth/5.0) * vLayerAlpha;
  }
  `;

  const fragmentShader = `
  varying float vDepth;
  varying float vLayerAlpha;
  varying vec3 vColor;
  uniform float time;

  void main(){
    float blurFactor = smoothstep(1.0, 6.0, vDepth);
    float alpha = vLayerAlpha * (1.0 - blurFactor);
    vec3 flicker = vColor * (0.5 + 0.5*sin(time*0.5 + vDepth));
    gl_FragColor = vec4(mix(vColor, flicker, 0.5), alpha);
  }
  `;

  material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      time: { value: 0 },
      numSlots: { value: parseFloat(numSlotsEl.value) },
      numLayers: { value: parseFloat(numLayersEl.value) },
      numStrands: { value: parseFloat(numStrandsEl.value) },
      zoom: { value: parseFloat(zoomEl.value) },
      r_dim: { value: parseFloat(rDimEl.value) },
      fibTable: { value: fibTable },
      primeTable: { value: primeTable },
      phi: { value: phi }
    },
    transparent:true,
    depthTest:true
  });
}

// ---------- Geometry ----------
function createGeometry() {
  const totalVertices = parseInt(numSlotsEl.value)*parseInt(numLayersEl.value)*parseInt(numStrandsEl.value);
  geometry = new THREE.BufferGeometry();
  const positions = new Float32Array(totalVertices*3);
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
}

// ---------- Build Points ----------
function buildPoints() {
  if(points){
    scene.remove(points);
    geometry.dispose();
    points.material.dispose();
  }
  createGeometry();
  createMaterial();
  points = new THREE.Points(geometry, material);
  scene.add(points);
}

// ---------- UI Events ----------
regenBtn.addEventListener('click', buildPoints);
[numSlotsEl,numLayersEl,numStrandsEl].forEach(el=>
  el.addEventListener('change', ()=> buildPoints())
);
zoomEl.addEventListener('input', ()=>{ material.uniforms.zoom.value = parseFloat(zoomEl.value); });
rDimEl.addEventListener('input', ()=>{ material.uniforms.r_dim.value = parseFloat(rDimEl.value); });

// ---------- Animate ----------
function animate() {
  requestAnimationFrame(animate);
  t += 0.02;
  material.uniforms.time.value = t;
  controls.update();
  renderer.render(scene, camera);
}

// ---------- Init ----------
initScene();
buildPoints();
animate();
</script>
</body>
</html>

Script 8

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>HDGL Ultimate Engine: Dynamic Prismatic Superposition</title>
<style>
html, body { margin:0; height:100%; background:#0b0b0f; overflow:hidden; font-family:monospace; }
#ui { position:fixed; left:12px; top:12px; z-index:20; display:flex; flex-wrap:wrap; gap:8px; }
#ui input, #ui button { padding:6px; border-radius:6px; border:1px solid #222; background:#111; color:#ffd700; }
#fps { position:fixed; left:12px; bottom:12px; color:#ffd700; }
</style>
</head>
<body>
<div id="ui">
  <label>Slots: <input id="numSlots" type="number" value="2048" min="128" max="8192" step="128"></label>
  <label>Layers: <input id="numLayers" type="number" value="8" min="1" max="64" step="1"></label>
  <label>Strands: <input id="numStrands" type="number" value="8" min="1" max="16" step="1"></label>
  <label>Particles: <input id="particleCount" type="number" value="30000" min="1000" max="150000" step="1000"></label>
  <label>Super Iter: <input id="numSuper" type="number" value="65536" min="1024" max="131072" step="1024"></label>
  <label>Zoom: <input id="zoom" type="number" value="0.22" step="0.01"></label>
  <label>r_dim: <input id="r_dim" type="number" value="0.5" step="0.01"></label>
  <label>Offset: <input id="offset" type="number" step="0.1" value="2"></label>
  <label><input id="autoOptimize" type="checkbox" checked> Auto Optimize</label>
  <button id="regen">Regenerate</button>
</div>
<div id="fps">FPS: 0</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>

<script>
// ---------- HDGL Engine Class ----------
class HDGLEngine {
  constructor(){
    this.phi = 1.6180339887;
    this.phi_phi = 2.6180339887;
    this.P3 = 4.2360679775;
    this.P7 = 29.0344465435;
    this.recursionActive = true;
    this.time = 0;
    this.fps = 0;
    this.frameTimes = [];
    this.autoOptimize = true;
    this.fibTable = new Float32Array([1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987]);
    this.primeTable = new Float32Array([2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53]);
    this.dSlots = [
      [0.0, 3.1157992, 5.6886449, 13.461791],
      [29.228786, 58.013023, 118.67336, 226.17639],
      [447.28812, 903.78943, 1680.7611, 3303.3506],
      [6255.2832, 11523.939, 21673.217, 41402.031],
      [306.95761, 561.46954, 1058.5405, 1960.2347],
      [3575.6018, 6691.2935, 12337.989, 22983.129],
      [43162.727, 79230.516, 143932.62, 263901.19],
      [479150.0, 877619.56, 1673700.5, 377832.84]
    ];
    this.goldenSpiral = [];
    this.positionsBuf = null;
  }

  computeChannels(t){
    const p = this.phi * Math.sin(t*this.phi);
    const pp = this.phi_phi * Math.sin(t*this.phi_phi);
    const p3 = this.P3 * Math.sin(t*this.P3);
    let rec = this.phi*Math.sin(t*this.phi) + this.phi_phi*Math.cos(t*this.phi_phi);
    if(this.recursionActive) rec *= this.P7/this.P3;
    return {phi:p, phi_phi:pp, P3:p3, recursion:rec};
  }

  updateFPS(deltaTime){
    this.frameTimes.push(deltaTime);
    if(this.frameTimes.length > 30) this.frameTimes.shift();
    this.fps = Math.round(1 / (this.frameTimes.reduce((a,b)=>a+b,0)/this.frameTimes.length));
    document.getElementById('fps').innerText = `FPS: ${this.fps}`;
  }

  optimizeParameters(){
    if(!this.autoOptimize || this.fps === 0) return;
    let targetFPS = 60;
    let adjustment = (targetFPS - this.fps) / targetFPS * 0.1; // Smooth adjustment
    if(this.fps < 45){
      numSlotsEl.value = Math.max(128, numSlotsEl.value * (1 - adjustment));
      numLayersEl.value = Math.max(1, numLayersEl.value * (1 - adjustment));
      numStrandsEl.value = Math.max(1, numStrandsEl.value * (1 - adjustment));
      particleCountEl.value = Math.max(1000, particleCountEl.value * (1 - adjustment));
      numSuperEl.value = Math.max(1024, numSuperEl.value * (1 - adjustment));
    } else if(this.fps > 75){
      numSlotsEl.value = Math.min(8192, numSlotsEl.value * (1 + adjustment/2));
      numLayersEl.value = Math.min(64, numLayersEl.value * (1 + adjustment/2));
      numStrandsEl.value = Math.min(16, numStrandsEl.value * (1 + adjustment/2));
      particleCountEl.value = Math.min(150000, particleCountEl.value * (1 + adjustment/2));
      numSuperEl.value = Math.min(131072, numSuperEl.value * (1 + adjustment/2));
    }
    regenBtn.click(); // Regenerate with new params
  }
}
const hdgl = new HDGLEngine();

// ---------- Scene Setup ----------
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 5000);
camera.position.set(0,0,300);
const renderer = new THREE.WebGLRenderer({antialias:false});
renderer.setPixelRatio(window.devicePixelRatio || 1);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
scene.add(new THREE.AmbientLight(0x222222));
scene.add(new THREE.PointLight(0xffd700, 1.5, 2000));

// ---------- ASCII Overlay ----------
const asciiCanvas = document.createElement('canvas');
asciiCanvas.id = 'asciiCanvas';
asciiCanvas.style.position = 'absolute';
asciiCanvas.style.left = '0';
asciiCanvas.style.top = '0';
asciiCanvas.style.pointerEvents = 'none';
document.body.appendChild(asciiCanvas);
const aCtx = asciiCanvas.getContext('2d');
function resizeOverlay(){
  asciiCanvas.width = innerWidth;
  asciiCanvas.height = innerHeight;
  asciiCanvas.style.width = innerWidth+'px';
  asciiCanvas.style.height = innerHeight+'px';
}
resizeOverlay();
window.addEventListener('resize', ()=>{ resizeOverlay(); camera.aspect = innerWidth/innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); });

// ---------- UI Elements ----------
let numSlots = parseInt(numSlotsEl.value,10);
let numLayers = parseInt(numLayersEl.value,10);
let numStrands = parseInt(numStrandsEl.value,10);
let particleCount = parseInt(particleCountEl.value,10);
let numSuper = parseInt(numSuperEl.value,10);
let zoom = parseFloat(zoomEl.value);
let r_dim = parseFloat(rDimEl.value);
let offset = parseFloat(offsetEl.value);
let autoOptimize = document.getElementById('autoOptimize').checked;

// ---------- Shader Material ----------
function createMaterial() {
  const vertexShader = `
  uniform float time;
  uniform float numSlots;
  uniform float numLayers;
  uniform float numStrands;
  uniform float zoom;
  uniform float r_dim;
  uniform float fibTable[16];
  uniform float primeTable[16];
  uniform float phi;
  uniform float particleCount;
  uniform float numSuper;
  uniform float offset;

  varying float vDepth;
  varying float vLayerAlpha;
  varying vec3 vColor;

  float prismaticRecursion(int id, float r){
    float phi_harm = pow(phi,float(mod(float(id),16.0)));
    float fib_harm = fibTable[id % 16];
    float dyadic = pow(2.0, float(id % 16));
    float prime_harm = primeTable[id % 16];
    float Omega = 0.5 + 0.5*sin(time + float(id)*0.01);
    float rpow = pow(r, float((id % 7)+1));
    return sqrt(phi_harm*fib_harm*dyadic*prime_harm*Omega)*rpow;
  }

  void main(){
    int vid = gl_VertexID;
    int i = vid % int(numSlots);
    int layerID = (vid / int(numSlots)) % int(numLayers);
    int strandID = (vid / int(numSlots*numLayers)) % int(numStrands);

    float theta = float(i)*6.283185307/phi + float(strandID)*0.314159;
    float rBase = sqrt(float(i+1))*zoom*10.0;
    float r = rBase*(1.0+0.05*float(layerID)*sin(time*0.5 + float(i)*0.001));

    float z = mod(float(i),numSlots/2.0)*0.05 - 50.0 + float(layerID)*5.0*sin(time*0.3 + float(i)*0.002);

    vec3 pos = vec3(
      r*cos(theta + time*0.05*(float(layerID)+1.0)),
      r*sin(theta + time*0.05*(float(layerID)+1.0)),
      z
    );

    // Superposition recursion from hybrids
    float recurseVal = 0.0;
    for(int s=0; s<int(numSuper/ int(particleCount)); s++){ // Scaled iteration
      int idx = (vid * int(numSuper) + s) % int(particleCount);
      recurseVal += prismaticRecursion(idx, r_dim);
    }
    recurseVal /= float(numSuper/ int(particleCount));

    pos.z += recurseVal * 0.1; // Integrate superposition into position
    vDepth = log(1.0 + length(pos) + recurseVal*0.001);
    vLayerAlpha = 1.0 - float(layerID)/numLayers;
    vColor = vec3(
      0.5 + 0.5*sin(float(strandID) + time),
      0.5 + 0.5*cos(float(strandID) + time*0.7),
      0.5 + 0.5*sin(float(strandID)*1.3 + time)
    );

    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
    gl_PointSize = 2.0 + 3.0/(0.001+vDepth/5.0) * vLayerAlpha;
  }
  `;

  const fragmentShader = `
  varying float vDepth;
  varying float vLayerAlpha;
  varying vec3 vColor;
  uniform float time;

  void main(){
    float blurFactor = smoothstep(1.0, 6.0, vDepth);
    float alpha = vLayerAlpha * (1.0 - blurFactor);
    vec3 flicker = vColor * (0.5 + 0.5*sin(time*0.5 + vDepth));
    gl_FragColor = vec4(mix(vColor, flicker, 0.5), alpha);
  }
  `;

  return new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      time: { value: 0 },
      numSlots: { value: numSlots },
      numLayers: { value: numLayers },
      numStrands: { value: numStrands },
      zoom: { value: zoom },
      r_dim: { value: r_dim },
      fibTable: { value: hdgl.fibTable },
      primeTable: { value: hdgl.primeTable },
      phi: { value: hdgl.phi },
      particleCount: { value: particleCount },
      numSuper: { value: numSuper },
      offset: { value: offset }
    },
    transparent: true,
    depthTest: true
  });
}

// ---------- Geometry ----------
function createGeometry() {
  const totalVertices = numSlots * numLayers * numStrands * Math.floor(particleCount / 1000); // Scaled with particles
  geometry = new THREE.BufferGeometry();
  hdgl.positionsBuf = new Float32Array(totalVertices * 3);
  geometry.setAttribute('position', new THREE.BufferAttribute(hdgl.positionsBuf, 3));
}

// ---------- Build Points ----------
function buildPoints() {
  if(points){
    scene.remove(points);
    geometry.dispose();
    if(material) material.dispose();
  }
  createGeometry();
  material = createMaterial();
  points = new THREE.Points(geometry, material);
  scene.add(points);
}

// ---------- Update UI Events ----------
function updateUI() {
  numSlots = parseInt(numSlotsEl.value,10);
  numLayers = parseInt(numLayersEl.value,10);
  numStrands = parseInt(numStrandsEl.value,10);
  particleCount = parseInt(particleCountEl.value,10);
  numSuper = parseInt(numSuperEl.value,10);
  zoom = parseFloat(zoomEl.value);
  r_dim = parseFloat(rDimEl.value);
  offset = parseFloat(offsetEl.value);
  hdgl.autoOptimize = document.getElementById('autoOptimize').checked;
  buildPoints();
}

// UI Listeners
regenBtn.addEventListener('click', updateUI);
[numSlotsEl,numLayersEl,numStrandsEl,particleCountEl,numSuperEl,zoomEl,rDimEl,offsetEl].forEach(el=>
  el.addEventListener('change', updateUI)
);
document.getElementById('autoOptimize').addEventListener('change', updateUI);

// ---------- Animation ----------
let lastTime = performance.now();
function animate() {
  requestAnimationFrame(animate);
  const now = performance.now();
  const deltaTime = (now - lastTime) / 1000;
  lastTime = now;

  hdgl.time = t += 0.02;
  hdgl.updateFPS(deltaTime);
  hdgl.optimizeParameters();

  const ch = hdgl.computeChannels(t);
  const phiW = 0.20, phiPhiW = 0.15, P3W = 0.10, recW = 0.05;

  // Update positions with golden spiral and superposition
  for(let i=0; i<particleCount; i++){
    const g = {theta: i * 2*Math.PI / hdgl.phi, r: Math.sqrt(i + 1), z: (i - particleCount/2) * 0.005};
    const rTotal = g.r + ch.phi*phiW + ch.phi_phi*phiPhiW + ch.P3*P3W + ch.recursion*recW + offset;
    const theta = g.theta + t*0.05 + (i % 7) * 0.002;
    hdgl.positionsBuf[3*i] = (rTotal * Math.cos(theta) + Math.sin(i*0.1 + t) * offset) * zoom;
    hdgl.positionsBuf[3*i+1] = (rTotal * Math.sin(theta) + Math.cos(i*0.1 + t) * offset) * zoom;
    hdgl.positionsBuf[3*i+2] = (g.z * zoom) + ch.recursion*0.05;
  }
  geometry.attributes.position.needsUpdate = true;

  // ASCII Overlay (from Script 4)
  aCtx.fillStyle = 'rgba(11,11,15,0.20)';
  aCtx.fillRect(0,0,asciiCanvas.width, asciiCanvas.height);
  const midX = asciiCanvas.width/2;
  const midY = asciiCanvas.height/2;
  const step = Math.floor(particleCount / 5000); // Sample for performance
  const v = new THREE.Vector3();
  aCtx.fillStyle = '#ffd700';
  aCtx.font = Math.floor(Math.min(asciiCanvas.width, asciiCanvas.height)/80) + 'px monospace';
  for(let i=0,drawn=0; i<particleCount && drawn<5000; i+=step){
    const px = hdgl.positionsBuf[3*i], py = hdgl.positionsBuf[3*i+1], pz = hdgl.positionsBuf[3*i+2];
    v.set(px, py, pz);
    v.project(camera);
    const sx = Math.round((v.x * 0.5 + 0.5) * asciiCanvas.width);
    const sy = Math.round((-v.y * 0.5 + 0.5) * asciiCanvas.height);
    if(sx>=0 && sx < asciiCanvas.width && sy>=0 && sy < asciiCanvas.height){
      const glyph = String.fromCharCode(33 + (i % 93));
      aCtx.fillText(glyph, sx, sy);
      drawn++;
    }
  }

  material.uniforms.time.value = t;
  controls.update();
  renderer.render(scene, camera);
}

animate();
</script>
</body>
</html>

image
image1663×1005 596 KB

SOURCE: Index of /demo/