Spaces:

Ramesh-vani
/

phy

Running

App Files Files Community

Ramesh-vani commited on Feb 25

Commit

1ab6ab7

verified ·

1 Parent(s): 4e6dd2f

Update index.html

Browse files

Files changed (1) hide show

index.html +693 -249

index.html CHANGED Viewed

@@ -1,263 +1,707 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Physics Simulator</title>
-    <style>
-        /* Basic Reset */
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        /* Body */
-        body { font-family: Arial, sans-serif; overflow: hidden; }
-        /* Menu Bar */
-        .menu-bar {
-            display: flex;
-            background-color: #0078D7;
-            color: white;
-            padding: 10px;
-            position: fixed;
-            width: 100%;
-            top: 0;
-            z-index: 10;
-        }
-        .menu-bar div {
-            margin: 0 15px;
-            cursor: pointer;
-            position: relative;
-        }
-        .menu-bar div:hover { background-color: #005A9E; }
-        /* Dropdown */
-        .dropdown {
-            display: none;
-            position: absolute;
-            background-color: white;
-            color: black;
-            border: 1px solid #ccc;
-            top: 35px;
-            left: 0;
-            z-index: 20;
-        }
-        .dropdown div {
-            padding: 8px 12px;
-            cursor: pointer;
-        }
-        .dropdown div:hover { background-color: #f0f0f0; }
-        /* Canvas */
-        #physicsCanvas {
-            position: absolute;
-            top: 50px;
-            left: 0;
-            width: 100%;
-            height: calc(100vh - 50px);
-            background-color: #f5f5f5;
-        }
-        /* Elements */
-        .element {
-            width: 50px;
-            height: 50px;
-            background-color: #ff9800;
-            position: absolute;
-            cursor: move;
-            border-radius: 5px;
-        }
-        /* Edit Menu */
-        .edit-menu {
-            position: absolute;
-            background-color: white;
-            border: 1px solid #ccc;
-            padding: 10px;
-            display: none;
-            z-index: 50;
-        }
-        .edit-menu input { width: 100%; margin-top: 5px; }
-        .edit-menu button { margin-top: 10px; width: 100%; }
-    </style>
 </head>
 <body>
-    <!-- Menu Bar -->
-    <div class="menu-bar">
-        <div id="fileMenu">File
-            <div class="dropdown" id="fileDropdown">
-                <div onclick="addElement()">Add Element</div>
-                <div onclick="clearCanvas()">Clear Canvas</div>
-            </div>
-        </div>
-        <div id="editMenu">Edit
-            <div class="dropdown" id="editDropdown">
-                <div onclick="undo()">Undo</div>
-                <div onclick="redo()">Redo</div>
-                <div onclick="deleteElement()">Delete Selected</div>
-            </div>
-        </div>
-        <div id="viewMenu">View
-            <div class="dropdown" id="viewDropdown">
-                <div onclick="toggleGrid()">Toggle Grid</div>
-            </div>
-        </div>
     </div>
-    <!-- Canvas -->
-    <div id="physicsCanvas"></div>
-    <!-- Edit Element Menu -->
-    <div class="edit-menu" id="editElementMenu">
-        <label>Change Color:</label>
-        <input type="color" id="colorPicker">
-        <button onclick="applyEdit()">Apply</button>
     </div>
-    <!-- JavaScript -->
-    <script>
-        const physicsCanvas = document.getElementById('physicsCanvas');
-        let selectedElement = null;
-        let undoStack = [];
-        let redoStack = [];
-        // Menu Toggle
-        document.querySelectorAll('.menu-bar div').forEach(menu => {
-            menu.addEventListener('click', () => {
-                const dropdown = menu.querySelector('.dropdown');
-                document.querySelectorAll('.dropdown').forEach(d => {
-                    if (d !== dropdown) d.style.display = 'none';
-                });
-                dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
-            });
-        });
-        // Add Element
-        function addElement() {
-            const elem = document.createElement('div');
-            elem.classList.add('element');
-            elem.style.top = '100px';
-            elem.style.left = '100px';
-            elem.addEventListener('mousedown', startDrag);
-            elem.addEventListener('dblclick', openEditMenu);
-            physicsCanvas.appendChild(elem);
-            saveState();
-        }
-        // Drag & Drop
-        let offsetX, offsetY;
-        function startDrag(e) {
-            selectedElement = e.target;
-            offsetX = e.clientX - selectedElement.offsetLeft;
-            offsetY = e.clientY - selectedElement.offsetTop;
-            document.addEventListener('mousemove', dragElement);
-            document.addEventListener('mouseup', stopDrag);
-        }
-        function dragElement(e) {
-            if (selectedElement) {
-                selectedElement.style.left = (e.clientX - offsetX) + 'px';
-                selectedElement.style.top = (e.clientY - offsetY) + 'px';
             }
-        }
-        function stopDrag() {
-            document.removeEventListener('mousemove', dragElement);
-            document.removeEventListener('mouseup', stopDrag);
-            saveState();
-        }
-        // Open Edit Menu
-        function openEditMenu(e) {
-            selectedElement = e.target;
-            const menu = document.getElementById('editElementMenu');
-            menu.style.left = e.clientX + 'px';
-            menu.style.top = e.clientY + 'px';
-            document.getElementById('colorPicker').value = rgbToHex(selectedElement.style.backgroundColor);
-            menu.style.display = 'block';
-        }
-        // Apply Edit
-        function applyEdit() {
-            const color = document.getElementById('colorPicker').value;
-            selectedElement.style.backgroundColor = color;
-            document.getElementById('editElementMenu').style.display = 'none';
-            saveState();
-        }
-        // Convert RGB to HEX
-        function rgbToHex(rgb) {
-            if (!rgb) return '#ff9800';
-            const result = rgb.match(/\d+/g);
-            return "#" + result.map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
-        }
-        // Delete Element
-        function deleteElement() {
-            if (selectedElement) {
-                selectedElement.remove();
-                selectedElement = null;
-                saveState();
             }
-        }
-        // Clear Canvas
-        function clearCanvas() {
-            physicsCanvas.innerHTML = '';
-            saveState();
-        }
-        // Undo & Redo
-        function saveState() {
-            undoStack.push(physicsCanvas.innerHTML);
-            redoStack = [];
-        }
-        function undo() {
-            if (undoStack.length > 1) {
-                redoStack.push(undoStack.pop());
-                physicsCanvas.innerHTML = undoStack[undoStack.length - 1];
-                rebindElements();
             }
-        }
-        function redo() {
-            if (redoStack.length) {
-                undoStack.push(redoStack.pop());
-                physicsCanvas.innerHTML = undoStack[undoStack.length - 1];
-                rebindElements();
             }
-        }
-        // Rebind Events after Undo/Redo
-        function rebindElements() {
-            document.querySelectorAll('.element').forEach(elem => {
-                elem.addEventListener('mousedown', startDrag);
-                elem.addEventListener('dblclick', openEditMenu);
             });
-        }
-        // Toggle Grid View
-        let gridOn = false;
-        function toggleGrid() {
-            gridOn = !gridOn;
-            physicsCanvas.style.backgroundImage = gridOn ? 'linear-gradient(#ccc 1px, transparent 1px), linear-gradient(90deg, #ccc 1px, transparent 1px)' : 'none';
-            physicsCanvas.style.backgroundSize = gridOn ? '20px 20px' : 'none';
-        }
-        // Initial State Save
-        saveState();
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <title>Advanced Physics Simulator – Connect Systems & More Elements</title>
+  <style>
+    body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
+    canvas { display: block; }
+    /* Menus always on top */
+    #controls, #editPanel, #connectionPanel, #constraintEditPanel {
+      position: absolute;
+      background: rgba(255,255,255,0.95);
+      padding: 10px;
+      border-radius: 5px;
+      z-index: 1000;
+    }
+    #controls {
+      top: 10px;
+      left: 10px;
+      max-width: 320px;
+      max-height: 90vh;
+      overflow-y: auto;
+    }
+    #controls label { display: block; margin-top: 8px; }
+    #controls input, #controls select, #controls button {
+      width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
+    }
+    #buttonContainer {
+      display: flex;
+      justify-content: space-between;
+      gap: 5px;
+    }
+    #editPanel {
+      top: 10px;
+      right: 10px;
+      max-width: 300px;
+      max-height: 90vh;
+      overflow-y: auto;
+      display: none;
+    }
+    #editPanel h3 { margin: 0 0 5px 0; }
+    #editPanel label { display: block; margin-top: 8px; }
+    #editPanel input, #editPanel select, #editPanel button {
+      width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
+    }
+    /* Connection Options Panel */
+    #connectionPanel {
+      top: 150px;
+      right: 10px;
+      max-width: 250px;
+      display: none;
+    }
+    #connectionPanel h3 { margin: 0 0 5px 0; }
+    #connectionPanel label { display: block; margin-top: 8px; }
+    #connectionPanel input, #connectionPanel select, #connectionPanel button {
+      width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
+    }
+    /* Constraint Edit Panel */
+    #constraintEditPanel {
+      bottom: 10px;
+      right: 10px;
+      max-width: 250px;
+      display: none;
+    }
+    #constraintEditPanel h3 { margin: 0 0 5px 0; }
+    #constraintEditPanel label { display: block; margin-top: 8px; }
+    #constraintEditPanel input, #constraintEditPanel select, #constraintEditPanel button {
+      width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
+    }
+  </style>
 </head>
 <body>
