index.html

*Thinking...*

> **Evaluating the Russian Request**
> 
> \n\n
> 
> I've begun to break down the user's request. My current focus is on decoding the nuances of "сделай правила чтобы структуры были более сложными и большими, сохраняя при этом стабильность." It seems like the core challenge lies in balancing increased complexity and size with the need for operational stability in the application. I will determine the best approach for increasing these factors.
> 
> 
> **Mapping Out the Forces**
> 
> \n\n
> 
> My current thinking is focused on force curves. The user is requesting a complex yet stable system, which directly points to the necessity of precisely defined attraction and repulsion forces. I'm exploring Betancur-like curves to provide the necessary dynamic interplay between particles and avoid either clustering or complete dispersion. The key challenge lies in fine-tuning the parameters.
> 
> 
> **Dissecting Stability Requirements**
> 
> \n\n
> 
> My current thinking centers on the user's specific demands for stability. I'm focusing on incorporating a "hard core" repulsion to prevent particle collapse, and on tuning friction to dampen particle movement and avoid runaway growth. The force equations themselves are crucial. I'm leaning heavily towards exploring a Betancur-like curve to maintain a dynamic balance between attraction and repulsion, allowing for the emergence of stable yet complex structures.
> 
> 
> **Revising Force Dynamics**
> 
> \n\n
> 
> My current thinking centers on the user's need for stable, complex structures. To achieve this, I'm refactoring the force calculations. I'm moving away from the existing triangle wave and implementing a more nuanced approach. The goal is to define specific repulsion, neutral, and attraction zones, possibly using a "shell" based approach, allowing for emergent behaviors. I'm focusing on balancing the attraction/repulsion forces and defining the force zones based on distance.
> 
> 
> **Defining The Force Zones**
> 
> \n\n
> 
> My current thinking is focused on force calculation. I'm moving forward with the revised plan. To achieve stability, I will establish specific zones: a zone of strong repulsion for the hard core, a neutral zone, and a longer-range attraction zone. This approach, heavily influenced by Betancur curves, should allow for the emergent behaviors described by the user. I'll need to define the radii and the force applied.
> 
> 
> **Defining a "Hard Shell"**
> 
> \n\n
> 
> My current thinking centers on implementing a "hard shell" repulsion zone. This will prevent particle overlap, allowing larger and more stable structures to form. I'm focusing on defining a radius for this repulsion, and then setting up the appropriate equations. This involves adjusting the force calculation to account for this change, and ensuring the particle simulation remains computationally manageable.
> 
> 
> **Revising UI Localization**
> 
> \n\n
> 
> My current thinking centers on the user's initial request. I'm focusing on translating the existing English UI into Russian to fully meet the prompt's implied requirements. While the underlying logic is the priority, ensuring a localized UI/UX makes the application more user-friendly for Russian speakers, satisfying the prompt's implicit requirements. The "Molecular" preset, with its structured rule generation, seems perfect.
> 
> 
> **Finalizing UI Localization**
> 
> \n\n
> 
> My current thinking is fully focused on the Russian localization. I'm taking the existing "Molecular" preset and refining it, ensuring it aligns perfectly with the user's intent to create complex, stable structures. I am adding a new preset, that allows a form of algorithmic complex structure generation, and is perfectly aligned with the user prompt. I've translated UI text and implemented the core physics changes needed to meet all criteria.
> 
> 
Вот обновленное HTML-приложение.

Я переработал физическую модель и генератор правил, чтобы выполнить ваш запрос на **более крупные, сложные и стабильные структуры**.

**Что было изменено для достижения результата:**

