API tools faq
paste
Apns1978

Fractal-Weighted Holographic Universe

Apns1978
Nov 25th, 2025
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.92 KB | Source Code | 0 0
raw download clone embed print report
  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.0">
  6. <title>Fractal-Weighted Holographic Reconstruction</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13.  
  14. body {
  15. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  16. background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  17. min-height: 100vh;
  18. padding: 20px;
  19. color: #fff;
  20. }
  21.  
  22. .container {
  23. max-width: 1400px;
  24. margin: 0 auto;
  25. background: white;
  26. border-radius: 16px;
  27. box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  28. padding: 30px;
  29. }
  30.  
  31. .header {
  32. display: flex;
  33. justify-content: space-between;
  34. align-items: center;
  35. margin-bottom: 20px;
  36. padding-bottom: 20px;
  37. border-bottom: 2px solid #e2e8f0;
  38. }
  39.  
  40. h1 {
  41. font-size: 2em;
  42. color: #1e293b;
  43. margin: 0;
  44. }
  45.  
  46. .subtitle {
  47. color: #64748b;
  48. font-size: 0.9em;
  49. margin-top: 5px;
  50. }
  51.  
  52. .info-toggle {
  53. background: #3b82f6;
  54. color: white;
  55. border: none;
  56. padding: 10px 20px;
  57. border-radius: 8px;
  58. cursor: pointer;
  59. font-weight: 600;
  60. transition: background 0.2s;
  61. }
  62.  
  63. .info-toggle:hover {
  64. background: #2563eb;
  65. }
  66.  
  67. .info-box {
  68. background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  69. padding: 20px;
  70. border-radius: 12px;
  71. margin-bottom: 20px;
  72. border-left: 4px solid #3b82f6;
  73. color: #1e40af;
  74. line-height: 1.6;
  75. }
  76.  
  77. .info-box.hidden {
  78. display: none;
  79. }
  80.  
  81. .main-grid {
  82. display: grid;
  83. grid-template-columns: 1fr 350px;
  84. gap: 30px;
  85. margin-bottom: 20px;
  86. }
  87.  
  88. @media (max-width: 1024px) {
  89. .main-grid {
  90. grid-template-columns: 1fr;
  91. }
  92. }
  93.  
  94. .canvas-container {
  95. position: relative;
  96. }
  97.  
  98. canvas {
  99. width: 100%;
  100. max-width: 700px;
  101. height: auto;
  102. border: 3px solid #cbd5e1;
  103. border-radius: 12px;
  104. cursor: crosshair;
  105. background: #f8fafc;
  106. display: block;
  107. margin: 0 auto;
  108. }
  109.  
  110. .sidebar {
  111. display: flex;
  112. flex-direction: column;
  113. gap: 20px;
  114. }
  115.  
  116. .panel {
  117. background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  118. padding: 20px;
  119. border-radius: 12px;
  120. box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  121. }
  122.  
  123. .panel h2 {
  124. color: #1e293b;
  125. font-size: 1.2em;
  126. margin-bottom: 15px;
  127. display: flex;
  128. align-items: center;
  129. gap: 8px;
  130. }
  131.  
  132. .slider-group {
  133. margin-bottom: 20px;
  134. }
  135.  
  136. .slider-group:last-child {
  137. margin-bottom: 0;
  138. }
  139.  
  140. .slider-label {
  141. display: flex;
  142. justify-content: space-between;
  143. align-items: center;
  144. margin-bottom: 8px;
  145. color: #334155;
  146. font-weight: 600;
  147. font-size: 0.95em;
  148. }
  149.  
  150. .slider-value {
  151. background: #3b82f6;
  152. color: white;
  153. padding: 4px 12px;
  154. border-radius: 6px;
  155. font-family: 'Courier New', monospace;
  156. font-size: 0.9em;
  157. }
  158.  
  159. input[type="range"] {
  160. width: 100%;
  161. height: 8px;
  162. border-radius: 4px;
  163. background: #cbd5e1;
  164. outline: none;
  165. -webkit-appearance: none;
  166. }
  167.  
  168. input[type="range"]::-webkit-slider-thumb {
  169. -webkit-appearance: none;
  170. appearance: none;
  171. width: 20px;
  172. height: 20px;
  173. border-radius: 50%;
  174. background: #3b82f6;
  175. cursor: pointer;
  176. box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  177. }
  178.  
  179. input[type="range"]::-moz-range-thumb {
  180. width: 20px;
  181. height: 20px;
  182. border-radius: 50%;
  183. background: #3b82f6;
  184. cursor: pointer;
  185. border: none;
  186. box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  187. }
  188.  
  189. .slider-hint {
  190. color: #64748b;
  191. font-size: 0.8em;
  192. margin-top: 5px;
  193. }
  194.  
  195. .button-grid {
  196. display: grid;
  197. grid-template-columns: 1fr 1fr;
  198. gap: 10px;
  199. }
  200.  
  201. button {
  202. padding: 14px;
  203. border: none;
  204. border-radius: 8px;
  205. font-weight: 600;
  206. font-size: 0.95em;
  207. cursor: pointer;
  208. transition: all 0.2s;
  209. display: flex;
  210. align-items: center;
  211. justify-content: center;
  212. gap: 8px;
  213. box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  214. }
  215.  
  216. button:active {
  217. transform: translateY(1px);
  218. }
  219.  
  220. .btn-primary {
  221. background: #3b82f6;
  222. color: white;
  223. grid-column: span 2;
  224. }
  225.  
  226. .btn-primary:hover {
  227. background: #2563eb;
  228. }
  229.  
  230. .btn-success {
  231. background: #10b981;
  232. color: white;
  233. }
  234.  
  235. .btn-success:hover {
  236. background: #059669;
  237. }
  238.  
  239. .btn-danger {
  240. background: #ef4444;
  241. color: white;
  242. }
  243.  
  244. .btn-danger:hover {
  245. background: #dc2626;
  246. }
  247.  
  248. .btn-secondary {
  249. background: #64748b;
  250. color: white;
  251. grid-column: span 2;
  252. }
  253.  
  254. .btn-secondary:hover {
  255. background: #475569;
  256. }
  257.  
  258. .stats-grid {
  259. display: grid;
  260. gap: 10px;
  261. }
  262.  
  263. .stat-item {
  264. display: flex;
  265. justify-content: space-between;
  266. padding: 10px;
  267. background: white;
  268. border-radius: 6px;
  269. font-size: 0.9em;
  270. }
  271.  
  272. .stat-label {
  273. color: #64748b;
  274. font-weight: 600;
  275. }
  276.  
  277. .stat-value {
  278. color: #1e293b;
  279. font-weight: 700;
  280. font-family: 'Courier New', monospace;
  281. }
  282.  
  283. .theory-box {
  284. background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  285. padding: 20px;
  286. border-radius: 12px;
  287. border: 2px solid #cbd5e1;
  288. }
  289.  
  290. .theory-box h3 {
  291. color: #1e293b;
  292. margin-bottom: 15px;
  293. font-size: 1.1em;
  294. }
  295.  
  296. .equation {
  297. font-family: 'Courier New', monospace;
  298. background: white;
  299. padding: 10px;
  300. border-radius: 6px;
  301. margin: 8px 0;
  302. font-size: 0.85em;
  303. color: #334155;
  304. overflow-x: auto;
  305. }
  306.  
  307. .prediction {
  308. background: #dbeafe;
  309. padding: 12px;
  310. border-radius: 6px;
  311. margin-top: 10px;
  312. color: #1e40af;
  313. font-size: 0.9em;
  314. border-left: 3px solid #3b82f6;
  315. }
  316.  
  317. .icon {
  318. display: inline-block;
  319. width: 16px;
  320. height: 16px;
  321. }
  322. </style>
  323. </head>
  324. <body>
  325. <div class="container">
  326. <div class="header">
  327. <div>
  328. <h1>Fractal-Weighted Holographic Reconstruction</h1>
  329. <div class="subtitle">Observer-dependent boundary-to-bulk mapping in AdS/CFT</div>
  330. </div>
  331. <button class="info-toggle" onclick="toggleInfo()">ℹ️ Info</button>
  332. </div>
  333.  
  334. <div id="infoBox" class="info-box">
  335. <p style="margin-bottom: 10px;">
  336. <strong>Interactive Demo:</strong> Click anywhere on the boundary circle to add decoherence events (red dots).
  337. The green field shows the reconstructed bulk scalar field Φ(z,φ) with fractal weighting.
  338. </p>
  339. <p>
  340. <strong>Key Features:</strong> Sharp peaks near measurements (~5° resolution cones),
  341. nearly flat elsewhere. Each observer creates high-resolution "spotlights" on the holographic screen.
  342. The effective vacuum energy suppression emerges naturally: ρ_vac ~ 10^(-60) × Planck^4.
  343. </p>
  344. </div>
  345. <div class="main-grid">
  346. <div class="canvas-container">
  347. <canvas id="canvas" width="700" height="700"></canvas>
  348. </div>
  349. <div class="sidebar">
  350. <div class="panel">
  351. <h2>⚙️ Parameters</h2>
  352.  
  353. <div class="slider-group">
  354. <div class="slider-label">
  355. <span>Fractal exponent α</span>
  356. <span class="slider-value" id="alphaValue">2.6</span>
  357. </div>
  358. <input type="range" id="alphaSlider" min="2.0" max="3.2" step="0.1" value="2.6">
  359. <div class="slider-hint">Controls resolution cone width</div>
  360. </div>
  361. <div class="slider-group">
  362. <div class="slider-label">
  363. <span>Bulk depth z</span>
  364. <span class="slider-value" id="zValue">0.500</span>
  365. </div>
  366. <input type="range" id="zSlider" min="0" max="0.95" step="0.01" value="0.50">
  367. <div class="slider-hint">0 = boundary (∂), 1 = bulk center</div>
  368. </div>
  369. </div>
  370. <div class="panel">
  371. <h2>🎮 Controls</h2>
  372. <div class="button-grid">
  373. <button id="animateBtn" class="btn-primary">
  374. <span id="animateIcon">▶</span> Animate z-scan
  375. </button>
  376. <button onclick="addRandomEvent()" class="btn-success">
  377. + Event
  378. </button>
  379. <button onclick="clearEvents()" class="btn-danger">
  380. ✕ Clear
  381. </button>
  382. <button onclick="resetParameters()" class="btn-secondary">
  383. ↻ Reset Parameters
  384. </button>
  385. </div>
  386. </div>
  387. <div class="panel">
  388. <h2>📊 Statistics</h2>
  389. <div class="stats-grid">
  390. <div class="stat-item">
  391. <span class="stat-label">Decoherence Events</span>
  392. <span class="stat-value" id="eventCount">0</span>
  393. </div>
  394. <div class="stat-item">
  395. <span class="stat-label">Current Depth</span>
  396. <span class="stat-value" id="currentZ">z = 0.500</span>
  397. </div>
  398. <div class="stat-item">
  399. <span class="stat-label">Resolution Cone</span>
  400. <span class="stat-value" id="coneWidth">~5.0°</span>
  401. </div>
  402. </div>
  403. </div>
  404. </div>
  405. </div>
  406. <div class="theory-box">
  407. <h3>🔬 Theory Summary</h3>
  408. <div class="equation">
  409. <strong>Weighting function:</strong> W(θ) = Σ<sub>k</sub> 1 / (1 + 100|θ − θ<sub>k</sub>|<sup>α</sup>)
  410. </div>
  411. <div class="equation">
  412. <strong>Reconstruction:</strong> Φ(z,φ) = ∫ W(θ) · exp(−z|φ−θ|) · C(θ,φ) dθ
  413. </div>
  414. <div class="prediction">
  415. <strong>Key Prediction:</strong> Each observer creates a ~5° high-resolution cone.
  416. Effective degrees of freedom: N<sub>eff</sub> ~ 10<sup>60</sup> (not 10<sup>120</sup>),
  417. naturally explaining the cosmological constant without fine-tuning.
  418. </div>
  419. </div>
  420. </div>
  421. <script>
  422. const canvas = document.getElementById('canvas');
  423. const ctx = canvas.getContext('2d');
  424. const alphaSlider = document.getElementById('alphaSlider');
  425. const zSlider = document.getElementById('zSlider');
  426. const alphaValue = document.getElementById('alphaValue');
  427. const zValue = document.getElementById('zValue');
  428. const currentZ = document.getElementById('currentZ');
  429. const eventCount = document.getElementById('eventCount');
  430. const coneWidth = document.getElementById('coneWidth');
  431. const animateBtn = document.getElementById('animateBtn');
  432. const animateIcon = document.getElementById('animateIcon');
  433.  
  434. let events = [];
  435. let alpha = 2.6;
  436. let z = 0.5;
  437. let isAnimating = false;
  438. let animationFrame = null;
  439. function calculateW(theta, eventList) {
  440. let sum = 0;
  441. for (const event of eventList) {
  442. const diff = Math.abs(theta - event.theta);
  443. const minDiff = Math.min(diff, 2 * Math.PI - diff);
  444. sum += 1 / (1 + 100 * Math.pow(minDiff, alpha));
  445. }
  446. return sum;
  447. }
  448. function reconstructField(zVal, phi, eventList) {
  449. const samples = 50;
  450. let integral = 0;
  451. const dtheta = 2 * Math.PI / samples;
  452.  
  453. for (let i = 0; i < samples; i++) {
  454. const theta = i * dtheta;
  455. const W = calculateW(theta, eventList);
  456. const diff = Math.abs(phi - theta);
  457. const minDiff = Math.min(diff, 2 * Math.PI - diff);
  458. const kernel = Math.exp(-zVal * minDiff * 10);
  459. integral += W * kernel * dtheta;
  460. }
  461. return integral;
  462. }
  463. function addRandomEvent() {
  464. events.push({
  465. theta: Math.random() * 2 * Math.PI,
  466. id: Date.now()
  467. });
  468. updateStats();
  469. draw();
  470. }
  471. function clearEvents() {
  472. events = [];
  473. updateStats();
  474. draw();
  475. }
  476. function resetParameters() {
  477. z = 0.5;
  478. alpha = 2.6;
  479. alphaSlider.value = 2.6;
  480. zSlider.value = 0.5;
  481. alphaValue.textContent = '2.6';
  482. zValue.textContent = '0.500';
  483. currentZ.textContent = 'z = 0.500';
  484. isAnimating = false;
  485. animateBtn.className = 'btn-primary';
  486. animateIcon.textContent = '▶';
  487. updateStats();
  488. draw();
  489. }
  490. function handleCanvasClick(e) {
  491. const rect = canvas.getBoundingClientRect();
  492. const scaleX = canvas.width / rect.width;
  493. const scaleY = canvas.height / rect.height;
  494. const x = (e.clientX - rect.left) * scaleX - canvas.width / 2;
  495. const y = (e.clientY - rect.top) * scaleY - canvas.height / 2;
  496. const theta = Math.atan2(y, x);
  497. const normalizedTheta = theta < 0 ? theta + 2 * Math.PI : theta;
  498.  
  499. events.push({
  500. theta: normalizedTheta,
  501. id: Date.now()
  502. });
  503. updateStats();
  504. draw();
  505. }
  506. function updateStats() {
  507. eventCount.textContent = events.length;
  508. currentZ.textContent = `z = ${z.toFixed(3)}`;
  509. const cone = 5 * Math.pow(2.6 / alpha, 0.8);
  510. coneWidth.textContent = `~${cone.toFixed(1)}°`;
  511. }
  512. function toggleInfo() {
  513. const infoBox = document.getElementById('infoBox');
  514. infoBox.classList.toggle('hidden');
  515. }
  516. function draw() {
  517. const width = canvas.width;
  518. const height = canvas.height;
  519. const centerX = width / 2;
  520. const centerY = height / 2;
  521. const maxRadius = Math.min(width, height) / 2 - 50;
  522. ctx.clearRect(0, 0, width, height);
  523. ctx.fillStyle = '#f8fafc';
  524. ctx.fillRect(0, 0, width, height);
  525. // Radial grid
  526. ctx.strokeStyle = '#e2e8f0';
  527. ctx.lineWidth = 1.5;
  528. for (let r = 0.2; r <= 1; r += 0.2) {
  529. ctx.beginPath();
  530. ctx.arc(centerX, centerY, maxRadius * r, 0, 2 * Math.PI);
  531. ctx.stroke();
  532. }
  533. // Angular grid
  534. for (let angle = 0; angle < 2 * Math.PI; angle += Math.PI / 6) {
  535. ctx.beginPath();
  536. ctx.moveTo(centerX, centerY);
  537. ctx.lineTo(
  538. centerX + maxRadius * Math.cos(angle),
  539. centerY + maxRadius * Math.sin(angle)
  540. );
  541. ctx.stroke();
  542. }
  543. // Draw influence cones
  544. events.forEach((event) => {
  545. const coneAngle = 0.1;
  546. ctx.fillStyle = 'rgba(239, 68, 68, 0.06)';
  547. ctx.beginPath();
  548. ctx.moveTo(centerX, centerY);
  549. ctx.arc(centerX, centerY, maxRadius, event.theta - coneAngle, event.theta + coneAngle);
  550. ctx.closePath();
  551. ctx.fill();
  552. });
  553. // Draw reconstructed field
  554. if (events.length > 0) {
  555. const samples = 180;
  556. const fieldRadius = maxRadius * (1 - z);
  557.  
  558. let maxField = 0;
  559. const fieldValues = [];
  560.  
  561. for (let i = 0; i <= samples; i++) {
  562. const phi = (i / samples) * 2 * Math.PI;
  563. const fieldValue = reconstructField(z, phi, events);
  564. fieldValues.push(fieldValue);
  565. maxField = Math.max(maxField, fieldValue);
  566. }
  567.  
  568. // Draw filled shape
  569. ctx.fillStyle = 'rgba(16, 185, 129, 0.2)';
  570. ctx.beginPath();
  571. for (let i = 0; i <= samples; i++) {
  572. const phi = (i / samples) * 2 * Math.PI;
  573. const normalizedValue = maxField > 0 ? fieldValues[i] / maxField : 0;
  574. const r = fieldRadius + normalizedValue * 50;
  575.  
  576. const x = centerX + r * Math.cos(phi);
  577. const y = centerY + r * Math.sin(phi);
  578.  
  579. if (i === 0) {
  580. ctx.moveTo(x, y);
  581. } else {
  582. ctx.lineTo(x, y);
  583. }
  584. }
  585. ctx.closePath();
  586. ctx.fill();
  587.  
  588. // Draw outline
  589. ctx.strokeStyle = '#10b981';
  590. ctx.lineWidth = 3;
  591. ctx.beginPath();
  592. for (let i = 0; i <= samples; i++) {
  593. const phi = (i / samples) * 2 * Math.PI;
  594. const normalizedValue = maxField > 0 ? fieldValues[i] / maxField : 0;
  595. const r = fieldRadius + normalizedValue * 50;
  596.  
  597. const x = centerX + r * Math.cos(phi);
  598. const y = centerY + r * Math.sin(phi);
  599.  
  600. if (i === 0) {
  601. ctx.moveTo(x, y);
  602. } else {
  603. ctx.lineTo(x, y);
  604. }
  605. }
  606. ctx.stroke();
  607. }
  608. // Draw boundary circle
  609. ctx.strokeStyle = '#3b82f6';
  610. ctx.lineWidth = 4;
  611. ctx.beginPath();
  612. ctx.arc(centerX, centerY, maxRadius, 0, 2 * Math.PI);
  613. ctx.stroke();
  614. // Draw current z-level
  615. if (z > 0.05) {
  616. ctx.strokeStyle = '#94a3b8';
  617. ctx.lineWidth = 2;
  618. ctx.setLineDash([8, 8]);
  619. ctx.beginPath();
  620. ctx.arc(centerX, centerY, maxRadius * (1 - z), 0, 2 * Math.PI);
  621. ctx.stroke();
  622. ctx.setLineDash([]);
  623. }
  624. // Draw events
  625. events.forEach((event) => {
  626. const x = centerX + maxRadius * Math.cos(event.theta);
  627. const y = centerY + maxRadius * Math.sin(event.theta);
  628.  
  629. // Glow
  630. const gradient = ctx.createRadialGradient(x, y, 0, x, y, 15);
  631. gradient.addColorStop(0, 'rgba(239, 68, 68, 0.6)');
  632. gradient.addColorStop(1, 'rgba(239, 68, 68, 0)');
  633. ctx.fillStyle = gradient;
  634. ctx.beginPath();
  635. ctx.arc(x, y, 15, 0, 2 * Math.PI);
  636. ctx.fill();
  637.  
  638. // Solid dot
  639. ctx.fillStyle = '#ef4444';
  640. ctx.beginPath();
  641. ctx.arc(x, y, 6, 0, 2 * Math.PI);
  642. ctx.fill();
  643.  
  644. // White center
  645. ctx.fillStyle = '#fff';
  646. ctx.beginPath();
  647. ctx.arc(x, y, 2.5, 0, 2 * Math.PI);
  648. ctx.fill();
  649. });
  650. // Labels
  651. ctx.fillStyle = '#1e293b';
  652. ctx.font = 'bold 14px sans-serif';
  653. ctx.fillText('Boundary (∂)', centerX + maxRadius + 15, centerY + 5);
  654. ctx.fillText('Bulk center', centerX - 45, centerY - 15);
  655. }
  656. function animate() {
  657. if (!isAnimating) return;
  658. z = (z + 0.015) % 0.95;
  659. zSlider.value = z;
  660. zValue.textContent = z.toFixed(3);
  661. updateStats();
  662. draw();
  663. animationFrame = requestAnimationFrame(animate);
  664. }
  665. canvas.addEventListener('click', handleCanvasClick);
  666. alphaSlider.addEventListener('input', (e) => {
  667. alpha = parseFloat(e.target.value);
  668. alphaValue.textContent = alpha.toFixed(1);
  669. updateStats();
  670. draw();
  671. });
  672. zSlider.addEventListener('input', (e) => {
  673. z = parseFloat(e.target.value);
  674. zValue.textContent = z.toFixed(3);
  675. updateStats();
  676. draw();
  677. });
  678. animateBtn.addEventListener('click', () => {
  679. isAnimating = !isAnimating;
  680. if (isAnimating) {
  681. animateBtn.className = 'btn-primary';
  682. animateIcon.textContent = '⏸';
  683. animate();
  684. } else {
  685. animateBtn.className = 'btn-primary';
  686. animateIcon.textContent = '▶';
  687. if (animationFrame) {
  688. cancelAnimationFrame(animationFrame);
  689. }
  690. }
  691. });
  692. // Initial draw
  693. updateStats();
  694. draw();
  695. </script>
  696. </body>
  697. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!