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

Jump to bottom

added Coulombs Law functionality to the simulations #18

Merged
merged 2 commits into from
Oct 28, 2024
Merged

added Coulombs Law functionality to the simulations #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d893720
added Coulombs Law functionality to the simulations
isaacbarker Oct 27, 2024
aad7549
Optimised images with calibre/image-actions
github-actions[bot] Oct 28, 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
2 changes: 2 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
{
}
6 changes: 5 additions & 1 deletion circular-motion/sketch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,18 @@ function setup() {
let viewWidth;
let viewHeight;

if (window.innerWidth < 600) {
if (window.innerWidth < 800) {
viewWidth = window.innerWidth * 0.9;
viewHeight = window.innerHeight * 0.75;
} else {
viewWidth = window.innerWidth * 0.6;
viewHeight = document.getElementById('ctrl').offsetHeight;
}

if (viewHeight < window.innerHeight * 0.75) {
viewHeight = window.innerHeight * 0.75
}

createCanvas(viewWidth, viewHeight, WEBGL, document.getElementById('sketch'));

// initalize simulation variables
Expand Down
6 changes: 5 additions & 1 deletion collisions/sketch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,18 @@ function setup() {
let viewWidth;
let viewHeight;

if (window.innerWidth < 600) {
if (window.innerWidth < 800) {
viewWidth = window.innerWidth * 0.9
viewHeight = window.innerHeight * 0.75;
} else {
viewWidth = window.innerWidth * 0.5
viewHeight = document.getElementById('ctrl').offsetHeight;
}

if (viewHeight < window.innerHeight * 0.75) {
viewHeight = window.innerHeight * 0.75
}

createCanvas(viewWidth, viewHeight, WEBGL, document.getElementById('sketch'));
particleA = new Particle(massA, posA[0], posA[1], posA[2], velA[0], velA[1], velA[2]);
particleB = new Particle(massB, posB[0], posB[1], posB[2], velB[0], velB[1], velB[2]);
Expand Down
27 changes: 27 additions & 0 deletions electric-fields/charge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
class Charge {

constructor(charge, pos) {
this.charge = charge;
this.pos = pos;
}

strength(point) {
let dist = this.pos.dist(point) * SF;

let E = k * (this.charge) * (1 / Math.pow(dist, 2));
let vecE = p5.Vector.sub(point, this.pos)
vecE.normalize()
vecE.mult(E);

return vecE;
}

potential(point) {
let dist = this.pos.dist(point) * SF;

let V = k * this.charge * (1/ dist);

return V;
}

}
106 changes: 106 additions & 0 deletions electric-fields/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Play with different charges in an electrical field and view Coulomb's Law."
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css">
<meta charset="utf-8" />
<link rel="icon" href="../imgs/favicon.ico">
<title>Physicsim (Coulomb's Law)</title>
</head>
<body>
<div class="loading-page" id="loading-page">
<div class="loading-page__container">
<img class="loading-page__logo" src="../imgs/dark-transparent.png">
<p class="loading-page__txt">Loading...</p>
</div>
</div>
<div class="ps-header__wrapper">
<a href="/">
<img class="ps-header__img" src="../imgs/dark-transparent.png">
</a>
<a href="https://github.com/isaacbarker/physicsim" target="_blank" class="ps-header__git">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" fill="#fff" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/>
</svg>
</a>
<a href="/" class="ps-header__home">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" viewBox="0 0 256 256"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"></path></svg>
</a>
</div>
<div class="wrapper">
<h1>Coulomb's Law</h1>
<p>Use the interface to add more charges or measure the field. Click and drag to move charges.</p>
<div class="sim-wrapper">
<div class="viewport">
<canvas id="sketch" class="sketch"></canvas>
<div class="ctrl__data">
<p id="E">Click measure to use this tool. Then click and drag from a point to measure a distance from a charge and the resultant field strength at the given end point.</p>
<p id="r"></p>
<p id="V"></p>
</div>
</div>
<div class="ctrl" id="ctrl">
<div class="ctrl__form">
<h4>Add New Charge</h4>
<div class="ctrl__form__block--horizontal">
<label for="charge-add" class="form-label">Charge</label>
<input type="number" class="form-control" id="charge-add" placeholder="1.6e-19">
</div>
<div class="ctrl__form__block--horizontal">
<button class="ctrl__btn btn btn-primary" id="ctrls-add-btn">Add</button>
</div>
<div class="ctrl__form__block--horizontal">
<button class="ctrl__btn btn btn-secondary" id="ctrls-clear-btn">Clear</button>
<button class="ctrl__btn btn btn-secondary" id="ctrls-measure-btn">Measure</button>
</div>
</div>
</div>
</div>
<h1>Measurements</h1>
<div class="table__btns">
<button class="table__btn btn btn-link" id="download-data">Download Data</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">E / NC<sup>-1</sup></th>
<th scope="col">d / m</th>
<th scope="col">V / V</th>
</tr>
</thead>
<tbody id="table-data">
</tbody>
</table>
</div>
<div class="footer__wrapper">
<div class="footer__container">
<p class="footer__txt--emphasis">
Copyright (&copy) 2024 Isaac Barker.
</p>
<p class="footer__txt--light">
This site is maintained and developed by <a class="footer__link" target="_blank" href="https://www.isaacbarker.net">isaacbarker.net</a> under the <a class="footer__link" target="_blank" href="https://github.com/isaacbarker/physicsim/blob/main/LICENSE">MIT License</a>.
<br>
This site is built using <a href="https://p5js.org" target="_blank">p5.js</a> and <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>.
<br>
<a class="footer__link" href="mailto:enquiries@physicsim.co.uk">enquiries@physicsim.co.uk</a> | <a class="footer__link" target="_blank" href="https://github.com/isaacbarker/physicsim">isaacbarker/physicsim</a>
</p>
</div>
<div class="footer__container">
<a href="/"><img class="footer__img--physicsim" src="../imgs/dark-transparent.png"></a>
<a href="https://www.isaacbarker.net" target="_"><img class="footer__img--ib-logo" src="../imgs/ib-logo.png"></a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="../loading.js"></script>
<script src="sketch.js"></script>
<script src="charge.js"></script>
<script src="ui.js"></script>
</body>
</html>
Loading