Spaces:

Ramesh-vani
/

phy

Running

App Files Files Community

Ramesh-vani commited on Feb 25

Commit

2df038e

verified ·

1 Parent(s): cc20f6c

Update index.html

Browse files

Files changed (1) hide show

index.html +147 -496

index.html CHANGED Viewed

@@ -2,12 +2,12 @@
 <html lang="hi">
 <head>
   <meta charset="UTF-8">
-  <title>Responsive Physics Simulator with Menus on Top</title>
   <style>
     body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
     /* Full-page canvas */
     canvas { display: block; }
-    /* Controls Panel (Menus) – z-index high to always appear on top */
     #controls {
       position: absolute;
       top: 10px;
@@ -24,8 +24,7 @@
     #controls input, #controls select, #controls button {
       width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
     }
-    #buttonContainer { display: flex; justify-content: space-between; }
-    /* Edit Panel – Always on top */
     #editPanel {
       position: absolute;
       top: 10px;
@@ -44,7 +43,7 @@
     #editPanel input, #editPanel select, #editPanel button {
       width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
     }
-    /* Connection Options Panel */
     #connectionPanel {
       position: absolute;
       top: 150px;
@@ -61,92 +60,57 @@
     #connectionPanel input, #connectionPanel select, #connectionPanel button {
       width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
     }
-    /* Constraint Edit Panel */
-    #constraintEditPanel {
-      position: absolute;
-      bottom: 10px;
-      right: 10px;
-      z-index: 1000;
-      background: rgba(255,255,255,0.95);
-      padding: 10px;
-      border-radius: 5px;
-      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 (Menus) -->
   <div id="controls">
-    <label for="simulationSelect">Simulation Element Chunein:</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>
-    <!-- Dynamic Suboptions Container -->
-    <div id="subOptionsContainer"></div>
-    <div id="buttonContainer">
-      <button id="addElement">Add Element</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>
-    <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;">Ab target element par click karein jisse attach karna hai.</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 and Script -->
   <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,
@@ -158,6 +122,7 @@
           MouseConstraint = Matter.MouseConstraint,
           Events = Matter.Events;
     const engine = Engine.create();
     const world = engine.world;
     const render = Render.create({
@@ -174,16 +139,13 @@
     const runner = Runner.create();
     Runner.run(runner, engine);
-    // Global variables for boundaries (declare as let so we can update them)
     let floor, wallLeft, wallRight;
-    // Function to create/update boundaries based on current window dimensions
     function updateBoundaries() {
-      // Agar boundaries already exist, remove unhein
-      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' }
       });
@@ -191,7 +153,6 @@
       wallRight = Bodies.rectangle(window.innerWidth+50, window.innerHeight/2, 100, window.innerHeight, { isStatic: true });
       World.add(world, [floor, wallLeft, wallRight]);
     }
-    // Initial boundaries creation
     updateBoundaries();
     // Mouse control for drag & drop
@@ -203,331 +164,107 @@
     World.add(world, mouseConstraint);
     render.mouse = mouse;
-    // Global Variables for Editing & Attachment
     let selectedBody = null;
-    let selectedConstraint = null;
     let attachMode = false;
     let attachFrom = null;
-    const connectionPanel = document.getElementById('connectionPanel');
-    const editPanel = document.getElementById('editPanel');
-    // Helper function for 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">
-         `;
       }
-      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 };
-      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 };
-      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 };
-      Body.setVelocity(proj, { x: velX, y: velY });
-      World.add(world, proj);
-    }
-    function addInclinedPlane(){
-      // Do bodies: ek ramp (static) aur ek block.
-      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 };
-      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 };
-      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 };
-      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]);
     }
-    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();
     });
-    document.getElementById('reset').addEventListener('click', function(){
       World.clear(world);
       Engine.clear(engine);
-      // Re-create boundaries on reset
       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 Functions (Double–Click to Open) ---------- */
     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'}">`;
