Add Digital Rain

README.md

@@ -2,6 +2,8 @@
 
 The "Beautiful Backgrounds" library offers a collection of customizable web components designed to enhance web pages with visually appealing animated backgrounds. Easy to integrate and use, these components are perfect for adding dynamic and interactive elements to your web applications.
 
+[EXAMPLES][examples]
+
 ## Features
 
 -   **Multiple Background Components**: A variety of background components, each offering unique visual effects.
@@ -10,7 +12,23 @@ The "Beautiful Backgrounds" library offers a collection of customizable web comp
 
 ## Installation
 
-To include "Beautiful Backgrounds" in your project, add the necessary JavaScript files to your project's scripts or import them directly into your HTML or JavaScript files or run `npm i beautiful-backgrounds --save`
+```sh
+npm i beautiful-backgrounds --save
+```
+
+In Deno with [`esm.sh`][esmsh]:
+
+```js
+import { BbStarTrail } from 'beautiful-backgrounds';
+```
+
+In browsers with [`esm.sh`][esmsh]:
+
+```html
+<script type="module">
+    import { BbStarTrail } from 'https://esm.sh/beautiful-backgrounds'
+</script>
+```
 
 ## Usage
 
@@ -54,3 +72,8 @@ import { BbStarTrail } from 'beautiful-backgrounds';
 -   `data-height`: height of the star trail component, remove to fit the size of the container
 
 [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/A0A3QJPZ9)
+
+<!-- Links -->
+
+[esmsh]: https://esm.sh
+[examples]: https://codepen.io/collection/aMPozo

src/components/BeautifulBackground.ts

@@ -112,8 +112,9 @@ export default abstract class BeautifulBackground extends HTMLElement {
 
         if (newWidth !== this.width || newHeight !== this.height) {
             this.width = newWidth;
-            this.canvas.width = newWidth;
             this.height = newHeight;
+
+            this.canvas.width = newWidth;
             this.canvas.height = newHeight;
         }
 

src/components/DigitalRain.ts

@@ -0,0 +1,89 @@
+import BB from './BeautifulBackground';
+
+export class BbDigitalRain extends BB {
+    static observedAttributes = ['data-characters'];
+
+    public fontSize: number;
+    public fontColor: string;
+    public columns: number;
+    public speed: number;
+    public characters: string;
+    public rain: number[];
+
+    private trailOpacity: number;
+
+    private animationFrameId: number | null;
+
+    constructor() {
+        super();
+
+        this.fontSize = 22;
+        this.fontColor = '#0F0';
+        this.speed = 2;
+        this.trailOpacity = 0.1;
+        this.characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    }
+
+    protected connectedCallback(): void {
+        this.shadowR.appendChild(this.canvas);
+        this.resizeCanvas();
+        this.initialize();
+        this.startAnimation();
+
+        window.addEventListener('resize', this.debouncedResizeCanvas.bind(this));
+    }
+
+    protected disconnectedCallback(): void {
+        window.removeEventListener('resize', this.debouncedResizeCanvas.bind(this));
+        if (this.animationFrameId !== null) {
+            window.cancelAnimationFrame(this.animationFrameId);
+        }
+    }
+
+    protected initialize(): void {
+        this.columns = this.width / this.fontSize;
+        this.rain = Array(Math.floor(this.columns)).fill(this.height);
+    }
+
+    protected startAnimation(): void {
+        const animate = (): void => {
+            this.ctx.fillStyle = `rgba(0, 0, 0, ${this.trailOpacity})`;
+            this.ctx.fillRect(0, 0, this.width, this.height);
+            this.ctx.font = this.fontSize + 'px monospace';
+
+            for (let i = 0; i < this.rain.length; i++) {
+                if (this.rain[i] % this.speed === 0) {
+                    const text = this.characters.charAt(
+                        Math.floor(Math.random() * this.characters.length)
+                    );
+                    this.ctx.fillStyle = this.fontColor;
+                    this.ctx.fillText(
+                        text,
+                        i * this.fontSize,
+                        (this.rain[i] / this.speed) * this.fontSize
+                    );
+
+                    if (
+                        (this.rain[i] / this.speed) * this.fontSize > this.height &&
+                        Math.random() > 0.975
+                    ) {
+                        this.rain[i] = 0;
+                    }
+                }
+                this.rain[i]++;
+            }
+
+            this.animationFrameId = requestAnimationFrame(animate);
+        };
+
+        this.animationFrameId = requestAnimationFrame(animate);
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        this.triggerInterpolation(name, oldValue, newValue);
+    }
+}
+
+if (!window.customElements.get('bb-digital-rain')) {
+    window.customElements.define('bb-digital-rain', BbDigitalRain);
+}

src/components/StarTrail.ts

@@ -4,22 +4,22 @@ import { getRandomFloat, interpolateLinear } from '../utils/number';
 import { randomColor } from '../utils/color';
 
 export class BbStarTrail extends BB {
-    private starSizeMin: number;
-    private starSizeMax: number;
+    public starSizeMin: number;
+    public starSizeMax: number;
 
-    private starSpeedMin: number;
-    private starSpeedMax: number;
+    public starSpeedMin: number;
+    public starSpeedMax: number;
 
-    private starColorHueStart: number;
-    private starColorHueEnd: number;
+    public starColorHueStart: number;
+    public starColorHueEnd: number;
 
-    private starRadiusMin: number;
-    private starRadiusMax: number;
+    public starRadiusMin: number;
+    public starRadiusMax: number;
 
-    private starLifespanMin: number;
-    private starLifespanMax: number;
+    public starLifespanMin: number;
+    public starLifespanMax: number;
 
-    private numStars: number;
+    public numStars: number;
 
     private trailOpacity: number;
 
@@ -44,7 +44,7 @@ export class BbStarTrail extends BB {
     constructor() {
         super();
 
-        this.starSizeMin = 0.1;
+        this.starSizeMin = 0.5;
         this.starSizeMax = 1.5;
 
         this.starSpeedMin = 0.025;
@@ -60,6 +60,8 @@ export class BbStarTrail extends BB {
         this.starLifespanMax = 10000;
 
         this.numStars = 1000;
+
+        this.trailOpacity = 0.1;
     }
 
     protected connectedCallback(): void {
@@ -81,7 +83,6 @@ export class BbStarTrail extends BB {
     protected initialize(): void {
         this.stars = [];
         this.starRadiusMax = Math.max(this.width, this.height) / 2;
-        this.trailOpacity = 0.1;
         this.animationFrameId = null;
 
         for (let i = 0; i < this.numStars; i++) {

src/index.ts

@@ -1 +1,3 @@
 export { BbStarTrail } from './components/StarTrail';
+export { BbDigitalRain } from './components/DigitalRain';
+