diff --git a/dist/index.js b/dist/index.js index 75b951e..ec5ebb0 100644 --- 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 index 370454a..608ef51 100644 --- 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 = 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) \ No newline at end of file +system.init() \ No newline at end of file