Spaces:

ciaochris
/

vers3dynamics-cymatics

Running

App Files Files Community

ciaochris commited on Dec 20, 2025

Commit

b95137d

verified ·

1 Parent(s): 0cc1c40

Update index.html

Browse files

Files changed (1) hide show

index.html +176 -206

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Vers3Dynamics Cymatics Generator Pro</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
     <style>
         body {
@@ -19,33 +19,40 @@
         }
         canvas {
             border: 1px solid #333;
-            box-shadow: 0 0 40px rgba(0, 255, 255, 0.3), 0 0 80px rgba(138, 43, 226, 0.2);
             border-radius: 4px;
-            transition: box-shadow 0.3s;
-        }
-        canvas:hover {
-            box-shadow: 0 0 60px rgba(0, 255, 255, 0.5), 0 0 100px rgba(138, 43, 226, 0.3);
         }
         #controls {
-            margin-top: 20px;
             z-index: 10;
             background: rgba(0, 0, 0, 0.9);
-            padding: 15px 25px;
             border-radius: 12px;
             border: 1px solid #444;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
             display: flex;
             flex-wrap: wrap;
-            gap: 15px;
             align-items: center;
-            max-width: 90vw;
         }
-        .control-group {
             display: flex;
             flex-direction: column;
-            gap: 5px;
         }
-        button, input[type="range"], select {
             background: #222;
             color: white;
             border: 1px solid #444;
@@ -53,281 +60,244 @@
             cursor: pointer;
             font-family: inherit;
             border-radius: 6px;
-            transition: all 0.3s;
-        }
-        button:hover, select:hover {
-            background: #333;
-            border-color: cyan;
-            transform: translateY(-2px);
-        }
-        button:active {
-            transform: translateY(0);
-        }
-        .label {
-            font-size: 11px;
-            color: cyan;
-            font-weight: bold;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        .value-display {
-            font-size: 10px;
-            color: #888;
-            text-align: center;
-        }
-        input[type="range"] {
-            cursor: pointer;
-            accent-color: cyan;
         }
         .active-btn {
-            background: linear-gradient(135deg, #00aaff 0%, #00ffff 100%);
-            color: #000;
-            border-color: #00ffff;
             font-weight: bold;
         }
         #title {
-            position: absolute;
-            top: 20px;
-            font-size: 24px;
-            color: cyan;
-            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
-            letter-spacing: 3px;
-        }
-        #shortcuts {
-            margin-top: 15px;
-            font-size: 10px;
-            color: #666;
-            text-align: center;
-            letter-spacing: 1px;
         }
     </style>
 </head>
 <body>
-    <div id="title">VERS3DYNAMICS CYMATICS</div>
     <div id="controls">
-        <div class="control-group">
-            <span class="label">Freq M: <span id="mVal">5.0</span></span>
-            <input type="range" id="mSlider" min="1" max="20" step="0.1" value="5">
-        </div>
-        <div class="control-group">
-            <span class="label">Freq N: <span id="nVal">7.0</span></span>
-            <input type="range" id="nSlider" min="1" max="20" step="0.1" value="7">
         </div>
-        <div class="control-group">
-            <span class="label">Color Mode</span>
             <select id="paletteSelect">
                 <option value="cyan">Cyan Classic</option>
                 <option value="rainbow">Rainbow Flow</option>
                 <option value="fire">Fire Gradient</option>
-                <option value="aurora">Aurora Borealis</option>
                 <option value="quantum">Quantum Purple</option>
             </select>
         </div>
-        <div class="control-group">
-            <span class="label">Particle Density</span>
-            <input type="range" id="densitySlider" min="1000" max="8000" step="500" value="4000">
-            <span class="value-display" id="densityVal">4000</span>
-        </div>
-        <div class="control-group">
-            <span class="label">Sensitivity</span>
-            <input type="range" id="sensitivitySlider" min="0.005" max="0.05" step="0.005" value="0.02">
-            <span class="value-display" id="sensVal">0.02</span>
-        </div>
-        <button id="morphBtn">🌀 Auto-Morph: OFF</button>
-        <button id="symmetryBtn">⚡ Symmetry Boost</button>
-        <button id="pulseBtn">💫 Pulse Effect</button>
-        <button id="freezeBtn">❄️ Freeze Checkpoint</button>
-        <button id="clearBtn">✨ Clear / Restore</button>
         <button id="saveBtn">📸 Save PNG</button>
     </div>
