https://bitwise-a3c2d.web.app/js/effects.js

1var bg = null;
2
3// ========================================== Matrix Effect ========================================== \\
4class Background {
5    constructor() {
6        // Clear existing backgrounds
7        if (bg) {
8            bg.stop();
9        }
10
11        // Canvas element
12        this.c = document.getElementById("background");
13        this.ctx = this.c.getContext("2d");
14
15        this.matrix = "bitwse@#$%^&*()*&^%+-/~{[|`]}";
16        this.matrix = this.matrix.split("");
17
18        // Get color
19        ReactDOM.render(<div id="accent" className={"ui" + accent + "button"}></div>, document.getElementById("background"));
20        this.color = getComputedStyle(document.querySelector("#accent")).backgroundColor;
21        ReactDOM.unmountComponentAtNode(document.getElementById("background"))
22
23        // Get background
24        ReactDOM.render(<div id="dark" className={"ui" + dark + "segment"}></div>, document.getElementById("background"));
25        this.bgColor = getComputedStyle(document.querySelector("#dark")).backgroundColor;
26        var match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[\.\d+]*)*\)/g.exec(this.bgColor)
27        this.background = "rgba(" + [match[1], match[2], match[3], 0.25].join(',') + ")";
28        ReactDOM.unmountComponentAtNode(document.getElementById("background"))
29
30        this.font_size = 10;
31        this.delay = 100;
32
33        this.drops = [];
34        this.drawLoop = null;
35
36        // Initial drop effect start
37        this.resetEffects();
38        this.clearLoop = setInterval(this.clear, 100000);
39
40        // Allow user clicks to start drops
41        window.addEventListener("mousedown", this.click);
42
43        // Window resize should properly reset the drop columns
44        window.addEventListener("resize", this.resetEffects, false);
45    }
46
47    click = (e) => {
48        const rect = this.c.getBoundingClientRect();
49        const x = e.clientX - rect.left;
50        const y = e.clientY - rect.top;
51
52        // Cursor grid position
53        var col = Math.floor(x / this.font_size + 0.2);
54        var row = Math.ceil(y / this.font_size);
55
56        this.drops[col] = row;
57    }
58
59    resetEffects = () => {
60        this.drops = [];
61
62        this.c.height = window.innerHeight;
63        this.c.width = window.innerWidth;
64
65        this.ctx.clearRect(0, 0, this.c.width, this.c.height);
66        this.ctx.fillStyle = this.bgColor;
67        this.ctx.fillRect(0, 0, this.c.width, this.c.height);
68
69        // Initialize drops above screen
70        for (var x = 0; x < this.c.width / this.font_size; x++) {
71            this.drops[x] = 0;
72        }
73
74        // Restart drop effect
75        clearInterval(this.drawLoop);
76        this.drawLoop = setInterval(this.draw, this.delay);
77    }
78
79    draw = () => {
80        this.ctx.fillStyle = this.background;
81        this.ctx.fillRect(0, 0, this.c.width, this.c.height);
82
83        this.ctx.fillStyle = this.color;
84        this.ctx.font = this.font_size + "px Ubuntu Mono";
85
86        for (var i = 0; i < this.drops.length; i++) {
87            var text = this.matrix[Math.floor(Math.random() * this.matrix.length)];
88            var x = i * this.font_size;
89            var y = this.drops[i] * this.font_size;
90
91            this.ctx.fillText(text, x, y);
92
93            // Randomly restart drops
94            if ((this.drops[i] < 0) && (Math.random() > 0.998)) {
95                this.drops[i] = Math.floor(Math.random() * this.c.height / this.font_size);
96            }
97
98            // Lower drop
99            this.drops[i]--;
100        }
101    }
102
103    clear = () => {
104        this.ctx.clearRect(0, 0, this.c.width, this.c.height);
105        this.ctx.fillStyle = this.bgColor;
106        this.ctx.fillRect(0, 0, this.c.width, this.c.height);
107    }
108
109    stop = () => {
110        clearInterval(this.drawLoop);
111        clearInterval(this.clearLoop);
112        this.clear();
113        window.removeEventListener("mousedown", this.click);
114        window.removeEventListener("resize", this.resetEffects)
115    }
116}