Simulation 2 - Inteference

TheTrustyPwo · Mar 8, 2024 · e632d1d · e632d1d
1 parent d181f19
commit e632d1d
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 21 deletions.
diff --git a/sim.html b/sim.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Sim 1 - Interference</title>
+    <title>Sim 1 - Waves</title>
 
 </head>
 <body>

diff --git a/sim2.html b/sim2.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Sim 2 - Interference</title>
+
+</head>
+<body>
+<canvas width="1000px" height="500px"></canvas>
+
+<div class="frequency">
+    <input type="range" min="0.05" max="1" step="0.05" value="0.5" class="slider" id="frequencyInput">
+    Frequency: <span id="frequencyValue">0.05</span>
+</div>
+<div class="amplitude">
+    <input type="range" min="0.1" max="1" step="0.1" value="0.2" class="slider" id="amplitudeInput">
+    Amplitude: <span class="amplitudeValue">0.2</span>
+</div>
+
+<script type="module" src="static/js/sim2.js"></script>
+</body>
+</html>
diff --git a/static/js/shared/pointer.js b/static/js/shared/pointer.js
@@ -0,0 +1,54 @@
+class Pointer {
+    // This is an x coordinate restricted pointer
+    constructor(cvs, c, x, y) {
+        this.cvs = cvs;
+        this.c = c;
+        this.x = x;
+        this.y = y;
+
+        this.length = 40;
+        this.minY = this.length;
+        this.maxY = cvs.height - this.length;
+    }
+
+    draw = () => {
+        this.c.beginPath();
+        this.c.moveTo(this.x, this.y);
+        this.c.lineTo(this.x + 0.866 * this.length, this.y + 0.5 * this.length);
+        this.c.lineTo(this.x + 0.866 * this.length, this.y - 0.5 * this.length);
+        this.c.lineTo(this.x, this.y);
+        this.c.closePath();
+
+        this.c.fillStyle = "#179e7e"
+        this.c.fill();
+    }
+
+    set setLength(length) {
+        this.length = length;
+    }
+}
+
+let dragging = -1;
+const pointers = [];
+
+function createPointer(pointer) {
+    pointers.push(pointer);
+}
+
+document.addEventListener("mousedown", e => {
+    for (let i = 0; i < pointers.length; i++) {
+        // use math check in triangle
+        // lazy to code
+    }
+    dragging = 0;
+});
+
+document.addEventListener("mouseup", e => { dragging = -1; });
+
+document.addEventListener("mousemove", e => {
+    if (dragging === -1) return;
+    const pointer = pointers[dragging];
+    pointer.y = Math.max(Math.min(pointer.y + e.movementY, pointer.maxY), pointer.minY);
+});
+
+export { Pointer, createPointer };
diff --git a/static/js/shared/waves.js b/static/js/shared/waves.js
@@ -1,39 +1,69 @@
 class WaveDisplay {
-    constructor (cvs, c, frequency = 0.5, amplitude = 0.25) {
+    constructor (cvs, c) {
         this.cvs = cvs;
         this.c = c;
 
         this.t = 0;
-        this.frequency = frequency;
-        this.amplitude = amplitude;
+        this.dt = 0.01;
+        this.frequency = 0.25;
+        this.amplitude = 0.5;
         this.spacing = 10;
 
-        this.offsetX = this.cvs.offsetLeft;
         this.vectors = [];
+        this.setRect(0, this.cvs.height / 2, this.cvs.width, this.cvs.height / 2);
+    }
+
+    update = () => {
+        this.vectors.forEach(v => v.draw());
+        this.t += this.dt;
+    }
+
+    setRect = (x1, y1, x2, y2) => {
+        this.x1 = x1;
+        this.y1 = y1;
+        this.x2 = x2;
+        this.y2 = y2;
+        this.gradient = (this.y2 - this.y1) / (this.x2 - this.x1);
+        this.verticalOffset = this.y1 - this.gradient * this.x1;
+
+        const distance = Math.sqrt((this.y2 - this.y1) ** 2 + (this.x2 - this.x1) ** 2);
+        const amount = Math.ceil(distance / this.spacing);
+        while (this.vectors.length > amount) this.vectors.pop();
 
-        // Line
-        this.gradient = -5;
-        this.intercept = this.cvs.offsetHeight / 2 + 100;
+        for (let i = 0; i < this.vectors.length; i++) {
+            this.vectors[i].x = this.x1 + i * this.spacing;
+            this.vectors[i].base = this.gradient * this.vectors[i].x + this.verticalOffset;
+        }
+
+        for (let i = this.vectors.length; i < amount; i++)
+            this.vectors.push(new WaveVector(this, i));
+
+        console.log(this.vectors.length);
     }
 
-    load = (amount) => {
-        for (let i = 0; i < amount; i++) this.vectors.push(new WaveVector(this, i));
+    set setFrequency(frequency) {
+        this.frequency = frequency;
     }
 
-    animate = () => {
-        requestAnimationFrame(this.animate);
-        this.c.clearRect(0, 0, window.innerWidth, window.innerHeight);
-        this.vectors.forEach(v => v.draw());
-        this.t += 0.01;
+    set setAmplitude(amplitude) {
+        this.amplitude = amplitude;
+    }
+
+    set setSpacing(spacing) {
+        this.spacing = spacing;
+    }
+
+    set setDt(dt) {
+        this.dt = dt;
     }
 }
 
 class WaveVector {
     constructor(display, id) {
         this.display = display;
         this.id = id;
-        this.base =  this.display.gradient * this.id + this.display.intercept;
-        this.x = this.display.offsetX + this.id * this.display.spacing;
+        this.x = this.display.x1 + this.id * this.display.spacing;
+        this.base =  this.display.gradient * this.x + this.display.verticalOffset;
         this.y = 0.5 * this.display.amplitude * this.display.cvs.height
             * Math.sin(this.id * this.display.frequency) + this.base;
     }

diff --git a/static/js/sim.js b/static/js/sim.js
@@ -6,8 +6,12 @@ const frequencyInput = document.getElementById("frequencyInput");
 const amplitudeInput = document.getElementById("amplitudeInput");
 
 const waveDisplay = new WaveDisplay(cvs, c);
-waveDisplay.load(100);
-waveDisplay.animate();
+
+const animate = () => {
+    requestAnimationFrame(animate);
+    c.clearRect(0, 0, cvs.width, cvs.height);
+    waveDisplay.update();
+}
 
 frequencyInput.oninput = () => {
     document.getElementById("frequencyValue").innerText = frequencyInput.value;

diff --git a/static/js/sim2.js b/static/js/sim2.js
@@ -1,9 +1,43 @@
 import { WaveDisplay } from "./shared/waves.js";
+import { Pointer, createPointer } from "./shared/pointer.js";
 
 const cvs = document.querySelector('canvas');
 const c = cvs.getContext('2d');
+const frequencyInput = document.getElementById("frequencyInput");
+const amplitudeInput = document.getElementById("amplitudeInput");
 
 const s1 = new WaveDisplay(cvs, c);
+s1.setRect(100, 0.3 * cvs.height, cvs.width - 100, 0.5 * cvs.height);
+s1.frequency = 0.5;
+s1.amplitude = 0.2
+
 const s2 = new WaveDisplay(cvs, c);
-s1.load(100);
-s2.load(100);
+s2.setRect(100, 0.7 * cvs.height, cvs.width - 100, 0.5 * cvs.height);
+s2.frequency = 0.5;
+s2.amplitude = 0.2;
+
+const pointer = new Pointer(cvs, c, cvs.width - 80, 0.5 * cvs.height);
+createPointer(pointer);
+const animate = () => {
+    requestAnimationFrame(animate)
+    c.clearRect(0, 0, cvs.width, cvs.height);
+    s1.update();
+    s2.update();
+    s1.setRect(100, 0.3 * cvs.height, pointer.x - 30, pointer.y);
+    s2.setRect(100, 0.7 * cvs.height, pointer.x - 30, pointer.y);
+    pointer.draw();
+}
+
+frequencyInput.oninput = () => {
+    document.getElementById("frequencyValue").innerText = frequencyInput.value;
+    s1.frequency = frequencyInput.value;
+    s2.frequency = frequencyInput.value;
+}
+
+amplitudeInput.oninput = () => {
+    document.getElementById("amplitudeInput").innerText = amplitudeInput.value;
+    s1.amplitude = amplitudeInput.value;
+    s2.amplitude = amplitudeInput.value;
+}
+
+animate();