-    <div id="shortcuts">
-        SHORTCUTS: [M] Morph • [S] Save • [C] Clear • [P] Pulse • [F] Freeze
     </div>
 <script>
     let m = 5;
     let n = 7;
-    let isMorphing = false;
-    let morphSpeed = 0.02;
-    let particles = 4000;
     let sensitivity = 0.02;
     let currentPalette = 'cyan';
     let hueOffset = 0;
     let symmetryMode = false;
     let pulseMode = false;
     let pulsePhase = 0;
-    // Freeze Variables
     let frozenLayer;
-    let hasCheckpoint = false; // Renamed for clarity
     function setup() {
-        let cnv = createCanvas(700, 700);
         pixelDensity(2);
-        background(0);
-        colorMode(HSB, 360, 100, 100, 100);
-        // Initialize the buffer
-        frozenLayer = createGraphics(width * 2, height * 2); // Match pixelDensity
-        frozenLayer.pixelDensity(1); // Keep 1:1 with captured image
-    }
-    function setupControls() {
-        let mSlider = select('#mSlider');
-        mSlider.input(() => select('#mVal').html(parseFloat(mSlider.value()).toFixed(1)));
-        let nSlider = select('#nSlider');
-        nSlider.input(() => select('#nVal').html(parseFloat(nSlider.value()).toFixed(1)));
-        let densitySlider = select('#densitySlider');
-        densitySlider.input(() => {
-            particles = parseInt(densitySlider.value());
-            select('#densityVal').html(particles);
-        });
-        let sensSlider = select('#sensitivitySlider');
-        sensSlider.input(() => {
-            sensitivity = parseFloat(sensSlider.value());
-            select('#sensVal').html(sensitivity.toFixed(3));
-        });
-        select('#paletteSelect').changed(function() {
-            currentPalette = this.value();
-        });
-        select('#saveBtn').mousePressed(saveHighRes);
-        // --- UPDATED CLEAR LOGIC ---
-        select('#clearBtn').mousePressed(() => {
-            if (hasCheckpoint) {
-                // Restore the frozen image
-                image(frozenLayer, 0, 0, width, height);
-            } else {
-                // Full reset
-                background(0);
             }
         });
-        let morphBtn = select('#morphBtn');
-        morphBtn.mousePressed(() => {
             isMorphing = !isMorphing;
-            morphBtn.html(isMorphing ? "🌀 Auto-Morph: ON" : "🌀 Auto-Morph: OFF");
-            if(isMorphing) morphBtn.addClass('active-btn');
-            else morphBtn.removeClass('active-btn');
         });
-        let symBtn = select('#symmetryBtn');
-        symBtn.mousePressed(() => {
             symmetryMode = !symmetryMode;
-            symBtn.html(symmetryMode ? "⚡ Symmetry: ON" : "⚡ Symmetry Boost");
-            if(symmetryMode) symBtn.addClass('active-btn');
-            else symBtn.removeClass('active-btn');
         });
-        let pulseBtn = select('#pulseBtn');
-        pulseBtn.mousePressed(() => {
             pulseMode = !pulseMode;
-            pulseBtn.html(pulseMode ? "💫 Pulse: ON" : "💫 Pulse Effect");
-            if(pulseMode) pulseBtn.addClass('active-btn');
-            else pulseBtn.removeClass('active-btn');
         });
-        // --- UPDATED FREEZE LOGIC ---
-        let freezeBtn = select('#freezeBtn');
-        freezeBtn.mousePressed(() => {
-            // Save current canvas state to buffer
             frozenLayer.clear();
-            frozenLayer.image(get(), 0, 0);
             hasCheckpoint = true;
-            // Visual feedback
-            freezeBtn.html('❄️ Checkpoint Saved');
-            freezeBtn.addClass('active-btn');
-            setTimeout(() => {
-                freezeBtn.html('❄️ Freeze Checkpoint');
-                freezeBtn.removeClass('active-btn');
-            }, 1000);
         });
     }
     function draw() {
-        // Morph Logic: Fades the screen slightly
         if (isMorphing) {
-            background(0, 0, 0, 3);
             m += morphSpeed * 0.6;
             n += morphSpeed * 0.4;
             if (m > 20 || m < 1) morphSpeed *= -1;
-            // Sync Sliders
             select('#mSlider').value(m);
             select('#nSlider').value(n);
-            select('#mVal').html(m.toFixed(1));
-            select('#nVal').html(n.toFixed(1));
         }
-        // Pulse Logic
         if (pulseMode) {
             pulsePhase += 0.05;
             sensitivity = 0.02 + 0.015 * sin(pulsePhase);
-            select('#sensVal').html(sensitivity.toFixed(3));
         }
         hueOffset += 0.5;
-        // CRITICAL FIX: We do NOT draw the frozen layer here.
-        // We only draw it when "Clear/Restore" is clicked.
-        // This ensures new particles can accumulate on top.
-        // Draw Particles
         for (let i = 0; i < particles; i++) {
             let x = random(-1, 1);
             let y = random(-1, 1);
-            let val = Math.cos(n * PI * x / 2) * Math.cos(m * PI * y / 2) -
-                      Math.cos(m * PI * x / 2) * Math.cos(n * PI * y / 2);
-            if (Math.abs(val) < sensitivity) {
-                let screenX = map(x, -1, 1, 0, width);
-                let screenY = map(y, -1, 1, 0, height);
-                stroke(getColor(x, y, val));
-                strokeWeight(random(1, 2.5));
-                point(screenX, screenY);
                 if (symmetryMode) {
-                    strokeWeight(random(1, 2.5)); // Consistent weight
-                    point(width - screenX, screenY);
-                    point(screenX, height - screenY);
-                    point(width - screenX, height - screenY);
                 }
             }
         }
     }
