Spaces:

Ramesh-vani
/

phy

Running

App Files Files Community

Ramesh-vani commited on Feb 25

Commit

e1fc0fd

verified ·

1 Parent(s): 0bb84f1

Update index.html

Browse files

Files changed (1) hide show

index.html +411 -531

index.html CHANGED Viewed

@@ -2,161 +2,188 @@
 <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,
@@ -164,350 +191,265 @@
         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);
@@ -515,193 +457,131 @@
       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>

 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <title>Physics Simulator for IIT Aspirants</title>
   <style>
     body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
+    canvas { display: block; width: 100%; height: 100vh; }
+    /* Top Navbar for Controls */
+    #navbar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.95);
+      padding: 10px 20px;
       z-index: 1000;
       display: flex;
       justify-content: space-between;
+      align-items: center;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     }
+    #controls {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      flex-wrap: wrap;
+      max-width: 70%;
     }
+    #controls label { margin: 0 5px 0 0; font-size: 14px; }
+    #controls select, #controls button {
+      padding: 6px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #ccc;
     }
+    #controls select { min-width: 150px; }
+    #buttonContainer { display: flex; gap: 10px; }
+    /* Suboptions Sidebar (Left) */
+    #subOptionsSidebar {
+      position: fixed;
+      top: 60px;
+      left: 0;
+      width: 250px;
+      height: calc(100vh - 60px);
+      background: rgba(245, 245, 245, 0.95);
+      padding: 15px;
+      z-index: 900;
+      overflow-y: auto;
+      box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+      transition: transform 0.3s ease;
     }
+    #subOptionsSidebar.hidden { transform: translateX(-100%); }
+    #subOptionsContainer label { display: block; margin: 10px 0 5px; font-size: 14px; }
+    #subOptionsContainer input, #subOptionsContainer select {
+      width: 100%; padding: 6px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc; }
+    /* Right Sidebar for Edit and Connection Panels */
+    #rightSidebar {
+      position: fixed;
+      top: 60px;
+      right: 0;
+      width: 300px;
+      height: calc(100vh - 60px);
+      background: rgba(245, 245, 245, 0.95);
+      padding: 15px;
+      z-index: 900;
+      overflow-y: auto;
+      box-shadow: -2px 0 5px rgba(0,0,0,0.1);
+      transition: transform 0.3s ease;
     }
+    #rightSidebar.hidden { transform: translateX(100%); }
+    #editPanel, #connectionPanel { margin-bottom: 20px; }
+    #editPanel h3, #connectionPanel h3 { margin: 0 0 10px; font-size: 16px; }
+    #editPanel label, #connectionPanel label { display: block; margin: 10px 0 5px; font-size: 14px; }
+    #editPanel input, #editPanel select, #editPanel button,
+    #connectionPanel input, #connectionPanel select, #connectionPanel button {
+      width: 100%; padding: 6px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc; }
+    #editPanel button, #connectionPanel button { margin-top: 10px; }
+    /* Bottom Bar for Real-Time Data and Constraint Edit */
+    #bottomBar {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.95);
+      padding: 10px 20px;
+      z-index: 1000;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
     }
+    #dataDisplay { flex: 1; font-size: 14px; }
+    #dataDisplay h3 { margin: 0 0 5px; font-size: 16px; }
+    #constraintEditPanel { flex: 0 0 300px; display: none; }
+    #constraintEditPanel h3 { margin: 0 0 10px; font-size: 16px; }
+    #constraintEditPanel label { display: block; margin: 10px 0 5px; font-size: 14px; }
     #constraintEditPanel input, #constraintEditPanel select, #constraintEditPanel button {
+      width: 100%; padding: 6px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc; }
+    #constraintEditPanel button { margin-top: 10px; }
   </style>
 </head>
 <body>
+  <!-- Top Navbar -->
+  <div id="navbar">
+    <div id="controls">
+      <label for="simulationSelect">Select Simulation:</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>
+      </select>
+      <div id="buttonContainer">
+        <button id="addElement">Add Element</button>
+        <button id="reset">Reset</button>
+      </div>
     </div>
   </div>
+  <!-- Left Sidebar for Suboptions -->
+  <div id="subOptionsSidebar">
+    <div id="subOptionsContainer"></div>
+  </div>
+  <!-- Right Sidebar for Edit and Connection Panels -->
+  <div id="rightSidebar" class="hidden">
+    <div id="editPanel"></div>
+    <div id="connectionPanel">
+      <h3>Connect Elements</h3>
+      <label for="connType">Connection Type:</label>
+      <select id="connType">
+        <option value="string">String (Inextensible)</option>
+        <option value="spring">Spring (Elastic)</option>
+        <option value="stick">Rigid Stick</option>
       </select>
