101 lines
3.5 KiB
JavaScript
101 lines
3.5 KiB
JavaScript
class MatrixEffect{
|
|
constructor(){
|
|
this.matrixCanvas = document.createElement("canvas")
|
|
this.matrixCanvas.setAttribute("style", "position: fixed;")
|
|
gradioApp().querySelector("div[class*=container]:not([class^=modal])").insertAdjacentElement('afterbegin', this.matrixCanvas)
|
|
}
|
|
|
|
async initialize(){
|
|
while(!gradioApp().querySelector('canvas')){
|
|
await delay(300)
|
|
}
|
|
// Initialising the canvas
|
|
this.ctx = this.matrixCanvas.getContext('2d');
|
|
|
|
// Setting the width and height of the canvas
|
|
this.matrixCanvas.width = window.innerWidth;
|
|
this.matrixCanvas.height = window.innerHeight;
|
|
|
|
// Setting up the letters
|
|
this.letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';
|
|
this.letters = this.letters.split('');
|
|
|
|
// Setting up the columns
|
|
this.fontSize = 10,
|
|
this.columns = this.matrixCanvas.width / this.fontSize;
|
|
|
|
// Setting up the drops
|
|
this.drops = [];
|
|
for (var i = 0; i < this.columns; i++) {
|
|
this.drops[i] = 1;
|
|
}
|
|
this.running = true;
|
|
|
|
//timer
|
|
this.then = Date.now();
|
|
this.fps = 20;
|
|
this.fpsInterval = 1000/this.fps;
|
|
|
|
|
|
// Setting up the draw function
|
|
this.draw = () => {
|
|
this.now = Date.now();
|
|
this.elapsed = this.now - this.then;
|
|
if (this.elapsed > this.fpsInterval){
|
|
this.then = this.now - (this.elapsed % this.fpsInterval);
|
|
|
|
this.ctx.fillStyle = 'rgba(0, 0, 0, .1)';
|
|
this.ctx.fillRect(0, 0, this.matrixCanvas.width, this.matrixCanvas.height);
|
|
for (var i = 0; i < this.drops.length; i++) {
|
|
text = this.letters[Math.floor(Math.random() * this.letters.length)];
|
|
this.ctx.fillStyle = '#0f0';
|
|
this.ctx.fillText(text, i * this.fontSize, this.drops[i] * this.fontSize);
|
|
this.drops[i]++;
|
|
if (this.drops[i] * this.fontSize > this.matrixCanvas.height && Math.random() > .95) {
|
|
this.drops[i] = 0;
|
|
}
|
|
}
|
|
}
|
|
if (this.running){
|
|
requestAnimationFrame(this.draw)
|
|
}
|
|
}
|
|
}
|
|
|
|
destroy(){
|
|
this.running = false;
|
|
//clearInterval(this.Interval)
|
|
this.matrixCanvas.remove()
|
|
}
|
|
}
|
|
|
|
let matrixEffect;
|
|
|
|
async function registerMatrixToHandler(){
|
|
await delay(1000);
|
|
while(qkcssFXMap == undefined){
|
|
await delay(500)
|
|
}
|
|
qkcssFXMap["matrixfx"] = [launchMatrixEffect, matrixEffect];
|
|
}
|
|
|
|
async function launchMatrixEffect(){
|
|
await delay(1000)
|
|
while (!gradioApp().querySelector("div[class*=container]:not([class^=modal])")){
|
|
await delay(300);
|
|
}
|
|
// Loop the animation
|
|
matrixEffect = new MatrixEffect()
|
|
//Shortciruited it
|
|
qkcssFXMap["matrixfx"][1] = matrixEffect
|
|
await delay(500)
|
|
matrixEffect.initialize()
|
|
matrixEffect.Interval = matrixEffect.draw();
|
|
//matrixEffect.Interval = setInterval(matrixEffect.draw, 33);
|
|
}
|
|
|
|
function delay(ms){return new Promise(resolve => setTimeout(resolve, ms))}
|
|
//document.addEventListener("DOMContentLoaded", async function() {await launchMatrixEffect()})
|
|
document.addEventListener("DOMContentLoaded", async function() {await registerMatrixToHandler()})
|
|
|