Lorenz attractor · gpt-4o-mini

To create an interactive visualization of the Lorenz attractor using `three.min.js`, we will include a `canvas` for rendering, attach orbit controls for camera movement, and implement a function to generate and draw the Lorenz attractor trajectory over time, which will give it a glowing butterfly effect. Here’s a self-contained `index.html` file that does this: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lorenz Attractor Visualization</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script src="three.min.js"></script> <script> let scene, camera, renderer, controls, curve, points; const sigma = 10, rho = 28, beta = 8 / 3; const dt = 0.01; let x = 0, y = 1, z = 1.05; const trajectory = []; function init() { // Create the scene scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 15, 40); controls = new THREE.OrbitControls(camera); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create glowing material const material = new THREE.MeshBasicMaterial({ color: 0xff00ff, transparent: true, opacity: 0.6 }); const geometry = new THREE.BufferGeometry(); // Create points and add them to the geometry points = new Float32Array(0); geometry.setAttribute('position', new THREE.BufferAttribute(points, 3)); const line = new THREE.Line(geometry, material); scene.add(line); // Add ambient light const light = new THREE.AmbientLight(0x404040); // soft white light scene.add(light); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); scene.add(directionalLight); animate(line); } function lorenz() { const dx = sigma * (y - x); const dy = x * (rho - z) - y; const dz = x * y - beta * z; x += dx * dt; y += dy * dt; z += dz * dt; trajectory.push(new THREE.Vector3(x, y, z)); } function animate(line) { requestAnimationFrame(() => animate(line)); lorenz(); // Update points for the line geometry const positions = new Float32Array(trajectory.length * 3); trajectory.forEach((point, index) => { positions[index * 3] = point.x; positions[index * 3 + 1] = point.y; positions[index * 3 + 2] = point.z; }); line.geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); line.geometry.attributes.position.needsUpdate = true; renderer.render(scene, camera); controls.update(); } window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); init(); </script> </body> </html> ``` ### Explanation: - **Scene Setup**: The code initializes a basic Three.js scene with a camera, renderer, and OrbitControls. - **Lorenz Attractor Function**: The Lorenz attractor's equations are implemented in the `lorenz` function. This function calculates the next point in the attractor's trajectory and stores it in an array. - **Line Geometry**: The points from the Lorenz attractor are used to update a line geometry that represents the trajectory in 3D space. - **Animation Loop**: The `animate` function continuously calculates new points, updates the line geometry, and renders the scene. - **Responsive Design**: The canvas resizes appropriately on window resize events. You can save this code as `index.html` in your current working directory, which will render the Lorenz attractor visualization in an interactive 3D environment. If you need me to write this file, please confirm!