+      <div id="sourceEndpointDiv">
+        <label for="sourceEndpoint">Source Endpoint:</label>
+        <select id="sourceEndpoint">
+          <option value="mass">Mass</option>
+          <option value="fixed">Fixed Point</option>
+        </select>
+      </div>
+      <button id="cancelConn">Cancel</button>
+      <p style="font-size: 12px; color: #555;">Click the target element to connect.</p>
     </div>
   </div>
+  <!-- Bottom Bar for Data and Constraints -->
+  <div id="bottomBar">
+    <div id="dataDisplay">
+      <h3>Real-Time Data</h3>
+      <p id="dataContent">Select an element to view data.</p>
+    </div>
+    <div id="constraintEditPanel">
+      <h3>Edit Constraint</h3>
+      <label for="consA_X">Endpoint A X:</label>
+      <input type="number" id="consA_X" step="0.1">
+      <label for="consA_Y">Endpoint A Y:</label>
+      <input type="number" id="consA_Y" step="0.1">
+      <label for="consB_X">Endpoint B X:</label>
+      <input type="number" id="consB_X" step="0.1">
+      <label for="consB_Y">Endpoint B Y:</label>
+      <input type="number" id="consB_Y" step="0.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</button>
+      <button id="deleteConstraint">Delete</button>
+    </div>
   </div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
   <script>
+    const { Engine, Render, Runner, World, Bodies, Body, Constraint, Mouse, MouseConstraint, Events, Vector } = Matter;
     const engine = Engine.create();
     const world = engine.world;
+    engine.gravity.scale = 0.001;
     const render = Render.create({
       element: document.body,
       engine: engine,
         width: window.innerWidth,
         height: window.innerHeight,
         wireframes: false,
+        background: '#e9ecef'
       }
     });
     Render.run(render);
     const runner = Runner.create();
     Runner.run(runner, engine);
     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 * 2, 100, { isStatic: true, render: { fillStyle: '#343a40' } });
+      wallLeft = Bodies.rectangle(-50, window.innerHeight / 2, 100, window.innerHeight * 2, { isStatic: true, render: { fillStyle: '#343a40' } });
+      wallRight = Bodies.rectangle(window.innerWidth + 50, window.innerHeight / 2, 100, window.innerHeight * 2, { isStatic: true, render: { fillStyle: '#343a40' } });
       World.add(world, [floor, wallLeft, wallRight]);
     }
     updateBoundaries();
+    const mouse = Mouse.create(render.canvas);
+    const mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: false } } });
     World.add(world, mouseConstraint);
     render.mouse = mouse;