-    function getColor(x, y, val) {
-        let distance = sqrt(x*x + y*y);
-        switch(currentPalette) {
-            case 'cyan': return color(180, 100, 100, 70);
-            case 'rainbow': return color((hueOffset + distance * 200) % 360, 90, 100, 80);
-            case 'fire': return color(map(distance, 0, 1.4, 0, 60), 100, 100, 75);
-            case 'aurora': return color((120 + hueOffset + y * 100) % 360, 80, 100, 70);
-            case 'quantum': return color(map(abs(val), 0, 0.02, 260, 320), 90, 100, 80);
-            default: return color(180, 100, 100, 70);
         }
-    }
-    function saveHighRes() {
-        saveCanvas('Vers3Dynamics_Pattern_' + Date.now(), 'png');
-    }
-    function keyPressed() {
-        if (key === 'm' || key === 'M') select('#morphBtn').mousePressed();
-        else if (key === 'c' || key === 'C') select('#clearBtn').mousePressed();
-        else if (key === 's' || key === 'S') saveHighRes();
-        else if (key === 'p' || key === 'P') select('#pulseBtn').mousePressed();
-        else if (key === 'f' || key === 'F') select('#freezeBtn').mousePressed();
     }
 </script>
 </body>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>Vers3Dynamics Cymatics</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
     <style>
         body {
         }
         canvas {
             border: 1px solid #333;
+            box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
             border-radius: 4px;
         }
         #controls {
+            margin-top: 15px;
             z-index: 10;
             background: rgba(0, 0, 0, 0.9);
+            padding: 15px;
             border-radius: 12px;
             border: 1px solid #444;
             display: flex;
             flex-wrap: wrap;
+            gap: 10px;
             align-items: center;
+            justify-content: center;
+            max-width: 95vw;
         }
+        .input-group {
             display: flex;
             flex-direction: column;
+            align-items: center;
+        }
+        /* New Text Input Style */
+        #wordInput {
+            background: #111;
+            border: 1px solid cyan;
+            color: white;
+            padding: 8px;
+            font-family: inherit;
+            border-radius: 4px;
+            width: 150px;
+            text-align: center;
         }