-      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">`;
-      } else if(body.elementType === "pendulum"){
-         const opts = body.customOptions;
-         html += `<label for="editPendulumPivotX">Pivot X:</label>
-                  <input type="number" id="editPendulumPivotX" value="${opts.pivotX}">
-                  <label for="editPendulumPivotY">Pivot Y:</label>
-                  <input type="number" id="editPendulumPivotY" value="${opts.pivotY}">
-                  <label for="editPendulumBobRadius">Bob Radius:</label>
-                  <input type="number" id="editPendulumBobRadius" value="${opts.bobRadius}">
-                  <label for="editPendulumLength">Length:</label>
-                  <input type="number" id="editPendulumLength" value="${opts.pendulumLength}">
-                  <label for="editPendulumStiffness">Stiffness:</label>
-                  <input type="number" id="editPendulumStiffness" value="${opts.stiffness}" step="0.1" min="0" max="1">
-                  <label for="editPendulumBobColor">Bob Color:</label>
-                  <input type="color" id="editPendulumBobColor" value="${opts.bobColor}">`;
-      } else if(body.elementType === "projectile"){
-         const opts = body.customOptions;
-         html += `<label for="editProjectileRadius">Radius:</label>
-                  <input type="number" id="editProjectileRadius" value="${opts.radius}">
-                  <label for="editProjectileVelX">Velocity X:</label>
-                  <input type="number" id="editProjectileVelX" value="${opts.velX}">
-                  <label for="editProjectileVelY">Velocity Y:</label>
-                  <input type="number" id="editProjectileVelY" value="${opts.velY}">`;
-      } else if(body.elementType === "inclinedPlane_ramp"){
-         const opts = body.customOptions;
-         html += `<label for="editRampWidth">Ramp Width:</label>
-                  <input type="number" id="editRampWidth" value="${opts.rampWidth}">
-                  <label for="editRampHeight">Ramp Height:</label>
-                  <input type="number" id="editRampHeight" value="${opts.rampHeight}">
-                  <label for="editRampAngle">Ramp Angle (°):</label>
-                  <input type="number" id="editRampAngle" value="${opts.angleDeg}">
-                  <label for="editRampX">Ramp X:</label>
-                  <input type="number" id="editRampX" value="${opts.rampX}">
-                  <label for="editRampY">Ramp Y:</label>
-                  <input type="number" id="editRampY" value="${opts.rampY}">
-                  <label for="editRampColor">Ramp Color:</label>
-                  <input type="color" id="editRampColor" value="${opts.rampColor}">`;
-      } else if(body.elementType === "inclinedPlane_block"){
-         const opts = body.customOptions;
-         html += `<label for="editBlockWidth">Block Width:</label>
-                  <input type="number" id="editBlockWidth" value="${opts.blockWidth}">
-                  <label for="editBlockHeight">Block Height:</label>
-                  <input type="number" id="editBlockHeight" value="${opts.blockHeight}">
-                  <label for="editBlockFriction">Block Friction:</label>
-                  <input type="number" id="editBlockFriction" value="${opts.blockFriction}" step="0.01" min="0" max="1">
-                  <label for="editBlockColor">Block Color:</label>
-                  <input type="color" id="editBlockColor" value="${opts.blockColor}">`;
-      } else if(body.elementType === "springMass"){
-         const opts = body.customOptions;
-         html += `<label for="editSpringMassRadius">Mass Radius:</label>
-                  <input type="number" id="editSpringMassRadius" value="${opts.massRadius}">
-                  <label for="editSpringMassRestitution">Restitution:</label>
-                  <input type="number" id="editSpringMassRestitution" value="${opts.massRestitution}" step="0.1" min="0" max="1">
-                  <label for="editFixedPointX">Fixed X:</label>
-                  <input type="number" id="editFixedPointX" value="${opts.fixedPointX}">
-                  <label for="editFixedPointY">Fixed Y:</label>
-                  <input type="number" id="editFixedPointY" value="${opts.fixedPointY}">
-                  <label for="editSpringLength">Spring Length:</label>
-                  <input type="number" id="editSpringLength" value="${opts.springLength}">
-                  <label for="editSpringStiffness">Spring Stiffness:</label>
-                  <input type="number" id="editSpringStiffness" value="${opts.springStiffness}" step="0.01" min="0" max="1">
-                  <label for="editSpringMassColor">Mass Color:</label>
-                  <input type="color" id="editSpringMassColor" value="${opts.massColor}">`;
-      }
-      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() {
@@ -543,150 +280,64 @@
       Body.setPosition(selectedBody, { x: newX, y: newY });
       Body.setAngle(selectedBody, newAngle);
       selectedBody.render.fillStyle = newColor;
-      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 };
-      }
-      // (Update code for other types as needed...)
       hideEditPanel();
     }
-    // Open edit panel on double–click on an element
     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();
-      }
     });
