lokii.tech/matrix.html at main · UnExplainableFish52/lokii.tech · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Matrix | lokii.tech</title>
    <link rel="icon" href="/favicon.ico">
    <style>
        * { margin: 0; padding: 0; }
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="c"></canvas>
    <script>
        const c = document.getElementById('c');
        const ctx = c.getContext('2d');

        // Fullscreen on click
        document.body.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen().catch(() => {});
            }
        });

        // Auto-request fullscreen on load
        window.addEventListener('load', () => {
            setTimeout(() => {
                document.documentElement.requestFullscreen().catch(() => {});
            }, 100);
        });

        // Settings
        const fontSize = 22;
        const speed = 50; // ms per frame

        // Resize canvas
        function resize() {
            c.width = window.innerWidth;
            c.height = window.innerHeight;
        }
        resize();
        window.addEventListener('resize', resize);

        // Matrix characters
        const chars = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン0123456789';
        const charArr = chars.split('');

        // Columns
        let columns = Math.floor(c.width / fontSize);
        let drops = [];

        function initDrops() {
            columns = Math.floor(c.width / fontSize);
            drops = [];
            for (let i = 0; i < columns; i++) {
                drops[i] = Math.floor(Math.random() * -50);
            }
        }
        initDrops();
        window.addEventListener('resize', initDrops);

        // Draw
        function draw() {
            // Fade effect
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, c.width, c.height);

            ctx.fillStyle = '#0f0';
            ctx.font = fontSize + 'px monospace';

            for (let i = 0; i < drops.length; i++) {
                const char = charArr[Math.floor(Math.random() * charArr.length)];
                const x = i * fontSize;
                const y = drops[i] * fontSize;

                ctx.fillText(char, x, y);

                if (y > c.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                drops[i]++;
            }
        }

        // Animation loop at 50ms intervals
        setInterval(draw, speed);
    </script>
</body>
</html>