+  <!-- Controls Panel -->
+  <div id="controls">
+    <label for="simulationSelect">Choose Simulation Element:</label>
+    <select id="simulationSelect">
+      <option value="bouncingBall">Bouncing Ball</option>
+      <option value="pendulum">Pendulum</option>
+      <option value="projectile">Projectile Motion</option>
+      <option value="inclinedPlane">Inclined Plane</option>
+      <option value="springMass">Spring–Mass System</option>
+      <option value="rectangleBlock">Rectangle Block</option>
+    </select>
+    <!-- Dynamic Suboptions for creation parameters -->
+    <div id="subOptionsContainer"></div>
+    <div id="buttonContainer">
+      <button id="addElement">Add Element</button>
+      <button id="connectSystems">Connect Systems</button>
+      <button id="reset">Reset Simulation</button>
     </div>
+  </div>
+  <!-- Edit Panel (opens on double-click on an element) -->
+  <div id="editPanel"></div>
+  <!-- Connection Options Panel -->
+  <div id="connectionPanel">
+    <h3>Connection Options</h3>
+    <label for="connType">Connection Type:</label>
+    <select id="connType">
+      <option value="string">String</option>
+      <option value="spring">Spring</option>
+      <option value="stick">Stick</option>
+    </select>
+    <label for="connMode">Connection Mode:</label>
+    <select id="connMode">
+      <option value="element">Element</option>
+      <option value="system">System</option>
+    </select>
+    <!-- Show endpoint options only for springMass systems -->
+    <div id="sourceEndpointDiv">
+      <label for="sourceEndpoint">Source Endpoint:</label>
+      <select id="sourceEndpoint">
+        <option value="mass">Mass</option>
+        <option value="fixed">Fixed</option>
+      </select>
     </div>
