Spaces:

ciaochris
/

vers3dynamics-cymatics

Running

App Files Files Community

ciaochris commited on Dec 21, 2025

Commit

966cc12

verified ·

1 Parent(s): 39e2da0

Update index.html

Browse files

Files changed (1) hide show

index.html +140 -263

index.html CHANGED Viewed

@@ -2,345 +2,222 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Vers3Dynamics Dual-Core</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
     <style>
         body {
-            margin: 0;
-            background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%);
-            color: #ccc;
-            font-family: 'Courier New', Courier, monospace;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100vh;
-        }
-        canvas {
-            border: 1px solid #333;
-            box-shadow: 0 0 50px rgba(0, 255, 255, 0.15);
-            border-radius: 4px;
-        }
-        /* MODE SWITCHER TABS */
-        #mode-switcher {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 10px;
-            z-index: 20;
-        }
-        .mode-tab {
-            background: #111;
-            border: 1px solid #444;
-            color: #888;
-            padding: 8px 20px;
-            cursor: pointer;
-            border-radius: 20px;
-            font-size: 12px;
-            transition: all 0.3s;
-        }
-        .mode-tab:hover { border-color: cyan; }
-        .mode-active {
-            background: rgba(0, 255, 255, 0.1);
-            border-color: cyan;
-            color: cyan;
-            font-weight: bold;
-            box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
-        }
-        #controls {
-            z-index: 10;
-            background: rgba(0, 0, 0, 0.9);
-            padding: 15px 25px;
-            border-radius: 12px;
-            border: 1px solid #444;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 15px;
-            min-width: 300px;
         }
-        /* Sections that toggle on/off */
-        .control-section { display: none; width: 100%; text-align: center; }
-        .visible { display: block; }
-        input[type="text"] {
-            background: #111;
-            border: 1px solid cyan;
-            color: white;
-            padding: 8px;
-            width: 80%;
-            text-align: center;
-            border-radius: 4px;
-            font-family: inherit;
         }
-        button {
-            background: #222;
-            color: white;
-            border: 1px solid #444;
-            padding: 8px 12px;
-            cursor: pointer;
-            border-radius: 6px;
-            margin: 0 5px;
         }