-    /* ---------- Constraint & Connection Panels (Same as previous example) ---------- */
-    document.getElementById('cancelConn').addEventListener('click', function(){
-      connectionPanel.style.display = "none";
-      attachMode = false;
-      attachFrom = null;
-    });
-    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 && attachFrom && clickedBody !== attachFrom){
-            const connType = document.getElementById('connType').value;
-            let sourceEndpoint = "mass";
-            if(attachFrom.elementType === "springMass"){
-               sourceEndpoint = document.getElementById('sourceEndpoint').value;
-            }
-            let targetEndpoint = "mass";
-            if(clickedBody.elementType === "springMass"){
-               targetEndpoint = prompt("Target springMass: 'fixed' ya 'mass' (default mass):", "mass") || "mass";
-               if(targetEndpoint !== "fixed") { targetEndpoint = "mass"; }
-            }
-            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 };
-            }
-            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.");
-         }
-      } else {
-         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();
-      }
-    });
-    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);
-    }
-    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 event: update renderer and boundaries
-    window.addEventListener('resize', function(){
       Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: window.innerWidth, y: window.innerHeight } });
       updateBoundaries();
     });

 <html lang="hi">
 <head>
   <meta charset="UTF-8">
+  <title>Responsive Physics Simulator with Flexible Attachments</title>
   <style>
     body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
     /* Full-page canvas */
     canvas { display: block; }
+    /* Controls Panel – always on top */
     #controls {
       position: absolute;
       top: 10px;
     #controls input, #controls select, #controls button {
       width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
     }
+    /* Edit Panel – appears on double–click */
     #editPanel {
       position: absolute;
       top: 10px;
     #editPanel input, #editPanel select, #editPanel button {
       width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
     }
+    /* Connection Panel – for attachments */
     #connectionPanel {
       position: absolute;
       top: 150px;
     #connectionPanel input, #connectionPanel select, #connectionPanel button {
       width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
     }
   </style>
 </head>
 <body>
+  <!-- Controls Panel -->
   <div id="controls">
+    <label for="elementType">Element Type:</label>
+    <select id="elementType">
+      <option value="block">Block (Rectangle)</option>
+      <option value="circle">Circle</option>
     </select>
+    <label for="initX">Initial X:</label>
+    <input type="number" id="initX" value="150">
+    <label for="initY">Initial Y:</label>
+    <input type="number" id="initY" value="100">
+    <!-- For block -->
+    <div id="blockOptions">
+      <label for="blockWidth">Width:</label>
+      <input type="number" id="blockWidth" value="80">
+      <label for="blockHeight">Height:</label>
+      <input type="number" id="blockHeight" value="60">
+    </div>
+    <!-- For circle -->
+    <div id="circleOptions" style="display:none;">
+      <label for="circleRadius">Radius:</label>
+      <input type="number" id="circleRadius" value="30">
     </div>
+    <label for="initColor">Color:</label>
+    <input type="color" id="initColor" value="#3498db">
+    <button id="addElement">Add Element</button>
+    <button id="reset">Reset Simulation</button>
   </div>
+  <!-- Edit Panel (opens on double–click) -->
   <div id="editPanel"></div>
+  <!-- Connection Panel (for attachments) -->
   <div id="connectionPanel">
+    <h3>Attachment Options</h3>
     <label for="connType">Connection Type:</label>
     <select id="connType">
       <option value="spring">Spring</option>
       <option value="string">String</option>
     </select>
+    <button id="cancelConn">Cancel Attachment</button>
+    <p style="font-size:12px; color:#555;">Ab target element par click karein.</p>
   </div>
+  <!-- Matter.js Library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
   <script>
+    // Module aliases
     const Engine = Matter.Engine,
           Render = Matter.Render,
           Runner = Matter.Runner,
           MouseConstraint = Matter.MouseConstraint,
           Events = Matter.Events;
+    // Create engine and world
     const engine = Engine.create();
     const world = engine.world;
     const render = Render.create({
     const runner = Runner.create();
     Runner.run(runner, engine);
+    // Global boundaries (will 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' }
       });
       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
     World.add(world, mouseConstraint);
     render.mouse = mouse;
+    // Global variables for editing & attachment
     let selectedBody = null;
     let attachMode = false;
     let attachFrom = null;
+    const editPanel = document.getElementById("editPanel");
+    const connectionPanel = document.getElementById("connectionPanel");
+    // Helper: random color
     function getRandomColor() {
       return '#' + Math.floor(Math.random()*16777215).toString(16);
     }
+    // Toggle suboptions based on element type
+    const elementTypeSelect = document.getElementById("elementType");
+    elementTypeSelect.addEventListener("change", function(){
+      if(this.value === "block"){
+        document.getElementById("blockOptions").style.display = "block";
+        document.getElementById("circleOptions").style.display = "none";
+      } else {
+        document.getElementById("blockOptions").style.display = "none";
+        document.getElementById("circleOptions").style.display = "block";
       }
+    });
+    // Functions to add elements
+    function addBlock(){
+      const x = parseFloat(document.getElementById("initX").value);
+      const y = parseFloat(document.getElementById("initY").value);
+      const width = parseFloat(document.getElementById("blockWidth").value);
+      const height = parseFloat(document.getElementById("blockHeight").value);
+      const color = document.getElementById("initColor").value || getRandomColor();
+      const block = Bodies.rectangle(x, y, width, height, {
+        restitution: 0.1,
+        friction: 0.5,
+        render: { fillStyle: color }
       });
+      // Store creation options for later editing
+      block.customOptions = { x, y, width, height, color };
+      block.elementType = "block";
+      World.add(world, block);
     }