+        button, select {
             background: #222;
             color: white;
             border: 1px solid #444;
             cursor: pointer;
             font-family: inherit;
             border-radius: 6px;
+            min-width: 100px;
         }
+        button:hover { border-color: cyan; }
         .active-btn {
+            background: #004444;
+            border-color: cyan;
+            color: cyan;
             font-weight: bold;
         }
+        .label { font-size: 10px; color: cyan; text-transform: uppercase; margin-bottom: 3px;}
         #title {
+            position: absolute; top: 15px; font-size: 20px; color: cyan; letter-spacing: 2px;
+            text-shadow: 0 0 10px rgba(0,255,255,0.5);
         }
     </style>
 </head>
 <body>
+    <div id="title">VERS3DYNAMICS RESONANCE ENGINE</div>
     <div id="controls">
+        <div class="input-group">
+            <span class="label">Input Word / Intention</span>
+            <input type="text" id="wordInput" placeholder="Type here...">
         </div>
+        <div class="input-group">
+            <span class="label">Color Palette</span>
             <select id="paletteSelect">
                 <option value="cyan">Cyan Classic</option>
                 <option value="rainbow">Rainbow Flow</option>
                 <option value="fire">Fire Gradient</option>
                 <option value="quantum">Quantum Purple</option>
             </select>
         </div>
+        <button id="morphBtn">🌀 Auto-Morph</button>
+        <button id="symmetryBtn">⚡ Symmetry</button>
+        <button id="pulseBtn">💫 Pulse</button>
+        <button id="freezeBtn">❄️ Freeze Layer</button>
+        <button id="clearBtn">✨ Clear All</button>
         <button id="saveBtn">📸 Save PNG</button>
     </div>
+    <div style="margin-top:10px; color:#555; font-size:10px;">
+        Use Sliders (Below) for Fine Tuning
+    </div>
+    <div id="sliders" style="display:flex; gap:20px; margin-top:10px; background:rgba(0,0,0,0.5); padding:10px; border-radius:8px;">
+        <div><span class="label">Freq M: </span><input type="range" id="mSlider" min="1" max="20" step="0.1" value="5"></div>
+        <div><span class="label">Freq N: </span><input type="range" id="nSlider" min="1" max="20" step="0.1" value="7"></div>
     </div>
 <script>
+    // --- Global Variables ---
     let m = 5;
     let n = 7;
+    let particles = 3000;
     let sensitivity = 0.02;
     let currentPalette = 'cyan';
     let hueOffset = 0;
+    // Toggle States
+    let isMorphing = false;
     let symmetryMode = false;
     let pulseMode = false;
     let pulsePhase = 0;
+    let morphSpeed = 0.02;
+    // Freeze Layer Buffer
     let frozenLayer;