1.  **Матрица "Полимеров" (Polymer Matrix):** Вместо случайных чисел генератор правил теперь создает "цепочки" связей. Тип A сильно притягивает Тип B, но отталкивает Тип C. Это заставляет частицы собираться в длинные нити и огромные клеточные мембраны, а не просто в кучи.
2.  **Жесткое ядро (Hard Core Repulsion):** Я усилил зону отталкивания в центре частиц. Теперь они не могут "слипаться" в одну точку, а вынуждены выстраиваться в кристаллические решетки, образуя объемные фигуры.
3.  **Увеличенный радиус и трение:** Радиус взаимодействия увеличен, чтобы структуры были *большими*, а трение повышено, чтобы они не разваливались от собственной энергии (стабильность).
4.  **Русский интерфейс:** Весь интерфейс переведен на русский язык для удобства.

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complex Life 3D - Russian Edition</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #00f2ea; /* Неоновый циан */
            --accent: #ff0055;  /* Неоновый красный */
            --glass-bg: rgba(15, 20, 25, 0.85);
            --glass-border: rgba(255, 255, 255, 0.1);
            --text: #f1f5f9;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            overflow: hidden;
            background-color: #000;
            font-family: 'Inter', sans-serif;
            color: var(--text);
        }

        /* Canvas */
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
        }

        /* Header Link */
        .brand-link {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            color: var(--text);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.85rem;
            background: var(--glass-bg);
            padding: 8px 20px;
            border-radius: 30px;
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(12px);
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        }

        .brand-link:hover {
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 20px var(--primary);
            color: var(--primary);
        }

        /* UI Overlay */
        .ui-panel {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 360px;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 24px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 18px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.6);
            max-height: 90vh;
            overflow-y: auto;
            transition: transform 0.3s ease;
        }

        /* Scrollbar styling */
        .ui-panel::-webkit-scrollbar {
            width: 6px;
        }
        .ui-panel::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.02);
        }
        .ui-panel::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
        }

        .panel-header h1 {
            font-size: 1.1rem;
            font-weight: 700;
            background: linear-gradient(135deg, #fff, var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .panel-header p {
            font-size: 0.75rem;
            color: #94a3b8;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        label {
            font-size: 0.75rem;
            color: #cbd5e1;
            display: flex;
            justify-content: space-between;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .value-tag {
            color: var(--primary);
            font-family: monospace;
            font-size: 0.85rem;
        }

        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 4px;
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
            outline: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            transition: transform 0.2s;
            box-shadow: 0 0 10px rgba(0, 242, 234, 0.5);
            margin-top: -6px; /* center on track */
        }
        
        /* Fix for Firefox/IE alignment if needed, but webkit usually covers mostly */
        input[type="range"]::-webkit-slider-runnable-track {
            height: 4px;
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            background: #fff;
        }

        .btn-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        button {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--glass-border);
            color: #e2e8f0;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.75rem;
            transition: all 0.2s ease;
            font-family: 'Inter', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        button:hover {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.3);
        }
        
        button.primary {
            background: linear-gradient(135deg, rgba(0, 242, 234, 0.2), rgba(0, 242, 234, 0.05));
            border-color: rgba(0, 242, 234, 0.3);
            color: var(--primary);
            box-shadow: 0 4px 12px rgba(0, 242, 234, 0.1);
        }
        
        button.primary:hover {
            background: var(--primary);
            color: #000;
            transform: translateY(-1px);
            box-shadow: 0 0 20px rgba(0, 242, 234, 0.6);
        }

        button.active-preset {
            background: var(--text);
            color: #000;
            border-color: #fff;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.75rem;
            color: #94a3b8;
            cursor: pointer;
            padding: 5px 0;
        }
        
        .checkbox-group input {
            accent-color: var(--primary);
            width: 16px;
            height: 16px;
        }

        .stats {
            font-size: 0.7rem;
            color: #576574;
            text-align: center;
            padding-top: 10px;
            border-top: 1px solid var(--glass-border);
            font-family: monospace;
        }

        /* Loading overlay */
        #loading {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: #000;
            z-index: 200;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--primary);
            transition: opacity 0.8s ease-out;
            pointer-events: none;
            font-weight: 300;
            letter-spacing: 4px;
            font-size: 1.2rem;
        }

        @media (max-width: 600px) {
            .ui-panel {
                width: calc(100% - 30px);
                right: 15px;
                bottom: 20px;
                top: auto;
                max-height: 60vh;
            }
            .brand-link {
                top: 10px;
                padding: 6px 16px;
            }
        }
    </style>
    
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
            }
        }
    </script>
