|
|
<!DOCTYPE html> |
|
|
<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; } |
|
|
|
|
|
canvas { display: block; } |
|
|
|
|
|
#controls { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
z-index: 1000; |
|
|
background: rgba(255,255,255,0.95); |
|
|
padding: 10px; |
|
|
border-radius: 5px; |
|
|
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; } |
|
|
|
|
|
#editPanel { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
z-index: 1000; |
|
|
background: rgba(255,255,255,0.95); |
|
|
padding: 10px; |
|
|
border-radius: 5px; |
|
|
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; |
|
|
} |
|
|
|
|
|
#connectionPanel { |
|
|
position: absolute; |
|
|
top: 150px; |
|
|
right: 10px; |
|
|
z-index: 1000; |
|
|
background: rgba(255,255,255,0.95); |
|
|
padding: 10px; |
|
|
border-radius: 5px; |
|
|
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; |
|
|
} |
|
|
|
|
|
#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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<div id="subOptionsContainer"></div> |
|
|
<div id="buttonContainer"> |
|
|
<button id="addElement">Add Element</button> |
|
|
<button id="reset">Reset Simulation</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="editPanel"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script> |
|
|
<script> |
|
|
// Module aliases and Engine Setup |
|
|
const Engine = Matter.Engine, |
|
|
Render = Matter.Render, |
|
|
Runner = Matter.Runner, |
|
|
World = Matter.World, |
|
|
Bodies = Matter.Bodies, |
|
|
Body = Matter.Body, |
|
|
Constraint = Matter.Constraint, |
|
|
Mouse = Matter.Mouse, |
|
|
MouseConstraint = Matter.MouseConstraint, |
|
|
Events = Matter.Events; |
|
|
|
|
|
const engine = Engine.create(); |
|
|
const world = engine.world; |
|
|
const render = Render.create({ |
|
|
element: document.body, |
|
|
engine: engine, |
|
|
options: { |
|
|
width: window.innerWidth, |
|
|
height: window.innerHeight, |
|
|
wireframes: false, |
|
|
background: '#f0f0f0' |
|
|
} |
|
|
}); |
|
|
Render.run(render); |
|
|
const runner = Runner.create(); |
|
|
Runner.run(runner, engine); |
|
|
|
|
|
// Global 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' } |
|
|
}); |
|
|
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]); |
|
|
} |
|
|
// Initial boundaries creation |
|
|
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 & 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() { |
|
|
editPanel.style.display = "none"; |
|
|
selectedBody = null; |
|
|
} |
|
|
function updateElementFromEditPanel(){ |
|
|
if(!selectedBody) return; |
|
|
const newX = parseFloat(document.getElementById("editPosX").value); |
|
|
const newY = parseFloat(document.getElementById("editPosY").value); |
|
|
const newAngle = parseFloat(document.getElementById("editAngle").value); |
|
|
const newColor = document.getElementById("editColor").value; |
|
|
Body.setPosition(selectedBody, { x: newX, y: newY }); |
|
|
Body.setAngle(selectedBody, newAngle); |
|
|
selectedBody.render.fillStyle = newColor; |
|
|
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(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
