added ammount property

Aneks1 · Jun 22, 2024 · 9fe4875 · 9fe4875
1 parent f809c64
commit 9fe4875
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 32 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -2,9 +2,10 @@
 const canvas = document.getElementById('container');
 const ctx = canvas.getContext('2d');
 ctx.fillStyle = 'white';
-console.log(canvas.width);
 class ParticleSystem {
+    canvas;
     lastId = 0;
+    ammount = 0;
     particles = new Map();
     size = { x: { min: 0, max: 0 }, y: { min: 0, max: 0 } };
     diameter = { min: 0, max: 0 };
@@ -26,6 +27,28 @@ class ParticleSystem {
         this.particles.set(this.lastId.toString(), particle);
         this.lastId++;
     }
+    init() {
+        const ctx = this.canvas.getContext('2d');
+        ctx.fillStyle = 'white';
+        for (let i = 0; i < this.ammount; i++)
+            this.createParticle();
+        setInterval(() => {
+            if (this.particles.size < this.ammount)
+                this.createParticle();
+        }, 100);
+        setInterval(() => {
+            ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            this.particles.forEach((particle) => {
+                ctx?.beginPath();
+                ctx?.arc(particle.position.x, particle.position.y, particle.diameter / 2, 0, 2 * Math.PI, false);
+                ctx?.closePath();
+                ctx?.fill();
+            });
+        }, 1000 / 60);
+    }
+    constructor(canvas) {
+        this.canvas = canvas;
+    }
 }
 class Particle {
     parent;
@@ -51,20 +74,10 @@ class Particle {
         this.init();
     }
 }
-const system = new ParticleSystem();
+const system = new ParticleSystem(canvas);
+system.ammount = 150;
 system.size = { x: { min: 0, max: canvas.width }, y: { min: 0, max: canvas.height } };
 system.diameter = { min: 1, max: 3 };
 system.life = { min: 5, max: 10 };
 system.speed = { x: { min: -15, max: 15 }, y: { min: -15, max: 15 } };
-setInterval(() => {
-    system.createParticle();
-}, 400);
-setInterval(() => {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    system.particles.forEach((particle, key) => {
-        ctx.beginPath();
-        ctx.arc(particle.position.x, particle.position.y, particle.diameter / 2, 0, 2 * Math.PI, false);
-        ctx.closePath();
-        ctx.fill();
-    });
-}, 1000 / 60);
+system.init();
diff --git a/index.ts b/index.ts
@@ -1,14 +1,15 @@
 const canvas = document.getElementById('container') as HTMLCanvasElement
 const ctx = canvas!.getContext('2d')
 ctx!.fillStyle = 'white'
-console.log(canvas.width)
 
 type interval = { min: number, max: number }
 type vectorInterval = { x: interval, y: interval }
 type vector = { x: number, y: number }
 
 class ParticleSystem {
+    public canvas: HTMLCanvasElement
     private lastId = 0
+    public ammount = 0
     public particles: Map<string, Particle> = new Map()
     public size: vectorInterval = { x: { min: 0, max: 0 }, y: { min: 0, max: 0} }
     public diameter: interval = { min: 0, max: 0 }
@@ -30,14 +31,34 @@ class ParticleSystem {
         this.particles.set(this.lastId.toString(), particle)
         this.lastId++
     }
+    public init() {
+        const ctx = this.canvas.getContext('2d')
+        ctx!.fillStyle = 'white'
+        for(let i = 0; i < this.ammount; i++) this.createParticle() 
+        setInterval(() => {
+            if(this.particles.size < this.ammount) this.createParticle()
+        }, 100)
+        setInterval(() => {
+            ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height)
+            this.particles.forEach((particle: Particle) => {
+                ctx?.beginPath();
+                ctx?.arc(particle.position.x, particle.position.y, particle.diameter / 2, 0, 2 * Math.PI, false);
+                ctx?.closePath()
+                ctx?.fill();
+            })
+        }, 1000/60)
+    }
+    constructor(canvas: HTMLCanvasElement) {
+        this.canvas = canvas
+    }
 }
 
 class Particle {
     private parent: ParticleSystem
     private readonly id: string
     public position: vector = { x: 0, y: 0 }
-    public diameter: number = 0
-    public life: number = 0
+    public diameter = 0
+    public life = 0
     public speed: vector = { x: 0, y: 0 }
     public init() {
         const interval = setInterval(() => {
@@ -57,22 +78,10 @@ class Particle {
     }
 }
 
-const system = new ParticleSystem()
+const system = new ParticleSystem(canvas)
+system.ammount = 150
 system.size = { x: { min: 0, max: canvas.width }, y: { min: 0, max: canvas.height } }
 system.diameter = { min: 1, max: 3 }
 system.life = { min: 5, max: 10 }
 system.speed = { x: { min: -15, max: 15 }, y: { min: -15, max: 15 } }
-
-setInterval(() => {
-    system.createParticle()
-}, 400)
-
-setInterval(() => {
-    ctx!.clearRect(0, 0, canvas.width, canvas.height)
-    system.particles.forEach((particle: Particle, key: string) => {
-        ctx!.beginPath();
-        ctx!.arc(particle.position.x, particle.position.y, particle.diameter / 2, 0, 2 * Math.PI, false);
-        ctx!.closePath()
-        ctx!.fill();
-    })
-}, 1000/60)
+system.init()