+    let selectedBody = null, selectedConstraint = null, attachMode = false, attachFrom = null;
+    const subOptionsSidebar = document.getElementById('subOptionsSidebar'),
+          rightSidebar = document.getElementById('rightSidebar'),
+          editPanel = document.getElementById('editPanel'),
+          connectionPanel = document.getElementById('connectionPanel'),
+          constraintEditPanel = document.getElementById('constraintEditPanel'),
+          dataContent = document.getElementById('dataContent');
+    function getRandomColor() { return '#' + Math.floor(Math.random() * 16777215).toString(16); }
     function updateSubOptions() {
       const simulationSelect = document.getElementById('simulationSelect');
       const subOptionsContainer = document.getElementById('subOptionsContainer');
+      const selected = simulationSelect.value;
       let html = '';
+      if (selected === 'bouncingBall') {
+        html = `
+          <label for="ballInitialX">Initial X (m):</label><input type="number" id="ballInitialX" value="200">
+          <label for="ballInitialY">Initial Y (m):</label><input type="number" id="ballInitialY" value="50">
+          <label for="ballRadius">Radius (m):</label><input type="number" id="ballRadius" value="20" min="5">
+          <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.01" step="0.01" 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 (m):</label><input type="number" id="pendulumPivotX" value="${Math.floor(window.innerWidth / 2)}">
+          <label for="pendulumPivotY">Pivot Y (m):</label><input type="number" id="pendulumPivotY" value="50">
+          <label for="pendulumBobRadius">Bob Radius (m):</label><input type="number" id="pendulumBobRadius" value="30" min="5">
+          <label for="pendulumLength">Length (m):</label><input type="number" id="pendulumLength" value="300" min="50">
+          <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="#e74c3c">
+        `;
+      } else if (selected === 'projectile') {
+        html = `
+          <label for="projectileInitialX">Initial X (m):</label><input type="number" id="projectileInitialX" value="100">
+          <label for="projectileInitialY">Initial Y (m):</label><input type="number" id="projectileInitialY" value="${window.innerHeight - 150}">
+          <label for="projectileRadius">Radius (m):</label><input type="number" id="projectileRadius" value="15" min="5">
+          <label for="projectileVelX">Velocity X (m/s):</label><input type="number" id="projectileVelX" value="20">
+          <label for="projectileVelY">Velocity Y (m/s):</label><input type="number" id="projectileVelY" value="-25">
+          <label for="projectileColor">Color:</label><input type="color" id="projectileColor" value="#f1c40f">
+        `;
+      } else if (selected === 'inclinedPlane') {
+        html = `
+          <label for="rampWidth">Ramp Width (m):</label><input type="number" id="rampWidth" value="400" min="100">
+          <label for="rampHeight">Ramp Height (m):</label><input type="number" id="rampHeight" value="20" min="10">
+          <label for="rampAngle">Angle (°):</label><input type="number" id="rampAngle" value="30" min="0" max="90">
+          <label for="rampX">Ramp X (m):</label><input type="number" id="rampX" value="400">
+          <label for="rampY">Ramp Y (m):</label><input type="number" id="rampY" value="${window.innerHeight - 100}">
+          <label for="rampColor">Ramp Color:</label><input type="color" id="rampColor" value="#8e44ad">
+          <label for="blockWidth">Block Width (m):</label><input type="number" id="blockWidth" value="50" min="10">
+          <label for="blockHeight">Block Height (m):</label><input type="number" id="blockHeight" value="50" min="10">
+          <label for="blockFriction">Block Friction:</label><input type="number" id="blockFriction" value="0.3" step="0.1" min="0" max="1">
+          <label for="blockColor">Block Color:</label><input type="color" id="blockColor" value="#2ecc71">
+        `;
+      } else if (selected === 'springMass') {
+        html = `
+          <label for="springMassRadius">Mass Radius (m):</label><input type="number" id="springMassRadius" value="25" min="5">
+          <label for="springMassRestitution">Restitution:</label><input type="number" id="springMassRestitution" value="0.5" step="0.1" min="0" max="1">
+          <label for="fixedPointX">Fixed X (m):</label><input type="number" id="fixedPointX" value="${Math.floor(window.innerWidth / 2)}">
+          <label for="fixedPointY">Fixed Y (m):</label><input type="number" id="fixedPointY" value="100">
+          <label for="springLength">Spring Length (m):</label><input type="number" id="springLength" value="200" min="50">
+          <label for="springStiffness">Stiffness:</label><input type="number" id="springStiffness" value="0.05" step="0.01" min="0" max="1">
+          <label for="springMassColor">Color:</label><input type="color" id="springMassColor" value="#e67e22">
+        `;
       }
       subOptionsContainer.innerHTML = html;
+      subOptionsSidebar.classList.remove('hidden');
     }
     updateSubOptions();
     document.getElementById('simulationSelect').addEventListener('change', updateSubOptions);
+    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;
+      const ball = Bodies.circle(x, y, radius, { restitution, friction, render: { fillStyle: color }, density: 0.001 });
       ball.elementType = "bouncingBall";
+      ball.customOptions = { x, y, radius, restitution, friction, color };
       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 length = parseFloat(document.getElementById("pendulumLength").value);
       const stiffness = parseFloat(document.getElementById("pendulumStiffness").value);
+      const color = document.getElementById("pendulumBobColor").value;
+      const bob = Bodies.circle(pivotX, pivotY + length, bobRadius, { restitution: 0.9, density: 0.001, render: { fillStyle: color } });
+      const constraint = Constraint.create({
         pointA: { x: pivotX, y: pivotY },
         bodyB: bob,
+        length,
+        stiffness,
+        render: { strokeStyle: '#333', lineWidth: 2 }
       });
+      bob.elementType = "pendulum";
+      bob.customOptions = { pivotX, pivotY, bobRadius, length, stiffness, color };
+      World.add(world, [bob, constraint]);
     }
