mouse

src/draw/MainDraw.ts

@@ -1,9 +1,9 @@
 import {rect} from "./Shapes";
-import {drawParticles, initParticles, updateParticles} from "./Particles";
+import {changeMouseProperties, drawParticles, initParticles, updateParticles} from "./Particles";
 import {CANVAS_HEIGHT, CANVAS_WIDTH} from "../App";
 import {MouseEvent} from "react";
 import Vector from "./classes/Vector";
-import {drawUI, handleUIMouseMove, handleUIClick, initUI} from "./ui/UI";
+import {drawUI, handleUIClick, handleUIMouseMove, initUI} from "./ui/UI";
 
 type FillStyle = string | CanvasGradient | CanvasPattern;
 type Ctx = CanvasRenderingContext2D;
@@ -26,13 +26,12 @@ function update() {
 }
 
 function canvasMouseMove(e: MouseEvt) {
-    console.log(getMousePos(e))
+    changeMouseProperties(old => ({...old, pos: getMousePos(e)}));
     handleUIMouseMove(getMousePos(e));
 }
 
 function canvasClick(e: MouseEvt) {
-    console.log(getMousePos(e))
-    handleUIClick(e);
+    handleUIClick(getMousePos(e));
 }
 
 function getMousePos(evt: MouseEvt): Vector {

src/draw/Particles.ts

@@ -1,11 +1,15 @@
 import {Ctx} from "./MainDraw";
-import Particle from "./classes/Particle";
+import Particle, {colorFromCharge} from "./classes/Particle";
 import Vector from "./classes/Vector";
 import {CANVAS_HEIGHT, CANVAS_WIDTH} from "../App";
+import {circle} from "./Shapes";
 
-const particles: Particle[] = [];
+let particles: Particle[] = [];
+let mouseProperties: MouseProperties = {charge: 0, strength: 1, pos: new Vector()};
 
 export function initParticles() {
+    particles = [];
+
     const chargeToMass = [0.1, 1, 10];
     for (let i = 0; i < 200; i++) {
         const charge = Math.random() < 0.3 ? 0 : Math.random() < 0.5 ? 1 : -1;
@@ -16,8 +20,19 @@ export function initParticles() {
     }
 }
 
+interface MouseProperties {
+    charge: number,
+    strength: number,
+    pos: Vector
+}
+
+export function changeMouseProperties(transformer: (old: MouseProperties) => MouseProperties) {
+    mouseProperties = transformer(mouseProperties);
+}
+
 export function drawParticles(ctx: Ctx) {
     particles.forEach(p => p.draw(ctx));
+    circle(ctx, mouseProperties.pos.x, mouseProperties.pos.y, 5, colorFromCharge(mouseProperties.charge));
 }
 
 export function updateParticles() {
@@ -33,7 +48,7 @@ function calculateChargedForces() {
                 const innerParticle = particles[j];
                 if (innerParticle.charge !== 0) {
                     const dist = particle.position.distance(innerParticle.position);
-                    if (dist < 1000 && dist > 0.30) {
+                    if (dist < 300 && dist > 0.30) {
                         const f1 = innerParticle.position.sub(particle.position).scale(0.5 / dist ** 2);
                         if (particle.charge === innerParticle.charge) {
                             particle.applyForce(f1.negated());
@@ -45,6 +60,20 @@ function calculateChargedForces() {
                     }
                 }
             }
+
+            // mouse
+            const dist = particle.position.distance(mouseProperties.pos);
+            if (mouseProperties.charge !== 0 && dist < 10000 && dist > 0.30) {
+                const f1 = mouseProperties.pos
+                    .sub(particle.position)
+                    .scale(0.5 / dist ** 2)
+                    .scale(mouseProperties.strength * 5);
+                if (particle.charge === mouseProperties.charge) {
+                    particle.applyForce(f1.negated());
+                } else {
+                    particle.applyForce(f1);
+                }
+            }
         }
     }
 }

src/draw/classes/Particle.ts

@@ -60,9 +60,14 @@ export default class Particle implements SimObject {
     public get position() {
         return this._position;
     }
+
+
+    set position(value: Vector) {
+        this._position = value;
+    }
 }
 
-function colorFromCharge(charge: number): FillStyle {
+export function colorFromCharge(charge: number): FillStyle {
     if (charge === 0) {
         return "black";
     }

src/draw/ui/MouseChargeButton.ts

@@ -1,8 +1,76 @@
 import Button from "./Button";
 import Vector from "../classes/Vector";
+import {Ctx} from "../MainDraw";
+import {rect} from "../Shapes";
+import {changeMouseProperties} from "../Particles";
+
+enum ChargeState {
+    NEGATIVE = -1,
+    NEUTRAL = 0,
+    POSITIVE = 1,
+}
 
 export default class MouseChargeButton extends Button {
+    private _state: ChargeState;
+
     constructor(pos: Vector, size: Vector) {
         super(pos, size);
+        this._state = ChargeState.NEUTRAL;
+    }
+
+    public draw(ctx: Ctx) {
+        let color;
+        switch (this._state) {
+            case ChargeState.NEGATIVE:
+                color = this._isHovered ? "rgb(78,78,255)" : "blue";
+                break;
+            case ChargeState.NEUTRAL:
+                color = this._isHovered ? "rgb(147,147,147)" : "grey";
+                break;
+            case ChargeState.POSITIVE:
+                color = this._isHovered ? "rgb(255,82,82)" : "red";
+        }
+        rect(ctx, this._position.x, this._position.y, this._size.x, this._size.y, color);
+    }
+
+    public click() {
+        switch (this._state) {
+            case ChargeState.NEGATIVE:
+                this._state = ChargeState.NEUTRAL;
+                break;
+            case ChargeState.NEUTRAL:
+                this._state = ChargeState.POSITIVE;
+                break;
+            case ChargeState.POSITIVE:
+                this._state = ChargeState.NEGATIVE;
+        }
+        changeMouseProperties(old => (
+            {...old, charge: this._state}
+        ));
+    }
+}
+
+export class MouseChargeStrengthButton extends Button {
+    private _state: number;
+
+    constructor(pos: Vector, size: Vector) {
+        super(pos, size);
+        this._state = 0;
+    }
+
+    public draw(ctx: Ctx) {
+        rect(ctx, this._position.x, this._position.y, this._size.x, this._size.y, "grey");
+        rect(ctx, this._position.x, this._position.y, this._size.x, (this._size.y / (10 / this._state)), "green");
+    }
+
+    public click() {
+        this._state++;
+        if (this._state > 10) {
+            this._state = 1;
+        }
+        changeMouseProperties(old => ({
+            ...old,
+            strength: this._state
+        }));
     }
 }

src/draw/ui/UI.ts

@@ -1,19 +1,19 @@
-import {Ctx, MouseEvt} from "../MainDraw";
+import {Ctx} from "../MainDraw";
 import Vector from "../classes/Vector";
-import Button from "./Button";
 import {CANVAS_WIDTH} from "../../App";
 import UIComponent from "./UIComponent";
+import MouseChargeButton, {MouseChargeStrengthButton} from "./MouseChargeButton";
 
 const uiComponents: UIComponent[] = [];
 
 export function initUI() {
-    uiComponents.push(new Button(
+    uiComponents.push(new MouseChargeButton(
         new Vector(CANVAS_WIDTH - 60, 10),
         new Vector(50, 50),
     ));
-    uiComponents.push(new Button(
+    uiComponents.push(new MouseChargeStrengthButton(
         new Vector(CANVAS_WIDTH - 60, 70),
-        new Vector(50, 50)
+        new Vector(50, 50),
     ));
 }
 
@@ -29,8 +29,13 @@ export function handleUIMouseMove(coords: Vector) {
     }
 }
 
-export function handleUIClick(e: MouseEvt) {
-
+export function handleUIClick(coords: Vector) {
+    for (let component of uiComponents) {
+        if (component.isInside(coords)) {
+            component.click();
+            break;
+        }
+    }
 }
 
 export function drawUI(ctx: Ctx) {