-        button:hover { border-color: cyan; background: #333; }
-        .active-btn { background: #004444; border-color: cyan; color: cyan; }
-        input[type="file"] { display: none; }
-        .custom-upload {
-            border: 1px dashed cyan;
-            padding: 10px;
-            display: block;
-            cursor: pointer;
-            margin-bottom: 10px;
-            color: cyan;
-            font-size: 12px;
-        }
-        .custom-upload:hover { background: rgba(0, 255, 255, 0.1); }
-        #title {
-            position: absolute; top: 20px; font-size: 22px; color: cyan; letter-spacing: 3px;
-            text-shadow: 0 0 10px rgba(0,255,255,0.5);
-        }
-        #status { margin-top: 10px; font-size: 10px; color: #666; }
     </style>
 </head>
 <body>
-    <div id="title">VERS3DYNAMICS</div>
-    <div id="mode-switcher">
-        <div id="tabText" class="mode-tab mode-active">🅰️ TYPE INTENTION</div>
-        <div id="tabAudio" class="mode-tab">🅱️ UPLOAD AUDIO</div>
-    </div>
-    <div id="controls">
-        <div id="sectionText" class="control-section visible">
-            <input type="text" id="wordInput" placeholder="Enter a word (e.g. 'Peace')">
-            <div style="margin-top:5px; font-size:10px; color:#888;">Typing generates a unique frequency hash.</div>
         </div>
-        <div id="sectionAudio" class="control-section">
-            <label class="custom-upload">
-                <input type="file" id="audioUpload" accept="audio/*">
-                📂 Select MP3 File
-            </label>
-            <button id="playPauseBtn" disabled>▶ Play Audio</button>
         </div>
-        <div style="border-top:1px solid #333; padding-top:15px; width:100%; display:flex; justify-content:center;">
-            <button id="morphBtn">🌀 Morph</button>
             <button id="freezeBtn">❄️ Freeze</button>
             <button id="clearBtn">✨ Clear</button>
             <button id="saveBtn">📸 Save</button>
         </div>
     </div>
-    <div id="status">Mode: Text Resonance</div>
 <script>
-    // --- VARIABLES ---
     let m = 5, n = 7;
-    let particles = 3500;
     let sensitivity = 0.02;
-    let hueOffset = 0;
-    let currentMode = 'text'; // 'text' or 'audio'
-    // Audio
     let song, fft, isPlaying = false;
-    // States
-    let isMorphing = false;
-    let morphSpeed = 0.02;
-    // Freeze Layer
     let frozenLayer, hasCheckpoint = false;
     function setup() {
-        createCanvas(600, 600);
         pixelDensity(2);
         colorMode(HSB, 360, 100, 100, 100);
         background(0);
-        // Audio Setup
-        fft = new p5.FFT(0.8, 64);
-        // Freeze Setup
         frozenLayer = createGraphics(width, height);
-        frozenLayer.pixelDensity(2);
         frozenLayer.colorMode(HSB, 360, 100, 100, 100);
-        setupUI();
     }
-    function setupUI() {
-        // --- MODE SWITCHING LOGIC ---
-        select('#tabText').mousePressed(() => switchMode('text'));
-        select('#tabAudio').mousePressed(() => switchMode('audio'));
-        // --- TEXT INPUT LOGIC ---
         select('#wordInput').input(function() {
-            if (currentMode !== 'text') return;
             let word = this.value();
-            if (word.length > 0) {
-                // Hashing Algorithm
-                let val1 = 0, val2 = 0;
-                for (let i = 0; i < word.length; i++) {
-                    val1 += word.charCodeAt(i);
-                    val2 += word.charCodeAt(i) * (i + 1);
-                }
-                m = map(val1 % 100, 0, 100, 2, 18);
-                n = map(val2 % 100, 0, 100, 2, 18);
-                if(!hasCheckpoint) background(0);
-                updateStatus(`Hash Generated: ${word}`);
             }
         });
-        // --- AUDIO INPUT LOGIC ---
-        select('#audioUpload').elt.onchange = function(e) {
-            if (song) song.stop();
-            let file = e.target.files[0];
-            if (file) {
-                updateStatus("Loading Audio...");
-                song = loadSound(file, () => {
-                    updateStatus("Audio Ready. Press Play.");
-                    select('#playPauseBtn').removeAttribute('disabled');
-                    select('#playPauseBtn').style('border-color', 'lime');
-                });
-            }
         };
-        select('#playPauseBtn').mousePressed(() => {
-            if (song && song.isLoaded()) {
-                if (song.isPlaying()) {
-                    song.pause();
-                    select('#playPauseBtn').html("▶ Play Audio");
-                    isPlaying = false;
-                } else {
-                    song.play();
-                    select('#playPauseBtn').html("⏸ Pause");
-                    isPlaying = true;
-                }
-            }
-        });
-        // --- GLOBAL BUTTONS ---
-        select('#morphBtn').mousePressed(() => {
-            isMorphing = !isMorphing;
-            let btn = select('#morphBtn');
-            if(isMorphing) btn.addClass('active-btn');
-            else btn.removeClass('active-btn');
         });
         select('#freezeBtn').mousePressed(() => {
-            frozenLayer.clear();
             frozenLayer.image(get(), 0, 0, width, height);
             hasCheckpoint = true;
-            updateStatus("Layer Checkpoint Saved");
-            let btn = select('#freezeBtn');
-            btn.addClass('active-btn');
-            setTimeout(() => btn.removeClass('active-btn'), 500);
         });
         select('#clearBtn').mousePressed(() => {
             if(hasCheckpoint) image(frozenLayer, 0, 0, width, height);
             else background(0);
         });
-        select('#saveBtn').mousePressed(() => saveCanvas('Vers3_Cymatics', 'png'));
-    }
-    function switchMode(mode) {
-        currentMode = mode;
-        // UI Updates
-        if (mode === 'text') {
-            select('#tabText').addClass('mode-active');
-            select('#tabAudio').removeClass('mode-active');
-            select('#sectionText').addClass('visible');
-            select('#sectionAudio').removeClass('visible');
-            // Stop audio if switching away
-            if(song && song.isPlaying()) {
-                song.pause();
-                isPlaying = false;
-                select('#playPauseBtn').html("▶ Play Audio");
-            }
-            updateStatus("Mode: Text Intention");
-        } else {
-            select('#tabAudio').addClass('mode-active');
-            select('#tabText').removeClass('mode-active');
-            select('#sectionAudio').addClass('visible');
-            select('#sectionText').removeClass('visible');
-            updateStatus("Mode: Audio Injection");
-        }
     }
-    function updateStatus(msg) {
-        select('#status').html(msg);
     }
-    function draw() {
-        // --- MODE A: TEXT (Static or Morphing) ---
-        if (currentMode === 'text') {
-            if (isMorphing) {
-                background(0, 0, 0, 5);
-                m += morphSpeed * 0.6;
-                n += morphSpeed * 0.4;
-                if (m > 20 || m < 1) morphSpeed *= -1;
-            }
-            sensitivity = 0.02; // Standard line thickness
         }
-        // --- MODE B: AUDIO (Reactive) ---
         if (currentMode === 'audio' && isPlaying) {
-            let spectrum = fft.analyze();
-            let bass = fft.getEnergy("bass");
-            let treble = fft.getEnergy("treble");
-            let mid = fft.getEnergy("mid");
-            // Audio drives the geometry
-            let targetM = map(bass, 0, 255, 2, 12);
-            let targetN = map(treble, 0, 255, 2, 16);
-            m = lerp(m, targetM, 0.1);
-            n = lerp(n, targetN, 0.1);
-            // Volume drives thickness
-            sensitivity = map(mid, 0, 255, 0.015, 0.05);
-            // Fade for trail effect
-            background(0, 0, 0, 15);
         }
-        hueOffset += 0.5;
-        // --- DRAW PARTICLES ---
-        strokeWeight(1.5);
         for (let i = 0; i < particles; i++) {
-            let x = random(-1, 1);
-            let y = random(-1, 1);
-            let val = cos(n * PI * x / 2) * cos(m * PI * y / 2) -
-                      cos(m * PI * x / 2) * cos(n * PI * y / 2);
             if (abs(val) < sensitivity) {
-                let sx = map(x, -1, 1, 0, width);
-                let sy = map(y, -1, 1, 0, height);
-                let d = dist(x, y, 0, 0);
-                let hue = (hueOffset + d * 200) % 360;
-                // Boost brightness on audio hits
-                let bright = (currentMode === 'audio' && isPlaying) ? 100 : 80;
-                stroke(hue, 90, bright, 80);
                 point(sx, sy);
             }
         }

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vers3Dynamics Cymatics</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
     <style>
         body {
+            margin: 0; background: #050505; color: #ccc;
+            font-family: 'Courier New', Courier, monospace; overflow: hidden;
+            display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;
         }
+        /* Canvas now glows slightly */
+        canvas { border: 1px solid #333; box-shadow: 0 0 40px rgba(0, 255, 255, 0.05); }
+        #ui-layer {
+            position: absolute; bottom: 20px; z-index: 10;
+            background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px);
+            padding: 15px; border-radius: 12px; border: 1px solid #333;
+            display: flex; flex-direction: column; gap: 10px; width: 90%; max-width: 500px;
         }
+        .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+        button { background: #111; color: cyan; border: 1px solid #333; padding: 8px 10px; cursor: pointer; border-radius: 4px; font-size: 11px; flex: 1; transition: all 0.2s; }
+        button:hover { border-color: cyan; background: #222; }
+        .active-btn { background: cyan; color: black; font-weight: bold; border-color: cyan; }
+        #physics-info {
+            height: 30px; font-size: 10px; color: #00ff00;
+            border-top: 1px solid #333; padding-top: 10px; margin-top: 5px; text-align: center;
+            font-family: monospace; letter-spacing: 1px;
         }
+        .label { font-size: 9px; color: #666; text-transform: uppercase; }
+        input[type="text"] { background: #000; border: 1px solid #333; color: cyan; padding: 8px; width: 100%; box-sizing: border-box; border-radius: 4px; text-align: center;}
     </style>
 </head>
 <body>
+    <div id="ui-layer">
+        <div class="row">
+            <button id="textModeBtn" class="active-btn">🅰️ Intention</button>
+            <button id="audioModeBtn">🅱️ Acoustic Injection</button>
         </div>
+        <div id="textSection" class="row">
+            <input type="text" id="wordInput" placeholder="Type intention to root frequency...">
         </div>
+        <div id="audioSection" class="row" style="display:none;">
+            <input type="file" id="audioUpload" accept="audio/*" style="font-size:10px; color:#888;">
+            <button id="playBtn" disabled>▶ Play</button>
+        </div>
+        <div class="row">
+            <button id="physicsToggle">🛠️ Physics</button>
             <button id="freezeBtn">❄️ Freeze</button>
             <button id="clearBtn">✨ Clear</button>
             <button id="saveBtn">📸 Save</button>
         </div>
+        <div id="physics-info">
+            SYSTEM READY
+        </div>
     </div>
 <script>
     let m = 5, n = 7;
+    let particles = 3000;
     let sensitivity = 0.02;
+    let physicsMode = false;
+    let currentMode = 'text';
     let song, fft, isPlaying = false;
     let frozenLayer, hasCheckpoint = false;
+    let canvasSize;
     function setup() {
+        // Dynamic Sizing: Fits the screen but leaves room for UI
+        canvasSize = min(windowWidth, windowHeight) * 0.9;
+        createCanvas(canvasSize, canvasSize);
         pixelDensity(2);
         colorMode(HSB, 360, 100, 100, 100);
         background(0);
+        fft = new p5.FFT(0.8); // 0.8 smoothing for less jittery audio
         frozenLayer = createGraphics(width, height);
         frozenLayer.colorMode(HSB, 360, 100, 100, 100);
+        setupButtons();
+        windowResized(); // Force initial sizing check
+    }
+    function windowResized() {
+        canvasSize = min(windowWidth, windowHeight) * 0.9;
+        resizeCanvas(canvasSize, canvasSize);
+        background(0); // Reset background on resize to prevent stretch artifacts
     }
+    function setupButtons() {
+        select('#physicsToggle').mousePressed(() => {
+            physicsMode = !physicsMode;
+            let btn = select('#physicsToggle');
+            if(physicsMode) btn.addClass('active-btn'); else btn.removeClass('active-btn');
+            // Immediate update for feedback
+            updatePhysicsText();
+        });
         select('#wordInput').input(function() {
             let word = this.value();
+            if(word.length === 0) return;
+            let v1 = 0, v2 = 0;
+            for (let i = 0; i < word.length; i++) {
+                v1 += word.charCodeAt(i); v2 += word.charCodeAt(i) * (i + 1);
             }
+            // Maps to cleaner integer ranges for clearer patterns
+            m = map(v1 % 100, 0, 100, 2, 12);
+            n = map(v2 % 100, 0, 100, 2, 12);
+            if(!hasCheckpoint) background(0);
         });
+        select('#textModeBtn').mousePressed(() => switchMode('text'));
+        select('#audioModeBtn').mousePressed(() => switchMode('audio'));
+        select('#audioUpload').elt.onchange = (e) => {
+            if(song) song.stop();
+            song = loadSound(e.target.files[0], () => {
+                select('#playBtn').removeAttribute('disabled').html("▶ Play");
+                select('#physics-info').html("AUDIO BUFFER LOADED");
+            });
         };
+        select('#playBtn').mousePressed(() => {
+            if(song.isPlaying()) { song.pause(); isPlaying = false; select('#playBtn').html("▶ Play"); }
+            else { song.play(); isPlaying = true; select('#playBtn').html("⏸ Pause"); }
         });
         select('#freezeBtn').mousePressed(() => {
+            frozenLayer.clear(); // Clear buffer before capturing new state
             frozenLayer.image(get(), 0, 0, width, height);
             hasCheckpoint = true;
+            select('#freezeBtn').html("❄️ Saved");
+            setTimeout(() => select('#freezeBtn').html("❄️ Freeze"), 1000);
         });
         select('#clearBtn').mousePressed(() => {
             if(hasCheckpoint) image(frozenLayer, 0, 0, width, height);
             else background(0);
         });
+        select('#saveBtn').mousePressed(() => saveCanvas('Vers3Dynamics_Blueprint', 'png'));
     }
+    function switchMode(m) {
+        currentMode = m;
+        select('#textSection').style('display', m === 'text' ? 'flex' : 'none');
+        select('#audioSection').style('display', m === 'audio' ? 'flex' : 'none');
+        select('#textModeBtn').toggleClass('active-btn', m === 'text');
+        select('#audioModeBtn').toggleClass('active-btn', m === 'audio');
     }
+    function updatePhysicsText() {
+        if (physicsMode) {
+             let traps = floor(m * n * 2); // Approximation of nodal intersections
+             let stability = ((m+n)/24*100).toFixed(1);
+             select('#physics-info').html(`NODES: ${traps} | CONSOLIDATION: ${stability}%`);
+        } else {
+             select('#physics-info').html(":: VISUAL RESONANCE ENGINE ::");
         }
+    }
+    function draw() {
+        // AUDIO LOGIC
         if (currentMode === 'audio' && isPlaying) {
+            fft.analyze();
+            // Smoother lerp (0.05) prevents jumpy visuals
+            m = lerp(m, map(fft.getEnergy("bass"), 0, 255, 2, 10), 0.05);
+            n = lerp(n, map(fft.getEnergy("treble"), 0, 255, 2, 14), 0.05);
+            background(0, 0, 0, 15); // Trail effect
+        }
+        // PHYSICS GRID (New Feature)
+        if (physicsMode) {
+            stroke(0, 255, 255, 15); // Very faint cyan
+            strokeWeight(1);
+            // Draw a simplified engineering grid
+            let gridSize = width / 10;
+            for(let g = 0; g < width; g+=gridSize) {
+                line(g, 0, g, height);
+                line(0, g, width, g);
+            }
         }
+        // PERFORMANCE SAVER: Only update text every 30 frames (approx 0.5s)
+        if (frameCount % 30 === 0) {
+            updatePhysicsText();
+        }
+        // PARTICLE SYSTEM
         for (let i = 0; i < particles; i++) {
+            let x = random(-1, 1), y = random(-1, 1);
+            // Chladni Equation
+            let val = cos(n * PI * x / 2) * cos(m * PI * y / 2) - cos(m * PI * x / 2) * cos(n * PI * y / 2);
             if (abs(val) < sensitivity) {
+                let sx = map(x, -1, 1, 0, width), sy = map(y, -1, 1, 0, height);
+                // Color Logic
+                if (physicsMode) {
+                    // In physics mode, nodes are "Safety Green" to imply engineered structures
+                    stroke(120, 100, 100, 80);
+                } else {
+                    // In Art mode, we use distance-based coloring
+                    let d = dist(0,0,x,y);
+                    stroke((frameCount * 0.5 + d * 100) % 360, 80, 100, 80);
+                }
+                strokeWeight(1.5);
                 point(sx, sy);
             }
         }