+    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;
+      const proj = Bodies.circle(x, y, radius, { restitution: 0.8, frictionAir: 0.005, render: { fillStyle: color }, density: 0.001 });
       Body.setVelocity(proj, { x: velX, y: velY });
+      proj.elementType = "projectile";
+      proj.customOptions = { x, y, radius, velX, velY, color };
       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;
       const ramp = Bodies.rectangle(rampX, rampY, rampWidth, rampHeight, {
         isStatic: true,
+        angle,
+        friction: 0.1,
         render: { fillStyle: rampColor }
       });
       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;
+      const blockX = rampX - rampWidth / 4 * Math.cos(angle);
+      const blockY = rampY - rampHeight / 2 - blockHeight / 2 - 10;
+      const block = Bodies.rectangle(blockX, blockY, blockWidth, blockHeight, {
         friction: blockFriction,
+        render: { fillStyle: blockColor },
+        density: 0.001
       });
+      ramp.elementType = "inclinedPlane_ramp";
+      ramp.customOptions = { rampWidth, rampHeight, angleDeg, rampX, rampY, rampColor };
       block.elementType = "inclinedPlane_block";
+      block.customOptions = { blockWidth, blockHeight, blockFriction, blockColor };
       World.add(world, [ramp, block]);
     }
+    function addSpringMass() {
+      const radius = parseFloat(document.getElementById("springMassRadius").value);
+      const restitution = parseFloat(document.getElementById("springMassRestitution").value);
+      const fixedX = parseFloat(document.getElementById("fixedPointX").value);
+      const fixedY = parseFloat(document.getElementById("fixedPointY").value);
+      const length = parseFloat(document.getElementById("springLength").value);
+      const stiffness = parseFloat(document.getElementById("springStiffness").value);
+      const color = document.getElementById("springMassColor").value;
+      const mass = Bodies.circle(fixedX, fixedY + length, radius, { restitution, density: 0.001, render: { fillStyle: color } });
       const spring = Constraint.create({
+        pointA: { x: fixedX, y: fixedY },
         bodyB: mass,
+        length,
+        stiffness,
         damping: 0.05,
+        render: { strokeStyle: '#333', lineWidth: 2 }
       });
+      mass.elementType = "springMass";
+      mass.customOptions = { radius, restitution, fixedX, fixedY, length, stiffness, color };
+      mass.fixedPoint = { x: fixedX, y: fixedY };
       World.add(world, [mass, spring]);
     }
+    document.getElementById('addElement').addEventListener('click', () => {
       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();
     });
+    document.getElementById('reset').addEventListener('click', () => {
       World.clear(world);
       Engine.clear(engine);
       updateBoundaries();
+      const newMouse = Mouse.create(render.canvas);
+      const newMouseConstraint = MouseConstraint.create(engine, { mouse: newMouse, constraint: { stiffness: 0.2, render: { visible: false } } });
+      World.add(world, newMouseConstraint);
+      render.mouse = newMouse;
       hideEditPanel();
       hideConnectionPanel();
       hideConstraintEditPanel();
+      dataContent.textContent = "Select an element to view data.";
     });
     function openEditPanel(body) {
       selectedBody = body;
+      rightSidebar.classList.remove('hidden');
       let html = `<h3>Edit Element</h3>
+                  <label for="editPosX">Position X (m):</label><input type="number" id="editPosX" value="${body.position.x.toFixed(1)}" step="0.1">
+                  <label for="editPosY">Position Y (m):</label><input type="number" id="editPosY" value="${body.position.y.toFixed(1)}" step="0.1">
+                  <label for="editAngle">Angle (rad):</label><input type="number" id="editAngle" value="${body.angle.toFixed(2)}" step="0.01">
+                  <label for="editColor">Color:</label><input type="color" id="editColor" value="${body.render.fillStyle}">`;
+      if (body.elementType === "bouncingBall") {
+        const opts = body.customOptions;
+        html += `<label for="editBallRadius">Radius (m):</label><input type="number" id="editBallRadius" value="${opts.radius}" min="5">
+                 <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.01" min="0" max="1">`;
+      } else if (body.elementType === "pendulum") {
+        const opts = body.customOptions;
+        html += `<label for="editPendulumPivotX">Pivot X (m):</label><input type="number" id="editPendulumPivotX" value="${opts.pivotX}">
+                 <label for="editPendulumPivotY">Pivot Y (m):</label><input type="number" id="editPendulumPivotY" value="${opts.pivotY}">
+                 <label for="editPendulumBobRadius">Radius (m):</label><input type="number" id="editPendulumBobRadius" value="${opts.bobRadius}" min="5">
+                 <label for="editPendulumLength">Length (m):</label><input type="number" id="editPendulumLength" value="${opts.length}" min="50">
+                 <label for="editPendulumStiffness">Stiffness:</label><input type="number" id="editPendulumStiffness" value="${opts.stiffness}" step="0.1" min="0" max="1">`;
       }
+      html += `<div style="margin-top:15px;">
                  <button id="updateElement">Update</button>
                  <button id="deleteElement">Delete</button>
+                 <button id="connectElement">Connect</button>
                </div>`;
       editPanel.innerHTML = html;
       editPanel.style.display = "block";
+      connectionPanel.style.display = "none";
       document.getElementById("updateElement").addEventListener("click", updateElementFromEditPanel);
+      document.getElementById("deleteElement").addEventListener("click", () => { World.remove(world, selectedBody); hideEditPanel(); });
+      document.getElementById("connectElement").addEventListener("click", () => { attachMode = true; attachFrom = body; editPanel.style.display = "none"; connectionPanel.style.display = "block"; });
     }
