Double pendulum · gpt-4o-mini
Simulate a chaotic double pendulum on a canvas using the correct equations of motion, drawing the arms and a colorful fading trail of the tip.
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
Simulate a chaotic double pendulum on a canvas using the correct equations of motion, drawing the arms and a colorful fading trail of the tip.
Here's a self-contained HTML file that simulates a chaotic double pendulum on a canvas. The simulation uses the equations of motion for a double pendulum, and it draws the arms along with a colorful fading trail of the tip. You can directly copy and paste the following code into a file named `index.html`: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Double Pendulum Simulation</title> <style> body { margin: 0; overflow: hidden; } canvas { background: #000; display: block; } </style> </head> <body> <canvas id="pendulumCanvas"></canvas> <script> const canvas = document.getElementById('pendulumCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let length1 = 200; let length2 = 200; let mass1 = 20; let mass2 = 20; let angle1 = Math.PI / 2; let angle2 = Math.PI / 2; let angle1Velocity = 0; let angle2Velocity = 0; let gravity = 0.4; function update() { const num1 = -gravity * (2 * mass1 + mass2) * Math.sin(angle1); const num2 = -mass2 * gravity * Math.sin(angle1 - 2 * angle2); const num3 = -2 * Math.sin(angle1 - angle2) * mass2; const num4 = angle2Velocity * angle2Velocity * length2 + angle1Velocity * angle1Velocity * length1 * Math.cos(angle1 - angle2); const denominator = length1 * (2 * mass1 + mass2 - mass2 * Math.cos(2 * angle1 - 2 * angle2)); const angle1Acceleration = (num1 + num2 + num3 * num4) / denominator; const num5 = 2 * Math.sin(angle1 - angle2); const num6 = angle1Velocity * angle1Velocity * length1 * (mass1 + mass2); const num7 = gravity * (mass1 + mass2) * Math.cos(angle1) + angle2Velocity * angle2Velocity * length2 * mass2 * Math.cos(angle1 - angle2); const denominator2 = length2 * (2 * mass1 + mass2 - mass2 * Math.cos(2 * angle1 - 2 * angle2)); const angle2Acceleration = (num5 * (num6 + num7)) / denominator2; angle1Velocity += angle1Acceleration; angle2Velocity += angle2Acceleration; angle1 += angle1Velocity; angle2 += angle2Velocity; draw(); requestAnimationFrame(update); } let trail = []; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Calculate positions const x1 = length1 * Math.sin(angle1); const y1 = length1 * Math.cos(angle1); const x2 = x1 + length2 * Math.sin(angle2); const y2 = y1 + length2 * Math.cos(angle2); // Draw trail trail.push({ x: x2, y: y2, alpha: 1 }); if (trail.length > 100) trail.shift(); for (let i = 0; i < trail.length; i++) { const point = trail[i]; ctx.beginPath(); ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI); ctx.fillStyle = `rgba(255, 165, 0, ${point.alpha})`; ctx.fill(); point.alpha -= 0.01; } // Draw the pendulum arms ctx.beginPath(); ctx.moveTo(canvas.width / 2, 50); ctx.lineTo(canvas.width / 2 + x1, 50 + y1); ctx.lineTo(canvas.width / 2 + x2, 50 + y2); ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.stroke(); // Draw masses ctx.fillStyle = '#ff0000'; ctx.beginPath(); ctx.arc(canvas.width / 2 + x1, 50 + y1, mass1, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = '#00ff00'; ctx.beginPath(); ctx.arc(canvas.width / 2 + x2, 50 + y2, mass2, 0, 2 * Math.PI); ctx.fill(); } update(); </script> </body> </html> ``` This code sets up a double pendulum simulation using HTML5 Canvas. When you open the file in a web browser, you will see the chaotic motion of the pendulum along with a colorful trail following the tip of the pendulum.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.