Create more control over the font sie from the outside

Niekes · Dec 5, 2023 · 633b9ae · 633b9ae
1 parent 31c9236
commit 633b9ae
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "beautiful-backgrounds",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "repository": {
         "type": "git",
         "url": "https://github.com/Niekes/beautiful-backgrounds"

diff --git a/src/components/DigitalRain.ts b/src/components/DigitalRain.ts
@@ -65,14 +65,31 @@ export class BbDigitalRain extends BB {
 
     protected initialize(): void {
         this.symbols = [];
+        this.createSymbols();
+    }
+
+    private createSymbols(): void {
         this.columns = Math.floor(this.width / this.fontSize);
 
         for (let i = 0; i < this.columns; i++) {
             this.symbols[i] = this.createSymbol(i);
         }
     }
 
+    private updateSymbols(): void {
+        const currentColumns = Math.floor(this.width / this.fontSize);
+
+        for (let i = this.symbols.length; i < currentColumns; i++) {
+            this.symbols[i] = this.createSymbol(i);
+        }
+
+        if (this.symbols.length > currentColumns) {
+            this.symbols.length = currentColumns;
+        }
+    }
+
     protected animation(): void {
+        this.updateSymbols();
         this.ctx.fillStyle = `rgba(${this.backgroundColor}, ${this.trailOpacity})`;
         this.ctx.fillRect(0, 0, this.width, this.height);
         this.ctx.textAlign = 'center';
@@ -81,23 +98,20 @@ export class BbDigitalRain extends BB {
         this.symbols.forEach((symbol) => {
             symbol.draw(
                 this.ctx,
-                this.characters.charAt(Math.floor(Math.random() * this.characters.length))
+                this.characters.charAt(Math.floor(Math.random() * this.characters.length)),
+                randomColor(
+                    [this.fontColorHueStart, this.fontColorHueEnd],
+                    [this.fontColorSaturationStart, this.fontColorSaturationEnd],
+                    [this.fontColorLightnessStart, this.fontColorLightnessEnd]
+                ),
+                this.fontSize
             );
-            symbol.update(this.height, this.randomness);
+            symbol.update(this.height, this.randomness, this.fontSize);
         });
     }
 
     protected createSymbol(index: number): Symbol {
-        return new Symbol(
-            index,
-            getRandomInt(0, -this.height / this.fontSize),
-            this.fontSize,
-            randomColor(
-                [this.fontColorHueStart, this.fontColorHueEnd],
-                [this.fontColorSaturationStart, this.fontColorSaturationEnd],
-                [this.fontColorLightnessStart, this.fontColorLightnessEnd]
-            )
-        );
+        return new Symbol(index, getRandomInt(0, -this.height / this.fontSize));
     }
 
     attributeChangedCallback(name: string, oldValue: string, newValue: string) {

diff --git a/src/components/Symbol.ts b/src/components/Symbol.ts
@@ -1,30 +1,22 @@
 export default class Symbol {
     protected x: number;
     protected y: number;
-    protected fontSize: number;
-    protected color: string;
 
-    constructor(x: number, y: number, fontSize: number, color: string = '#0f0') {
+    constructor(x: number, y: number) {
         this.x = x;
         this.y = y;
-        this.fontSize = fontSize;
-        this.color = color;
     }
 
-    update(height: number, randomness: number): void {
-        if (this.y * this.fontSize > height && Math.random() > randomness) {
+    update(height: number, randomness: number, fontSize: number): void {
+        if (this.y * fontSize > height && Math.random() > randomness) {
             this.y = 0;
         } else {
             this.y += 1;
         }
     }
 
-    draw(ctx: CanvasRenderingContext2D, text: string): void {
-        ctx.fillStyle = this.color;
-        ctx.fillText(
-            text,
-            this.x * this.fontSize,
-            this.y * this.fontSize
-        );
+    draw(ctx: CanvasRenderingContext2D, text: string, color: string, fontSize: number): void {
+        ctx.fillStyle = color;
+        ctx.fillText(text, this.x * fontSize, this.y * fontSize);
     }
 }