+    function hideEditPanel() { editPanel.style.display = "none"; connectionPanel.style.display = "none"; rightSidebar.classList.add('hidden'); selectedBody = null; }
+    function hideConnectionPanel() { connectionPanel.style.display = "none"; attachMode = false; attachFrom = null; if (!selectedBody) rightSidebar.classList.add('hidden'); }
+    function hideConstraintEditPanel() { constraintEditPanel.style.display = "none"; selectedConstraint = 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);
       Body.setPosition(selectedBody, { x: newX, y: newY });
       Body.setAngle(selectedBody, newAngle);
       selectedBody.render.fillStyle = newColor;
+      if (selectedBody.elementType === "bouncingBall") {
+        const newRadius = parseFloat(document.getElementById("editBallRadius").value);
+        const newRestitution = parseFloat(document.getElementById("editBallRestitution").value);
+        const newFriction = parseFloat(document.getElementById("editBallFriction").value);
+        Body.scale(selectedBody, newRadius / selectedBody.circleRadius, newRadius / selectedBody.circleRadius);
+        selectedBody.restitution = newRestitution;
+        selectedBody.friction = newFriction;
+        selectedBody.customOptions = { ...selectedBody.customOptions, x: newX, y: newY, radius: newRadius, restitution: newRestitution, friction: newFriction, color: newColor };
       }
       hideEditPanel();
     }
+    render.canvas.addEventListener("dblclick", (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 && !clicked[0].isStatic) openEditPanel(clicked[0]);
+      else hideEditPanel();
     });
+    document.getElementById('cancelConn').addEventListener('click', hideConnectionPanel);
+    Events.on(mouseConstraint, 'mouseup', (event) => {
       const mousePos = event.mouse.position;
       const bodies = Matter.Composite.allBodies(world);
       const clickedBodies = Matter.Query.point(bodies, mousePos);
+      if (attachMode && clickedBodies.length > 0 && attachFrom && clickedBodies[0] !== attachFrom) {
+        const connType = document.getElementById('connType').value;
+        const sourceEndpoint = attachFrom.elementType === "springMass" ? document.getElementById('sourceEndpoint').value : "mass";
+        const targetBody = clickedBodies[0];
+        let pointA = sourceEndpoint === "fixed" ? attachFrom.fixedPoint : attachFrom.position;
+        let pointB = targetBody.elementType === "springMass" && confirm("Connect to fixed point?") ? targetBody.fixedPoint : targetBody.position;
+        const length = Math.hypot(pointB.x - pointA.x, pointB.y - pointA.y);
+        const stiffness = connType === "spring" ? 0.05 : (connType === "stick" ? 1 : 0.9);
+        const constraint = Constraint.create({
+          bodyA: sourceEndpoint === "mass" ? attachFrom : null,
+          pointA: sourceEndpoint === "fixed" ? pointA : { x: 0, y: 0 },
+          bodyB: targetBody.elementType === "springMass" && pointB === targetBody.fixedPoint ? null : targetBody,
+          pointB: targetBody.elementType === "springMass" && pointB === targetBody.fixedPoint ? pointB : { x: 0, y: 0 },
+          length,
+          stiffness,
+          render: { strokeStyle: '#333', lineWidth: 2 }
+        });
+        World.add(world, constraint);
+        hideConnectionPanel();
+      } else if (!clickedBodies.length) {
+        const constraints = Matter.Composite.allConstraints(world);
+        for (let cons of constraints) {
+          let posA = cons.bodyA ? Vector.add(cons.bodyA.position, cons.pointA) : cons.pointA;
+          let posB = cons.bodyB ? Vector.add(cons.bodyB.position, cons.pointB) : cons.pointB;
+          if (distanceToSegment(mousePos, posA, posB) < 5) {
+            showConstraintEditPanel(cons);
+            return;
+          }
+        }
+        hideConstraintEditPanel();
       }
     });
