Я пытаюсь сделать обои. Как можно ЕЩЁ лучше сделать их: "<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Хардкорные Математические Обои</title>
    <!-- Подключение Google Fonts для стильного шрифта -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
    <!-- Подключение MathJax для отображения математических выражений -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <!-- Используем 'defer' для корректной последовательности загрузки -->
    <script defer id="MathJax-script"
            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
            /* Добавляем три слоя фона: линии под 45 и -45 градусов и градиент */
            background:
                /* Линии под 45 градусов */
                repeating-linear-gradient(
                    45deg,
                    rgba(180, 180, 180, 0.3), /* Светлый сероватый цвет с прозрачностью 30% */
                    rgba(180, 180, 180, 0.3) 1px, /* Толщина линии */
                    transparent 1px,
                    transparent 100px /* Расстояние между линиями */
                ),
                /* Линии под -45 градусов */
                repeating-linear-gradient(
                    -45deg,
                    rgba(180, 180, 180, 0.3), /* Светлый сероватый цвет с прозрачностью 30% */
                    rgba(180, 180, 180, 0.3) 1px, /* Толщина линии */
                    transparent 1px,
                    transparent 100px /* Расстояние между линиями */
                ),
                /* Ваш анимированный градиент */
                linear-gradient(135deg, #0a0d1c, #001f3f);
            background-size: 
                141.42px 141.42px, /* 100px * √2 ≈ 141.42px для линий под 45 град */
                141.42px 141.42px, /* 100px * √2 ≈ 141.42px для линий под -45 град */
                600% 600%; /* Размер анимированного градиента */
            /* Анимация только для градиента */
            animation: gradientShift 60s ease infinite;
            font-family: 'Roboto Mono', monospace;
            position: relative;
            overflow: hidden;
            color: #00ffe6;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .formula {
            position: absolute;
            font-size: 1.2em;
            /* Цвет будет задаваться через inline-стили */
            text-shadow: 0 0 10px rgba(0, 255, 230, 0.7); /* Эффект свечения */
            pointer-events: none; /* Чтобы не мешали кликам */
            user-select: none; /* Запрет выделения текста */
            white-space: nowrap; /* Запрет переноса строк */
            transform: rotate(var(--rotation));
        }

        /* Медиа-запросы для оптимизации на разных разрешениях */
        @media (max-width: 1920px) {
            .formula {
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <!-- Контейнер для формул -->
    <div id="formulas-container"></div>

    <script>
        // Настройки MathJax до его загрузки
        window.MathJax = {
            startup: {
                ready: () => {
                    MathJax.startup.defaultReady();
                    
                    // Функция размещения формул
                    placeFormulas();
                }
            }
        };

        function placeFormulas() {
            // Полный список из 100 формул
            const formulas = [
                '$$E = mc^2$$',
                '$$i\\hbar \\frac{\\partial \\Psi}{\\partial t} = \\left( -\\frac{\\hbar^2}{2m}\\nabla^2 + V \\right)\\Psi$$',
                '$$a^2 + b^2 = c^2$$',
                '$$\\nabla \\cdot \\mathbf{E} = \\frac{\\rho}{\\varepsilon_0}$$',
                '$$e^{i\\pi} + 1 = 0$$',
                '$$\\frac{\\partial f}{\\partial t} + \\mathbf{v} \\cdot \\nabla f = \\left( \\frac{\\partial f}{\\partial t} \\right)_{\\text{столк.}}$$',
                '$$\\int_{a}^{b} f(x) \\, dx$$',
                '$$\\sigma = \\sqrt{\\frac{1}{N-1} \\sum_{i=1}^{N} (x_i - \\overline{x})^2}$$',
                '$$PV = nRT$$',
                '$$\\frac{dP}{dt} = \\alpha (S - P) P - \\beta P$$',
                '$$\\mathbf{F} = m\\mathbf{a}$$',
                '$$\\phi = \\frac{1}{4 \\pi \\epsilon_0} \\frac{q}{r}$$',
                '$$\\int_{0}^{\\infty} e^{-x} dx = 1$$',
                '$$\\nabla \\times \\mathbf{E} = -\\frac{\\partial \\mathbf{B}}{\\partial t}$$',
                '$$\\frac{d^2 y}{dx^2} + p(x)\\frac{dy}{dx} + q(x)y = g(x)$$',
                '$$\\lambda = \\frac{h}{p}$$',
                '$$f = \\frac{1}{2} m v^2$$',
                '$$Z = \\frac{V}{I}$$',
                '$$\\mathbf{A} = \\begin{pmatrix}\n    a_{11} & a_{12} & \\cdots & a_{1n} \\\\\n    a_{21} & a_{22} & \\cdots & a_{2n} \\\\\n    \\vdots & \\vdots & \\ddots & \\vdots \\\\\n    a_{m1} & a_{m2} & \\cdots & a_{mn}\n\\end{pmatrix}$$',
                '$$x(t) = x_0 + v_0 t + \\frac{1}{2} a t^2$$',
                '$$\\Delta S \\geq 0$$',
                '$$\\lambda = \\frac{c}{f}$$',
                '$$\\mathbf{E} = -\\nabla \\phi$$',
                '$$\\rho(\\epsilon) = \\frac{1}{e^{(\\epsilon - \\mu)/kT} - 1}$$',
                '$$\\mathbf{J} = \\sigma \\mathbf{E}$$',
                '$$\\lambda_1 + \\lambda_2 + \\lambda_3 = 1$$',
                '$$\\nabla \\cdot \\mathbf{B} = 0$$',
                '$$\\mathcal{L} = T - V$$',
                '$$\\mathbf{F} = q(\\mathbf{E} + \\mathbf{v} \\times \\mathbf{B})$$',
                '$$R = \\frac{\\rho l}{A}$$',
                '$$\\frac{d}{dt}\\left( \\frac{\\partial \\mathcal{L}}{\\partial \\dot{q}} \\right) - \\frac{\\partial \\mathcal{L}}{\\partial q} = 0$$',
                '$$\\nabla^2 \\psi + k^2 \\psi = 0$$',
                '$$S = k \\cdot \\log(P)$$',
                '$$\\mathbf{p} = m\\mathbf{v}$$',
                '$$\\nabla \\cdot \\mathbf{D} = \\rho_f$$',
                '$$\\oint_{\\partial V} \\mathbf{E} \\cdot d\\mathbf{A} = \\frac{Q_{\\text{enc}}}{\\varepsilon_0}$$',
                '$$\\tau = I \\alpha$$',
                '$$F_{\\text{centripetal}} = \\frac{mv^2}{r}$$',
                '$$K = \\frac{1}{2}mv^2$$',
                '$$V = IR$$',
                '$$\\frac{d\\mathbf{L}}{dt} = \\boldsymbol{\\tau}$$',
                '$$\\Phi = \\int \\mathbf{B} \\cdot d\\mathbf{A}$$',
                '$$U = \\frac{1}{2}kx^2$$',
                '$$T = \\frac{1}{2}mv^2 + \\frac{1}{2}I\\omega^2$$',
                '$$\\nabla \\times \\mathbf{B} = \\mu_0 \\mathbf{J} + \\mu_0 \\epsilon_0 \\frac{\\partial \\mathbf{E}}{\\partial t}$$',
                '$$\\frac{d\\mathbf{p}}{dt} = \\mathbf{F}$$',
                '$$\\mathbf{F} = -k\\mathbf{x}$$',
                '$$\\int_V \\nabla \\cdot \\mathbf{F} \\, dV = \\oint_S \\mathbf{F} \\cdot d\\mathbf{A}$$',
                '$$\\mathbf{v} = \\nabla \\phi$$',
                '$$\\frac{d^2 \\mathbf{x}}{dt^2} + \\Omega^2 \\mathbf{x} = 0$$',
                '$$\\mathcal{F} = ma$$',
                '$$\\nabla \\cdot \\mathbf{J} = -\\frac{\\partial \\rho}{\\partial t}$$',
                '$$\\oint_C \\mathbf{B} \\cdot d\\mathbf{l} = \\mu_0 I_{\\text{enc}} + \\mu_0 \\epsilon_0 \\frac{d}{dt}\\int_S \\mathbf{E} \\cdot d\\mathbf{A}$$',
                '$$\\nabla^2 \\phi = \\frac{\\rho}{\\varepsilon_0}$$',
                '$$\\mathbf{J} = \\sigma \\mathbf{E}$$',
                '$$\\Psi(x, t) = \\psi(x)e^{-iEt/\\hbar}$$',
                '$$\\frac{d}{dt}\\langle A \\rangle = \\frac{i}{\\hbar}\\langle [H, A] \\rangle + \\left\\langle \\frac{\\partial A}{\\partial t} \\right\\rangle$$',
                '$$\\mathbf{F} = -\\nabla U$$',
                '$$\\nabla \\cdot \\mathbf{B} = 0$$',
                '$$\\nabla \\times \\mathbf{E} = -\\frac{\\partial \\mathbf{B}}{\\partial t}$$',
                '$$\\nabla \\times \\mathbf{B} = \\mu_0 \\mathbf{J} + \\mu_0 \\epsilon_0 \\frac{\\partial \\mathbf{E}}{\\partial t}$$',
                '$$\\dot{\\mathbf{p}} = \\mathbf{F}$$',
                '$$\\frac{d^2 \\mathbf{x}}{dt^2} + \\Omega^2 \\mathbf{x} = 0$$',
                '$$\\mathbf{a} = \\frac{\\mathbf{F}}{m}$$',
                '$$P = IV$$',
                '$$Q = It$$',
                '$$W = Pt$$',
                '$$\\mathbf{L} = \\mathbf{r} \\times \\mathbf{p}$$',
                '$$\\Psi(x, t) = \\psi(x)e^{-iEt/\\hbar}$$',
                '$$\\mathbf{F} = -\\nabla U$$',
                '$$\\frac{d}{dt}\\langle A \\rangle = \\frac{i}{\\hbar}\\langle [H, A] \\rangle + \\left\\langle \\frac{\\partial A}{\\partial t} \\right\\rangle$$',
                '$$\\nabla^2 \\phi = \\frac{\\rho}{\\varepsilon_0}$$',
                '$$\\nabla \\cdot \\mathbf{B} = 0$$',
                '$$\\nabla \\times \\mathbf{E} = -\\frac{\\partial \\mathbf{B}}{\\partial t}$$',
                '$$\\nabla \\times \\mathbf{B} = \\mu_0 \\mathbf{J} + \\mu_0 \\epsilon_0 \\frac{\\partial \\mathbf{E}}{\\partial t}$$',
                '$$\\dot{\\mathbf{p}} = \\mathbf{F}$$',
                '$$\\frac{d^2 \\mathbf{x}}{dt^2} + \\Omega^2 \\mathbf{x} = 0$$'
            ];

            const container = document.getElementById('formulas-container');

            // Массив холодных цветов (в формате HEX)
            const coldColors = [
                '#00FFFF', // Циан
                '#1E90FF', // Голубой
                '#4682B4', // Стальной синий
                '#5F9EA0', // Циановый
                '#00CED1', // Тёмный циан
                '#40E0D0', // Турецкий
                '#ADD8E6', // Светло-голубой
                '#87CEEB', // Скай голубой
                '#00BFFF', // Дип скай голубой
                '#008B8B', // Дартер тюркоаз
                '#20B2AA', // Светло-сине-зелёный
                '#008080', // Тюркоаз
                '#00FA9A', // Медиумспругация
                '#00FF7F', // Весеннее зелёное
                '#3CB371'  // Медиумсиньо-зелёный
            ];

            // Функция для выбора случайного холодного цвета
            function getRandomColdColor() {
                const index = Math.floor(Math.random() * coldColors.length);
                return coldColors[index];
            }

            // Функция для проверки пересечения прямоугольников
            function isOverlapping(rect1, rect2) {
                return !(
                    rect1.right < rect2.left ||
                    rect1.left > rect2.right ||
                    rect1.bottom < rect2.top ||
                    rect1.top > rect2.bottom
                );
            }

            // Массив для хранения позиций уже размещённых формул
            const placedFormulas = [];

            // Функция для размещения формулы
            function placeFormula(formula) {
                const span = document.createElement('span');
                span.classList.add('formula');
                span.innerHTML = formula;
                container.appendChild(span);

                // Выбор случайного холодного цвета
                const color = getRandomColdColor();
                span.style.color = color; // Установка цвета
                span.style.textShadow = `0 0 10px ${color}B3`; // Дополнительное свечение с прозрачностью

                // Рендеринг MathJax
                MathJax.typesetPromise([span]).then(() => {
                    const maxAttempts = 100;
                    let attempt = 0;
                    let placed = false;

                    while (attempt < maxAttempts && !placed) {
                        const rotation = Math.random() * 20 - 10; // Поворот от -10 до +10 градусов
                        span.style.setProperty('--rotation', `${rotation}deg`);

                        // Получение размеров формулы после рендеринга
                        const rect = span.getBoundingClientRect();

                        // Генерация случайных позиций внутри окна просмотра
                        const viewportWidth = window.innerWidth;
                        const viewportHeight = window.innerHeight;

                        const maxLeft = viewportWidth - rect.width;
                        const maxTop = viewportHeight - rect.height;

                        if (maxLeft <= 0 || maxTop <= 0) {
                            console.warn('Формула слишком большая для размещения:', formula);
                            container.removeChild(span);
                            return;
                        }

                        const left = Math.random() * maxLeft;
                        const top = Math.random() * maxTop;

                        span.style.left = `${left}px`;
                        span.style.top = `${top}px`;

                        const newRect = span.getBoundingClientRect();

                        // Проверка на пересечение с уже размещёнными формулами
                        let overlap = false;
                        for (const placedRect of placedFormulas) {
                            if (isOverlapping(newRect, placedRect)) {
                                overlap = true;
                                break;
                            }
                        }

                        if (!overlap) {
                            placedFormulas.push(newRect);
                            placed = true;
                        }

                        attempt++;
                    }

                    if (!placed) {
                        // Если не удалось разместить без перекрытия, убираем формулу
                        container.removeChild(span);
                        console.warn('Не удалось разместить формулу без перекрытия:', formula);
                    }
                }).catch((err) => {
                    console.error('Ошибка при рендеринге MathJax:', err);
                    container.removeChild(span);
                });
            }

            // Размещаем все формулы
            formulas.forEach(formula => placeFormula(formula));

            // Обработка изменения размера окна
            window.addEventListener('resize', () => {
                // Очистка размещения
                container.innerHTML = '';
                placedFormulas.length = 0;
                // Переразмещение всех формул
                formulas.forEach(formula => placeFormula(formula));
            });
        }
    </script>
</body>
</html>"?? А ещё, как всё таки больше формул разместить можно, и при этом как можно меньше ресурсов потратить?