+    <button id="cancelConn">Cancel</button>
+    <p style="font-size: 12px; color: #555;">Now click on the target element to attach.</p>
+  </div>
+  <!-- Constraint Edit Panel -->
+  <div id="constraintEditPanel">
+    <h3>Edit Constraint</h3>
+    <label for="consA_X">Endpoint A X:</label>
+    <input type="number" id="consA_X" step="1">
+    <label for="consA_Y">Endpoint A Y:</label>
+    <input type="number" id="consA_Y" step="1">
+    <label for="consB_X">Endpoint B X:</label>
+    <input type="number" id="consB_X" step="1">
+    <label for="consB_Y">Endpoint B Y:</label>
+    <input type="number" id="consB_Y" step="1">
+    <label for="consType">Connection Type:</label>
+    <select id="consType">
+      <option value="string">String</option>
+      <option value="spring">Spring</option>
+      <option value="stick">Stick</option>
+    </select>
+    <button id="updateConstraint">Update Constraint</button>
+    <button id="deleteConstraint">Delete Constraint</button>
+  </div>
+  <!-- Matter.js Library -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
+  <script>
+    // Module aliases and Engine Setup
+    const Engine = Matter.Engine,
+          Render = Matter.Render,
+          Runner = Matter.Runner,
+          World = Matter.World,
+          Bodies = Matter.Bodies,
+          Body = Matter.Body,
+          Constraint = Matter.Constraint,
+          Mouse = Matter.Mouse,
+          MouseConstraint = Matter.MouseConstraint,
+          Events = Matter.Events;
+    const engine = Engine.create();
+    const world = engine.world;
+    const render = Render.create({
+      element: document.body,
+      engine: engine,
+      options: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        wireframes: false,
+        background: '#f0f0f0'
+      }
+    });
+    Render.run(render);
+    const runner = Runner.create();
+    Runner.run(runner, engine);
+    // Global boundaries (to be updated on resize)
+    let floor, wallLeft, wallRight;
+    function updateBoundaries() {
+      if (floor && wallLeft && wallRight) {
+        World.remove(world, [floor, wallLeft, wallRight]);
+      }
+      floor = Bodies.rectangle(window.innerWidth/2, window.innerHeight-50, window.innerWidth, 100, {
+        isStatic: true,
+        render: { fillStyle: '#060a19' }
+      });
+      wallLeft = Bodies.rectangle(-50, window.innerHeight/2, 100, window.innerHeight, { isStatic: true });
+      wallRight = Bodies.rectangle(window.innerWidth+50, window.innerHeight/2, 100, window.innerHeight, { isStatic: true });
+      World.add(world, [floor, wallLeft, wallRight]);
+    }
+    updateBoundaries();
+    // Mouse control for drag & drop
+    let mouse = Mouse.create(render.canvas);
+    let mouseConstraint = MouseConstraint.create(engine, {
+      mouse: mouse,
+      constraint: { stiffness: 0.2, render: { visible: false } }
+    });
+    World.add(world, mouseConstraint);
+    render.mouse = mouse;
+    // Global variables for editing & connection
+    let selectedBody = null;
+    let selectedConstraint = null;
+    let attachMode = false; // if true, next click will pick connection target
+    let attachFrom = null;
+    const connectionPanel = document.getElementById('connectionPanel');
+    const editPanel = document.getElementById('editPanel');
+    // Helper: random color
+    function getRandomColor() {
+      return '#' + Math.floor(Math.random()*16777215).toString(16);
+    }
+    /* ---------- Dynamic Suboptions for Adding Elements ---------- */
+    function updateSubOptions() {
+      const simulationSelect = document.getElementById('simulationSelect');
+      const subOptionsContainer = document.getElementById('subOptionsContainer');
+      let selected = simulationSelect.value;
+      let html = '';
+      if(selected === 'bouncingBall'){
+         html += `
+          <label for="ballInitialX">Initial X:</label>
+          <input type="number" id="ballInitialX" value="100">
+          <label for="ballInitialY">Initial Y:</label>
+          <input type="number" id="ballInitialY" value="50">
+          <label for="ballRadius">Radius:</label>
+          <input type="number" id="ballRadius" value="30">
+          <label for="ballRestitution">Restitution:</label>
+          <input type="number" id="ballRestitution" value="0.9" step="0.1" min="0" max="1">
+          <label for="ballFriction">Friction:</label>
+          <input type="number" id="ballFriction" value="0.005" step="0.001" min="0" max="1">
+          <label for="ballColor">Color:</label>
+          <input type="color" id="ballColor" value="#3498db">
+         `;
+      } else if(selected === 'pendulum'){
+         html += `
+          <label for="pendulumPivotX">Pivot X:</label>
+          <input type="number" id="pendulumPivotX" value="${window.innerWidth-200}">
+          <label for="pendulumPivotY">Pivot Y:</label>
+          <input type="number" id="pendulumPivotY" value="50">
+          <label for="pendulumBobRadius">Bob Radius:</label>
+          <input type="number" id="pendulumBobRadius" value="40">
+          <label for="pendulumLength">Length:</label>
+          <input type="number" id="pendulumLength" value="250">
+          <label for="pendulumStiffness">Stiffness:</label>
+          <input type="number" id="pendulumStiffness" value="1" step="0.1" min="0" max="1">
+          <label for="pendulumBobColor">Color:</label>
+          <input type="color" id="pendulumBobColor" value="#ff0000">
+         `;
+      } else if(selected === 'projectile'){
+         html += `
+          <label for="projectileInitialX">Initial X:</label>
+          <input type="number" id="projectileInitialX" value="100">
+          <label for="projectileInitialY">Initial Y:</label>
+          <input type="number" id="projectileInitialY" value="300">
+          <label for="projectileRadius">Radius:</label>
+          <input type="number" id="projectileRadius" value="20">
+          <label for="projectileVelX">Velocity X:</label>
+          <input type="number" id="projectileVelX" value="15">
+          <label for="projectileVelY">Velocity Y:</label>
+          <input type="number" id="projectileVelY" value="-15">
+          <label for="projectileColor">Color:</label>
+          <input type="color" id="projectileColor" value="#e67e22">
+         `;
+      } else if(selected === 'inclinedPlane'){
+         html += `
+          <label for="rampWidth">Ramp Width:</label>
+          <input type="number" id="rampWidth" value="300">
+          <label for="rampHeight">Ramp Height:</label>
+          <input type="number" id="rampHeight" value="20">
+          <label for="rampAngle">Ramp Angle (°):</label>
+          <input type="number" id="rampAngle" value="30">
+          <label for="rampX">Ramp X:</label>
+          <input type="number" id="rampX" value="400">
+          <label for="rampY">Ramp Y:</label>
+          <input type="number" id="rampY" value="${window.innerHeight-150}">
+          <label for="rampColor">Ramp Color:</label>
+          <input type="color" id="rampColor" value="#8e44ad">
+          <hr>
+          <label for="blockWidth">Block Width:</label>
+          <input type="number" id="blockWidth" value="40">
+          <label for="blockHeight">Block Height:</label>
+          <input type="number" id="blockHeight" value="40">
+          <label for="blockFriction">Block Friction:</label>
+          <input type="number" id="blockFriction" value="0.05" step="0.01" min="0" max="1">
+          <label for="blockColor">Block Color:</label>
+          <input type="color" id="blockColor" value="#1abc9c">
+         `;
+      } else if(selected === 'springMass'){
+         html += `
+          <label for="springMassRadius">Mass Radius:</label>
+          <input type="number" id="springMassRadius" value="25">
+          <label for="springMassRestitution">Restitution:</label>
+          <input type="number" id="springMassRestitution" value="0.8" step="0.1" min="0" max="1">
+          <label for="fixedPointX">Fixed X:</label>
+          <input type="number" id="fixedPointX" value="${Math.floor(window.innerWidth/2)}">
+          <label for="fixedPointY">Fixed Y:</label>
+          <input type="number" id="fixedPointY" value="100">
+          <label for="springLength">Spring Length:</label>
+          <input type="number" id="springLength" value="200">
+          <label for="springStiffness">Stiffness:</label>
+          <input type="number" id="springStiffness" value="0.02" step="0.01" min="0" max="1">
+          <label for="springMassColor">Color:</label>
+          <input type="color" id="springMassColor" value="#f39c12">
+         `;
+      } else if(selected === 'rectangleBlock'){
+         html += `
+          <label for="blockInitX">Initial X:</label>
+          <input type="number" id="blockInitX" value="150">
+          <label for="blockInitY">Initial Y:</label>
+          <input type="number" id="blockInitY" value="150">
+          <label for="blockWidth">Width:</label>
+          <input type="number" id="blockWidth" value="80">
+          <label for="blockHeight">Height:</label>
+          <input type="number" id="blockHeight" value="40">
+          <label for="blockFriction">Friction:</label>
+          <input type="number" id="blockFriction" value="0.1" step="0.01" min="0" max="1">
+          <label for="blockRestitution">Restitution:</label>
+          <input type="number" id="blockRestitution" value="0.3" step="0.1" min="0" max="1">
+          <label for="blockColor">Color:</label>
+          <input type="color" id="blockColor" value="#2ecc71">
+         `;
+      }
+      subOptionsContainer.innerHTML = html;
+    }
+    updateSubOptions();
+    document.getElementById('simulationSelect').addEventListener('change', updateSubOptions);
+    /* ---------- Functions to Add Simulation Elements ---------- */
+    function addBouncingBall(){
+      const x = parseFloat(document.getElementById("ballInitialX").value);
+      const y = parseFloat(document.getElementById("ballInitialY").value);
+      const radius = parseFloat(document.getElementById("ballRadius").value);
+      const restitution = parseFloat(document.getElementById("ballRestitution").value);
+      const friction = parseFloat(document.getElementById("ballFriction").value);
+      const color = document.getElementById("ballColor").value || getRandomColor();
+      const ball = Bodies.circle(x, y, radius, { restitution, friction, render: { fillStyle: color } });
+      ball.elementType = "bouncingBall";
+      ball.customOptions = { x, y, radius, restitution, friction, color, isSystemRoot: false };
+      World.add(world, ball);
+    }
+    function addPendulum(){
+      const pivotX = parseFloat(document.getElementById("pendulumPivotX").value);
+      const pivotY = parseFloat(document.getElementById("pendulumPivotY").value);
+      const bobRadius = parseFloat(document.getElementById("pendulumBobRadius").value);
+      const pendulumLength = parseFloat(document.getElementById("pendulumLength").value);
+      const stiffness = parseFloat(document.getElementById("pendulumStiffness").value);
+      const bobColor = document.getElementById("pendulumBobColor").value || "#ff0000";
+      const bob = Bodies.circle(pivotX, pivotY+pendulumLength, bobRadius, { restitution: 1, density: 0.005, render: { fillStyle: bobColor } });
+      bob.elementType = "pendulum";
+      bob.customOptions = { pivotX, pivotY, bobRadius, pendulumLength, stiffness, bobColor, isSystemRoot: false };
+      const pendulumConstraint = Constraint.create({
+        pointA: { x: pivotX, y: pivotY },
+        bodyB: bob,
+        length: pendulumLength,
+        stiffness: stiffness,
+        render: { strokeStyle: '#000', lineWidth: 2 }
+      });
+      World.add(world, [bob, pendulumConstraint]);
+    }
+    function addProjectile(){
+      const x = parseFloat(document.getElementById("projectileInitialX").value);
+      const y = parseFloat(document.getElementById("projectileInitialY").value);
+      const radius = parseFloat(document.getElementById("projectileRadius").value);
+      const velX = parseFloat(document.getElementById("projectileVelX").value);
+      const velY = parseFloat(document.getElementById("projectileVelY").value);
+      const color = document.getElementById("projectileColor").value || getRandomColor();
+      const proj = Bodies.circle(x, y, radius, { restitution: 0.8, frictionAir: 0.001, render: { fillStyle: color } });
+      proj.elementType = "projectile";
+      proj.customOptions = { x, y, radius, velX, velY, color, isSystemRoot: false };
+      Body.setVelocity(proj, { x: velX, y: velY });
+      World.add(world, proj);
+    }
+    function addInclinedPlane(){
+      const rampWidth = parseFloat(document.getElementById("rampWidth").value);
+      const rampHeight = parseFloat(document.getElementById("rampHeight").value);
+      const angleDeg = parseFloat(document.getElementById("rampAngle").value);
+      const angle = angleDeg * Math.PI/180;
+      const rampX = parseFloat(document.getElementById("rampX").value);
+      const rampY = parseFloat(document.getElementById("rampY").value);
+      const rampColor = document.getElementById("rampColor").value || "#8e44ad";
+      const ramp = Bodies.rectangle(rampX, rampY, rampWidth, rampHeight, {
+        isStatic: true,
+        angle: angle,
+        render: { fillStyle: rampColor }
+      });
+      ramp.elementType = "inclinedPlane_ramp";
+      ramp.customOptions = { rampWidth, rampHeight, angleDeg, rampX, rampY, rampColor, isSystemRoot: false };
+      const blockWidth = parseFloat(document.getElementById("blockWidth").value);
+      const blockHeight = parseFloat(document.getElementById("blockHeight").value);
+      const blockFriction = parseFloat(document.getElementById("blockFriction").value);
+      const blockColor = document.getElementById("blockColor").value || "#1abc9c";
+      const block = Bodies.rectangle(rampX - rampWidth/4, rampY - 50, blockWidth, blockHeight, {
+        friction: blockFriction,
+        render: { fillStyle: blockColor }
+      });
+      block.elementType = "inclinedPlane_block";
+      block.customOptions = { blockWidth, blockHeight, blockFriction, blockColor, isSystemRoot: false };
+      World.add(world, [ramp, block]);
+    }
+    function addSpringMass(){
+      const massRadius = parseFloat(document.getElementById("springMassRadius").value);
+      const massRestitution = parseFloat(document.getElementById("springMassRestitution").value);
+      const fixedPointX = parseFloat(document.getElementById("fixedPointX").value);
+      const fixedPointY = parseFloat(document.getElementById("fixedPointY").value);
+      const springLength = parseFloat(document.getElementById("springLength").value);
+      const springStiffness = parseFloat(document.getElementById("springStiffness").value);
+      const massColor = document.getElementById("springMassColor").value || getRandomColor();
+      const mass = Bodies.circle(fixedPointX, fixedPointY+springLength, massRadius, {
+        restitution: massRestitution,
+        density: 0.004,
+        render: { fillStyle: massColor }
+      });
+      mass.elementType = "springMass";
+      mass.customOptions = { massRadius, massRestitution, fixedPointX, fixedPointY, springLength, springStiffness, massColor, isSystemRoot: false };
+      mass.fixedPoint = { x: fixedPointX, y: fixedPointY };
+      const spring = Constraint.create({
+        pointA: { x: fixedPointX, y: fixedPointY },
+        bodyB: mass,
+        length: springLength,
+        stiffness: springStiffness,
+        damping: 0.05,
+        render: { strokeStyle: '#000', lineWidth: 2 }
+      });
+      World.add(world, [mass, spring]);
+    }
+    function addRectangleBlock(){
+      const x = parseFloat(document.getElementById("blockInitX").value);
+      const y = parseFloat(document.getElementById("blockInitY").value);
+      const width = parseFloat(document.getElementById("blockWidth").value);
+      const height = parseFloat(document.getElementById("blockHeight").value);
+      const friction = parseFloat(document.getElementById("blockFriction").value);
+      const restitution = parseFloat(document.getElementById("blockRestitution").value);
+      const color = document.getElementById("blockColor").value || getRandomColor();
+      const block = Bodies.rectangle(x, y, width, height, { friction, restitution, render: { fillStyle: color } });
+      block.elementType = "rectangleBlock";
+      block.customOptions = { x, y, width, height, friction, restitution, color, isSystemRoot: false };
+      World.add(world, block);
+    }
+    document.getElementById('addElement').addEventListener('click', function(){
+      const selected = document.getElementById('simulationSelect').value;
+      if(selected === 'bouncingBall') addBouncingBall();
+      else if(selected === 'pendulum') addPendulum();
+      else if(selected === 'projectile') addProjectile();
+      else if(selected === 'inclinedPlane') addInclinedPlane();
+      else if(selected === 'springMass') addSpringMass();
+      else if(selected === 'rectangleBlock') addRectangleBlock();
+    });
+    // "Connect Systems" button (sets attach mode in SYSTEM mode)
+    document.getElementById('connectSystems').addEventListener('click', function(){
+      attachMode = true;
+      attachFrom = null; // will be set on first click
+      connectionPanel.style.display = "block";
+      // Set connection mode to system by default
+      document.getElementById('connMode').value = "system";
+      alert("System connection mode activated. Click on the first system element (must be marked as system root) then the target system element.");
+    });
+    document.getElementById('reset').addEventListener('click', function(){
+      World.clear(world);
+      Engine.clear(engine);
+      updateBoundaries();
+      mouse = Mouse.create(render.canvas);
+      mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: false } } });
+      World.add(world, mouseConstraint);
+      render.mouse = mouse;
+      hideEditPanel();
+      hideConnectionPanel();
+      hideConstraintEditPanel();
+    });
+    /* ---------- Edit Panel (opens on double-click) ---------- */
+    function openEditPanel(body) {
+      selectedBody = body;
+      let html = `<h3>Edit Element</h3>
+                  <label for="editPosX">Position X:</label>
+                  <input type="number" id="editPosX" value="${body.position.x.toFixed(2)}">
+                  <label for="editPosY">Position Y:</label>
+                  <input type="number" id="editPosY" value="${body.position.y.toFixed(2)}">
+                  <label for="editAngle">Angle (radians):</label>
+                  <input type="number" id="editAngle" value="${body.angle.toFixed(2)}">
+                  <label for="editColor">Color:</label>
+                  <input type="color" id="editColor" value="${body.render.fillStyle || '#ffffff'}">
+                  <label for="editSystemRoot">Is System Root?</label>
+                  <input type="checkbox" id="editSystemRoot" ${body.customOptions.isSystemRoot ? "checked" : ""}>`;
+      if(body.elementType === "bouncingBall"){
+         const opts = body.customOptions;
+         html += `<label for="editBallRadius">Radius:</label>
+                  <input type="number" id="editBallRadius" value="${opts.radius}">
+                  <label for="editBallRestitution">Restitution:</label>
+                  <input type="number" id="editBallRestitution" value="${opts.restitution}" step="0.1" min="0" max="1">
+                  <label for="editBallFriction">Friction:</label>
+                  <input type="number" id="editBallFriction" value="${opts.friction}" step="0.001" min="0" max="1">`;
+      }
+      // (Additional type-specific options can be added similarly for other element types)
+      html += `<div style="margin-top:10px;">
+                 <button id="updateElement">Update</button>
+                 <button id="deleteElement">Delete</button>
+               </div>`;
+      editPanel.innerHTML = html;
+      editPanel.style.display = "block";
+      document.getElementById("updateElement").addEventListener("click", updateElementFromEditPanel);
+      document.getElementById("deleteElement").addEventListener("click", function(){
+         World.remove(world, selectedBody);
+         hideEditPanel();
+      });
+    }
+    function hideEditPanel() {
+      editPanel.style.display = "none";
+      selectedBody = null;
+    }
+    function updateElementFromEditPanel(){
+      if(!selectedBody) return;
+      const newX = parseFloat(document.getElementById("editPosX").value);
+      const newY = parseFloat(document.getElementById("editPosY").value);
+      const newAngle = parseFloat(document.getElementById("editAngle").value);
+      const newColor = document.getElementById("editColor").value;
+      Body.setPosition(selectedBody, { x: newX, y: newY });
+      Body.setAngle(selectedBody, newAngle);
+      selectedBody.render.fillStyle = newColor;
+      // Update the "isSystemRoot" flag
+      const isSysRoot = document.getElementById("editSystemRoot").checked;
+      selectedBody.customOptions.isSystemRoot = isSysRoot;
+      if(selectedBody.elementType === "bouncingBall"){
+         const oldRadius = selectedBody.circleRadius;
+         const newRadius = parseFloat(document.getElementById("editBallRadius").value);
+         const newRestitution = parseFloat(document.getElementById("editBallRestitution").value);
+         const newFriction = parseFloat(document.getElementById("editBallFriction").value);
+         if(newRadius && oldRadius && newRadius !== oldRadius){
+            const scaleFactor = newRadius / oldRadius;
+            Body.scale(selectedBody, scaleFactor, scaleFactor);
+         }
+         selectedBody.restitution = newRestitution;
+         selectedBody.friction = newFriction;
+         selectedBody.customOptions = { x: newX, y: newY, radius: newRadius, restitution: newRestitution, friction: newFriction, color: newColor, isSystemRoot: isSysRoot };
+      }
+      hideEditPanel();
+    }
+    // Open edit panel on double-click
+    render.canvas.addEventListener("dblclick", function(event){
+      const rect = render.canvas.getBoundingClientRect();
+      const mousePos = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      const bodies = Matter.Composite.allBodies(world);
+      const clicked = Matter.Query.point(bodies, mousePos);
+      if(clicked.length > 0){
+         openEditPanel(clicked[0]);
+      } else {
+         hideEditPanel();
+      }
+    });
+    /* ---------- Connection (Attachment) ---------- */
+    // In attach mode, when clicking on elements, create a constraint
+    Events.on(mouseConstraint, 'mouseup', function(event){
+      const mousePos = event.mouse.position;
+      const bodies = Matter.Composite.allBodies(world);
+      const clickedBodies = Matter.Query.point(bodies, mousePos);
+      if(clickedBodies.length > 0){
+         const clickedBody = clickedBodies[0];
+         if(attachMode){
+            if(!attachFrom){
+              // First selection for attachment
+              attachFrom = clickedBody;
+              alert("First element selected. Now click on the target element.");
+              return;
+            } else if (clickedBody === attachFrom) {
+              alert("Please select a different element.");
+              return;
             }
+            // Get connection options from the connection panel
+            const connType = document.getElementById('connType').value;
+            const connMode = document.getElementById('connMode').value;
+            // If connection mode is "system", verify both elements are marked as system root
+            if(connMode === "system") {
+              if(!attachFrom.customOptions.isSystemRoot){
+                alert("Source element is not marked as System Root. Please mark it in the edit panel.");
+                attachMode = false;
+                attachFrom = null;
+                connectionPanel.style.display = "none";
+                return;
+              }
+              if(!clickedBody.customOptions.isSystemRoot){
+                alert("Target element is not marked as System Root. Please mark it in its edit panel.");
+                attachMode = false;
+                attachFrom = null;
+                connectionPanel.style.display = "none";
+                return;
+              }
+              // Use the system root's position (we assume the element itself is the root)
             }
+            // For springMass endpoints, get endpoint options if needed
+            let sourceEndpoint = "mass";
+            if(attachFrom.elementType === "springMass"){
+               sourceEndpoint = document.getElementById('sourceEndpoint').value;
             }
+            let targetEndpoint = "mass";
+            if(clickedBody.elementType === "springMass"){
+               targetEndpoint = prompt("For target springMass, choose 'fixed' or 'mass' (default: mass):", "mass") || "mass";
+               if(targetEndpoint !== "fixed") { targetEndpoint = "mass"; }
             }
+            // Determine attachment points
+            let pointA = { x: 0, y: 0 }, bodyA = attachFrom;
+            if(attachFrom.elementType === "springMass" && sourceEndpoint === "fixed"){
+              bodyA = null;
+              pointA = attachFrom.fixedPoint;
+            }
+            let pointB = { x: 0, y: 0 }, bodyB = clickedBody;
+            if(clickedBody.elementType === "springMass" && targetEndpoint === "fixed"){
+              bodyB = null;
+              pointB = clickedBody.fixedPoint || { x: clickedBody.position.x, y: clickedBody.position.y };
+            }
+            // If connection mode is "system", override to use the elements as-is
+            if(connMode === "system") {
+              bodyA = attachFrom;
+              bodyB = clickedBody;
+              pointA = { x: 0, y: 0 };
+              pointB = { x: 0, y: 0 };
+            }
+            let posA = bodyA ? attachFrom.position : pointA;
+            let posB = bodyB ? clickedBody.position : pointB;
+            let dx = posB.x - posA.x, dy = posB.y - posA.y;
+            let length = Math.sqrt(dx*dx + dy*dy);
+            let stiffness = (connType === "spring") ? 0.05 : 1;
+            const newConstraint = Constraint.create({
+              bodyA: bodyA,
+              pointA: pointA,
+              bodyB: bodyB,
+              pointB: pointB,
+              length: length,
+              stiffness: stiffness,
+              render: { strokeStyle: '#000', lineWidth: 2 }
             });
+            World.add(world, newConstraint);
+            attachMode = false;
+            attachFrom = null;
+            connectionPanel.style.display = "none";
+            alert("Attachment created using " + connType + " connection in " + connMode + " mode.");
+         }
+      } else {
+         // Check if near a constraint line for editing…
+         const constraints = Matter.Composite.allConstraints(world);
+         for(let cons of constraints){
+            let posA = cons.bodyA ? { x: cons.bodyA.position.x + cons.pointA.x, y: cons.bodyA.position.y + cons.pointA.y } : cons.pointA;
+            let posB = cons.bodyB ? { x: cons.bodyB.position.x + cons.pointB.x, y: cons.bodyB.position.y + cons.pointB.y } : cons.pointB;
+            let dist = distanceToSegment(mousePos, posA, posB);
+            if(dist < 5){
+              showConstraintEditPanel(cons);
+              return;
+            }
+         }
+         hideConstraintEditPanel();
+      }
+    });
+    // Helper: distance from point to segment
+    function distanceToSegment(p, v, w){
+      let l2 = (w.x - v.x)**2 + (w.y - v.y)**2;
+      if(l2 === 0) return Math.hypot(p.x - v.x, p.y - v.y);
+      let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
+      t = Math.max(0, Math.min(1, t));
+      let proj = { x: v.x + t*(w.x-v.x), y: v.y + t*(w.y-v.y) };
+      return Math.hypot(p.x - proj.x, p.y - proj.y);
+    }
+    /* ---------- Constraint Edit Panel ---------- */
+    const constraintEditPanel = document.getElementById('constraintEditPanel');
+    function showConstraintEditPanel(cons){
+      selectedConstraint = cons;
+      let posA = cons.bodyA ? { x: cons.bodyA.position.x + cons.pointA.x, y: cons.bodyA.position.y + cons.pointA.y } : cons.pointA;
+      let posB = cons.bodyB ? { x: cons.bodyB.position.x + cons.pointB.x, y: cons.bodyB.position.y + cons.pointB.y } : cons.pointB;
+      document.getElementById('consA_X').value = posA.x.toFixed(2);
+      document.getElementById('consA_Y').value = posA.y.toFixed(2);
+      document.getElementById('consB_X').value = posB.x.toFixed(2);
+      document.getElementById('consB_Y').value = posB.y.toFixed(2);
+      let connType = (cons.stiffness < 0.1) ? "spring" : "string";
+      document.getElementById('consType').value = connType;
+      constraintEditPanel.style.display = "block";
+    }
+    function hideConstraintEditPanel(){
+      constraintEditPanel.style.display = "none";
+      selectedConstraint = null;
+    }
+    document.getElementById('updateConstraint').addEventListener('click', function(){
+      if(selectedConstraint){
+        let aX = parseFloat(document.getElementById('consA_X').value);
+        let aY = parseFloat(document.getElementById('consA_Y').value);
+        let bX = parseFloat(document.getElementById('consB_X').value);
+        let bY = parseFloat(document.getElementById('consB_Y').value);
+        if(!selectedConstraint.bodyA) { selectedConstraint.pointA = { x: aX, y: aY }; }
+        if(!selectedConstraint.bodyB) { selectedConstraint.pointB = { x: bX, y: bY }; }
+        let connType = document.getElementById('consType').value;
+        selectedConstraint.stiffness = (connType === "spring") ? 0.05 : 1;
+        hideConstraintEditPanel();
+      }
+    });
+    document.getElementById('deleteConstraint').addEventListener('click', function(){
+      if(selectedConstraint){
+        World.remove(world, selectedConstraint);
+        hideConstraintEditPanel();
+      }
+    });
+    // Window resize: update renderer and boundaries
+    window.addEventListener('resize', function(){
+      Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: window.innerWidth, y: window.innerHeight } });
+      updateBoundaries();
+    });
+  </script>
 </body>
 </html>