+    function distanceToSegment(p, v, w) {
+      const l2 = Vector.magnitudeSquared(Vector.sub(w, v));
+      if (l2 === 0) return Math.hypot(p.x - v.x, p.y - v.y);
+      let t = Math.max(0, Math.min(1, ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2));
+      const proj = Vector.add(v, Vector.mult(Vector.sub(w, v), t));
       return Math.hypot(p.x - proj.x, p.y - proj.y);
     }
+    function showConstraintEditPanel(cons) {
       selectedConstraint = cons;
+      let posA = cons.bodyA ? Vector.add(cons.bodyA.position, cons.pointA) : cons.pointA;
+      let posB = cons.bodyB ? Vector.add(cons.bodyB.position, cons.pointB) : cons.pointB;
+      document.getElementById('consA_X').value = posA.x.toFixed(1);
+      document.getElementById('consA_Y').value = posA.y.toFixed(1);
+      document.getElementById('consB_X').value = posB.x.toFixed(1);
+      document.getElementById('consB_Y').value = posB.y.toFixed(1);
+      document.getElementById('consType').value = cons.stiffness < 0.1 ? "spring" : (cons.stiffness > 0.95 ? "stick" : "string");
       constraintEditPanel.style.display = "block";
     }
+    document.getElementById('updateConstraint').addEventListener('click', () => {
+      if (selectedConstraint) {
+        const aX = parseFloat(document.getElementById('consA_X').value);
+        const aY = parseFloat(document.getElementById('consA_Y').value);
+        const bX = parseFloat(document.getElementById('consB_X').value);
+        const bY = parseFloat(document.getElementById('consB_Y').value);
+        const connType = document.getElementById('consType').value;
+        if (!selectedConstraint.bodyA) selectedConstraint.pointA = { x: aX, y: aY };
+        if (!selectedConstraint.bodyB) selectedConstraint.pointB = { x: bX, y: bY };
+        selectedConstraint.stiffness = connType === "spring" ? 0.05 : (connType === "stick" ? 1 : 0.9);
+        selectedConstraint.length = Math.hypot(bX - aX, bY - aY);
         hideConstraintEditPanel();
       }
     });
+    document.getElementById('deleteConstraint').addEventListener('click', () => {
+      if (selectedConstraint) {
         World.remove(world, selectedConstraint);
         hideConstraintEditPanel();
       }
     });
+    Events.on(engine, 'afterUpdate', () => {
+      if (selectedBody && !selectedBody.isStatic) {
+        const v = selectedBody.velocity;
+        const ke = 0.5 * selectedBody.mass * (v.x * v.x + v.y * v.y);
+        const pe = selectedBody.elementType === "springMass" ?
+          0.5 * selectedBody.constraints[0].stiffness * Math.pow(Vector.magnitude(Vector.sub(selectedBody.position, selectedBody.fixedPoint)) - selectedBody.customOptions.length, 2) :
+          selectedBody.mass * engine.gravity.y * (window.innerHeight - selectedBody.position.y);
+        dataContent.innerHTML = `
+          Position: (${selectedBody.position.x.toFixed(1)}, ${selectedBody.position.y.toFixed(1)}) m<br>
+          Velocity: (${v.x.toFixed(1)}, ${v.y.toFixed(1)}) m/s<br>
+          Kinetic Energy: ${ke.toFixed(2)} J<br>
+          Potential Energy: ${pe.toFixed(2)} J<br>
+          Total Energy: ${(ke + pe).toFixed(2)} J
+        `;
+      }
+    });
+    window.addEventListener('resize', () => {
+      render.canvas.width = window.innerWidth;
+      render.canvas.height = window.innerHeight;
       Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: window.innerWidth, y: window.innerHeight } });
       updateBoundaries();
     });
   </script>
 </body>
+</html>