Double pendulum · qwen3-coder-flash
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.
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chaotic Double Pendulum</title> <style> body { margin: 0; padding: 0; background-color: #000; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; font-family: 'Arial', sans-serif; } #container { position: relative; width: 600px; height: 600px; } canvas { border: 1px solid #333; background-color: #000; } #info { position: absolute; top: 10px; left: 10px; color: #fff; font-size: 14px; background-color: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px; max-width: 300px; } h1 { position: absolute; top: 10px; width: 100%; text-align: center; color: #fff; font-size: 24px; margin: 0; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } </style> </head> <body> <div id="container"> <h1>Chaotic Double Pendulum</h1> <div id="info"> <p>This simulation shows a double pendulum with chaotic behavior.</p> <p>The physics equations are solved numerically using the Runge-Kutta method.</p> <p>Each point in the trail fades over time.</p> </div> <canvas id="pendulumCanvas" width="600" height="600"></canvas> </div> <script> // Canvas setup const canvas = document.getElementById('pendulumCanvas'); const ctx = canvas.getContext('2d'); const centerX = canvas.width / 2; const centerY = canvas.height / 2; // Physics constants const G = 9.81; // gravitational acceleration const L1 = 150; // length of first rod const L2 = 150; // length of second rod const M1 = 10; // mass of first bob const M2 = 10; // mass of second bob // Initial conditions let theta1 = Math.PI / 2; // initial angle of first pendulum let theta2 = Math.PI / 2; // initial angle of second pendulum let omega1 = 0; // initial angular velocity of first pendulum let omega2 = 0; // initial angular velocity of second pendulum // Time step and integration const dt = 0.02; const trailLength = 300; let trail = []; // Colors for trail const colors = []; for (let i = 0; i < trailLength; i++) { const hue = (i / trailLength) * 360; colors.push(`hsl(${hue}, 100%, 50%)`); } // Function to calculate derivatives for the system of ODEs function derivatives(theta1, theta2, omega1, omega2) { const delta = theta2 - theta1; const den1 = (M1 + M2) * L1 - M2 * L1 * Math.cos(delta) * Math.cos(delta); const den2 = L2 * L2 * (M1 + M2) - M2 * L1 * L2 * Math.cos(delta) * Math.cos(delta); const domega1 = (M2 * L1 * omega1 * omega1 * Math.sin(delta) * Math.cos(delta) + M2 * G * Math.sin(theta2) * Math.cos(delta) - (M1 + M2) * G * Math.sin(theta1) + M2 * L2 * omega2 * omega2 * Math.sin(delta)) / den1; const domega2 = (-M2 * L2 * omega2 * omega2 * Math.sin(delta) * Math.cos(delta) + (M1 + M2) * G * Math.sin(theta1) * Math.cos(delta) - (M1 + M2) * G * Math.sin(theta2) - (M1 + M2) * L1 * omega1 * omega1 * Math.sin(delta)) / den2; return [domega1, domega2]; } // Runge-Kutta 4th order integration function integrate() { // First step const [k1_omega1, k1_omega2] = derivatives(theta1, theta2, omega1, omega2); const k1_theta1 = omega1; const k1_theta2 = omega2; // Second step const theta1_2 = theta1 + k1_theta1 * dt / 2; const theta2_2 = theta2 + k1_theta2 * dt / 2; const omega1_2 = omega1 + k1_omega1 * dt / 2; const omega2_2 = omega2 + k1_omega2 * dt / 2; const [k2_omega1, k2_omega2] = derivatives(theta1_2, theta2_2, omega1_2, omega2_2); const k2_theta1 = omega1_2; const k2_theta2 = omega2_2; // Third step const theta1_3 = theta1 + k2_theta1 * dt / 2; const theta2_3 = theta2 + k2_theta2 * dt / 2; const omega1_3 = omega1 + k2_omega1 * dt / 2; const omega2_3 = omega2 + k2_omega2 * dt / 2; const [k3_omega1, k3_omega2] = derivatives(theta1_3, theta2_3, omega1_3, omega2_3); const k3_theta1 = omega1_3; const k3_theta2 = omega2_3; // Fourth step const theta1_4 = theta1 + k3_theta1 * dt; const theta2_4 = theta2 + k3_theta2 * dt; const omega1_4 = omega1 + k3_omega1 * dt; const omega2_4 = omega2 + k3_omega2 * dt; const [k4_omega1, k4_omega2] = derivatives(theta1_4, theta2_4, omega1_4, omega2_4); const k4_theta1 = omega1_4; const k4_theta2 = omega2_4; // Update values theta1 += (k1_theta1 + 2 * k2_theta1 + 2 * k3_theta1 + k4_theta1) * dt / 6; theta2 += (k1_theta2 + 2 * k2_theta2 + 2 * k3_theta2 + k4_theta2) * dt / 6; omega1 += (k1_omega1 + 2 * k2_omega1 + 2 * k3_omega1 + k4_omega1) * dt / 6; omega2 += (k1_omega2 + 2 * k2_omega2 + 2 * k3_omega2 + k4_omega2) * dt / 6; } // Draw the pendulum function drawPendulum() { // Clear canvas with a semi-transparent black for trail effect ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Calculate positions of pendulum bobs const x1 = centerX + L1 * Math.sin(theta1); const y1 = centerY + L1 * Math.cos(theta1); const x2 = x1 + L2 * Math.sin(theta2); const y2 = y1 + L2 * Math.cos(theta2); // Add current position to trail trail.push({x: x2, y: y2}); if (trail.length > trailLength) { trail.shift(); } // Draw trail for (let i = 0; i < trail.length; i++) { const point = trail[i]; const alpha = i / trail.length; ctx.beginPath(); ctx.arc(point.x, point.y, 2, 0, Math.PI * 2); ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.7})`; ctx.fill(); } // Draw pendulum arms ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.stroke(); // Draw bobs ctx.beginPath(); ctx.arc(x1, y1, 10, 0, Math.PI * 2); ctx.fillStyle = '#ff5555'; ctx.fill(); ctx.beginPath(); ctx.arc(x2, y2, 10, 0, Math.PI * 2); ctx.fillStyle = '#5555ff'; ctx.fill(); // Draw pivot point ctx.beginPath(); ctx.arc(centerX, centerY, 5, 0, Math.PI * 2); ctx.fillStyle = '#ffffff'; ctx.fill(); } // Animation loop function animate() { integrate(); drawPendulum(); requestAnimationFrame(animate); } // Start animation animate(); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.