Lorenz attractor · llama-3.1-8b-instruct
Using the pre-provided three.min.js (global THREE), visualize the Lorenz attractor as a glowing 3D butterfly trajectory that draws over time, with orbit-drag camera controls.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 messages
Using the pre-provided three.min.js (global THREE), visualize the Lorenz attractor as a glowing 3D butterfly trajectory that draws over time, with orbit-drag camera controls.
<bash>{"command": "mkdir index.js"} </bash> <write>{"path": "index.html", "content": "<!DOCTYPE html>\n<html>\n<head>\n<title>Glowing Lorenz Attractor</title>\n<script src=\"three.min.js\"></script>\n<style>\nbody {\n margin: 0;\n background-color: #f0f0f0;\n}\nh1 {\n font-size: 40px;\n font-weight: bold;\n}\nscreen {\n min-resolution: 2d;\n}\n</style>\n</head>\n<body>\n<center><h1>Lorenz Attractor</h1></center>\n<div id=\"canvas\"></div>\n<script>\n"}</write> <write>{"path": "index.html", "content": "document.addEventListener('DOMContentLoaded', function () {\n // Create the canvas element\n const canvas = document.createElement('canvas');\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n document.getElementById('canvas').appendChild(canvas);\n\n // Initialize the renderer, scene and camera\n const renderer = new THREE.WebGLRenderer({ canvas: canvas });\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n\n // Add some ambient light\n const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2);\n scene.add(ambientLight);\n\n // Add some point lights for the attractor\n const pointLight = new THREE.PointLight(0xFFFFFF, 1, 500000);\n pointLight.position.set(0, 0, 500);\n scene.add(pointLight);\n\n // Initialize the Lorenz attractor parameters\n const sigma = 10;\n const rho = 28;\n const beta = 8/3;\n const timeDiff = 0.01;\n\n // Initialize the Lorenz attractor coordinates\n const x = 1.0;\n const y = 1.0;\n const z = 1.0;\n\n // Create a mesh to draw the attractor line\n const geometry = new THREE.BufferGeometry();\n const positions = new Float32Array(10000 * 3);\n geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n const material = new THREE.LineBasicMaterial({ color: 0x00ff00, linewidth: 2 });\n const line = new THREE.Line(geometry, material);\n scene.add(line);\n\n // Function to update the Lorenz attractor coordinates and draw the new point\n function updateTime() {\n // Update the Lorenz attractor coordinates\n const dx = sigma * (y - x);\n const dy = x * (rho - z) - y;\n const dz = x * y - beta * z;\n x += dx * timeDiff;\n y += dy * timeDiff;\n z += dz * timeDiff;\n\n // Update the line positions\n let idx = 0;\n for (let i = 0; i < positions.length; i += 3) {\n positions[i] = x;\n positions[i + 1] = y;\n positions[i + 2] = z;\n }\n geometry.attributes.position.needsUpdate = true;\n\n // Animate the camera\n camera.position.x = Math.cos(Date.now() * 0.001) * 500;\n camera.position.y = Math.sin(Date.now() * 0.001) * 500;\n camera.lookAt(x, y, 0);\n renderer.setSize(window.innerWidth, window.innerHeight);\n\n // Render the scene\n renderer.render(scene, camera);\n\n // Request the next animation frame\n requestAnimationFrame(updateTime);\n }\n\n // Start animating\n updateTime();\n});\n</script>\n</body>\n</html>\n"} </write>
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.