Skip to content

Commit

Permalink
Added Kinematics Calculator (#1849)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shraddhha
shraddhha authored Dec 2, 2024
1 parent ce612c6 commit 46220e9
Show file tree
Hide file tree
Showing 5 changed files with 465 additions and 0 deletions.
22 changes: 22 additions & 0 deletions Calculators/Kinematics-Calculator/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# <p align="center">Kinematics Calculator</p>

## Description :-

Computes and visualizes 1D, 2D, and 3D motion with velocity-time graphs.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

### 1D Kinematics
![image](https://github.com/user-attachments/assets/d0d33da5-47d3-4636-886c-4b7aab61a3da)

### 2D Kinematics
![image](https://github.com/user-attachments/assets/973bfa0d-004d-47bc-b378-2c6a9cb478ea)

### 3D Kinematics
![image](https://github.com/user-attachments/assets/943de278-d67d-4d1e-9986-3c000085b658)
97 changes: 97 additions & 0 deletions Calculators/Kinematics-Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="style.css">
<title>Kinematics Calculator</title>
</head>

<body>

<div class="kinematics-container">
<h2>Kinematics Calculator</h2>

<select id="dimension-select" onchange="showSelectedDimension()">
<option value="1d">1D Kinematics</option>
<option value="2d">2D Kinematics</option>
<option value="3d">3D Kinematics</option>
</select>

<div id="1d-section" class="input-section">
<h3>1D Kinematics</h3>
<label for="v0-1d">Initial Velocity (v0):</label>
<input type="text" id="v0-1d" placeholder="Enter v0">
<label for="a-1d">Acceleration (a):</label>
<input type="text" id="a-1d" placeholder="Enter a">
<label for="t-1d">Time (t):</label>
<input type="text" id="t-1d" placeholder="Enter t">
<label for="s-1d">Displacement (s):</label>
<input type="text" id="s-1d" placeholder="Enter s">
<button onclick="calculate1D()">Calculate 1D</button>
</div>

<div id="2d-section" class="input-section hidden">
<h3>2D Kinematics</h3>
<label for="v0x-2d">Initial Velocity X (v0x):</label>
<input type="text" id="v0x-2d" placeholder="Enter v0x">
<label for="v0y-2d">Initial Velocity Y (v0y):</label>
<input type="text" id="v0y-2d" placeholder="Enter v0y">
<label for="ax-2d">Acceleration X (ax):</label>
<input type="text" id="ax-2d" placeholder="Enter ax">
<label for="ay-2d">Acceleration Y (ay):</label>
<input type="text" id="ay-2d" placeholder="Enter ay">
<label for="t-2d">Time (t):</label>
<input type="text" id="t-2d" placeholder="Enter t">
<label for="sx-2d">Displacement X (sx):</label>
<input type="text" id="sx-2d" placeholder="Enter sx">
<label for="sy-2d">Displacement Y (sy):</label>
<input type="text" id="sy-2d" placeholder="Enter sy">
<button onclick="calculate2D()">Calculate 2D</button>
</div>

<div id="3d-section" class="input-section hidden">
<h3>3D Kinematics</h3>
<label for="v0x-3d">Initial Velocity X (v0x):</label>
<input type="text" id="v0x-3d" placeholder="Enter v0x">
<label for="v0y-3d">Initial Velocity Y (v0y):</label>
<input type="text" id="v0y-3d" placeholder="Enter v0y">
<label for="v0z-3d">Initial Velocity Z (v0z):</label>
<input type="text" id="v0z-3d" placeholder="Enter v0z">
<label for="ax-3d">Acceleration X (ax):</label>
<input type="text" id="ax-3d" placeholder="Enter ax">
<label for="ay-3d">Acceleration Y (ay):</label>
<input type="text" id="ay-3d" placeholder="Enter ay">
<label for="az-3d">Acceleration Z (az):</label>
<input type="text" id="az-3d" placeholder="Enter az">
<label for="t-3d">Time (t):</label>
<input type="text" id="t-3d" placeholder="Enter t">
<label for="sx-3d">Displacement X (sx):</label>
<input type="text" id="sx-3d" placeholder="Enter sx">
<label for="sy-3d">Displacement Y (sy):</label>
<input type="text" id="sy-3d" placeholder="Enter sy">
<label for="sz-3d">Displacement Z (sz):</label>
<input type="text" id="sz-3d" placeholder="Enter sz">
<button onclick="calculate3D()">Calculate 3D</button>
</div>

<div class="result-section">
<h3>Results</h3>
<label for="final-velocity">Final Velocity:</label>
<input type="text" id="final-velocity" readonly>
<label for="displacement">Displacement:</label>
<input type="text" id="displacement" readonly>
</div>

<div class="graph-section">
<h3>Graph</h3>
<canvas id="motion-graph"></canvas>
</div>
</div>

<script src="script.js"></script>
</body>

</html>
237 changes: 237 additions & 0 deletions Calculators/Kinematics-Calculator/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
function showSelectedDimension() {
const dimension = document.getElementById('dimension-select').value;
document.getElementById('1d-section').classList.add('hidden');
document.getElementById('2d-section').classList.add('hidden');
document.getElementById('3d-section').classList.add('hidden');
document.getElementById(`${dimension}-section`).classList.remove('hidden');
}

function calculate1D() {
var v0 = parseFloat(document.getElementById('v0-1d').value);
var a = parseFloat(document.getElementById('a-1d').value);
var t = parseFloat(document.getElementById('t-1d').value);

var finalVelocity = v0 + a * t;
var displacement = v0 * t + 0.5 * a * t * t;

document.getElementById('final-velocity').value = finalVelocity.toFixed(2);
document.getElementById('displacement').value = displacement.toFixed(2);

plotGraph1D(v0, a, t);
}

function calculate2D() {
var v0x = parseFloat(document.getElementById('v0x-2d').value);
var v0y = parseFloat(document.getElementById('v0y-2d').value);
var ax = parseFloat(document.getElementById('ax-2d').value);
var ay = parseFloat(document.getElementById('ay-2d').value);
var t = parseFloat(document.getElementById('t-2d').value);

var vx = v0x + ax * t;
var vy = v0y + ay * t;

var finalVelocity = Math.sqrt(vx * vx + vy * vy);
var displacementX = v0x * t + 0.5 * ax * t * t;
var displacementY = v0y * t + 0.5 * ay * t * t;
var displacement = Math.sqrt(displacementX * displacementX + displacementY * displacementY);

document.getElementById('final-velocity').value = finalVelocity.toFixed(2);
document.getElementById('displacement').value = displacement.toFixed(2);

plotGraph2D(v0x, v0y, ax, ay, t);
}

function calculate3D() {
var v0x = parseFloat(document.getElementById('v0x-3d').value);
var v0y = parseFloat(document.getElementById('v0y-3d').value);
var v0z = parseFloat(document.getElementById('v0z-3d').value);
var ax = parseFloat(document.getElementById('ax-3d').value);
var ay = parseFloat(document.getElementById('ay-3d').value);
var az = parseFloat(document.getElementById('az-3d').value);
var t = parseFloat(document.getElementById('t-3d').value);

var vx = v0x + ax * t;
var vy = v0y + ay * t;
var vz = v0z + az * t;

var finalVelocity = Math.sqrt(vx * vx + vy * vy + vz * vz);
var displacementX = v0x * t + 0.5 * ax * t * t;
var displacementY = v0y * t + 0.5 * ay * t * t;
var displacementZ = v0z * t + 0.5 * az * t * t;
var displacement = Math.sqrt(displacementX * displacementX + displacementY * displacementY + displacementZ * displacementZ);

document.getElementById('final-velocity').value = finalVelocity.toFixed(2);
document.getElementById('displacement').value = displacement.toFixed(2);

plotGraph3D(v0x, v0y, v0z, ax, ay, az, t);
}

function plotGraph1D(v0, a, t) {
var time = [];
var velocity = [];
var displacement = [];
for (var i = 0; i <= t; i += 0.1) {
time.push(i);
velocity.push(v0 + a * i);
displacement.push(v0 * i + 0.5 * a * i * i);
}

var ctx = document.getElementById('motion-graph').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
label: 'Velocity (m/s)',
data: velocity,
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}, {
label: 'Displacement (m)',
data: displacement,
borderColor: 'rgba(255, 99, 132, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
x: {
display: true,
title: {
display: true,
text: 'Time (s)'
}
},
y: {
display: true,
title: {
display: true,
text: 'Value'
}
}
}
}
});
}

