{"id":611,"date":"2026-09-28T21:41:25","date_gmt":"2026-09-28T13:41:25","guid":{"rendered":"https:\/\/arkdoc.cc\/?p=611"},"modified":"2026-09-29T09:51:17","modified_gmt":"2026-09-29T01:51:17","slug":"611","status":"publish","type":"post","link":"https:\/\/arkdoc.cc\/index.php\/2026\/09\/28\/611\/","title":{"rendered":""},"content":{"rendered":"\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n<script>\n(function() {\n    \/\/ 1. \u7cfb\u7edf\u53c2\u6570\u914d\u7f6e (\u521d\u59cb speed \u6539\u4e3a 1.0)\n    let params = { a: 10.0, b: 2.67, r: 28.0, speed: 1.0, dt: 0.001, maxPoints: 200000 };\n    let state = { x: 0.1, y: 0.0, z: 0.0 };\n    let isPaused = false;\n\n    \/\/ DOM \u5143\u7d20\u7ed1\u5b9a\n    const sliderA = document.getElementById('slider-a');\n    const sliderB = document.getElementById('slider-b');\n    const sliderR = document.getElementById('slider-r');\n    const sliderSpeed = document.getElementById('slider-speed');\n    const sliderZoom = document.getElementById('slider-zoom');\n\n    const valA = document.getElementById('val-a');\n    const valB = document.getElementById('val-b');\n    const valR = document.getElementById('val-r');\n    const valSpeed = document.getElementById('val-speed');\n    const valZoom = document.getElementById('val-zoom');\n\n    sliderA.oninput = (e) => { params.a = parseFloat(e.target.value); valA.textContent = params.a; };\n    sliderB.oninput = (e) => { params.b = parseFloat(e.target.value); valB.textContent = params.b; };\n    sliderR.oninput = (e) => { params.r = parseFloat(e.target.value); valR.textContent = params.r; };\n    sliderSpeed.oninput = (e) => { params.speed = parseFloat(e.target.value); valSpeed.textContent = params.speed; };\n\n    \/\/ 2. Chart.js \u65f6\u95f4\u5e8f\u5217\u56fe\u8868\u914d\u7f6e\n    const chartCtx = document.getElementById('lorenz-timeseries-chart').getContext('2d');\n    const maxChartPoints = 250;\n    \n    const timeChart = new Chart(chartCtx, {\n        type: 'line',\n        data: {\n            labels: Array(maxChartPoints).fill(''),\n            datasets: [\n                { label: 'x(t)', data: [], borderColor: '#f43f5e', borderWidth: 1.5, pointRadius: 0, tension: 0.2 },\n                { label: 'y(t)', data: [], borderColor: '#10b981', borderWidth: 1.5, pointRadius: 0, tension: 0.2 },\n                { label: 'z(t)', data: [], borderColor: '#38bdf8', borderWidth: 1.5, pointRadius: 0, tension: 0.2 }\n            ]\n        },\n        options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            animation: false,\n            scales: {\n                x: { display: false },\n                y: { \n                    grid: { color: 'rgba(255, 255, 255, 0.05)' },\n                    ticks: { color: '#64748b', font: { size: 10 } }\n                }\n            },\n            plugins: {\n                legend: { labels: { color: '#cbd5e1', font: { size: 11 }, boxWidth: 12 } }\n            }\n        }\n    });\n\n    function updateChart(x, y, z) {\n        const datasets = timeChart.data.datasets;\n        datasets[0].data.push(x);\n        datasets[1].data.push(y);\n        datasets[2].data.push(z);\n\n        if (datasets[0].data.length > maxChartPoints) {\n            datasets[0].data.shift();\n            datasets[1].data.shift();\n            datasets[2].data.shift();\n        }\n        timeChart.update('none');\n    }\n\n    \/\/ 3. Three.js 3D \u573a\u666f\u4e0e\u5bb9\u5668\u81ea\u9002\u5e94\u8bbe\u7f6e\n    const container = document.getElementById('lorenz-canvas-container');\n    const scene = new THREE.Scene();\n    const camera = new THREE.PerspectiveCamera(45, container.clientWidth \/ container.clientHeight, 0.1, 1000);\n    camera.position.set(0, 0, 110);\n\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n    renderer.setSize(container.clientWidth, container.clientHeight);\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n    container.appendChild(renderer.domElement);\n\n    const controls = new THREE.OrbitControls(camera, renderer.domElement);\n    controls.enableDamping = true;\n    controls.target.set(0, 0, 25);\n\n    \/\/ Zoom \u6ed1\u5757\u4ea4\u4e92\n    sliderZoom.oninput = (e) => {\n        const dist = parseFloat(e.target.value);\n        valZoom.textContent = dist;\n        const dir = new THREE.Vector3().subVectors(camera.position, controls.target).normalize();\n        camera.position.copy(controls.target).addScaledVector(dir, dist);\n    };\n\n    controls.addEventListener('change', () => {\n        const dist = camera.position.distanceTo(controls.target);\n        sliderZoom.value = dist.toFixed(0);\n        valZoom.textContent = dist.toFixed(0);\n    });\n\n    \/\/ \u7a97\u53e3\u5c3a\u5bf8\u53d8\u5316\u81ea\u9002\u5e94\n    window.addEventListener('resize', () => {\n        const width = container.clientWidth;\n        const height = container.clientHeight;\n        camera.aspect = width \/ height;\n        camera.updateProjectionMatrix();\n        renderer.setSize(width, height);\n    });\n\n    \/\/ 4. \u8f68\u8ff9 Geometry\n    let positions = new Float32Array(params.maxPoints * 3);\n    let colors = new Float32Array(params.maxPoints * 3);\n    const geometry = new THREE.BufferGeometry();\n    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\n\n    const material = new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.85 });\n    const line = new THREE.Line(geometry, material);\n    scene.add(line);\n\n    \/\/ \u5934\u90e8\u7c92\u5b50\n    const headGeom = new THREE.SphereGeometry(0.35, 16, 16);\n    const headMat = new THREE.MeshBasicMaterial({ color: 0x38bdf8 });\n    const head = new THREE.Mesh(headGeom, headMat);\n    scene.add(head);\n\n    let count = 0;\n    const tempColor = new THREE.Color();\n\n    \/\/ 5. RK4 \u6c42\u89e3\u5668\n    function stepRK4() {\n        const { a, b, r, dt } = params;\n        let { x, y, z } = state;\n\n        const f = (x, y, z) => ({ dx: a * (y - x), dy: x * (r - z) - y, dz: x * y - b * z });\n\n        let k1 = f(x, y, z);\n        let k2 = f(x + 0.5*dt*k1.dx, y + 0.5*dt*k1.dy, z + 0.5*dt*k1.dz);\n        let k3 = f(x + 0.5*dt*k2.dx, y + 0.5*dt*k2.dy, z + 0.5*dt*k2.dz);\n        let k4 = f(x + dt*k3.dx, y + dt*k3.dy, z + dt*k3.dz);\n\n        state.x += (dt \/ 6) * (k1.dx + 2*k2.dx + 2*k3.dx + k4.dx);\n        state.y += (dt \/ 6) * (k1.dy + 2*k2.dy + 2*k3.dy + k4.dy);\n        state.z += (dt \/ 6) * (k1.dz + 2*k2.dz + 2*k3.dz + k4.dz);\n    }\n\n    function addPoint(x, y, z) {\n        const posArr = geometry.attributes.position.array;\n        const colArr = geometry.attributes.color.array;\n\n        tempColor.setHSL((count * 0.0003) % 1.0, 0.9, 0.6);\n\n        if (count < params.maxPoints) {\n            posArr[count * 3] = x; posArr[count * 3 + 1] = y; posArr[count * 3 + 2] = z;\n            colArr[count * 3] = tempColor.r; colArr[count * 3 + 1] = tempColor.g; colArr[count * 3 + 2] = tempColor.b;\n            count++;\n        } else {\n            positions.copyWithin(0, 3, params.maxPoints * 3);\n            colors.copyWithin(0, 3, params.maxPoints * 3);\n            const idx = params.maxPoints - 1;\n            posArr[idx * 3] = x; posArr[idx * 3 + 1] = y; posArr[idx * 3 + 2] = z;\n            colArr[idx * 3] = tempColor.r; colArr[idx * 3 + 1] = tempColor.g; colArr[idx * 3 + 2] = tempColor.b;\n        }\n\n        geometry.attributes.position.needsUpdate = true;\n        geometry.attributes.color.needsUpdate = true;\n        geometry.setDrawRange(0, count);\n        head.position.set(x, y, z);\n    }\n\n    \/\/ \u6e05\u7a7a\u4e0e\u91cd\u7f6e\u4e8b\u4ef6\n    function clearChartData() {\n        timeChart.data.datasets.forEach(ds => ds.data = []);\n        timeChart.update();\n    }\n\n    document.getElementById('btn-reset').onclick = () => {\n        state = { x: 0.1, y: 0.0, z: 0.0 };\n        count = 0;\n        geometry.setDrawRange(0, 0);\n        clearChartData();\n    };\n\n    document.getElementById('btn-clear').onclick = () => {\n        count = 0;\n        geometry.setDrawRange(0, 0);\n        clearChartData();\n    };\n\n    document.getElementById('btn-pause').onclick = () => { isPaused = !isPaused; };\n\n    \/\/ 6. \u4e3b\u6e32\u67d3\u5faa\u73af\n    function animate() {\n        requestAnimationFrame(animate);\n        if (!isPaused) {\n            const steps = Math.round(20 * params.speed);\n            for (let i = 0; i < steps; i++) {\n                stepRK4();\n                addPoint(state.x, state.y, state.z);\n            }\n            updateChart(state.x, state.y, state.z);\n        }\n        controls.update();\n        renderer.render(scene, camera);\n    }\n\n    animate();\n})();\n<\/script>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n<script>\n(function() {\n    \/\/ 1. \u7cfb\u7edf\u53c2\u6570\u914d\u7f6e (\u589e\u5927 maxPoints \u63d0\u5347\u8f68\u8ff9\u603b\u65f6\u95f4\u957f\u5ea6)\n    let params = { a: 10.0, b: 2.67, r: 28.0, speed: 1.0, dt: 0.001, maxPoints: 200000 };\n    let state = { x: 0.1, y: 0.0, z: 0.0 };\n    let isPaused = false;\n    let timeStepCount = 0;\n\n    \/\/ DOM \u5143\u7d20\u7ed1\u5b9a\n    const sliderA = document.getElementById('slider-a');\n    const sliderB = document.getElementById('slider-b');\n    const sliderR = document.getElementById('slider-r');\n    const sliderSpeed = document.getElementById('slider-speed');\n    const sliderZoom = document.getElementById('slider-zoom');\n\n    const valA = document.getElementById('val-a');\n    const valB = document.getElementById('val-b');\n    const valR = document.getElementById('val-r');\n    const valSpeed = document.getElementById('val-speed');\n    const valZoom = document.getElementById('val-zoom');\n\n    sliderA.oninput = (e) => { params.a = parseFloat(e.target.value); valA.textContent = params.a; };\n    sliderB.oninput = (e) => { params.b = parseFloat(e.target.value); valB.textContent = params.b; };\n    sliderR.oninput = (e) => { params.r = parseFloat(e.target.value); valR.textContent = params.r; };\n    sliderSpeed.oninput = (e) => { params.speed = parseFloat(e.target.value); valSpeed.textContent = params.speed; };\n\n    \/\/ 2. Chart.js \u65f6\u95f4\u5e8f\u5217\u56fe\u8868\u914d\u7f6e\n    const chartCtx = document.getElementById('lorenz-timeseries-chart').getContext('2d');\n    const maxChartPoints = 250; \/\/ \u56fe\u8868\u4fdd\u7559\u7684\u6700\u5927\u7a97\u53e3\u6570\u636e\u70b9\n    \n    const timeChart = new Chart(chartCtx, {\n        type: 'line',\n        data: {\n            labels: Array(maxChartPoints).fill(''),\n            datasets: [\n                { label: 'x(t)', data: [], borderColor: '#f43f5e', borderWidth: 1.5, pointRadius: 0, tension: 0.2 },\n                { label: 'y(t)', data: [], borderColor: '#10b981', borderWidth: 1.5, pointRadius: 0, tension: 0.2 },\n                { label: 'z(t)', data: [], borderColor: '#38bdf8', borderWidth: 1.5, pointRadius: 0, tension: 0.2 }\n            ]\n        },\n        options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            animation: false,\n            scales: {\n                x: { display: false },\n                y: { \n                    grid: { color: 'rgba(255, 255, 255, 0.05)' },\n                    ticks: { color: '#64748b', font: { size: 10 } }\n                }\n            },\n            plugins: {\n                legend: { labels: { color: '#cbd5e1', font: { size: 11 }, boxWidth: 12 } }\n            }\n        }\n    });\n\n    function updateChart(x, y, z) {\n        const datasets = timeChart.data.datasets;\n        datasets[0].data.push(x);\n        datasets[1].data.push(y);\n        datasets[2].data.push(z);\n\n        if (datasets[0].data.length > maxChartPoints) {\n            datasets[0].data.shift();\n            datasets[1].data.shift();\n            datasets[2].data.shift();\n        }\n        timeChart.update('none'); \/\/ \u65e0\u52a8\u753b\u9ad8\u901f\u66f4\u65b0\n    }\n\n    \/\/ 3. Three.js 3D \u573a\u666f\u4e0e\u5bb9\u5668\u81ea\u9002\u5e94\u8bbe\u7f6e\n    const container = document.getElementById('lorenz-canvas-container');\n    const scene = new THREE.Scene();\n    const camera = new THREE.PerspectiveCamera(45, container.clientWidth \/ container.clientHeight, 0.1, 1000);\n    camera.position.set(0, 0, 110);\n\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n    renderer.setSize(container.clientWidth, container.clientHeight);\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n    container.appendChild(renderer.domElement);\n\n    const controls = new THREE.OrbitControls(camera, renderer.domElement);\n    controls.enableDamping = true;\n    controls.target.set(0, 0, 25);\n\n    \/\/ Zoom \u6ed1\u5757\u4ea4\u4e92\n    sliderZoom.oninput = (e) => {\n        const dist = parseFloat(e.target.value);\n        valZoom.textContent = dist;\n        const dir = new THREE.Vector3().subVectors(camera.position, controls.target).normalize();\n        camera.position.copy(controls.target).addScaledVector(dir, dist);\n    };\n\n    controls.addEventListener('change', () => {\n        const dist = camera.position.distanceTo(controls.target);\n        sliderZoom.value = dist.toFixed(0);\n        valZoom.textContent = dist.toFixed(0);\n    });\n\n    \/\/ \u7a97\u53e3\u5c3a\u5bf8\u53d8\u5316\u81ea\u9002\u5e94\u81ea\u52a8\u8c03\u6574 3D \u753b\u5e03\u4e0e\u955c\u5934\u5bbd\u9ad8\u6bd4\n    window.addEventListener('resize', () => {\n        const width = container.clientWidth;\n        const height = container.clientHeight;\n        camera.aspect = width \/ height;\n        camera.updateProjectionMatrix();\n        renderer.setSize(width, height);\n    });\n\n    \/\/ 4. \u8f68\u8ff9 Geometry \u62d3\u5bbd (\u652f\u6301\u8d85\u957f\u603b\u65f6\u95f4\u957f\u5ea6)\n    let positions = new Float32Array(params.maxPoints * 3);\n    let colors = new Float32Array(params.maxPoints * 3);\n    const geometry = new THREE.BufferGeometry();\n    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\n\n    const material = new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.85 });\n    const line = new THREE.Line(geometry, material);\n    scene.add(line);\n\n    \/\/ \u5934\u90e8\u7c92\u5b50\n    const headGeom = new THREE.SphereGeometry(0.35, 16, 16);\n    const headMat = new THREE.MeshBasicMaterial({ color: 0x38bdf8 });\n    const head = new THREE.Mesh(headGeom, headMat);\n    scene.add(head);\n\n    let count = 0;\n    const tempColor = new THREE.Color();\n\n    \/\/ 5. RK4 \u6c42\u89e3\u5668\n    function stepRK4() {\n        const { a, b, r, dt } = params;\n        let { x, y, z } = state;\n\n        const f = (x, y, z) => ({ dx: a * (y - x), dy: x * (r - z) - y, dz: x * y - b * z });\n\n        let k1 = f(x, y, z);\n        let k2 = f(x + 0.5*dt*k1.dx, y + 0.5*dt*k1.dy, z + 0.5*dt*k1.dz);\n        let k3 = f(x + 0.5*dt*k2.dx, y + 0.5*dt*k2.dy, z + 0.5*dt*k2.dz);\n        let k4 = f(x + dt*k3.dx, y + dt*k3.dy, z + dt*k3.dz);\n\n        state.x += (dt \/ 6) * (k1.dx + 2*k2.dx + 2*k3.dx + k4.dx);\n        state.y += (dt \/ 6) * (k1.dy + 2*k2.dy + 2*k3.dy + k4.dy);\n        state.z += (dt \/ 6) * (k1.dz + 2*k2.dz + 2*k3.dz + k4.dz);\n    }\n\n    function addPoint(x, y, z) {\n        const posArr = geometry.attributes.position.array;\n        const colArr = geometry.attributes.color.array;\n\n        tempColor.setHSL((count * 0.0003) % 1.0, 0.9, 0.6);\n\n        if (count < params.maxPoints) {\n            posArr[count * 3] = x; posArr[count * 3 + 1] = y; posArr[count * 3 + 2] = z;\n            colArr[count * 3] = tempColor.r; colArr[count * 3 + 1] = tempColor.g; colArr[count * 3 + 2] = tempColor.b;\n            count++;\n        } else {\n            positions.copyWithin(0, 3, params.maxPoints * 3);\n            colors.copyWithin(0, 3, params.maxPoints * 3);\n            const idx = params.maxPoints - 1;\n            posArr[idx * 3] = x; posArr[idx * 3 + 1] = y; posArr[idx * 3 + 2] = z;\n            colArr[idx * 3] = tempColor.r; colArr[idx * 3 + 1] = tempColor.g; colArr[idx * 3 + 2] = tempColor.b;\n        }\n\n        geometry.attributes.position.needsUpdate = true;\n        geometry.attributes.color.needsUpdate = true;\n        geometry.setDrawRange(0, count);\n        head.position.set(x, y, z);\n    }\n\n    \/\/ \u6e05\u7a7a\u4e0e\u91cd\u7f6e\u4e8b\u4ef6\n    function clearChartData() {\n        timeChart.data.datasets.forEach(ds => ds.data = []);\n        timeChart.update();\n    }\n\n    document.getElementById('btn-reset').onclick = () => {\n        state = { x: 0.1, y: 0.0, z: 0.0 };\n        count = 0;\n        geometry.setDrawRange(0, 0);\n        clearChartData();\n    };\n\n    document.getElementById('btn-clear').onclick = () => {\n        count = 0;\n        geometry.setDrawRange(0, 0);\n        clearChartData();\n    };\n\n    document.getElementById('btn-pause').onclick = () => { isPaused = !isPaused; };\n\n    \/\/ 6. \u4e3b\u6e32\u67d3\u5faa\u73af\n    function animate() {\n        requestAnimationFrame(animate);\n        if (!isPaused) {\n            const steps = Math.round(20 * params.speed);\n            for (let i = 0; i < steps; i++) {\n                stepRK4();\n                addPoint(state.x, state.y, state.z);\n            }\n            \/\/ \u6bcf\u5e27\u62bd\u53d6\u66f4\u65b0\u4e00\u6b21\u89e3\u5206\u91cf\u65f6\u95f4\u5e8f\u5217\u56fe\n            updateChart(state.x, state.y, state.z);\n        }\n        controls.update();\n        renderer.render(scene, camera);\n    }\n\n    animate();\n})();\n<\/script>\n\n\n<div id=\"preview\" class=\"latex-article tex2jax_process dark\">\n    <h1>Lorenz Chaotic Dynamics and Attractors<\/h1>\n    \n    <p>\u6d1b\u4f26\u8328\u7cfb\u7edf\uff08Lorenz System\uff09\u662f\u7531\u6c14\u8c61\u5b66\u5bb6\u7231\u5fb7\u534e\u00b7\u6d1b\u4f26\u8328\uff08Edward Lorenz\uff09\u4e8e 1963 \u5e74\u63d0\u51fa\u7684\u4e09\u7ef4\u975e\u7ebf\u6027\u81ea\u6cbb\u5fae\u5206\u65b9\u7a0b\u7ec4\u3002\u8be5\u7cfb\u7edf\u6700\u521d\u7528\u4e8e\u6a21\u62df\u5927\u6c14\u5bf9\u6d41\uff0c\u5176\u7b80\u5316\u7248\u672c\u5374\u5c55\u73b0\u51fa\u4e86\u6781\u5176\u590d\u6742\u7684<span style=\"color: red;\">\u6df7\u6c8c\u884c\u4e3a (Chaotic Dynamics)<\/span>\u4e0e\u7ecf\u5178\u7684<span style=\"color: #16a34a;\">\u8774\u8776\u6548\u5e94 (Butterfly Effect)<\/span>\u3002<\/p>\n\n    <p>\u6d1b\u4f26\u8328\u7cfb\u7edf\u7684\u5e38\u5fae\u5206\u65b9\u7a0b\u5b9a\u4e49\u5982\u4e0b\uff1a<\/p>\n    \n    <p class=\"no-indent-p\">\n        $$\\begin{aligned}\n        \\frac{dx}{dt} &amp;= a(y - x), \\\\[0.3em]\n        \\frac{dy}{dt} &amp;= rx - y - xz, \\\\[0.3em]\n        \\frac{dz}{dt} &amp;= xy - bz,\n        \\end{aligned}$$\n\u5176\u4e2d\uff0c$x, y, z$ \u4ee3\u8868\u7cfb\u7edf\u7684\u72b6\u6001\u53d8\u91cf\uff08\u5206\u522b\u5bf9\u5e94\u6d41\u4f53\u7ffb\u8f6c\u901f\u7387\u3001\u6c34\u5e73\u6e29\u5dee\u548c\u5782\u76f4\u6e29\u5ea6\u68af\u5ea6\uff09\uff0c\u800c\u53c2\u6570 <span style=\"color: #2f54eb;\">$a$ (Prandtl \u6570)<\/span>\u3001<span style=\"color: #2f54eb;\">$r$ (Rayleigh \u6570)<\/span> \u548c <span style=\"color: #2f54eb;\">$b$ (\u51e0\u4f55\u6bd4\u4f8b\u56e0\u5b50)<\/span> \u5219\u51b3\u5b9a\u4e86\u7cfb\u7edf\u7684\u52a8\u529b\u5b66\u76f8\u56fe\u7ed3\u6784\u3002<\/p>\n\n    <!-- 3D \u6a21\u62df\u5668\uff08\u4e0a\u4e0b\u5e03\u5c40\uff0c\u81ea\u9002\u5e94\u5bbd\u9ad8\uff09 -->\n    <div class=\"latex-figure\">\n        <div style=\"width: 100%; max-width: 1000px; background: rgba(15, 23, 42, 0.85); border: 1px solid #334155; border-radius: 12px; padding: 16px; box-sizing: border-box; backdrop-filter: blur(8px);\">\n            \n            <!-- \u4e0a\u65b9\u63a7\u5236\u9762\u677f -->\n            <div style=\"display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid #334155; padding-bottom: 12px;\">\n                <div style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;\">\n                    <span style=\"font-weight: bold; color: #38bdf8; font-size: 0.95em;\">\ud83c\udf9b\ufe0f \u5b9e\u65f6\u53c2\u6570\u63a7\u5236\u53f0 (RK4 ODE Solver)<\/span>\n                    <span style=\"font-size: 0.8em; color: #94a3b8;\">\u957f\u65f6\u95f4\u5e8f\u5217\u8f68\u8ff9 + \u52a8\u6001\u89e3\u5206\u91cf\u6ce2\u5f62\u56fe<\/span>\n                <\/div>\n                \n                <!-- \u53c2\u6570\u6ed1\u52a8\u6761\u7f51\u683c -->\n                <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; font-size: 0.85em;\">\n                    <div>\n                        <label style=\"display: flex; justify-content: space-between; color: #cbd5e1;\">\n                            <span>a (Prandtl):<\/span> <span id=\"val-a\">10.0<\/span>\n                        <\/label>\n                        <input type=\"range\" id=\"slider-a\" min=\"0\" max=\"30\" step=\"0.1\" value=\"10.0\" style=\"width: 100%;\">\n                    <\/div>\n                    <div>\n                        <label style=\"display: flex; justify-content: space-between; color: #cbd5e1;\">\n                            <span>b (Ratio):<\/span> <span id=\"val-b\">2.67<\/span>\n                        <\/label>\n                        <input type=\"range\" id=\"slider-b\" min=\"0\" max=\"10\" step=\"0.01\" value=\"2.67\" style=\"width: 100%;\">\n                    <\/div>\n                    <div>\n                        <label style=\"display: flex; justify-content: space-between; color: #cbd5e1;\">\n                            <span>r (Rayleigh):<\/span> <span id=\"val-r\">28.0<\/span>\n                        <\/label>\n                        <input type=\"range\" id=\"slider-r\" min=\"0\" max=\"60\" step=\"0.1\" value=\"28.0\" style=\"width: 100%;\">\n                    <\/div>\n                    <div>\n                        <label style=\"display: flex; justify-content: space-between; color: #cbd5e1;\">\n                            <span>\u901f\u5ea6 (Speed):<\/span> <span id=\"val-speed\">1.0<\/span>\n                        <\/label>\n                        <input type=\"range\" id=\"slider-speed\" min=\"0.1\" max=\"5.0\" step=\"0.1\" value=\"1.0\" style=\"width: 100%;\">\n                    <\/div>\n                    <div>\n                        <label style=\"display: flex; justify-content: space-between; color: #818cf8; font-weight: bold;\">\n                            <span>\ud83d\udd0d \u89c6\u89d2 Zoom:<\/span> <span id=\"val-zoom\">110<\/span>\n                        <\/label>\n                        <input type=\"range\" id=\"slider-zoom\" min=\"20\" max=\"300\" step=\"1\" value=\"110\" style=\"width: 100%;\">\n                    <\/div>\n                <\/div>\n\n                <!-- \u64cd\u4f5c\u6309\u94ae -->\n                <div style=\"display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px;\">\n                    <button id=\"btn-reset\" style=\"background: #334155; color: #fff; border: none; padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 0.8em; transition: 0.2s;\">\u91cd\u7f6e\u76f8\u8f68<\/button>\n                    <button id=\"btn-pause\" style=\"background: #6366f1; color: #fff; border: none; padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 0.8em; transition: 0.2s;\">\u6682\u505c\/\u7ee7\u7eed<\/button>\n                    <button id=\"btn-clear\" style=\"background: #475569; color: #fff; border: none; padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 0.8em; transition: 0.2s;\">\u6e05\u7a7a\u753b\u5e03<\/button>\n                <\/div>\n            <\/div>\n\n            <!-- \u4e0b\u65b9 3D \u753b\u5e03\u533a\u57df\uff08\u81ea\u9002\u5e94\u663e\u793a\uff0c\u586b\u6ee1\u5bb9\u5668\uff09 -->\n            <div id=\"lorenz-canvas-container\" style=\"width: 100%; aspect-ratio: 16\/9; min-height: 380px; max-height: 70vh; position: relative; border-radius: 8px; overflow: hidden; background: #080c14; border: 1px solid #1e293b;\">\n            <\/div>\n\n            <!-- \u89e3\u5206\u91cf\u65f6\u95f4\u5e8f\u5217\u56fe\u8868\u5bb9\u5668 -->\n            <div style=\"margin-top: 16px; border-top: 1px solid #334155; padding-top: 12px;\">\n                <div style=\"font-size: 0.85em; color: #94a3b8; margin-bottom: 8px; font-weight: 500;\">\n                    \ud83d\udcc8 \u72b6\u6001\u53d8\u91cf\u89e3\u5206\u91cf\u65f6\u95f4\u5e8f\u5217\u52a8\u6001\u56fe (x(t), y(t), z(t) Time-Series)\n                <\/div>\n                <div style=\"width: 100%; height: 180px; position: relative;\">\n                    <canvas id=\"lorenz-timeseries-chart\"><\/canvas>\n                <\/div>\n            <\/div>\n\n        <\/div>\n        <div class=\"figure-caption\">\u56fe 1: \u6d1b\u4f26\u8328\u5438\u5f15\u5b50\u957f\u65f6\u76f8\u8f68\u8ff9 3D \u6e32\u67d3\u4e0e\u72b6\u6001\u89e3\u5206\u91cf\u65f6\u95f4\u5e8f\u5217\u52a8\u6001\u56fe<\/div>\n    <\/div>\n\n    <p>\u5f53\u53c2\u6570\u8bbe\u5b9a\u4e3a\u7ecf\u5178\u7684 $a = 10, b = 8\/3, r = 28$ \u65f6\uff0c\u7cfb\u7edf\u5c55\u73b0\u51fa\u6781\u5ea6\u654f\u611f\u7684\u521d\u503c\u4f9d\u8d56\u6027\u3002\u4e0b\u8868\u603b\u7ed3\u4e86\u5728\u4e0d\u540c Rayleigh \u6570 $r$ \u4e0b\u7cfb\u7edf\u7684\u52a8\u529b\u5b66\u6f14\u5316\u7279\u5f81\uff1a<\/p>\n\n    <!-- \u4e09\u7ebf\u5b66\u672f\u8868 -->\n    <div class=\"latex-table-container\">\n        <div class=\"table-caption\">\u8868 1: \u6d1b\u4f26\u8328\u7cfb\u7edf\u5728\u4e0d\u540c Rayleigh \u6570\u4e0b\u7684\u76f8\u7a7a\u95f4\u62d3\u6251\u7279\u5f81<\/div>\n        <table class=\"latex-table\">\n            <tbody>\n                <tr>\n                    <td>Rayleigh \u6570 ($r$)<\/td>\n                    <td>\u76f8\u7a7a\u95f4\u5f62\u6001<\/td>\n                    <td>\u7cfb\u7edf\u7a33\u5b9a\u6027\u5206\u6790<\/td>\n                <\/tr>\n                <tr>\n                    <td>$0 &lt; r &lt; 1$<\/td>\n                    <td>\u539f\u70b9\u4e0d\u52a8\u70b9 $C_0(0,0,0)$<\/td>\n                    <td>\u5168\u5c40\u6e10\u8fd1\u7a33\u5b9a\uff08\u4e0d\u53d1\u751f\u5bf9\u6d41\uff09<\/td>\n                <\/tr>\n                <tr>\n                    <td>$1 &lt; r &lt; 24.74$<\/td>\n                    <td>\u4e00\u5bf9\u5bf9\u79f0\u4e0d\u52a8\u70b9 $C_1, C_2$<\/td>\n                    <td>\u7a33\u5b9a\u7126\u70b9\uff08\u5f62\u6210\u7a33\u6001\u5bf9\u6d41\uff09<\/td>\n                <\/tr>\n                <tr>\n                    <td>$r &gt; 24.74$<\/td>\n                    <td>\u5947\u5f02\u5438\u5f15\u5b50 (Strange Attractor)<\/td>\n                    <td>\u4e0d\u7a33\u5b9a\u4e14\u5b58\u5728\u6df7\u6c8c\u53cc\u7ffc\u8f68\u9053<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n    <\/div>\n\n    <p class=\"no-indent-p\">\u6570\u503c\u79ef\u5206\u901a\u5e38\u91c7\u7528\u56db\u9636 Runge-Kutta \u7b97\u6cd5\uff08RK4\uff09\uff0c\u5176\u79bb\u6563\u8fed\u4ee3\u8868\u8fbe\u5982\u4e0b\uff1a<\/p>\n    <p class=\"no-indent-p\">$\\mathbf{x}_{n+1} = \\mathbf{x}_n + \\frac{\\Delta t}{6} (k_1 + 2k_2 + 2k_3 + k_4)$<\/p>\n    \n    <p class=\"no-indent-p\">\u5373\u4fbf\u79ef\u5206\u6b65\u957f\u53d6\u503c\u8f83\u5c0f\uff08\u4f8b\u5982 $\\Delta t = 0.001$\uff09\uff0c\u76f8\u8f68\u8ff9\u4e5f\u4f1a\u5728\u4e24\u4e2a\u8774\u8776\u7fc5\u8180\uff08\u5438\u5f15\u5b50\u53cc\u53f6\uff09\u4e4b\u95f4\u8fdb\u884c\u4e0d\u53ef\u9884\u6d4b\u7684\u968f\u673a\u8df3\u8dc3\u3002<\/p>\n\n    <p>\u6d1b\u4f26\u8328\u5438\u5f15\u5b50\u4e0d\u4ec5\u63ed\u793a\u4e86\u786e\u5b9a\u6027\u7cfb\u7edf\u4e2d\u5185\u5efa\u7684\u968f\u673a\u6027\uff0c\u66f4\u5960\u5b9a\u4e86\u73b0\u4ee3\u975e\u7ebf\u6027\u52a8\u529b\u5b66\u4e0e\u6df7\u6c8c\u7406\u8bba\u7684\u57fa\u7840\u3002\u66f4\u6709\u8da3\u7684\u662f\uff0c\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u8fc7\u7a0b\u63a2\u7d22\u7cfb\u7edf\u7684\u590d\u6742\u76f8\u53d8\u73b0\u8c61\uff1a<\/p>\n\n    <ul>\n        <li>\u901a\u8fc7\u8c03\u6574\u63a7\u5236\u53f0\u4e2d\u7684 <em>r (Rayleigh)<\/em> \u53c2\u6570\uff0c\u89c2\u5bdf\u7cfb\u7edf\u4ece\u7a33\u5b9a\u7126\u70b9\u5411\u6df7\u6c8c\u72b6\u6001\u5206\u5c94\uff08Bifurcation\uff09\u7684\u8fc7\u6e21\u8fc7\u7a0b\u3002<\/li>\n        <li>\u68c0\u67e5\u5728\u4e0d\u540c Zoom \u7f29\u653e\u6bd4\u4f8b\u4e0b\u5438\u5f15\u5b50\u7684\u81ea\u76f8\u4f3c\u5206\u5f62\u7ed3\u6784\uff1a${\\color{#2f54eb}D_H \\approx 2.06 \\pm 0.01}$\u3002<\/li>\n    <\/ul>\n<\/div>\n<!-- \u4f9d\u8d56\u811a\u672c\u52a0\u8f7d\uff1aThree.js, OrbitControls \u4e0e Chart.js -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n<script>\n(function() {\n    \/\/ 1. \u7cfb\u7edf\u53c2\u6570\u914d\u7f6e (\u521d\u59cb speed \u6539\u4e3a 1.0)\n    let params = { a: 10.0, b: 2.67, r: 28.0, speed: 1.0, dt: 0.001, maxPoints: 200000 };\n    let state = { x: 0.1, y: 0.0, z: 0.0 };\n    let isPaused = false;\n\n    \/\/ DOM \u5143\u7d20\u7ed1\u5b9a\n    const sliderA = document.getElementById('slider-a');\n    const sliderB = document.getElementById('slider-b');\n    const sliderR = document.getElementById('slider-r');\n    const sliderSpeed = document.getElementById('slider-speed');\n    const sliderZoom = document.getElementById('slider-zoom');\n\n    const valA = document.getElementById('val-a');\n    const valB = document.getElementById('val-b');\n    const valR = document.getElementById('val-r');\n    const valSpeed = document.getElementById('val-speed');\n    const valZoom = document.getElementById('val-zoom');\n\n    sliderA.oninput = (e) => { params.a = parseFloat(e.target.value); valA.textContent = params.a; };\n    sliderB.oninput = (e) => { params.b = parseFloat(e.target.value); valB.textContent = params.b; };\n    sliderR.oninput = (e) => { params.r = parseFloat(e.target.value); valR.textContent = params.r; };\n    sliderSpeed.oninput = (e) => { params.speed = parseFloat(e.target.value); valSpeed.textContent = params.speed; };\n\n    \/\/ 2. Chart.js \u65f6\u95f4\u5e8f\u5217\u56fe\u8868\u914d\u7f6e\n    const chartCtx = document.getElementById('lorenz-timeseries-chart').getContext('2d');\n    const maxChartPoints = 250;\n    \n    const timeChart = new Chart(chartCtx, {\n        type: 'line',\n        data: {\n            labels: Array(maxChartPoints).fill(''),\n            datasets: [\n                { label: 'x(t)', data: [], borderColor: '#f43f5e', borderWidth: 1.5, pointRadius: 0, tension: 0.2 },\n                { label: 'y(t)', data: [], borderColor: '#10b981', borderWidth: 1.5, pointRadius: 0, tension: 0.2 },\n                { label: 'z(t)', data: [], borderColor: '#38bdf8', borderWidth: 1.5, pointRadius: 0, tension: 0.2 }\n            ]\n        },\n        options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            animation: false,\n            scales: {\n                x: { display: false },\n                y: { \n                    grid: { color: 'rgba(255, 255, 255, 0.05)' },\n                    ticks: { color: '#64748b', font: { size: 10 } }\n                }\n            },\n            plugins: {\n                legend: { labels: { color: '#cbd5e1', font: { size: 11 }, boxWidth: 12 } }\n            }\n        }\n    });\n\n    function updateChart(x, y, z) {\n        const datasets = timeChart.data.datasets;\n        datasets[0].data.push(x);\n        datasets[1].data.push(y);\n        datasets[2].data.push(z);\n\n        if (datasets[0].data.length > maxChartPoints) {\n            datasets[0].data.shift();\n            datasets[1].data.shift();\n            datasets[2].data.shift();\n        }\n        timeChart.update('none');\n    }\n\n    \/\/ 3. Three.js 3D \u573a\u666f\u4e0e\u5bb9\u5668\u81ea\u9002\u5e94\u8bbe\u7f6e\n    const container = document.getElementById('lorenz-canvas-container');\n    const scene = new THREE.Scene();\n    const camera = new THREE.PerspectiveCamera(45, container.clientWidth \/ container.clientHeight, 0.1, 1000);\n    camera.position.set(0, 0, 110);\n\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n    renderer.setSize(container.clientWidth, container.clientHeight);\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n    container.appendChild(renderer.domElement);\n\n    const controls = new THREE.OrbitControls(camera, renderer.domElement);\n    controls.enableDamping = true;\n    controls.target.set(0, 0, 25);\n\n    \/\/ Zoom \u6ed1\u5757\u4ea4\u4e92\n    sliderZoom.oninput = (e) => {\n        const dist = parseFloat(e.target.value);\n        valZoom.textContent = dist;\n        const dir = new THREE.Vector3().subVectors(camera.position, controls.target).normalize();\n        camera.position.copy(controls.target).addScaledVector(dir, dist);\n    };\n\n    controls.addEventListener('change', () => {\n        const dist = camera.position.distanceTo(controls.target);\n        sliderZoom.value = dist.toFixed(0);\n        valZoom.textContent = dist.toFixed(0);\n    });\n\n    \/\/ \u7a97\u53e3\u5c3a\u5bf8\u53d8\u5316\u81ea\u9002\u5e94\n    window.addEventListener('resize', () => {\n        const width = container.clientWidth;\n        const height = container.clientHeight;\n        camera.aspect = width \/ height;\n        camera.updateProjectionMatrix();\n        renderer.setSize(width, height);\n    });\n\n    \/\/ 4. \u8f68\u8ff9 Geometry\n    let positions = new Float32Array(params.maxPoints * 3);\n    let colors = new Float32Array(params.maxPoints * 3);\n    const geometry = new THREE.BufferGeometry();\n    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\n\n    const material = new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.85 });\n    const line = new THREE.Line(geometry, material);\n    scene.add(line);\n\n    \/\/ \u5934\u90e8\u7c92\u5b50\n    const headGeom = new THREE.SphereGeometry(0.35, 16, 16);\n    const headMat = new THREE.MeshBasicMaterial({ color: 0x38bdf8 });\n    const head = new THREE.Mesh(headGeom, headMat);\n    scene.add(head);\n\n    let count = 0;\n    const tempColor = new THREE.Color();\n\n    \/\/ 5. RK4 \u6c42\u89e3\u5668\n    function stepRK4() {\n        const { a, b, r, dt } = params;\n        let { x, y, z } = state;\n\n        const f = (x, y, z) => ({ dx: a * (y - x), dy: x * (r - z) - y, dz: x * y - b * z });\n\n        let k1 = f(x, y, z);\n        let k2 = f(x + 0.5*dt*k1.dx, y + 0.5*dt*k1.dy, z + 0.5*dt*k1.dz);\n        let k3 = f(x + 0.5*dt*k2.dx, y + 0.5*dt*k2.dy, z + 0.5*dt*k2.dz);\n        let k4 = f(x + dt*k3.dx, y + dt*k3.dy, z + dt*k3.dz);\n\n        state.x += (dt \/ 6) * (k1.dx + 2*k2.dx + 2*k3.dx + k4.dx);\n        state.y += (dt \/ 6) * (k1.dy + 2*k2.dy + 2*k3.dy + k4.dy);\n        state.z += (dt \/ 6) * (k1.dz + 2*k2.dz + 2*k3.dz + k4.dz);\n    }\n\n    function addPoint(x, y, z) {\n        const posArr = geometry.attributes.position.array;\n        const colArr = geometry.attributes.color.array;\n\n        tempColor.setHSL((count * 0.0003) % 1.0, 0.9, 0.6);\n\n        if (count < params.maxPoints) {\n            posArr[count * 3] = x; posArr[count * 3 + 1] = y; posArr[count * 3 + 2] = z;\n            colArr[count * 3] = tempColor.r; colArr[count * 3 + 1] = tempColor.g; colArr[count * 3 + 2] = tempColor.b;\n            count++;\n        } else {\n            positions.copyWithin(0, 3, params.maxPoints * 3);\n            colors.copyWithin(0, 3, params.maxPoints * 3);\n            const idx = params.maxPoints - 1;\n            posArr[idx * 3] = x; posArr[idx * 3 + 1] = y; posArr[idx * 3 + 2] = z;\n            colArr[idx * 3] = tempColor.r; colArr[idx * 3 + 1] = tempColor.g; colArr[idx * 3 + 2] = tempColor.b;\n        }\n\n        geometry.attributes.position.needsUpdate = true;\n        geometry.attributes.color.needsUpdate = true;\n        geometry.setDrawRange(0, count);\n        head.position.set(x, y, z);\n    }\n\n    \/\/ \u6e05\u7a7a\u4e0e\u91cd\u7f6e\u4e8b\u4ef6\n    function clearChartData() {\n        timeChart.data.datasets.forEach(ds => ds.data = []);\n        timeChart.update();\n    }\n\n    document.getElementById('btn-reset').onclick = () => {\n        state = { x: 0.1, y: 0.0, z: 0.0 };\n        count = 0;\n        geometry.setDrawRange(0, 0);\n        clearChartData();\n    };\n\n    document.getElementById('btn-clear').onclick = () => {\n        count = 0;\n        geometry.setDrawRange(0, 0);\n        clearChartData();\n    };\n\n    document.getElementById('btn-pause').onclick = () => { isPaused = !isPaused; };\n\n    \/\/ 6. \u4e3b\u6e32\u67d3\u5faa\u73af\n    function animate() {\n        requestAnimationFrame(animate);\n        if (!isPaused) {\n            const steps = Math.round(20 * params.speed);\n            for (let i = 0; i < steps; i++) {\n                stepRK4();\n                addPoint(state.x, state.y, state.z);\n            }\n            updateChart(state.x, state.y, state.z);\n        }\n        controls.update();\n        renderer.render(scene, camera);\n    }\n\n    animate();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Lorenz Chaotic Dynamics and Attractors \u6d1b\u4f26\u8328\u7cfb\u7edf\uff08Lorenz Sys &hellip; <a href=\"https:\/\/arkdoc.cc\/index.php\/2026\/09\/28\/611\/\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\"><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-611","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/posts\/611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/comments?post=611"}],"version-history":[{"count":11,"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/posts\/611\/revisions"}],"predecessor-version":[{"id":623,"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/posts\/611\/revisions\/623"}],"wp:attachment":[{"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/media?parent=611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/categories?post=611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arkdoc.cc\/index.php\/wp-json\/wp\/v2\/tags?post=611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}