+    let hasCheckpoint = false;
     function setup() {
+        createCanvas(600, 600);
         pixelDensity(2);
+        // IMPORTANT: Set p5 colorMode inside setup
+        colorMode(HSB, 360, 100, 100, 100);
+        background(0);
+        // Initialize Freeze Layer
+        frozenLayer = createGraphics(width, height);
+        frozenLayer.pixelDensity(2);
+        frozenLayer.colorMode(HSB, 360, 100, 100, 100);
+        // --- Attach Event Listeners ---
+        // 1. TEXT INPUT LOGIC (The AI Hash)
+        select('#wordInput').input(function() {
+            let word = this.value();
+            if (word.length > 0) {
+                // Simple hash function to turn text into math
+                let val1 = 0;
+                let val2 = 0;
+                for (let i = 0; i < word.length; i++) {
+                    val1 += word.charCodeAt(i);
+                    val2 += word.charCodeAt(i) * (i + 1);
+                }
+                // Map hash to Frequency Range (1-20)
+                m = map(val1 % 100, 0, 100, 2, 18);
+                n = map(val2 % 100, 0, 100, 2, 18);
+                // Update sliders to match text
+                select('#mSlider').value(m);
+                select('#nSlider').value(n);
+                // Clear screen to show new "Truth"
+                if(!hasCheckpoint) background(0);
             }
         });
+        // 2. BUTTONS
+        select('#morphBtn').mousePressed(() => {
             isMorphing = !isMorphing;
+            toggleStyle('#morphBtn', isMorphing);
         });
+        select('#symmetryBtn').mousePressed(() => {
             symmetryMode = !symmetryMode;
+            toggleStyle('#symmetryBtn', symmetryMode);
         });
+        select('#pulseBtn').mousePressed(() => {
             pulseMode = !pulseMode;
+            toggleStyle('#pulseBtn', pulseMode);
         });
+        select('#freezeBtn').mousePressed(() => {
+            // Save current view to frozen layer
             frozenLayer.clear();
+            frozenLayer.image(get(), 0, 0, width, height); // Capture canvas
             hasCheckpoint = true;
+            let btn = select('#freezeBtn');
+            btn.html("❄️ Saved!");
+            btn.addClass('active-btn');
+            setTimeout(() => { btn.html("❄️ Freeze Layer"); btn.removeClass('active-btn'); }, 1000);
+        });
+        select('#clearBtn').mousePressed(() => {
+            if (hasCheckpoint) {
+                image(frozenLayer, 0, 0, width, height); // Restore checkpoint
+            } else {
+                background(0); // Full black
+            }
         });
+        select('#saveBtn').mousePressed(() => {
+            saveCanvas('Vers3Dynamics_Resonance', 'png');
+        });
+        // 3. DROPDOWN
+        select('#paletteSelect').changed(function() {
+            currentPalette = this.value();
+        });
+        // 4. MANUAL SLIDERS (Listeners)
+        select('#mSlider').input(function() { m = parseFloat(this.value()); });
+        select('#nSlider').input(function() { n = parseFloat(this.value()); });
+    }
+    // Helper to toggle button visual state
+    function toggleStyle(id, isActive) {
+        let el = select(id);
+        if (isActive) el.addClass('active-btn');
+        else el.removeClass('active-btn');
     }
     function draw() {
+        // --- LOGIC UPDATES ---
         if (isMorphing) {
+            background(0, 0, 0, 5); // Fade trail
             m += morphSpeed * 0.6;
             n += morphSpeed * 0.4;
             if (m > 20 || m < 1) morphSpeed *= -1;
+            // Sync sliders visually
             select('#mSlider').value(m);
             select('#nSlider').value(n);
         }
         if (pulseMode) {
             pulsePhase += 0.05;
             sensitivity = 0.02 + 0.015 * sin(pulsePhase);
+        } else {
+            sensitivity = 0.02; // Reset if off
         }
         hueOffset += 0.5;
+        // --- DRAWING PARTICLES ---
+        // We do NOT draw the frozen layer here constantly to avoid clearing the "sand".
+        // The frozen layer sits underneath in memory until we need to restore it.
+        strokeWeight(1.5);
         for (let i = 0; i < particles; i++) {
             let x = random(-1, 1);
             let y = random(-1, 1);
+            // Chladni Math
+            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 col = getPaletteColor(x, y, val);
+                stroke(col);
+                point(sx, sy);
                 if (symmetryMode) {
+                    point(width - sx, sy);
+                    point(sx, height - sy);
+                    point(width - sx, height - sy);
                 }
             }
         }
     }
+    function getPaletteColor(x, y, val) {
+        let d = dist(x, y, 0, 0); // Distance from center
+        if (currentPalette === 'cyan') {
+            return color(180, 100, 100, 70);
+        } else if (currentPalette === 'rainbow') {
+            return color((hueOffset + d * 200) % 360, 90, 100, 60);
+        } else if (currentPalette === 'fire') {
+            let hue = map(d, 0, 1.4, 0, 60);
+            return color(hue, 100, 100, 70);
+        } else if (currentPalette === 'quantum') {
+            // Purple/Pink/Blue
+            return color(map(abs(val), 0, 0.02, 250, 320), 90, 100, 70);
         }
+        return color(255);
     }
 </script>
 </body>