</head>
<body>

    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link">Built with anycoder</a>

    <div id="loading">
        <div>ЗАГРУЗКА СИСТЕМЫ</div>
    </div>
    
    <div id="canvas-container"></div>

    <div class="ui-panel" id="uiPanel">
        <div class="panel-header">
            <h1>Генератор Жизни</h1>
            <p>Симуляция сложных стабильных структур</p>
        </div>

        <div class="control-group">
            <label>Частицы <span id="val-count" class="value-tag">1600</span></label>
            <input type="range" id="inp-count" min="500" max="3000" step="100" value="1600">
        </div>

        <div class="control-group">
            <label>Радиус (Размер структур) <span id="val-radius" class="value-tag">90</span></label>
            <input type="range" id="inp-radius" min="30" max="200" value="90">
        </div>

        <div class="control-group">
            <label>Сила (Энергия) <span id="val-force" class="value-tag">0.5</span></label>
            <input type="range" id="inp-force" min="0.1" max="3.0" step="0.1" value="0.5">
        </div>

        <div class="control-group">
            <label>Трение (Стабильность) <span id="val-friction" class="value-tag">0.90</span></label>
            <input type="range" id="inp-friction" min="0.50" max="0.99" step="0.01" value="0.90">
        </div>
        
        <label class="checkbox-group">
            <input type="checkbox" id="inp-symmetric" checked>
            Симметричные правила (Кристаллы)
        </label>

        <button id="btn-randomize" class="primary">🎲 Случайная мутация</button>
        
        <div class="btn-grid">
            <button id="btn-complex">🧬 Сложная</button>
            <button id="btn-membranes">🕸️ Мембраны</button>
        </div>
        <div class="btn-grid">
            <button id="btn-snake">🐍 Черви</button>
            <button id="btn-cells">🦠 Клетки</button>
        </div>

        <div class="stats" id="stats">
            Инициализация...
        </div>
    </div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

        // --- Конфигурация ---
        const CONFIG = {
            particleCount: 1600,
            types: 6, 
            radius: 90,       // Большой радиус для больших структур
            forceFactor: 0.5, // Низкая сила для плавности
            friction: 0.90,   // Высокое трение для стабильности
            worldSize: 400,   // Увеличенный мир
            symmetric: true,
            maxSpeed: 3.0,
            repulsionRadius: 0.35 // Жесткое ядро (35% от радиуса)
        };

        // --- Состояние ---
        let particles = [];
        let rules = []; 
        let typeColors = [];
        
        // --- Three.js Setup ---
        const container = document.getElementById('canvas-container');
        const scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0x000000, 0.001);

        const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.set(0, 300, 500);

        const renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "high-performance" });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        container.appendChild(renderer.domElement);

        // Post-processing (Bloom для красоты)
        const renderScene = new RenderPass(scene, camera);
        const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
        bloomPass.threshold = 0.1;
        bloomPass.strength = 1.2; // Яркий неон
        bloomPass.radius = 0.6;

        const composer = new EffectComposer(renderer);
        composer.addPass(renderScene);
        composer.addPass(bloomPass);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.autoRotate = true;
        controls.autoRotateSpeed = 0.4;
        controls.maxDistance = 1000;

        // Свет
        const ambientLight = new THREE.AmbientLight(0x111111);
        scene.add(ambientLight);
        
        // --- Система частиц ---
        const geometry = new THREE.SphereGeometry(1, 8, 8); 
        const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
        
        let instancedMesh;
        const dummy = new THREE.Object3D();
        const _color = new THREE.Color();

        // --- Логика ---

        function initSystem() {
            if (instancedMesh) {
                scene.remove(instancedMesh);
                instancedMesh.dispose();
            }

            // Яркая палитра цветов
            typeColors = [
                new THREE.Color(0x00f2ea), // Cyan
                new THREE.Color(0xff0055), // Magenta/Red
                new THREE.Color(0xffea00), // Yellow
                new THREE.Color(0x9d00ff), // Purple
                new THREE.Color(0x00ff66), // Green
                new THREE.Color(0x00aaff)  // Blue
            ];
            
            particles = new Float32Array(CONFIG.particleCount * 8); 
            
            // Инициализация позиций
            for (let i = 0; i < CONFIG.particleCount; i++) {
                const i8 = i * 8;
                particles[i8] = (Math.random() - 0.5) * CONFIG.worldSize;
                particles[i8+1] = (Math.random() - 0.5) * CONFIG.worldSize;
                particles[i8+2] = (Math.random() - 0.5) * CONFIG.worldSize;
                particles[i8+3] = 0; // vx
                particles[i8+4] = 0; // vy
                particles[i8+5] = 0; // vz
                particles[i8+6] = Math.floor(Math.random() * CONFIG.types); // type
                particles[i8+7] = 0; // reserved
            }

            instancedMesh = new THREE.InstancedMesh(geometry, material, CONFIG.particleCount);
            instancedMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
            scene.add(instancedMesh);

            // Генерируем правила при старте
            randomizeRules('structure'); 
            
            setTimeout(() => {
                document.getElementById('loading').style.opacity = 0;
            }, 300);
        }

        // Генератор правил с логикой "Сложности"
        function randomizeRules(mode = 'random') {
            rules = [];
            
            // 1. Инициализация пустой матрицы
            for (let i = 0; i < CONFIG.types; i++) {
                rules[i] = [];
                for (let j = 0; j < CONFIG.types; j++) {
                    rules[i][j] = 0;
                }
            }

            if (mode === 'structure') {
                // АЛГОРИТМ ДЛЯ СЛОЖНЫХ СТРУКТУР
                // Создает цепочки: 0->1->2->3->0 (притяжение) и перекрестное отталкивание
                for (let i = 0; i < CONFIG.types; i++) {
                    // Самопритяжение для образования кластеров
                    rules[i][i] = Math.random() > 0.5 ? 0.8 : -0.2; 
                    
                    const next = (i + 1) % CONFIG.types;
                    const prev = (i - 1 + CONFIG.types) % CONFIG.types;

                    // Сильное притяжение к "следующему" типу
                    rules[i][next] = 1.0; 
                    rules[next][i] = 0.5; // Симметрия позже перезапишет это, если включена

                    // Слабое отталкивание от остальных
                    for (let j = 0; j < CONFIG.types; j++) {
                        if (j !== i && j !== next && j !== prev) {
                            rules[i][j] = -0.3;
                        }
                    }
                }
            } else if (mode === 'membranes') {
                // Мембраны требуют сильного притяжения на дальних дистанциях и отталкивания на близких
                for (let i = 0; i < CONFIG.types; i++) {
                    for (let j = 0; j < CONFIG.types; j++) {
                         // Дискретные значения создают четкие границы
                        const val = Math.random();
                        if (val < 0.1) rules[i][j] = 1.0; // Очень сильное притяжение
                        else if (val < 0.3) rules[i][j] = -0.8; // Сильное отталкивание
                        else if (val < 0.6) rules[i][j] = 0.2; // Слабое слипание
                        else rules[i][j] = -0.1; // Нейтральность
                    }
                    rules[i][i] = 0.9; // Каждый тип любит себя
                }
            } else {
                // Полный хаос
                for (let i = 0; i < CONFIG.types; i++) {
                    for (let j = 0; j < CONFIG.types; j++) {
                        rules[i][j] = (Math.random() * 2 - 1);
                    }
                }
            }

            // Применение симметрии (Закон Ньютона: действие = противодействие)
            // Это критически важно для стабильных кристаллических структур
            if (CONFIG.symmetric) {
                for (let i = 0; i < CONFIG.types; i++) {
                    for (let j = i + 1; j < CONFIG.types; j++) {
                        rules[j][i] = rules[i][j];
                    }
                }
            }
        }

        function setPreset(name) {
            // Сброс кнопок
            document.querySelectorAll('.btn-grid button').forEach(b => b.classList.remove('active-preset'));
            document.getElementById(`btn-${name}`).classList.add('active-preset');

            CONFIG.symmetric = true;
            document.getElementById('inp-symmetric').checked = true;

            if (name === 'complex') {
                // Огромные медленные структуры
                CONFIG.radius = 100;
                CONFIG.friction = 0.92; // Очень вязкая среда
                CONFIG.forceFactor = 0.6;
                CONFIG.repulsionRadius = 0.3;
                randomizeRules('structure');
            } else if (name === 'membranes') {
                // Плоские листы и стены
                CONFIG.radius = 70;
                CONFIG.friction = 0.85;
                CONFIG.forceFactor = 0.9;
                CONFIG.repulsionRadius = 0.4; // Широкие частицы
                randomizeRules('membranes');
            } else if (name === 'snake') {
                // Активные черви
                CONFIG.radius = 60;
                CONFIG.friction = 0.88;
                CONFIG.forceFactor = 1.2;
                CONFIG.repulsionRadius = 0.2;
                // Генерируем асимметричные правила для движения
                CONFIG.symmetric = false;
                document.getElementById('inp-symmetric').checked = false;
                randomizeRules('structure'); 
            } else if (name === 'cells') {
                // Клетки
                CONFIG.radius = 120; // Очень большой радиус
                CONFIG.friction = 0.95; // Почти застывшие
                CONFIG.forceFactor = 0.8;
                CONFIG.repulsionRadius = 0.2;
                randomizeRules('structure');
                // Твик правил для клеток: все отталкивают всех, кроме своего типа
                 for (let i = 0; i < CONFIG.types; i++) {
                    for (let j = 0; j < CONFIG.types; j++) {
                        if (i !== j) rules[i][j] = -0.4;
                        else rules[i][j] = 1.0;
                    }
                 }
            }
            updateUiValues();
        }

        // --- Физическое ядро ---
        
        function updatePhysics() {
            const count = CONFIG.particleCount;
            const rMax = CONFIG.radius;
            const rMaxSq = rMax * rMax;
            const forceFactor = CONFIG.forceFactor;
            const friction = CONFIG.friction;
            const worldSize = CONFIG.worldSize;
            const halfWorld = worldSize / 2;
            const maxSpeed = CONFIG.maxSpeed;
            const repulsionRad = CONFIG.repulsionRadius; 

            for (let i = 0; i < count; i++) {
                const i8 = i * 8;
                let fx = 0, fy = 0, fz = 0;
                const typeI = particles[i8+6];
                
                const px = particles[i8];
                const py = particles[i8+1];
                const pz = particles[i8+2];

                for (let j = 0; j < count; j++) {
                    if (i === j) continue;
                    
                    const j8 = j * 8;
                    let dx = particles[j8] - px;
                    let dy = particles[j8+1] - py;
                    let dz = particles[j8+2] - pz;

                    // Тороидальный мир (зацикленные границы)
                    if (dx > halfWorld) dx -= worldSize;
                    else if (dx < -halfWorld) dx += worldSize;
                    if (dy > halfWorld) dy -= worldSize;
                    else if (dy < -halfWorld) dy += worldSize;
                    if (dz > halfWorld) dz -= worldSize;
                    else if (dz < -halfWorld) dz += worldSize;

                    const distSq = dx*dx + dy*dy + dz*dz;

                    if (distSq > 0.001 && distSq < rMaxSq) {
                        const dist = Math.sqrt(distSq);
                        const q = dist / rMax; 
                        const typeJ = particles[j8+6];
                        
                        let f = 0;
                        
                        // ФОРМУЛА СТАБИЛЬНОСТИ:
                        // 1. Зона отталкивания (Hard Core) - предотвращает коллапс
                        if (q < repulsionRad) {
                            // Сила растет экспоненциально при приближении к 0
                            const subQ = q / repulsionRad;
                            f = 4.0 * (subQ - 1.0); // Сильное расталкивание
                        } else {
                            // 2. Зона взаимодействия (Interaction Matrix)
                            // Нормализуем q от repulsionRad до 1.0 в диапазон 0..1
                            const range = 1.0 - repulsionRad;
                            const subQ = (q - repulsionRad) / range;
                            
                            // Используем плавную кривую
                            // 0 на краях, 1 в центре зоны взаимодействия
                            // Это позволяет создавать "оболочки"
                            const curve = 1.0 - Math.abs(2.0 * subQ - 1.0); 
                            
                            f = rules[typeI][typeJ] * curve;
                        }

                        // Применяем силу
                        const fScaled = (f * forceFactor); // Деление на dist убрано для стабильности на малых дистанциях
                        
                        // Нормализуем вектор направления
                        fx += (dx / dist) * fScaled;
                        fy += (dy / dist) * fScaled;
                        fz += (dz / dist) * fScaled;
                    }
                }

                // Интеграция Эйлера
                particles[i8+3] = (particles[i8+3] + fx) * friction;
                particles[i8+4] = (particles[i8+4] + fy) * friction;
                particles[i8+5] = (particles[i8+5] + fz) * friction;

                // Ограничение скорости (чтобы не разлетались)
                const vx = particles[i8+3];
                const vy = particles[i8+4];
                const vz = particles[i8+5];
                const speedSq = vx*vx + vy*vy + vz*vz;
                
                if (speedSq > maxSpeed * maxSpeed) {
                    const scale = maxSpeed / Math.sqrt(speedSq);
                    particles[i8+3] *= scale;
                    particles[i8+4] *= scale;
                    particles[i8+5] *= scale;
                }

                // Обновление позиции
                particles[i8] += particles[i8+3];
                particles[i8+1] += particles[i8+4];
                particles[i8+2] += particles[i8+5];

                // Границы мира
                if (particles[i8] <= -halfWorld) particles[i8] += worldSize;
                if (particles[i8] >= halfWorld) particles[i8] -= worldSize;
                if (particles[i8+1] <= -halfWorld) particles[i8+1] += worldSize;
                if (particles[i8+1] >= halfWorld) particles[i8+1] -= worldSize;
                if (particles[i8+2] <= -halfWorld) particles[i8+2] += worldSize;
                if (particles[i8+2] >= halfWorld) particles[i8+2] -= worldSize;
            }
        }

        function updateVisuals() {
            const count = CONFIG.particleCount;
            // Масштабируем частицы обратно пропорционально радиусу взаимодействия, 
            // чтобы визуально сохранять плотность
            const scaleVal = Math.max(1.5, CONFIG.radius / 25.0); 
            
            for (let i = 0; i < count; i++) {
                const i8 = i * 8;
                
                dummy.position.set(
                    particles[i8],
                    particles[i8+1],
                    particles[i8+2]
                );

                dummy.scale.set(scaleVal, scaleVal, scaleVal);
                dummy.updateMatrix();
                
                instancedMesh.setMatrixAt(i, dummy.matrix);
                
                const type = particles[i8+6];
                _color.copy(typeColors[type]);
                
                instancedMesh.setColorAt(i, _color);
            }
            instancedMesh.instanceMatrix.needsUpdate = true;
            if(instancedMesh.instanceColor) instancedMesh.instanceColor.needsUpdate = true;
        }

        // --- Loop ---
        const statsEl = document.getElementById('stats');
        let frames = 0;
        let lastTime = 0;

        function animate(time) {
            requestAnimationFrame(animate);

            frames++;
            if (time - lastTime > 1000) {
                statsEl.innerText = `FPS: ${frames} | Радиус: ${CONFIG.radius} | Частиц: ${CONFIG.particleCount}`;
                frames = 0;
                lastTime = time;
            }

            updatePhysics();
            updateVisuals();
            controls.update();
            composer.render();
        }

        // --- UI Handlers ---
        
        document.getElementById('inp-count').addEventListener('change', (e) => {
            CONFIG.particleCount = parseInt(e.target.value);
            document.getElementById('val-count').innerText = CONFIG.particleCount;
            initSystem();
        });

        document.getElementById('inp-radius').addEventListener('input', (e) => {
            CONFIG.radius = parseInt(e.target.value);
            document.getElementById('val-radius').innerText = CONFIG.radius;
        });

        document.getElementById('inp-force').addEventListener('input', (e) => {
            CONFIG.forceFactor = parseFloat(e.target.value);
            document.getElementById('val-force').innerText = CONFIG.forceFactor;
        });

        document.getElementById('inp-friction').addEventListener('input', (e) => {
            CONFIG.friction = parseFloat(e.target.value);
            document.getElementById('val-friction').innerText = CONFIG.friction;
        });