diff --git a/src/App.tsx b/src/App.tsx index 1dbfe2e..523180c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import React, {useEffect, useRef} from 'react'; import {canvasClick, draw, init, update, canvasMouseMove} from "./draw/MainDraw"; let CANVAS_WIDTH = 1500; -let CANVAS_HEIGHT = 700; +let CANVAS_HEIGHT = 900; function App() { const canvasRef = useRef(null); @@ -16,7 +16,7 @@ function App() { init(); const interval = setInterval(() => { update(); - }, 1000 / 30); + }, 1000 / 60); draw(context); return () => clearInterval(interval); }, [canvasRef]); diff --git a/src/draw/Particles.ts b/src/draw/Particles.ts index 35e2e23..e43a78a 100644 --- a/src/draw/Particles.ts +++ b/src/draw/Particles.ts @@ -10,8 +10,8 @@ let mouseProperties: MouseProperties = {charge: 0, strength: 1, pos: new Vector( export function initParticles() { particles = []; + const chargeToMass = [1, 1, 100]; - 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; particles.push(new Particle(new Vector( @@ -57,8 +57,14 @@ function calculateChargedForces() { const innerParticle = particles[j]; if (innerParticle.charge !== 0) { const dist = particle.position.distance(innerParticle.position); - if (dist < 300 && dist > 0.30) { - const f1 = innerParticle.position.sub(particle.position).scale(0.5 / dist ** 2); + if (dist < 300 && dist > 0) { + const f1 = innerParticle.position.sub(particle.position).scale(0.5 / dist ** 2) + /* + that does not actually work because the world does not work like that + but there is probably something missing here if the charges aren't equal + .scale(Math.max(Math.abs(particle.charge), Math.abs(innerParticle.charge)) + / Math.min(Math.abs(particle.charge), Math.abs(innerParticle.charge))); + */ if (particle.charge === innerParticle.charge) { particle.applyForce(f1.negated()); innerParticle.applyForce(f1); diff --git a/src/draw/classes/Particle.ts b/src/draw/classes/Particle.ts index dec2643..998c148 100644 --- a/src/draw/classes/Particle.ts +++ b/src/draw/classes/Particle.ts @@ -6,24 +6,26 @@ import {CANVAS_HEIGHT, CANVAS_WIDTH} from "../../App"; const PARTICLE_SIZE = 5; const PARTICLE_EDGE_REPULSION_FORCE = 0.1; -const FRICTION = 0.99; -const RANDOM_ACCELERATION = 2; +const FRICTION = -0.01; +const RANDOM_ACCELERATION = 0.5; export default class Particle implements SimObject { private _position: Vector; private _velocity: Vector; + private _acceleration: Vector; private readonly _mass: number; private readonly _charge: number; constructor(position: Vector, charge = 0, mass = 1) { this._position = position; this._velocity = new Vector(); + this._acceleration = new Vector(); this._charge = charge; this._mass = mass; } public applyForce(force: Vector) { - this._velocity = this._velocity.add(force.scaleInverse(this._mass)); + this._acceleration = this._acceleration.add(force); } public draw(ctx: Ctx): void { @@ -31,11 +33,8 @@ export default class Particle implements SimObject { } public update(): void { - this._position = this._position.add(this._velocity); - this._velocity = this._velocity.scale(FRICTION); - // random movement - if (this._velocity.magnitude() < 0.1 && Math.random() > 0.4) { + if (this._acceleration.magnitude() < 1 && this._velocity.magnitude() < 0.2 && Math.random() > 0.4) { this.applyForce(new Vector((Math.random() - 0.5) * RANDOM_ACCELERATION, (Math.random() - 0.5) * RANDOM_ACCELERATION)); } @@ -51,6 +50,14 @@ export default class Particle implements SimObject { if (this._position.y < 50) { this.applyForce(new Vector(0, PARTICLE_EDGE_REPULSION_FORCE)); } + + this._velocity = this._velocity + .add(this._acceleration + .add(new Vector(this._velocity.x * FRICTION, this._velocity.y * FRICTION)) + .scaleInverse(this._mass)); + this._position = this._position.add(this._velocity); + this._acceleration = new Vector(); + } public get charge() {