From 78853473ff6c7dbcccd57795df5db3800307ba2b Mon Sep 17 00:00:00 2001 From: Nilstrieb Date: Thu, 17 Jun 2021 14:45:43 +0200 Subject: [PATCH] mouse --- src/draw/MainDraw.ts | 9 ++--- src/draw/Particles.ts | 35 ++++++++++++++-- src/draw/classes/Particle.ts | 7 +++- src/draw/ui/MouseChargeButton.ts | 68 ++++++++++++++++++++++++++++++++ src/draw/ui/UI.ts | 19 +++++---- 5 files changed, 122 insertions(+), 16 deletions(-) diff --git a/src/draw/MainDraw.ts b/src/draw/MainDraw.ts index 25ada27..9f79b8d 100644 --- a/src/draw/MainDraw.ts +++ b/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 { diff --git a/src/draw/Particles.ts b/src/draw/Particles.ts index 6dc4465..9f47e03 100644 --- a/src/draw/Particles.ts +++ b/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); + } + } } } } \ No newline at end of file diff --git a/src/draw/classes/Particle.ts b/src/draw/classes/Particle.ts index fe120f3..dec2643 100644 --- a/src/draw/classes/Particle.ts +++ b/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"; } diff --git a/src/draw/ui/MouseChargeButton.ts b/src/draw/ui/MouseChargeButton.ts index 106277b..b2f6f29 100644 --- a/src/draw/ui/MouseChargeButton.ts +++ b/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 + })); } } \ No newline at end of file diff --git a/src/draw/ui/UI.ts b/src/draw/ui/UI.ts index 462316c..9fdb861 100644 --- a/src/draw/ui/UI.ts +++ b/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) {