// JavaScript код для создания анимации матрицы
const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');
const columns = 500; // Количество столбцов матрицы
const colWidth = canvas.width / columns; // Ширина каждого столбца
const alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'; // Символы для анимации

let symbols = []; // Массив для хранения объектов Symbol

// Класс для символов, падающих по экрану
class Symbol {
    constructor(x, y, speed, symbol) {
        this.x = x; // Координата X
        this.y = y; // Координата Y
        this.speed = speed; // Скорость падения
        this.symbol = symbol; // Символ
    }

    // Метод для отрисовки символа
    draw() {
        ctx.fillStyle = '#0f0'; // Зеленый цвет
        ctx.font = '24px monospace'; // Шрифт
        ctx.fillText(this.symbol, this.x, this.y); // Отрисовка символа
    }

    // Метод для обновления положения символа
    update() {
        this.y += this.speed; // Обновление положения по Y
        if (this.y > canvas.height) { // Если символ вышел за пределы холста
            this.y = -20; // Перемещаем символ вверх
            this.speed = 2 + Math.random() * 2; // Случайное изменение скорости падения
        }
    }
}

// Функция для инициализации символов
function init() {
    for (let i = 0; i < columns; i++) {
        let x = i * colWidth + colWidth / 2; // Вычисление координаты X
        let y = Math.random() * canvas.height; // Случайная координата Y
        let speed = 2 + Math.random() * 2; // Случайная скорость падения
        let symbol = alphabet[Math.floor(Math.random() * alphabet.length)]; // Случайный символ
        symbols.push(new Symbol(x, y, speed, symbol)); // Добавляем символ в массив
    }
}

// Функция для отрисовки символов
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Очистка холста
    symbols.forEach(symbol => {
        symbol.draw(); // Отрисовка каждого символа
    });
}

// Функция для обновления положения символов
function update() {
    symbols.forEach(symbol => {
        symbol.update(); // Обновление каждого символа
    });
}

// Функция для циклической анимации
function loop() {
    draw(); // Отрисовка
    update(); // Обновление
    requestAnimationFrame(loop); // Повторение анимации
}

// Инициализация и запуск анимации
init();
loop();