function plotGraph2D(v0x, v0y, ax, ay, t) {
var time = [];
var velocityX = [];
var velocityY = [];
var displacementX = [];
var displacementY = [];
for (var i = 0; i <= t; i += 0.1) {
time.push(i);
velocityX.push(v0x + ax * i);
velocityY.push(v0y + ay * i);
displacementX.push(v0x * i + 0.5 * ax * i * i);
displacementY.push(v0y * i + 0.5 * ay * i * i);
}

var ctx = document.getElementById('motion-graph').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
label: 'Velocity X (m/s)',
data: velocityX,
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}, {
label: 'Velocity Y (m/s)',
data: velocityY,
borderColor: 'rgba(255, 99, 132, 1)',
fill: false
}, {
label: 'Displacement X (m)',
data: displacementX,
borderColor: 'rgba(54, 162, 235, 1)',
fill: false
}, {
label: 'Displacement Y (m)',
data: displacementY,
borderColor: 'rgba(255, 206, 86, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
x: {
display: true,
title: {
display: true,
text: 'Time (s)'
}
},
y: {
display: true,
title: {
display: true,
text: 'Value'
}
}
}
}
});
}

function plotGraph3D(v0x, v0y, v0z, ax, ay, az, t) {
var time = [];
var velocityMagnitude = [];
var displacementMagnitude = [];
for (var i = 0; i <= t; i += 0.1) {
time.push(i);
var vx = v0x + ax * i;
var vy = v0y + ay * i;
var vz = v0z + az * i;
velocityMagnitude.push(Math.sqrt(vx * vx + vy * vy + vz * vz));
var dx = v0x * i + 0.5 * ax * i * i;
var dy = v0y * i + 0.5 * ay * i * i;
var dz = v0z * i + 0.5 * az * i * i;
displacementMagnitude.push(Math.sqrt(dx * dx + dy * dy + dz * dz));
}

var ctx = document.getElementById('motion-graph').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
label: 'Velocity Magnitude (m/s)',
data: velocityMagnitude,
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}, {
label: 'Displacement Magnitude (m)',
data: displacementMagnitude,
borderColor: 'rgba(255, 99, 132, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
x: {
display: true,
title: {
display: true,
text: 'Time (s)'
}
},
y: {
display: true,
title: {
display: true,
text: 'Value'
}
}
}
}
});
}

// Initialize with 1D section visible
showSelectedDimension();
Loading

0 comments on commit 46220e9

Please sign in to comment.