+    function addCircle(){
+      const x = parseFloat(document.getElementById("initX").value);
+      const y = parseFloat(document.getElementById("initY").value);
+      const radius = parseFloat(document.getElementById("circleRadius").value);
+      const color = document.getElementById("initColor").value || getRandomColor();
+      const circle = Bodies.circle(x, y, radius, {
+        restitution: 0.9,
+        friction: 0.005,
+        render: { fillStyle: color }
       });
+      circle.customOptions = { x, y, radius, color };
+      circle.elementType = "circle";
+      World.add(world, circle);
     }
+    document.getElementById("addElement").addEventListener("click", function(){
+      if(elementTypeSelect.value === "block") addBlock();
+      else addCircle();
     });
+    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();
     });
+    // Edit Panel functions – open on double–click
     function openEditPanel(body) {
       selectedBody = body;
       let html = `<h3>Edit Element</h3>
+                  <label>Position X:</label>
                   <input type="number" id="editPosX" value="${body.position.x.toFixed(2)}">
+                  <label>Position Y:</label>
                   <input type="number" id="editPosY" value="${body.position.y.toFixed(2)}">
+                  <label>Angle (radians):</label>
                   <input type="number" id="editAngle" value="${body.angle.toFixed(2)}">
+                  <label>Color:</label>
+                  <input type="color" id="editColor" value="${body.render.fillStyle || '#ffffff'}">
+                  <button id="updateElement">Update</button>
+                  <button id="deleteElement">Delete</button>
+                  <button id="attachElement">Attach</button>`;
       editPanel.innerHTML = html;
       editPanel.style.display = "block";
       document.getElementById("updateElement").addEventListener("click", updateElementFromEditPanel);
       document.getElementById("deleteElement").addEventListener("click", function(){
+        World.remove(world, selectedBody);
+        hideEditPanel();
+      });
+      document.getElementById("attachElement").addEventListener("click", function(){
+        attachMode = true;
+        attachFrom = selectedBody;
+        hideEditPanel();
+        connectionPanel.style.display = "block";
       });
     }
     function hideEditPanel() {
       Body.setPosition(selectedBody, { x: newX, y: newY });
       Body.setAngle(selectedBody, newAngle);
       selectedBody.render.fillStyle = newColor;
       hideEditPanel();
     }
+    // Open edit panel on double–click (using canvas dblclick)
     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(); }
     });
+    // Attachment (Connection) creation:
+    // When attachMode is true and user clicks on a target body,
+    // create a constraint between attachFrom and that body using selected connection type.
+    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(attachMode && attachFrom && clickedBodies.length > 0) {
+        const target = clickedBodies[0];
+        if(target === attachFrom) return;
+        const connType = document.getElementById("connType").value;
+        // Default endpoints: attach from centers
+        const pointA = { x: 0, y: 0 };
+        const pointB = { x: 0, y: 0 };
+        // Compute current distance between centers
+        const dx = target.position.x - attachFrom.position.x;
+        const dy = target.position.y - attachFrom.position.y;
+        const length = Math.sqrt(dx*dx + dy*dy);
+        // Set stiffness based on connection type:
+        let stiffness = (connType === "spring") ? 0.05 : 1;
+        let damping = (connType === "spring") ? 0.05 : 0;
+        const newConstraint = Constraint.create({
+          bodyA: attachFrom,
+          pointA: pointA,
+          bodyB: target,
+          pointB: pointB,
+          length: length,
+          stiffness: stiffness,
+          damping: damping,
+          render: { strokeStyle: '#000', lineWidth: 2 }
+        });
+        World.add(world, newConstraint);
+        attachMode = false;
+        attachFrom = null;
+        connectionPanel.style.display = "none";
+        alert("Attachment created (" + connType + ").");
       }
     });
+    document.getElementById("cancelConn").addEventListener("click", function(){
+      connectionPanel.style.display = "none";
+      attachMode = false;
+      attachFrom = null;
     });
+    // Update boundaries and renderer on window resize
+    window.addEventListener("resize", function(){
       Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: window.innerWidth, y: window.innerHeight } });
       updateBoundaries();
     });