Spaces:
Running
Running
🐳 21/02 - 06:04 - ncaught TypeError: Cannot read properties of undefined (reading 'toFixed') at Object.f ((index):198:83) at (index):216:81 at Array.forEach (<anonymous>) at (index):208:3
36c57eb verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Entropic Creature Lagoon</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background: #000; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| canvas { | |
| display: block; | |
| } | |
| #controls { | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| color: #fff; | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(10px); | |
| border-radius: 12px; | |
| padding: 16px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| z-index: 100; | |
| width: 280px; | |
| } | |
| .control-group { | |
| margin-bottom: 16px; | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .control-group:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .control-group h3 { | |
| margin: 0 0 12px; | |
| font-weight: 600; | |
| color: #a78bfa; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .control-row { | |
| margin-bottom: 10px; | |
| } | |
| .control-row label { | |
| display: block; | |
| font-size: 12px; | |
| margin-bottom: 4px; | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| input[type="range"] { | |
| width: 100%; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 2px; | |
| -webkit-appearance: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 50%; | |
| background: #a78bfa; | |
| cursor: pointer; | |
| } | |
| .value-display { | |
| font-size: 12px; | |
| color: #fff; | |
| margin-top: 4px; | |
| } | |
| #stats { | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 12px; | |
| border-radius: 8px; | |
| margin-bottom: 16px; | |
| } | |
| #stats p { | |
| margin: 0; | |
| font-size: 12px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| button { | |
| background: rgba(167, 139, 250, 0.2); | |
| color: #a78bfa; | |
| border: 1px solid rgba(167, 139, 250, 0.3); | |
| border-radius: 6px; | |
| padding: 8px 12px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| margin-right: 8px; | |
| margin-bottom: 8px; | |
| } | |
| button:hover { | |
| background: rgba(167, 139, 250, 0.3); | |
| } | |
| .checkbox-container { | |
| display: flex; | |
| align-items: center; | |
| margin-top: 8px; | |
| } | |
| .checkbox-container input { | |
| margin-right: 8px; | |
| } | |
| .checkbox-container label { | |
| margin: 0; | |
| font-size: 12px; | |
| } | |
| #title { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 20px; | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 12px; | |
| z-index: 100; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black"> | |
| <canvas id="c"></canvas> | |
| <div id="controls"> | |
| <div id="stats"> | |
| <p>Avg KE: <span id="keVal" class="font-mono">0.00</span></p> | |
| <p>Current Drag: <span id="dragVal" class="font-mono">0.00</span></p> | |
| </div> | |
| <div class="flex flex-wrap mb-4"> | |
| <button id="refresh" class="flex items-center"> | |
| <i data-feather="refresh-cw" class="w-3 h-3 mr-2"></i> Refresh | |
| </button> | |
| <button id="randomize" class="flex items-center"> | |
| <i data-feather="shuffle" class="w-3 h-3 mr-2"></i> Randomize | |
| </button> | |
| </div> | |
| <div id="control-groups"></div> | |
| </div> | |
| <div id="title">Entropic Creature Lagoon</div> | |
| <script> | |
| feather.replace(); | |
| (() => { | |
| const M = Math; | |
| const D = document; | |
| const c = D.getElementById('c'); | |
| const x = c.getContext('2d'); | |
| let W = c.width = innerWidth; | |
| let H = c.height = innerHeight; | |
| window.onresize = () => { W = c.width = innerWidth; H = c.height = innerHeight; }; | |
| const ctrlDiv = D.getElementById('control-groups'); | |
| const P = { | |
| minDist: 80, maxDist: 300, minDrag: 0.2, maxDrag: 0.9, count: 250, centerF: 0.005, | |
| modulus: 12, phaseForce: 0.25, | |
| bondDist: 90, bondStrength: 0.1, | |
| coherenceThreshold: 0.75, coherenceForce: 0.2, diffBias: 0, | |
| useDigitalRoot: true, useLogProximity: true | |
| }; | |
| const ctrlConfig = { | |
| count: { name:"Particles", min:50, max:300, step:1, needsInit:true, group: 'Global' }, | |
| phaseForce: { name:"Phase Force", min:0, max:1, step:0.01, f:v=>v.toFixed(2), group: 'Phase Dynamics' }, | |
| minDist: { name:"Min Distance", min:0, max:200, group: 'Phase Dynamics' }, | |
| maxDrag: { name:"Max Drag", min:0.1, max:0.99, step:0.01, f:v=>v.toFixed(2), group: 'Phase Dynamics' }, | |
| minDrag: { name:"Min Drag", min:0.01, max:0.5, step:0.01, f:v=>v.toFixed(2), group: 'Phase Dynamics' }, | |
| bondDist: { name:"Bond Distance", min:20, max:200, group: 'Crystallization' }, | |
| bondStrength: { name:"Bond Strength", min:0.01, max:0.5, step:0.01, f:v=>v.toFixed(2), group: 'Crystallization' }, | |
| coherenceThreshold: { name: "Coherence Threshold", min: 0, max: 1, step: 0.01, f:v=>v.toFixed(2), group: 'Coherence' }, | |
| coherenceForce: { name: "Coherence Force", min: 0, max: 1, step: 0.01, f:v=>v.toFixed(2), group: 'Coherence' }, | |
| diffBias: { name: "Diff Bias", min: 0, max: 2, step: 0.01, f:v=>v.toFixed(2), group: 'Coherence' }, | |
| modulus: { name:"Modulus", min:2, max:30, step:1, needsInit:true, group: 'Coherence' }, | |
| }; | |
| let particles = []; | |
| let avgKE = 0; | |
| let currentDrag = P.minDrag; | |
| // --- UI Generation --- | |
| const groups = {}; | |
| Object.keys(ctrlConfig).forEach(key => { | |
| const conf = ctrlConfig[key]; | |
| if (!groups[conf.group]) groups[conf.group] = ''; | |
| const val = P[key]; | |
| groups[conf.group] += ` | |
| <div class="control-row"> | |
| <label for="${key}">${conf.name}</label> | |
| <input type="range" id="${key}" min="${conf.min}" max="${conf.max}" value="${val}" step="${conf.step||'any'}"> | |
| <div class="value-display" id="${key}Val">${conf.f?conf.f(val):val}</div> | |
| </div> | |
| `; | |
| }); | |
| for (const groupName in groups) { | |
| const groupDiv = D.createElement('div'); | |
| groupDiv.className = 'control-group'; | |
| groupDiv.innerHTML = ` | |
| <h3>${groupName}</h3> | |
| ${groups[groupName]} | |
| ${groupName === 'Coherence' ? ` | |
| <div class="checkbox-container"> | |
| <input type="checkbox" id="useDigitalRoot" ${P.useDigitalRoot ? 'checked' : ''}> | |
| <label for="useDigitalRoot">Digital Root</label> | |
| </div> | |
| <div class="checkbox-container"> | |
| <input type="checkbox" id="useLogProximity" ${P.useLogProximity ? 'checked' : ''}> | |
| <label for="useLogProximity">Log Proximity</label> | |
| </div> | |
| ` : ''} | |
| `; | |
| ctrlDiv.appendChild(groupDiv); | |
| } | |
| Object.keys(ctrlConfig).forEach(key => { | |
| D.getElementById(key).oninput = e => { | |
| P[key] = +e.target.value; | |
| D.getElementById(`${key}Val`).textContent = ctrlConfig[key].f ? ctrlConfig[key].f(P[key]) : P[key]; | |
| if(ctrlConfig[key].needsInit) init(); | |
| }; | |
| }); | |
| D.getElementById('useDigitalRoot').onchange = e => P.useDigitalRoot = e.target.checked; | |
| D.getElementById('useLogProximity').onchange = e => P.useLogProximity = e.target.checked; | |
| D.getElementById('refresh').onclick = init; | |
| D.getElementById('randomize').onclick = () => { | |
| Object.keys(ctrlConfig).forEach(key => { | |
| const conf = ctrlConfig[key]; | |
| let val = conf.min + M.random() * (conf.max - conf.min); | |
| if (conf.step) val = M.round(val / conf.step) * conf.step; | |
| P[key] = +val.toFixed(4); | |
| D.getElementById(key).value = P[key]; | |
| D.getElementById(`${key}Val`).textContent = conf.f ? conf.f(P[key]) : P[key]; | |
| }); | |
| P.useDigitalRoot = M.random() > 0.5; | |
| D.getElementById('useDigitalRoot').checked = P.useDigitalRoot; | |
| P.useLogProximity = M.random() > 0.5; | |
| D.getElementById('useLogProximity').checked = P.useLogProximity; | |
| init(); | |
| }; | |
| // --- HELPER FUNCTIONS & PARTICLE CLASS --- | |
| const digitalRoot = n => 1 + ((n - 1) % 9); | |
| function calculateCoherence(p1, p2) { | |
| let features = [], weights = []; | |
| const resDelta = M.abs(p1.residue - p2.residue), circDelta = M.min(resDelta, P.modulus - resDelta); | |
| features.push(circDelta / (P.modulus / 2)); | |
| weights.push(1.0); | |
| if (P.useDigitalRoot) { | |
| const drDelta = M.abs(p1.digitalRoot - p2.digitalRoot); | |
| features.push(drDelta / 8); | |
| weights.push(0.8); | |
| } | |
| if (P.useLogProximity) { | |
| const logDelta = M.abs(M.log(p1.value) - M.log(p2.value)); | |
| features.push(M.min(1, logDelta / M.log(P.count * 0.5))); | |
| weights.push(0.6); | |
| } | |
| let weightedSum = 0, totalWeight = 0; | |
| for (let i = 0; i < features.length; i++) { | |
| weightedSum += features[i] * weights[i]; | |
| totalWeight += weights[i]; | |
| } | |
| return 1 - (weightedSum / totalWeight); | |
| } | |
| class Particle { | |
| constructor(i){ | |
| this.id = i; | |
| this.value = i + 1; | |
| this.residue = this.value % P.modulus; | |
| this.digitalRoot = digitalRoot(this.value); | |
| this.color = `hsl(${(this.residue / P.modulus) * 360}, 100%, 75%)`; | |
| this.x = W/2 + (M.random()-0.5) * W*0.8; | |
| this.y = H/2 + (M.random()-0.5) * H*0.8; | |
| this.vx = M.random()*2-1; | |
| this.vy = M.random()*2-1; | |
| this.size = 2 + M.random(); | |
| this.phase = 180 + (M.random() * 20 - 10); | |
| this.density = this.ax = this.ay = this.phaseInfluence = this.influenceCount = 0; | |
| this.isLocked = false; | |
| } | |
| update(){ | |
| const lockKE = 1.0, unlockKE = 1.5, lockDensity = 3.5; | |
| if (avgKE < lockKE && this.density < lockDensity && this.density > 0.5) { | |
| this.isLocked = true; | |
| } else if (avgKE > unlockKE) { | |
| this.isLocked = false; | |
| } | |
| if (!this.isLocked) { | |
| const densityTarget = 90 + (this.density - 5) * 15; | |
| this.phase += (densityTarget - this.phase) * 0.01; | |
| if (this.influenceCount > 0) this.phase += (this.phaseInfluence / this.influenceCount) * 0.02; | |
| this.phase += (M.random() - 0.05); | |
| this.phase = (this.phase % 360 + 360) % 360; | |
| } else { | |
| this.phase += (180 - this.phase) * 0.05; | |
| } | |
| this.vx=(this.vx+this.ax)*(1-currentDrag); | |
| this.vy=(this.vy+this.ay)*(1-currentDrag); | |
| this.x+=this.vx; | |
| this.y+=this.vy; | |
| const dC=M.hypot(W/2-this.x,H/2-this.y); | |
| if(dC>0){ | |
| this.ax+=(W/2-this.x)/dC*P.centerF; | |
| this.ay+=(H/2-this.y)/dC*P.centerF; | |
| } | |
| if(this.x<0||this.x>W){this.vx*=-1;this.x=M.max(0,M.min(W,this.x));} | |
| if(this.y<0||this.y>H){this.vy*=-1;this.y=M.max(0,M.min(H,this.y));} | |
| } | |
| draw(){ | |
| x.globalCompositeOperation = 'source-over'; | |
| const coreColor = this.isLocked ? '#ffffff' : this.color; | |
| x.fillStyle = coreColor; | |
| x.beginPath(); | |
| x.arc(this.x,this.y,this.size,0,2*M.PI); | |
| x.fill(); | |
| if (this.isLocked) { | |
| x.strokeStyle = this.color; | |
| x.lineWidth = .5; | |
| x.stroke(); | |
| } | |
| } | |
| } | |
| function init(){ | |
| if(!P.count||P.count<0)return; | |
| particles=Array.from({length:M.floor(P.count)},(_,i)=>new Particle(i)); | |
| particles.forEach(p => { | |
| p.residue = p.value % P.modulus; | |
| p.color = `hsl(${(p.residue / P.modulus) * 360}, 100%, 75%)`; | |
| }); | |
| } | |
| function animate(){ | |
| x.fillStyle='rgba(0,0,0,0.2)'; x.fillRect(0,0,W,H); | |
| if(!particles.length){requestAnimationFrame(animate);return;} | |
| let totalKE = 0; | |
| particles.forEach(p => { | |
| p.ax=p.ay=p.density=p.phaseInfluence=p.influenceCount=0; | |
| totalKE += 0.5 * (p.vx*p.vx + p.vy*p.vy); | |
| }); | |
| avgKE = totalKE / P.count; | |
| const energyRatio = M.max(0, M.min(1, (avgKE - 0.5) / 5)); | |
| currentDrag = P.maxDrag - energyRatio * (P.maxDrag - P.minDrag); | |
| D.getElementById('keVal').textContent = avgKE.toFixed(2); | |
| D.getElementById('dragVal').textContent = currentDrag.toFixed(2); | |
| const grid = new Map(), cellSize = 200; | |
| for (const p of particles) { const key = `${M.floor(p.x/cellSize)},${M.floor(p.y/cellSize)}`; if (!grid.has(key)) grid.set(key, []); grid.get(key).push(p); } | |
| for (const p1 of particles) { | |
| const gX=M.floor(p1.x/cellSize), gY=M.floor(p1.y/cellSize); | |
| for(let dx=-1;dx<=1;dx++){ | |
| for(let dy=-1;dy<=1;dy++){ | |
| const neighbors=grid.get(`${gX+dx},${gY+dy}`); | |
| if(!neighbors) continue; | |
| for(const p2 of neighbors){ | |
| if(p1.id>=p2.id) continue; | |
| const dX=p1.x-p2.x, dY=p1.y-p2.y, distSq=dX*dX+dY*dY; | |
| if(distSq > cellSize*cellSize || distSq === 0) continue; | |
| const dist=M.sqrt(distSq); | |
| const coherenceScore = calculateCoherence(p1, p2); | |
| if (coherenceScore > P.coherenceThreshold) { | |
| const forceMag = (coherenceScore - P.coherenceThreshold) / (1 - P.coherenceThreshold); | |
| const normalizedDiff = 1 - coherenceScore; | |
| const biasMultiplier = 1 + (P.diffBias * normalizedDiff); | |
| const force = forceMag * P.coherenceForce * biasMultiplier * -1; | |
| const fX = (dX / dist) * force, fY = (dY / dist) * force; | |
| p1.ax += fX; p1.ay += fY; | |
| p2.ax -= fX; p2.ay -= fY; | |
| } | |
| if (p1.isLocked && p2.isLocked && dist < P.bondDist) { | |
| const restLength = P.minDist * 0.9; | |
| const displacement = dist - restLength; | |
| const force = displacement * P.bondStrength; | |
| const fX = (dX / dist) * force, fY = (dY / dist) * force; | |
| p1.ax -= fX; p1.ay -= fY; | |
| p2.ax += fX; p2.ay += fY; | |
| const opacity = M.max(0, 1 - M.abs(displacement) / restLength) * 0.09; | |
| const grad = x.createLinearGradient(p1.x, p1.y, p2.x, p2.y); | |
| grad.addColorStop(0, p1.color.replace(')', `, ${opacity})`).replace('hsl', 'hsla')); | |
| grad.addColorStop(1, p2.color.replace(')', `, ${opacity})`).replace('hsl', 'hsla')); | |
| x.strokeStyle = grad; | |
| x.lineWidth = 1.5; | |
| x.beginPath(); x.moveTo(p1.x, p1.y); x.lineTo(p2.x, p2.y); x.stroke(); | |
| } else { | |
| if (coherenceScore > P.coherenceThreshold) { | |
| x.setLineDash([2, 3]); | |
| const hue = 60 - (coherenceScore - P.coherenceThreshold) * 60; | |
| const opacity = (coherenceScore - P.coherenceThreshold) * 0.5 * (1 - dist/cellSize); | |
| x.strokeStyle = `hsla(${hue}, 100%, 70%, ${M.max(0, opacity)})`; | |
| x.lineWidth = 0.3; | |
| x.beginPath(); x.moveTo(p1.x, p1.y); x.lineTo(p2.x, p2.y); x.stroke(); | |
| x.setLineDash([]); | |
| } | |
| const t1=(p1.phase%360)/180, t2=(p2.phase%360)/180; const attr1=2-t1, rep1=t1, attr2=2-t2, rep2=t2; let f1=0, f2=0; if(dist < P.minDist){ const f = (P.minDist - dist) / P.minDist * P.phaseForce; f1 = f * rep1; f2 = f * rep2; } else if (dist < P.maxDist) { const f = (dist - P.minDist) / P.maxDist * P.phaseForce; const resDelta = M.abs(p1.residue - p2.residue); const circDelta = M.min(resDelta, P.modulus - resDelta); const residueCompat = 1 - (circDelta / (P.modulus / 2)); f1 = f * attr1 * M.max(0, residueCompat) * -1; f2 = f * attr2 * M.max(0, residueCompat) * -1; } const fX1 = (dX / dist) * f1, fY1 = (dY / dist) * f1; p1.ax += fX1; p1.ay += fY1; p2.ax -= fX1; p2.ay -= fY1; const fX2 = (dX / dist) * f2, fY2 = (dY / dist) * f2; p1.ax += fX2; p1.ay += fY2; p2.ax -= fX2; p2.ay -= fY2; | |
| } | |
| if (distSq < P.minDist*P.minDist * 2.25) { const w = 1 - dist / (P.minDist * 1.5); p1.density += w; p2.density += w; } | |
| if (distSq < P.minDist*P.minDist * 4 && !p1.isLocked && !p2.isLocked) { const w = 1 - dist / (P.minDist * 2); let pD = p2.phase - p1.phase; pD = (pD + 540) % 360 - 180; p1.phaseInfluence += pD * w; p2.phaseInfluence -= pD * w; p1.influenceCount += w; p2.influenceCount += w; } | |
| } | |
| } | |
| } | |
| } | |
| particles.forEach(p=>{p.update();p.draw();}); | |
| requestAnimationFrame(animate); | |
| } | |
| init(); | |
| animate(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |