const canvas = document.getElementById("matrix");
const ctx = canvas.getContext("2d");
// Make the canvas fill the window
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const fontSize = 16; // Size of the characters
const columns = Math.floor(canvas.width / fontSize); // Number of columns
const drops = Array(columns).fill(0); // Y position of each column
const characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZあいうえおアイウエオカキクケコ"; // Matrix characters
const charArray = characters.split("");
function draw() {
// Set a semi-transparent black background to create the fade effect
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#0F0"; // Green color for the text
ctx.font = `${fontSize}px monospace`;
for (let i = 0; i < drops.length; i++) {
const char = charArray[Math.floor(Math.random() * charArray.length)];
const x = i * fontSize;
const y = drops[i] * fontSize;
ctx.fillText(char, x, y);
if (y > canvas.height && Math.random() > 0.975) {
drops[i] = 0; // Reset the drop
}
drops[i]++;
}
}
setInterval(draw, 50);
// Adjust canvas size on window resize
window.addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});