Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Kinematics Calculator #1849

Merged
merged 9 commits into from
Dec 2, 2024
Merged

Added Kinematics Calculator #1849

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
afac45a
Added kinematics calculator
shraddhha Aug 10, 2024
0996c9d
Merge branch 'main' into main
Rakesh9100 Dec 2, 2024
0d7f4e8
Delete .history directory
Rakesh9100 Dec 2, 2024
03f009e
Delete .vscode directory
Rakesh9100 Dec 2, 2024
a054266
Update and rename scripts.js to script.js
Rakesh9100 Dec 2, 2024
4c3e1ff
Update and rename styles.css to style.css
Rakesh9100 Dec 2, 2024
7b30fe7
Update and rename index.html to index.html
Rakesh9100 Dec 2, 2024
25608bd
Update index.html
Rakesh9100 Dec 2, 2024
12f0bbd
Create README.md
Rakesh9100 Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added .history/Calculators/Kinematics-calculator/index_20240810203729.html
View file
Open in desktop
Empty file.
91 changes: 91 additions & 0 deletions .history/Calculators/Kinematics-calculator/index_20240810204157.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">

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

<body>

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

<div 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</button>
</div>

<div class="input-section">
<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</button>
</div>

<div class="input-section">
<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</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="scripts.js"></script>
</body>

</html>
Empty file added .history/Calculators/Kinematics-calculator/scripts_20240810203826.js
View file
Open in desktop
Empty file.
140 changes: 140 additions & 0 deletions .history/Calculators/Kinematics-calculator/scripts_20240810204157.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
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;
document.getElementById('final-velocity').value = finalVelocity.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);
document.getElementById('final-velocity').value = finalVelocity.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);
document.getElementById('final-velocity').value = finalVelocity.toFixed(2);

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

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

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

function plotGraph2D(v0x, v0y, ax, ay, t) {
var time = [];
var velocity = [];
for (var i = 0; i <= t; i++) {
var vx = v0x + ax * i;
var vy = v0y + ay * i;
velocity.push(Math.sqrt(vx * vx + vy * vy));
time.push(i);
}

var ctx = document.getElementById('motion-graph').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
label: 'Velocity vs Time (2D)',
data: velocity,
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: 'Velocity (m/s)' } }
}
}
});
}

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

var ctx = document.getElementById('motion-graph').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
label: 'Velocity vs Time (3D)',
data: velocity,
borderColor: 'rgba(54, 162, 235, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
x: { display: true, title: { display: true, text: 'Time (s)' } },
y: { display: true, title: { display: true, text: 'Velocity (m/s)' } }
}
}
});
}
Empty file added .history/Calculators/Kinematics-calculator/styles_20240810203806.css
View file
Open in desktop
Empty file.
62 changes: 62 additions & 0 deletions .history/Calculators/Kinematics-calculator/styles_20240810204157.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}

.kinematics-container {
background-color: white;
padding: 20px;
border-radius: 8px;
max-width: 800px;
margin: auto;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

h2 {
text-align: center;
}

.input-section {
margin-bottom: 20px;
}

.input-section h3 {
margin-bottom: 10px;
}

label {
display: block;
margin-top: 10px;
}

input[type="text"] {
width: calc(100% - 12px);
padding: 5px;
margin-top: 5px;
}

button {
margin-top: 15px;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}

button:hover {
background-color: #0056b3;
}

.result-section {
margin-top: 30px;
}

.graph-section {
margin-top: 30px;
text-align: center;
}
Loading