Spaces:

MySafeCode
/

Marimba-v1

Running

App Files Files Community

MySafeCode commited on 10 days ago

Commit

1b21cbf

verified ·

1 Parent(s): f8c885c

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +751 -668

index.html CHANGED Viewed

@@ -1,682 +1,765 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>SID Chip Tune Studio</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    :root {
-      --c64-blue: #352879;
-      --c64-lightblue: #6c5eb5;
-      --c64-cyan: #00a0a0;
-      --c64-purple: #a0a0ff;
-      --c64-pink: #ff00ff;
-      --c64-yellow: #ffff00;
-      --c64-orange: #ff7700;
-      --c64-green: #00ff00;
-      --c64-red: #ff0000;
-      --c64-white: #ffffff;
-      --c64-gray: #7869c4;
-      --bg-dark: #0a0a0f;
-      --bg-medium: #1a1a2e;
-      --bg-light: #16213e;
-    }
-    body {
-      font-family: 'Courier New', monospace;
-      background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
-      color: var(--c64-white);
-      min-height: 100vh;
-      overflow-x: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background:
-        repeating-linear-gradient(0deg,
-          transparent,
-          transparent 2px,
-          rgba(0, 160, 160, 0.03) 2px,
-          rgba(0, 160, 160, 0.03) 4px);
-      pointer-events: none;
-      z-index: 1;
-    }
-    .container {
-      max-width: 1400px;
-      margin: 0 auto;
-      padding: 20px;
-      position: relative;
-      z-index: 2;
-    }
-    header {
-      text-align: center;
-      padding: 30px 0;
-      background: linear-gradient(135deg, var(--c64-blue), var(--c64-lightblue));
-      border-radius: 15px;
-      margin-bottom: 30px;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-      position: relative;
-      overflow: hidden;
-    }
-    header::before {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: repeating-linear-gradient(45deg,
-          transparent,
-          transparent 10px,
-          rgba(255, 255, 255, 0.05) 10px,
-          rgba(255, 255, 255, 0.05) 20px);
-      animation: slide 20s linear infinite;
-    }
-    @keyframes slide {
-      0% { transform: translate(0, 0); }
-      100% { transform: translate(50px, 50px); }
-    }
-    h1 {
-      font-size: 3em;
-      text-shadow: 3px 3px 0 var(--c64-purple),
-        6px 6px 0 var(--c64-pink),
-        9px 9px 20px rgba(0, 0, 0, 0.5);
-      position: relative;
-      z-index: 1;
-      letter-spacing: 5px;
-      margin-bottom: 10px;
-    }
-    .subtitle {
-      font-size: 1.2em;
-      color: var(--c64-yellow);
-      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-      position: relative;
-      z-index: 1;
-    }
-    .credits {
-      margin-top: 15px;
-      font-size: 0.9em;
-      color: var(--c64-cyan);
-      position: relative;
-      z-index: 1;
-    }
-    .credits a {
-      color: var(--c64-yellow);
-      text-decoration: none;
-      transition: all 0.3s;
-    }
-    .credits a:hover {
-      color: var(--c64-orange);
-      text-shadow: 0 0 10px var(--c64-orange);
-    }
-    .controls {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 20px;
-      margin-bottom: 30px;
-    }
-    .control-group {
-      background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
-      padding: 20px;
-      border-radius: 10px;
-      border: 2px solid var(--c64-cyan);
-      box-shadow: 0 5px 15px rgba(0, 160, 160, 0.3);
-      transition: transform 0.3s, box-shadow 0.3s;
-    }
-    .control-group:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(0, 160, 160, 0.5);
-    }
-    .control-group h3 {
-      color: var(--c64-cyan);
-      margin-bottom: 15px;
-      font-size: 1.2em;
-      text-transform: uppercase;
-      letter-spacing: 2px;
-    }
-    .btn {
-      background: linear-gradient(135deg, var(--c64-purple), var(--c64-pink));
-      color: var(--c64-white);
-      border: none;
-      padding: 12px 25px;
-      border-radius: 8px;
-      font-size: 1em;
-      font-weight: bold;
-      cursor: pointer;
-      transition: all 0.3s;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-      margin: 5px;
-    }
-    .btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 6px 20px rgba(255, 0, 255, 0.4);
-      background: linear-gradient(135deg, var(--c64-pink), var(--c64-purple));
-    }
-    .btn:active {
-      transform: translateY(0);
-    }
-    .btn.active {
-      background: linear-gradient(135deg, var(--c64-green), var(--c64-yellow));
-      box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
-    }
-    .slider-container {
-      margin: 10px 0;
-    }
-    .slider-label {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 5px;
-      font-size: 0.9em;
-      color: var(--c64-yellow);
-    }
-    input[type="range"] {
-      width: 100%;
-      height: 8px;
-      background: linear-gradient(90deg, var(--c64-blue), var(--c64-cyan));
-      border-radius: 5px;
-      outline: none;
-      -webkit-appearance: none;
-    }
-    input[type="range"]::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      width: 20px;
-      height: 20px;
-      background: var(--c64-yellow);
-      border-radius: 50%;
-      cursor: pointer;
-      box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
-      transition: all 0.3s;
-    }
-    input[type="range"]::-webkit-slider-thumb:hover {
-      background: var(--c64-orange);
-      box-shadow: 0 0 20px rgba(255, 119, 0, 0.8);
-    }
-    .tracks-container {
-      background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
-      border-radius: 15px;
-      padding: 20px;
-      border: 3px solid var(--c64-cyan);
-      box-shadow: 0 10px 30px rgba(0, 160, 160, 0.3);
-    }
-    .tracks-header {
-      display: grid;
-      grid-template-columns: 80px repeat(4, 1fr) 100px;
-      gap: 10px;
-      margin-bottom: 15px;
-      padding: 10px;
-      background: rgba(0, 0, 0, 0.3);
-      border-radius: 8px;
-    }
-    .header-cell {
-      color: var(--c64-yellow);
-      font-weight: bold;
-      text-align: center;
-      font-size: 0.9em;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-    }
-    .track-row {
-      display: grid;
-      grid-template-columns: 80px repeat(4, 1fr) 100px;
-      gap: 10px;
-      margin-bottom: 10px;
-      padding: 10px;
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 8px;
-      transition: all 0.3s;
-      align-items: center;
-    }
-    .track-row:hover {
-      background: rgba(0, 160, 160, 0.1);
-      transform: translateX(5px);
-    }
-    .track-row.playing {
-      background: rgba(255, 255, 0, 0.1);
-      box-shadow: 0 0 15px rgba(255, 255, 0, 0.3);
-      animation: pulse 0.5s ease-in-out infinite alternate;
-    }
-    @keyframes pulse {
-      from { opacity: 0.8; }
-      to { opacity: 1; }
-    }
-    .track-number {
-      color: var(--c64-cyan);
-      font-weight: bold;
-      text-align: center;
-      font-size: 1.2em;
-    }
-    .instrument-cell {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 5px;
-    }
-    .instrument-indicator {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: var(--c64-gray);
-      transition: all 0.3s;
-    }
-    .instrument-indicator.active {
-      box-shadow: 0 0 10px currentColor;
-      animation: blink 0.5s ease-in-out infinite;
-    }
-    .instrument-indicator.lead { background: var(--c64-yellow); }
-    .instrument-indicator.bass { background: var(--c64-red); }
-    .instrument-indicator.arpeggio { background: var(--c64-green); }
-    .instrument-indicator.drums { background: var(--c64-purple); }
-    @keyframes blink {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.3; }
-    }
-    .track-toggle {
-      background: var(--c64-blue);
-      color: var(--c64-white);
-      border: 2px solid var(--c64-cyan);
-      padding: 8px 15px;
-      border-radius: 5px;
-      cursor: pointer;
-      transition: all 0.3s;
-      font-size: 0.9em;
-      font-weight: bold;
-    }
-    .track-toggle:hover {
-      background: var(--c64-cyan);
-      transform: scale(1.05);
-    }
-    .track-toggle.enabled {
-      background: var(--c64-green);
-      border-color: var(--c64-yellow);
-    }
-    .visualizer {
-      margin-top: 30px;
-      padding: 20px;
-      background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
-      border-radius: 15px;
-      border: 2px solid var(--c64-cyan);
-      height: 200px;
-      position: relative;
-      overflow: hidden;
-    }
-    .visualizer canvas {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-    .pattern-display {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      background: rgba(0, 0, 0, 0.7);
-      padding: 10px;
-      border-radius: 5px;
-      color: var(--c64-yellow);
-      font-size: 0.9em;
-    }
-    .pattern-selector {
-      background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
-      padding: 15px;
-      border-radius: 10px;
-      border: 2px solid var(--c64-cyan);
-      margin-bottom: 20px;
-    }
-    .pattern-selector h3 {
-      color: var(--c64-cyan);
-      margin-bottom: 10px;
-      font-size: 1.1em;
-      text-transform: uppercase;
-      letter-spacing: 2px;
-    }
-    .pattern-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-      gap: 10px;
-    }
-    .pattern-btn {
-      background: linear-gradient(135deg, var(--c64-blue), var(--c64-purple));
-      color: var(--c64-white);
-      border: 2px solid var(--c64-cyan);
-      padding: 10px 15px;
-      border-radius: 8px;
-      cursor: pointer;
-      transition: all 0.3s;
-      font-size: 0.9em;
-      font-weight: bold;
-      text-align: center;
-    }
-    .pattern-btn:hover {
-      background: linear-gradient(135deg, var(--c64-cyan), var(--c64-blue));
-      transform: scale(1.05);
-      box-shadow: 0 5px 15px rgba(0, 160, 160, 0.4);
-    }
-    .pattern-btn.active {
-      background: linear-gradient(135deg, var(--c64-green), var(--c64-yellow));
-      border-color: var(--c64-yellow);
-      box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
-    }
-    @media (max-width: 768px) {
-      h1 { font-size: 2em; }
-      .tracks-header, .track-row {
-        grid-template-columns: 60px repeat(4, 1fr) 80px;
-        font-size: 0.8em;
-      }
-      .controls { grid-template-columns: 1fr; }
-      .pattern-grid { grid-template-columns: repeat(2, 1fr); }
-    }
-    .loading-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.9);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.3s;
-    }
-    .loading-overlay.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-    .loading-text {
-      color: var(--c64-cyan);
-      font-size: 2em;
-      animation: flash 0.5s ease-in-out infinite;
-    }
-    @keyframes flash {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-    .info-panel {
-      background: rgba(0, 0, 0, 0.5);
-      padding: 10px;
-      border-radius: 8px;
-      margin-top: 10px;
-      font-size: 0.9em;
-      color: var(--c64-cyan);
-      border: 1px solid var(--c64-cyan);
-    }
-    .info-panel p {
-      margin: 5px 0;
-    }
-  </style>
 </head>
 <body>
-  <div class="loading-overlay" id="loadingOverlay">
-    <div class="loading-text">INITIALIZING SID CHIP...</div>
-  </div>
-  <div class="container">
-    <header>
-      <h1>🎵 SID CHIP TUNE STUDIO 🎵</h1>
-      <div class="subtitle">8-Bit Music Synthesizer with Pattern Library</div>
-      <div class="credits">
-        Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
-      </div>
-    </header>
-    <div class="pattern-selector">
-      <h3>📚 Pattern Library</h3>
-      <div class="pattern-grid" id="patternGrid">
-        <button class="pattern-btn active" onclick="loadPattern('arcade')">🕹️ Arcade</button>
-        <button class="pattern-btn" onclick="loadPattern('demoscene')">🎨 Demoscene</button>
-        <button class="pattern-btn" onclick="loadPattern('techno')">🎛️ Techno</button>
-        <button class="pattern-btn" onclick="loadPattern('chiptune')">🎵 Chiptune</button>
-        <button class="pattern-btn" onclick="loadPattern('platformer')">🏃 Platformer</button>
-        <button class="pattern-btn" onclick="loadPattern('shooter')">🚀 Shooter</button>
-        <button class="pattern-btn" onclick="loadPattern('puzzle')">🧩 Puzzle</button>
-        <button class="pattern-btn" onclick="loadPattern('random')">🎲 Random</button>
-      </div>
-      <div class="info-panel">
-        <p>Current Pattern: <span id="currentPatternName" style="color: var(--c64-yellow);">Arcade</span></p>
-        <p id="patternDescription">Classic arcade game style with upbeat rhythms</p>
-      </div>
     </div>
-    <div class="controls">
-      <div class="control-group">
-        <h3>🎛️ Master Controls</h3>
-        <button class="btn" id="playBtn" onclick="togglePlay()">▶ PLAY</button>
-        <button class="btn" id="stopBtn" onclick="stopMusic()">⬛ STOP</button>
-        <button class="btn" id="randomBtn" onclick="randomizeTracks()">🎲 RANDOM</button>
-      </div>
-      <div class="control-group">
-        <h3>🎵 Tempo & Volume</h3>
-        <div class="slider-container">
-          <div class="slider-label">
-            <span>BPM</span>
-            <span id="bpmValue">120</span>
-          </div>
-          <input type="range" id="bpmSlider" min="60" max="200" value="120" oninput="updateBPM(this.value)">
         </div>
-        <div class="slider-container">
-          <div class="slider-label">
-            <span>Volume</span>
-            <span id="volumeValue">70%</span>
-          </div>
-          <input type="range" id="volumeSlider" min="0" max="100" value="70" oninput="updateVolume(this.value)">
         </div>
-      </div>
-      <div class="control-group">
-        <h3>🎹 Instruments</h3>
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 5px;">
-          <button class="btn active" id="leadBtn" onclick="toggleInstrument('lead')">LEAD</button>
-          <button class="btn active" id="bassBtn" onclick="toggleInstrument('bass')">BASS</button>
-          <button class="btn active" id="arpBtn" onclick="toggleInstrument('arpeggio')">ARP</button>
-          <button class="btn active" id="drumBtn" onclick="toggleInstrument('drums')">DRUMS</button>
         </div>
-      </div>
-    </div>
-    <div class="tracks-container">
-      <div class="tracks-header">
-        <div class="header-cell">TRACK</div>
-        <div class="header-cell">LEAD</div>
-        <div class="header-cell">BASS</div>
-        <div class="header-cell">ARPEGGIO</div>
-        <div class="header-cell">DRUMS</div>
-        <div class="header-cell">ENABLE</div>
-      </div>
-      <div id="tracksGrid"></div>
     </div>
-    <div class="visualizer">
-      <canvas id="visualizer"></canvas>
-      <div class="pattern-display">
-        <div>Pattern: <span id="currentPattern">0</span>/10</div>
-        <div>Beat: <span id="currentBeat">0</span>/4</div>
-      </div>
     </div>
-  </div>
-  <script>
-    // Audio Context and Global Variables
-    let audioContext;
-    let isPlaying = false;
-    let currentTrack = 0;
-    let currentBeat = 0;
-    let bpm = 120;
-    let masterVolume = 0.7;
-    let intervalId;
-    let analyser;
-    let dataArray;
-    let animationId;
-    let currentPattern = 'arcade';
-    // Instrument states
-    const instruments = {
-      lead: true,
-      bass: true,
-      arpeggio: true,
-      drums: true
-    };
-    // Track states
-    const trackStates = [];
-    // Note frequencies
-    const noteFrequencies = {
-      'C1': 32.70, 'C#1': 34.65, 'D1': 36.71, 'D#1': 38.89, 'E1': 41.20, 'F1': 43.65, 'F#1': 46.25, 'G1': 49.00, 'G#1': 51.91, 'A1': 55.00, 'A#1': 58.27, 'B1': 61.74,
-      'C2': 65.41, 'C#2': 69.30, 'D2': 73.42, 'D#2': 77.78, 'E2': 82.41, 'F2': 87.31, 'F#2': 92.50, 'G2': 98.00, 'G#2': 103.83, 'A2': 110.00, 'A#2': 116.54, 'B2': 123.47,
-      'C3': 130.81, 'C#3': 138.59, 'D3': 146.83, 'D#3': 155.56, 'E3': 164.81, 'F3': 174.61, 'F#3': 185.00, 'G3': 196.00, 'G#3': 207.65, 'A3': 220.00, 'A#3': 233.08, 'B3': 246.94,
-      'C4': 261.63, 'C#4': 277.18, 'D4': 293.66, 'D#4': 311.13, 'E4': 329.63, 'F4': 349.23, 'F#4': 369.99, 'G4': 392.00, 'G#4': 415.30, 'A4': 440.00, 'A#4': 466.16, 'B4': 493.88,
-      'C5': 523.25, 'C#5': 554.37, 'D5': 587.33, 'D#5': 622.25, 'E5': 659.25, 'F5': 698.46, 'F#5': 739.99, 'G5': 783.99, 'G#5': 830.61, 'A5': 880.00, 'A#5': 932.33, 'B5': 987.77,
-      'C6': 1046.50, 'D6': 1174.66, 'E6': 1318.51, 'G6': 1567.98
-    };
-    // Pattern Library
-    const patternLibrary = {
-      arcade: {
-        name: "Arcade",
-        description: "Classic arcade game style with upbeat rhythms",
-        tracks: [
-          {
-            lead: ['E4', null, 'G4', null, 'A4', null, 'C5', null, 'E5', null, 'C5', null, 'A4', null, 'G4', null],
-            bass: ['C2', null, 'C2', null, 'G2', null, 'G2', null, 'C3', null, 'C3', null, 'G2', null, 'G2', null],
-            arpeggio: ['C3', 'E3', 'G3', 'C4', 'E4', 'G4', 'C5', 'E5', null, null, null, null, null, null, null, null],
-            drums: ['C1', null, null, 'C#1', 'C1', null, 'D1', null, 'C1', null, null, 'C#1', 'C1', null, 'D1', null]
-          },
-          {
-            lead: ['G4', null, 'B4', null, 'D5', null, 'G5', null, 'B5', null, 'G5', null, 'D5', null, 'B4', null],
-            bass: ['G2', null, 'G2', null, 'D3', null, 'D3', null, 'G3', null, 'G3', null, 'D3', null, 'D3', null],
-            arpeggio: ['G3', 'B3', 'D4', 'G4', 'B4', 'D5', 'G5', 'B5', null, null, null, null, null, null, null, null],
-            drums: ['C1', null, 'C#1', null, 'C1', null, 'D1', null, 'C1', null, 'C#1', null, 'C1', null, 'D1', null]
-          },
-          {
-            lead: ['A4', null, 'C5', null, 'E5', null, 'A5', null, 'E5', null, 'C5', null, 'A4', null, 'E4', null],
-            bass: ['A2', null, 'A2', null, 'E3', null, 'E3', null, 'A3', null, 'A3', null, 'E3', null, 'E3', null],
-            arpeggio: ['A3', 'C4', 'E4', 'A4', 'C5', 'E5', 'A5', 'C6', null, null, null, null, null, null, null, null],
-            drums: ['D1', null, null, 'C#1', 'D1', null, 'C1', null, 'D1', null, null, 'C#1', 'D1', null, 'C1', null]
-          },
-          {
-            lead: ['F4', null, 'A4', null, 'C5', null, 'F5', null, 'A5', null, 'F5', null, 'C5', null, 'A4', null],
-            bass: ['F2', null, 'F2', null, 'C3', null, 'C3', null, 'F3', null, 'F3', null, 'C3', null, 'C3', null],
-            arpeggio: ['F3', 'A3', 'C4', 'F4', 'A4', 'C5', 'F5', 'A5', null, null, null, null, null, null, null, null],
-            drums: ['C1', 'C#1', null, null, 'C1', 'C#1', null, null, 'C1', 'C#1', null, null, 'C1', 'C#1', null, null]
-          },
-          {
-            lead: ['C5', null, 'E5', null, 'G5', null, 'C6', null, 'G5', null, 'E5', null, 'C5', null, 'G4', null],
-            bass: ['C3', null, 'C3', null, 'G3', null, 'G3', null, 'C4', null, 'C4', null, 'G3', null, 'G3', null],
-            arpeggio: ['C4', 'E4', 'G4', 'C5', 'E5', 'G5', 'C6', 'E6', null, null, null, null, null, null, null, null],
-            drums: ['C#1', null, 'D1', null, 'C#1', null, 'D1', null, 'C#1', null, 'D1', null, 'C#1', null, 'D1', null]
-          },
-          {
-            lead: ['D5', null, 'F5', null, 'A5', null, 'D6', null, 'A5', null, 'F5', null, 'D5', null, 'A4', null],
-            bass: ['D3', null, 'D3', null, 'A3', null, 'A3', null, 'D4', null, 'D4', null, 'A3', null, 'A3', null],
-            arpeggio: ['D4', 'F4', 'A4', 'D5', 'F5', 'A5', 'D6', 'F6', null, null, null, null, null, null, null, null],
-            drums: ['D1', 'C#1', 'C1', null, 'D1', 'C#1', 'C1', null, 'D1', 'C#1', 'C1', null, 'D1', 'C#1', 'C1', null]
-          },
-          {
-            lead: ['E5', null, 'G5', null, 'B5', null, 'E6', null, 'B5', null, 'G5', null, 'E5', null, 'B4', null],
-            bass: ['E3', null, 'E3', null, 'B3', null, 'B3', null, 'E4', null, 'E4', null, 'B3', null, 'B3', null],
-            arpeggio: ['E4', 'G4', 'B4', 'E5', 'G5', 'B5', 'E6', 'G6', null, null, null, null, null, null, null, null],
-            drums: ['C1', null, null, 'D1', 'C1', null, null, 'D1', 'C1', null, null, 'D1', 'C1', null, null, 'D1']
-          },
-          {
-            lead: ['G5', null, 'B5', null, 'D6', null, 'G6', null, 'D6', null, 'B5', null, 'G5', null, 'D5', null],
-            bass: ['G3', null, 'G3', null, 'D4', null, 'D4', null, 'G4', null, 'G4', null, 'D4', null, 'D4', null],
-            arpeggio: ['G4', 'B4', 'D5', 'G5', 'B5', 'D6', 'G6', 'B6', null, null, null, null, null, null, null, null],
-            drums: ['D1', null, 'C#1', null, 'D1', null, 'C#1', null, 'D1', null, 'C#1', null, 'D1', null, 'C#1', null]
-          },
-          {
-            lead: ['A5', null, 'C6', null, 'E6', null, 'A6', null, 'E6', null, 'C6', null, 'A5', null, 'E5', null],
-            bass: ['A3', null, 'A3', null, 'E4', null, 'E4', null, 'A4', null, 'A4', null, 'E4', null, 'E4', null],
-            arpeggio: ['A4', 'C5', 'E5', 'A5', 'C6', 'E6', 'A6', 'C7', null, null, null, null, null, null, null, null],
-            drums: ['C#1', 'D1', null, null, 'C#1', 'D1', null, null, 'C#1', 'D1', null, null, 'C#1', 'D1', null, null]
-          },
-          {
-            lead: ['F5', null, 'A5', null, 'C6', null, 'F6', null, 'C6', null, 'A5', null, 'F5', null, 'C5', null],
-            bass: ['F3', null, 'F3', null, 'C4', null, 'C4', null, 'F4', null, 'F4', null, 'C4', null, 'C4', null],
-            arpeggio: ['F4', 'A4', 'C5', 'F5', 'A5', 'C6', 'F6', 'A6', null, null, null, null, null, null, null, null],
-            drums: ['D1', null, 'C1', null, 'D1', null, 'C1', null, 'D1', null, 'C1', null, 'D1', null, 'C1', null]
-          }
-        ]
-      },
-      demoscene: {
-        name: "Demoscene",
-        description: "Complex demoscene style with fast arpeggios and effects",
-        tracks: [
-          {
-            lead: ['C4', 'D4', 'E4', 'F4', 'G4', 'A4', 'B4', 'C5', 'D5', 'E5', 'F5', 'G5', 'A5', 'B5', 'C6', 'D6'],
-            bass: ['C1', null, 'G1', null, 'C2', null, 'G2', null, 'C3', null, 'G3', null, 'C4', null, 'G4', null],
-            arpeggio: ['C2', 'E2', 'G2', 'C3', 'E3', 'G3', 'C4', 'E4', 'G4', 'C5', 'E5', 'G5', 'C6', 'E6', 'G6', 'C7'],
-            drums: ['C1', 'C#1', 'D1', 'C#1', 'C1', 'C#1', 'D1', 'C#1', 'C1', 'C#1', 'D1', 'C#1', 'C1', 'C#1', 'D1', 'C#1']
-          },
-          {
-            lead: ['D4', 'E4', 'F4', 'G4', 'A4', 'B4', 'C5', 'D5', 'E5', 'F5', 'G5', 'A5', 'B5', 'C6', 'D6', 'E6'],
-            bass: ['D1', null, 'A1', null, 'D2', null, 'A2', null, 'D3', null

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Physics Playground</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            overflow: hidden;
+            position: relative;
+        }
+        #canvas {
+            display: block;
+            cursor: grab;
+        }
+        #canvas:active {
+            cursor: grabbing;
+        }
+        .ui-panel {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            min-width: 280px;
+            z-index: 100;
+            transition: transform 0.3s ease;
+        }
+        .ui-panel:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+        }
+        .panel-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #e0e0e0;
+        }
+        .panel-title {
+            font-size: 1.4em;
+            font-weight: bold;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            flex: 1;
+        }
+        .controls-group {
+            margin-bottom: 20px;
+        }
+        .control-label {
+            display: block;
+            margin-bottom: 8px;
+            color: #555;
+            font-size: 0.9em;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .button-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+        .btn {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 0.95em;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+        .btn:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        .btn.active {
+            background: linear-gradient(135deg, #f093fb, #f5576c);
+        }
+        .slider-container {
+            margin-bottom: 15px;
+        }
+        .slider {
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: #e0e0e0;
+            outline: none;
+            -webkit-appearance: none;
+        }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .slider::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+            box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
+        }
+        .slider-value {
+            display: inline-block;
+            margin-left: 10px;
+            color: #667eea;
+            font-weight: bold;
+        }
+        .stats {
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9em;
+            line-height: 1.6;
+        }
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 5px;
+        }
+        .stat-label {
+            color: #aaa;
+        }
+        .stat-value {
+            color: #4fc3f7;
+            font-weight: bold;
+        }
+        .info-panel {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 15px 20px;
+            border-radius: 10px;
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+            max-width: 400px;
+        }
+        .info-text {
+            color: #666;
+            font-size: 0.9em;
+            line-height: 1.5;
+        }
+        .info-text strong {
+            color: #667eea;
+        }
+        .color-picker {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            margin-top: 10px;
+        }
+        .color-option {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: 2px solid transparent;
+        }
+        .color-option:hover {
+            transform: scale(1.1);
+            border-color: #333;
+        }
+        .color-option.selected {
+            border-color: #667eea;
+            box-shadow: 0 0 10px currentColor;
+        }
+        @media (max-width: 768px) {
+            .ui-panel {
+                left: 10px;
+                top: 10px;
+                min-width: 250px;
+                padding: 15px;
+            }
+            .button-grid {
+                grid-template-columns: 1fr;
+            }
+            .info-panel {
+                display: none;
+            }
+        }
+        .loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            transition: opacity 0.5s ease;
+        }
+        .loading.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        .loading-text {
+            color: white;
+            font-size: 2em;
+            font-weight: bold;
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+    </style>
 </head>
 <body>
+    <div class="loading" id="loading">
+        <div class="loading-text">Loading Physics Engine...</div>
     </div>
+    <canvas id="canvas"></canvas>
+    <div class="ui-panel">
+        <div class="panel-header">
+            <div class="panel-title">🎮 Physics Controls</div>
+        </div>
+        <div class="controls-group">
+            <label class="control-label">Spawn Objects</label>
+            <div class="button-grid">
+                <button class="btn" onclick="spawnObject('sphere')">⚪ Sphere</button>
+                <button class="btn" onclick="spawnObject('box')">📦 Box</button>
+                <button class="btn" onclick="spawnObject('cylinder')">🥤 Cylinder</button>
+                <button class="btn" onclick="spawnObject('cone')">🔺 Cone</button>
+            </div>
         </div>
+        <div class="controls-group">
+            <label class="control-label">Object Color</label>
+            <div class="color-picker">
+                <div class="color-option selected" style="background: #ff6b6b" onclick="selectColor('#ff6b6b')"></div>
+                <div class="color-option" style="background: #4ecdc4" onclick="selectColor('#4ecdc4')"></div>
+                <div class="color-option" style="background: #45b7d1" onclick="selectColor('#45b7d1')"></div>
+                <div class="color-option" style="background: #96ceb4" onclick="selectColor('#96ceb4')"></div>
+                <div class="color-option" style="background: #feca57" onclick="selectColor('#feca57')"></div>
+                <div class="color-option" style="background: #dfe6e9" onclick="selectColor('#dfe6e9')"></div>
+                <div class="color-option" style="background: #a29bfe" onclick="selectColor('#a29bfe')"></div>
+                <div class="color-option" style="background: #fd79a8" onclick="selectColor('#fd79a8')"></div>
+            </div>
         </div>
+        <div class="controls-group">
+            <div class="slider-container">
+                <label class="control-label">Gravity <span class="slider-value" id="gravityValue">-9.8</span></label>
+                <input type="range" class="slider" id="gravitySlider" min="-20" max="0" value="-9.8" step="0.1" oninput="updateGravity(this.value)">
+            </div>
+            <div class="slider-container">
+                <label class="control-label">Bounciness <span class="slider-value" id="bounceValue">0.7</span></label>
+                <input type="range" class="slider" id="bounceSlider" min="0" max="1" value="0.7" step="0.1" oninput="updateBounciness(this.value)">
+            </div>
+            <div class="slider-container">
+                <label class="control-label">Object Size <span class="slider-value" id="sizeValue">1.0</span></label>
+                <input type="range" class="slider" id="sizeSlider" min="0.5" max="3" value="1" step="0.1" oninput="updateSize(this.value)">
+            </div>
         </div>
+        <div class="controls-group">
+            <button class="btn" onclick="clearAllObjects()" style="width: 100%; background: linear-gradient(135deg, #f093fb, #f5576c);">🗑️ Clear All</button>
+            <button class="btn" onclick="togglePause()" id="pauseBtn" style="width: 100%; margin-top: 10px;">⏸️ Pause</button>
+        </div>
+        <div class="stats">
+            <div class="stat-row">
+                <span class="stat-label">Objects:</span>
+                <span class="stat-value" id="objectCount">0</span>
+            </div>
+            <div class="stat-row">
+                <span class="stat-label">FPS:</span>
+                <span class="stat-value" id="fps">60</span>
+            </div>
+            <div class="stat-row">
+                <span class="stat-label">Physics:</span>
+                <span class="stat-value" id="physicsStatus">Active</span>
+            </div>
+        </div>
     </div>
+    <div class="info-panel">
+        <div class="info-text">
+            <strong>Controls:</strong><br>
+            • Click to spawn objects<br>
+            • Drag to rotate camera<br>
+            • Scroll to zoom<br>
+            • Space to pause physics<br>
+            • R to reset camera
+        </div>
     </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        // Global variables
+        let scene, camera, renderer, world;
+        let objects = [];
+        let isPaused = false;
+        let selectedColor = '#ff6b6b';
+        let objectSize = 1;
+        let bounciness = 0.7;
+        let gravity = -9.8;
+        let frameCount = 0;
+        let lastTime = performance.now();
+        let fps = 60;
+        // Physics properties
+        const physicsObjects = [];
+        // Initialize the scene
+        function init() {
+            // Create scene
+            scene = new THREE.Scene();
+            scene.fog = new THREE.Fog(0x000000, 10, 50);
+            // Create camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 10, 20);
+            camera.lookAt(0, 0, 0);
+            // Create renderer
+            renderer = new THREE.WebGLRenderer({
+                canvas: document.getElementById('canvas'),
+                antialias: true,
+                alpha: true
+            });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            // Lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(5, 10, 5);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.camera.left = -20;
+            directionalLight.shadow.camera.right = 20;
+            directionalLight.shadow.camera.top = 20;
+            directionalLight.shadow.camera.bottom = -20;
+            scene.add(directionalLight);
+            const pointLight = new THREE.PointLight(0x667eea, 0.5);
+            pointLight.position.set(-5, 5, -5);
+            scene.add(pointLight);
+            // Create ground
+            const groundGeometry = new THREE.PlaneGeometry(50, 50);
+            const groundMaterial = new THREE.MeshStandardMaterial({
+                color: 0x2c3e50,
+                roughness: 0.8,
+                metalness: 0.2
+            });
+            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+            ground.rotation.x = -Math.PI / 2;
+            ground.receiveShadow = true;
+            scene.add(ground);
+            // Create walls
+            createWalls();
+            // Mouse controls
+            setupControls();
+            // Start animation
+            animate();
+            // Hide loading screen
+            setTimeout(() => {
+                document.getElementById('loading').classList.add('hidden');
+            }, 500);
+            // Spawn initial objects
+            setTimeout(() => {
+                for (let i = 0; i < 3; i++) {
+                    setTimeout(() => spawnObject('sphere'), i * 200);
+                }
+            }, 600);
+        }
+        function createWalls() {
+            const wallMaterial = new THREE.MeshStandardMaterial({
+                color: 0x34495e,
+                transparent: true,
+                opacity: 0.3
+            });
+            // Back wall
+            const backWall = new THREE.Mesh(
+                new THREE.PlaneGeometry(50, 20),
+                wallMaterial
+            );
+            backWall.position.z = -25;
+            backWall.position.y = 10;
+            scene.add(backWall);
+            // Side walls
+            const leftWall = new THREE.Mesh(
+                new THREE.PlaneGeometry(50, 20),
+                wallMaterial
+            );
+            leftWall.rotation.y = Math.PI / 2;
+            leftWall.position.x = -25;
+            leftWall.position.y = 10;
+            scene.add(leftWall);
+            const rightWall = new THREE.Mesh(
+                new THREE.PlaneGeometry(50, 20),
+                wallMaterial
+            );
+            rightWall.rotation.y = -Math.PI / 2;
+            rightWall.position.x = 25;
+            rightWall.position.y = 10;
+            scene.add(rightWall);
+        }
+        function setupControls() {
+            let mouseX = 0, mouseY = 0;
+            let targetRotationX = 0, targetRotationY = 0;
+            let isDragging = false;
+            renderer.domElement.addEventListener('mousedown', (e) => {
+                if (e.button === 0) {
+                    isDragging = true;
+                    mouseX = e.clientX;
+                    mouseY = e.clientY;
+                }
+            });
+            renderer.domElement.addEventListener('mousemove', (e) => {
+                if (isDragging) {
+                    const deltaX = e.clientX - mouseX;
+                    const deltaY = e.clientY - mouseY;
+                    targetRotationY += deltaX * 0.01;
+                    targetRotationX += deltaY * 0.01;
+                    targetRotationX = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, targetRotationX));
+                    mouseX = e.clientX;
+                    mouseY = e.clientY;
+                }
+            });
+            renderer.domElement.addEventListener('mouseup', () => {
+                isDragging = false;
+            });
+            renderer.domElement.addEventListener('click', (e) => {
+                if (!isDragging) {
+                    const rect = renderer.domElement.getBoundingClientRect();
+                    const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+                    const y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+                    const vector = new THREE.Vector3(x, y, 0.5);
+                    vector.unproject(camera);
+                    const dir = vector.sub(camera.position).normalize();
+                    const distance = -camera.position.y / dir.y;
+                    const pos = camera.position.clone().add(dir.multiplyScalar(distance));
+                    spawnObjectAt(pos);
+                }
+            });
+            renderer.domElement.addEventListener('wheel', (e) => {
+                camera.position.z += e.deltaY * 0.01;
+                camera.position.z = Math.max(5, Math.min(50, camera.position.z));
+            });
+            // Update camera rotation
+            function updateCamera() {
+                const radius = camera.position.length();
+                camera.position.x = radius * Math.sin(targetRotationY) * Math.cos(targetRotationX);
+                camera.position.y = radius * Math.sin(targetRotationX);
+                camera.position.z = radius * Math.cos(targetRotationY) * Math.cos(targetRotationX);
+                camera.lookAt(0, 0, 0);
+                requestAnimationFrame(updateCamera);
+            }
+            updateCamera();
+            // Keyboard controls
+            document.addEventListener('keydown', (e) => {
+                if (e.code === 'Space') {
+                    e.preventDefault();
+                    togglePause();
+                } else if (e.code === 'KeyR') {
+                    camera.position.set(0, 10, 20);
+                    targetRotationX = 0;
+                    targetRotationY = 0;
+                }
+            });
+        }
+        function spawnObject(type) {
+            const x = (Math.random() - 0.5) * 10;
+            const y = 10 + Math.random() * 5;
+            const z = (Math.random() - 0.5) * 10;
+            spawnObjectAt(new THREE.Vector3(x, y, z), type);
+        }
+        function spawnObjectAt(position, type = 'sphere') {
+            let geometry;
+            switch(type) {
+                case 'box':
+                    geometry = new THREE.BoxGeometry(objectSize, objectSize, objectSize);
+                    break;
+                case 'cylinder':
+                    geometry = new THREE.CylinderGeometry(objectSize/2, objectSize/2, objectSize, 32);
+                    break;
+                case 'cone':
+                    geometry = new THREE.ConeGeometry(objectSize/2, objectSize, 32);
+                    break;
+                default:
+                    geometry = new THREE.SphereGeometry(objectSize/2, 32, 32);
+            }
+            const material = new THREE.MeshStandardMaterial({
+                color: selectedColor,
+                roughness: 0.4,
+                metalness: 0.3
+            });
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.position.copy(position);
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+            scene.add(mesh);
+            // Physics object
+            const physicsObj = {
+                mesh: mesh,
+                velocity: new THREE.Vector3(
+                    (Math.random() - 0.5) * 2,
+                    0,
+                    (Math.random() - 0.5) * 2
+                ),
+                angularVelocity: new THREE.Vector3(
+                    (Math.random() - 0.5) * 0.1,
+                    (Math.random() - 0.5) * 0.1,
+                    (Math.random() - 0.5) * 0.1
+                ),
+                mass: objectSize
+            };
+            objects.push(physicsObj);
+            updateObjectCount();
+        }
+        function updatePhysics() {
+            if (isPaused) return;
+            const dt = 1/60;
+            const gravityVec = new THREE.Vector3(0, gravity, 0);
+            objects.forEach(obj => {
+                // Apply gravity
+                obj.velocity.add(gravityVec.clone().multiplyScalar(dt));
+                // Update position
+                obj.mesh.position.add(obj.velocity.clone().multiplyScalar(dt));
+                // Update rotation
+                obj.mesh.rotation.x += obj.angularVelocity.x;
+                obj.mesh.rotation.y += obj.angularVelocity.y;
+                obj.mesh.rotation.z += obj.angularVelocity.z;
+                // Ground collision
+                if (obj.mesh.position.y - objectSize/2 < 0) {
+                    obj.mesh.position.y = objectSize/2;
+                    obj.velocity.y *= -bounciness;
+                    obj.angularVelocity.multiplyScalar(0.9);
+                }
+                // Wall collisions
+                const boundary = 25;
+                if (Math.abs(obj.mesh.position.x) > boundary - objectSize/2) {
+                    obj.mesh.position.x = Math.sign(obj.mesh.position.x) * (boundary - objectSize/2);
+                    obj.velocity.x *= -bounciness;
+                }
+                if (Math.abs(obj.mesh.position.z) > boundary - objectSize/2) {
+                    obj.mesh.position.z = Math.sign(obj.mesh.position.z) * (boundary - objectSize/2);
+                    obj.velocity.z *= -bounciness;
+                }
+                // Object-to-object collisions (simplified)
+                objects.forEach(other => {
+                    if (obj !== other) {
+                        const distance = obj.mesh.position.distanceTo(other.mesh.position);
+                        const minDistance = objectSize;
+                        if (distance < minDistance) {
+                            const direction = obj.mesh.position.clone().sub(other.mesh.position).normalize();
+                            obj.mesh.position.add(direction.multiplyScalar(minDistance - distance));
+                            const relativeVelocity = obj.velocity.clone().sub(other.velocity);
+                            const speed = relativeVelocity.dot(direction);
+                            if (speed > 0) {
+                                obj.velocity.sub(direction.multiplyScalar(speed * bounciness));
+                            }
+                        }
+                    }
+                });
+                // Apply damping
+                obj.velocity.multiplyScalar(0.999);
+                obj.angularVelocity.multiplyScalar(0.995);
+            });
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            updatePhysics();
+            renderer.render(scene, camera);
+            // Calculate FPS
+            frameCount++;
+            const currentTime = performance.now();
+            if (currentTime >= lastTime + 1000) {
+                fps = Math.round((frameCount * 1000) / (currentTime - lastTime));
+                document.getElementById('fps').textContent = fps;
+                frameCount = 0;
+                lastTime = currentTime;
+            }
+        }
+        function updateObjectCount() {
+            document.getElementById('objectCount').textContent = objects.length;
+        }
+        function clearAllObjects() {
+            objects.forEach(obj => {
+                scene.remove(obj.mesh);
+                obj.mesh.geometry.dispose();
+                obj.mesh.material.dispose();
+            });
+            objects = [];
+            updateObjectCount();
+        }
+        function togglePause() {
+            isPaused = !isPaused;
+            const btn = document.getElementById('pauseBtn');
+            btn.textContent = isPaused ? '▶️ Play' : '⏸️ Pause';
+            btn.classList.toggle('active', isPaused);
+            document.getElementById('physicsStatus').textContent = isPaused ? 'Paused' : 'Active';
+        }
+        function selectColor(color) {
+            selectedColor = color;
+            document.querySelectorAll('.color-option').forEach(el => {
+                el.classList.remove('selected');
+                if (el.style.background === color) {
+                    el.classList.add('selected');
+                }
+            });
+        }
+        function updateGravity(value) {
+            gravity = parseFloat(value);
+            document.getElementById('gravityValue').textContent = value;
+        }
+        function updateBounciness(value) {
+            bounciness = parseFloat(value);
+            document.getElementById('bounceValue').textContent = value;
+        }
+        function updateSize(value) {
+            objectSize = parseFloat(value);
+            document.getElementById('sizeValue').textContent = value;
+        }
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // Initialize the application
+        init();
+    </script>
+</body>
+</html>