|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | + <title>Physics After Spacetime: The Entropy Flow Framework</title> |
| 7 | + |
| 8 | + <style> |
| 9 | + :root { |
| 10 | + --vh: 1vh; |
| 11 | + } |
| 12 | + |
| 13 | + body { |
| 14 | + margin: 0; |
| 15 | + min-height: calc(var(--vh) * 100); |
| 16 | + background: #0a0a0a; |
| 17 | + color: #e6e6e6; |
| 18 | + font-family: monospace; |
| 19 | + display: flex; |
| 20 | + flex-direction: column; |
| 21 | + align-items: center; |
| 22 | + justify-content: center; |
| 23 | + overflow-y: auto; |
| 24 | + text-align: center; |
| 25 | + padding: 20px; |
| 26 | + } |
| 27 | + |
| 28 | + canvas { |
| 29 | + width: 340px; |
| 30 | + height: 340px; |
| 31 | + border-radius: 50%; |
| 32 | + background: radial-gradient(circle at center, #111 0%, #000 100%); |
| 33 | + box-shadow: 0 0 25px #fff1; |
| 34 | + transition: transform 0.05s; |
| 35 | + flex-shrink: 0; |
| 36 | + } |
| 37 | + |
| 38 | + canvas:active { transform: scale(0.98); } |
| 39 | + |
| 40 | + h2 { margin-bottom: 6px; } |
| 41 | + |
| 42 | + .subtitle { |
| 43 | + opacity: 0.7; |
| 44 | + font-size: 0.9em; |
| 45 | + margin-bottom: 12px; |
| 46 | + max-width: 720px; |
| 47 | + line-height: 1.4; |
| 48 | + } |
| 49 | + |
| 50 | + .controls { |
| 51 | + margin-top: 20px; |
| 52 | + display: flex; |
| 53 | + gap: 10px; |
| 54 | + align-items: center; |
| 55 | + flex-wrap: wrap; |
| 56 | + justify-content: center; |
| 57 | + } |
| 58 | + |
| 59 | + button { |
| 60 | + background: #111; |
| 61 | + border: 1px solid #333; |
| 62 | + color: #eee; |
| 63 | + font-weight: bold; |
| 64 | + padding: 8px 14px; |
| 65 | + border-radius: 6px; |
| 66 | + cursor: pointer; |
| 67 | + text-transform: uppercase; |
| 68 | + font-size: 0.8em; |
| 69 | + } |
| 70 | + |
| 71 | + button:hover { background: #181818; } |
| 72 | + |
| 73 | + .timer { |
| 74 | + font-size: 1.1em; |
| 75 | + letter-spacing: 1px; |
| 76 | + min-width: 80px; |
| 77 | + text-align: center; |
| 78 | + } |
| 79 | + |
| 80 | + .tracklist { |
| 81 | + margin-top: 14px; |
| 82 | + display: flex; |
| 83 | + flex-direction: column; |
| 84 | + gap: 8px; |
| 85 | + align-items: center; |
| 86 | + width: 100%; |
| 87 | + max-width: 380px; |
| 88 | + } |
| 89 | + |
| 90 | + .tracklist button { |
| 91 | + width: 100%; |
| 92 | + text-align: left; |
| 93 | + } |
| 94 | + |
| 95 | + .tracklist button.active { |
| 96 | + background: #222; |
| 97 | + border-color: #666; |
| 98 | + } |
| 99 | + |
| 100 | + .glitch-overlay { |
| 101 | + position: fixed; |
| 102 | + inset: 0; |
| 103 | + pointer-events: none; |
| 104 | + background: repeating-linear-gradient( |
| 105 | + 90deg, |
| 106 | + rgba(255,255,255,0.05) 0 2px, |
| 107 | + transparent 2px 4px |
| 108 | + ); |
| 109 | + opacity: 0; |
| 110 | + mix-blend-mode: screen; |
| 111 | + } |
| 112 | + |
| 113 | + /* Short-screen protection */ |
| 114 | + @media (max-height: 700px) { |
| 115 | + canvas { |
| 116 | + width: 260px; |
| 117 | + height: 260px; |
| 118 | + } |
| 119 | + } |
| 120 | + </style> |
| 121 | +</head> |
| 122 | + |
| 123 | +<body> |
| 124 | + |
| 125 | + <h2>Physics After Spacetime: The Entropy Flow Framework</h2> |
| 126 | + |
| 127 | + <div class="subtitle"> |
| 128 | + The Relativistic Scalar-Vector Plenum (RSVP) proposes a theoretical framework in which spacetime geometry and physical laws are not fundamental givens but emergent consequences of deeper processes. Instead of assuming a pre-existing geometric arena, the model describes reality as a substrate of three coupled fields whose behavior is governed by irreversible entropy flow and the relaxation of physical constraints. Familiar regimes such as classical mechanics, relativity, and gravity are reinterpreted as effective descriptions that arise when this underlying thermodynamic microhistory is coarse-grained, stabilized, or observed at large scales. |
| 129 | + |
| 130 | +Within this framework, time is not treated as a coordinate embedded in spacetime but as a measure of irreversible change itself. Gravity is no longer a primitive geometric curvature but emerges from the tendency of entropy to reorganize constraint structure within the plenum. The result is a reorganization of physics in which geometric primitives are replaced by more fundamental processes of dissipation, transport, and constraint relaxation, shifting the explanatory foundation from static structure to dynamic thermodynamic evolution. |
| 131 | + </div> |
| 132 | + |
| 133 | + <canvas id="turntable"></canvas> |
| 134 | + |
| 135 | + <div class="controls"> |
| 136 | + <button id="play">Play</button> |
| 137 | + <button id="pause">Pause</button> |
| 138 | + <div class="timer" id="timer">00:00</div> |
| 139 | + <button id="loop">Loop: Off</button> |
| 140 | + </div> |
| 141 | + |
| 142 | + <div class="tracklist"> |
| 143 | + <button data-track="Spacetime_Is_Frozen_Entropy.mp3"> |
| 144 | + Spacetime is Frozen Entropy |
| 145 | + </button> |
| 146 | + <button data-track="El_espacio-tiempo_es_una_ilusiΓ³n_entrΓ³pica.mp3"> |
| 147 | + El espacio-tiempo es una ilusiΓ³n entrΓ³pica |
| 148 | + </button> |
| 149 | + </div> |
| 150 | + |
| 151 | + <div class="glitch-overlay" id="glitch"></div> |
| 152 | + |
| 153 | + <audio id="audio" crossorigin="anonymous"></audio> |
| 154 | + |
| 155 | + <script> |
| 156 | + /* Fix mobile viewport height lying */ |
| 157 | + function setVH() { |
| 158 | + document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`); |
| 159 | + } |
| 160 | + window.addEventListener('resize', setVH); |
| 161 | + setVH(); |
| 162 | + |
| 163 | + const audio = document.getElementById('audio'); |
| 164 | + const playBtn = document.getElementById('play'); |
| 165 | + const pauseBtn = document.getElementById('pause'); |
| 166 | + const loopBtn = document.getElementById('loop'); |
| 167 | + const timer = document.getElementById('timer'); |
| 168 | + const canvas = document.getElementById('turntable'); |
| 169 | + const ctx = canvas.getContext('2d'); |
| 170 | + const glitch = document.getElementById('glitch'); |
| 171 | + const trackButtons = document.querySelectorAll('.tracklist button'); |
| 172 | + |
| 173 | + let rotation = 0; |
| 174 | + let pulse = 120; |
| 175 | + |
| 176 | + const dpr = window.devicePixelRatio || 1; |
| 177 | + canvas.width = 340 * dpr; |
| 178 | + canvas.height = 340 * dpr; |
| 179 | + ctx.scale(dpr, dpr); |
| 180 | + |
| 181 | + const AudioContext = window.AudioContext || window.webkitAudioContext; |
| 182 | + const ctxAudio = new AudioContext(); |
| 183 | + const analyser = ctxAudio.createAnalyser(); |
| 184 | + analyser.fftSize = 256; |
| 185 | + |
| 186 | + const src = ctxAudio.createMediaElementSource(audio); |
| 187 | + src.connect(analyser); |
| 188 | + analyser.connect(ctxAudio.destination); |
| 189 | + |
| 190 | + const freqData = new Uint8Array(analyser.frequencyBinCount); |
| 191 | + |
| 192 | + function glitchEffect() { |
| 193 | + analyser.getByteFrequencyData(freqData); |
| 194 | + let bass = 0; |
| 195 | + for (let i = 0; i < 32; i++) bass += freqData[i]; |
| 196 | + bass /= 32; |
| 197 | + |
| 198 | + const brightness = Math.min(1, bass / 180); |
| 199 | + pulse = 120 + brightness * 40; |
| 200 | + glitch.style.opacity = brightness > 0.2 ? brightness : 0; |
| 201 | + |
| 202 | + requestAnimationFrame(glitchEffect); |
| 203 | + } |
| 204 | + |
| 205 | + function drawTurntable() { |
| 206 | + ctx.clearRect(0, 0, 340, 340); |
| 207 | + ctx.save(); |
| 208 | + ctx.translate(170, 170); |
| 209 | + ctx.rotate(rotation); |
| 210 | + |
| 211 | + ctx.beginPath(); |
| 212 | + ctx.arc(0, 0, pulse, 0, Math.PI * 2); |
| 213 | + ctx.strokeStyle = 'rgba(255,255,255,0.9)'; |
| 214 | + ctx.lineWidth = 4; |
| 215 | + ctx.stroke(); |
| 216 | + |
| 217 | + ctx.beginPath(); |
| 218 | + ctx.arc(0, 0, 20, 0, Math.PI * 2); |
| 219 | + ctx.fillStyle = '#fff'; |
| 220 | + ctx.fill(); |
| 221 | + |
| 222 | + ctx.restore(); |
| 223 | + } |
| 224 | + |
| 225 | + function animate() { |
| 226 | + rotation += audio.paused ? 0.002 : 0.02; |
| 227 | + drawTurntable(); |
| 228 | + requestAnimationFrame(animate); |
| 229 | + } |
| 230 | + |
| 231 | + function formatTime(sec) { |
| 232 | + const m = Math.floor(sec / 60); |
| 233 | + const s = Math.floor(sec % 60); |
| 234 | + return `${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`; |
| 235 | + } |
| 236 | + |
| 237 | + function updateTimer() { |
| 238 | + if (audio.duration) { |
| 239 | + const remaining = Math.max(0, audio.duration - audio.currentTime); |
| 240 | + timer.textContent = formatTime(remaining); |
| 241 | + } |
| 242 | + requestAnimationFrame(updateTimer); |
| 243 | + } |
| 244 | + |
| 245 | + trackButtons.forEach(btn => { |
| 246 | + btn.onclick = () => { |
| 247 | + trackButtons.forEach(b => b.classList.remove('active')); |
| 248 | + btn.classList.add('active'); |
| 249 | + |
| 250 | + audio.pause(); |
| 251 | + audio.src = btn.dataset.track; |
| 252 | + audio.currentTime = 0; |
| 253 | + ctxAudio.resume(); |
| 254 | + audio.play(); |
| 255 | + glitchEffect(); |
| 256 | + }; |
| 257 | + }); |
| 258 | + |
| 259 | + playBtn.onclick = () => { |
| 260 | + ctxAudio.resume(); |
| 261 | + audio.play(); |
| 262 | + glitchEffect(); |
| 263 | + }; |
| 264 | + |
| 265 | + pauseBtn.onclick = () => audio.pause(); |
| 266 | + |
| 267 | + loopBtn.onclick = () => { |
| 268 | + audio.loop = !audio.loop; |
| 269 | + loopBtn.textContent = `Loop: ${audio.loop ? 'On' : 'Off'}`; |
| 270 | + }; |
| 271 | + |
| 272 | + animate(); |
| 273 | + updateTimer(); |
| 274 | + </script> |
| 275 | + |
| 276 | +</body> |
| 277 | +</html> |
0 commit comments