angle1 - 2 * angle2)); const angle1Acceleration = (num1 + num2 + num3 * num4) / den; const num5 = 2 * Math.sin(angle1 - angle2); const num6 = angle1Velocity * angle1Velocity * l1 * (m1 + m2); const num7 = g * (m1 + m2) * Math.cos(angle1); const num8 = angle2Velocity * angle2Velocity * l2 * m2 * Math.cos(angle1 - angle2); const den2 = l2 * (2 * m1 + m2 - m2 * Math.cos(2 * angle1 - 2 * angle2)); const angle2Acceleration = (num5 * (num6 + num7 + num8)) / den2; angle1Velocity += angle1Acceleration * dt; angle2Velocity += angle2Acceleration * dt; angle1 += angle1Velocity * dt; angle2 += angle2Velocity * dt; // Drawing const pivotX = canvas.width / 2; const pivotY = canvas.height / 3; const x1 = pivotX + l1 * Math.sin(angle1); const y1 = pivotY + l1 * Math.cos(angle1); const x2 = x1 + l2 * Math.sin(angle2); const y2 = y1 + l2 * Math.cos(angle2); // Draw pivot and arms ctx.beginPath(); ctx.arc(pivotX, pivotY, 5, 0, 2 * Math.PI); ctx.fillStyle = 'black'; ctx.fill(); ctx.beginPath(); ctx.moveTo(pivotX, pivotY); ctx.lineTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = 'gray'; ctx.lineWidth = 2; ctx.stroke(); // Draw trails const drawTrail = (trail, color) => { ctx.beginPath(); trail.forEach((point, index) => { ctx.lineTo(point.x, point.y); ctx.strokeStyle = `rgba(${color}, ${index / trail.length})`; ctx.stroke(); }); }; blueTrail.push({ x: x1, y: y1 }); redTrail.push({ x: x2, y: y2 }); if (blueTrail.length > 200) blueTrail.shift(); if (redTrail.length > 200) redTrail.shift(); drawTrail(blueTrail, '0, 0, 255'); drawTrail(redTrail, '255, 0, 0'); // Draw pendulum masses ctx.beginPath(); ctx.arc(x1, y1, 10, 0, 2 * Math.PI); ctx.fillStyle = 'blue'; ctx.fill(); ctx.beginPath(); ctx.arc(x2, y2, 10, 0, 2 * Math.PI); ctx.fillStyle = 'red'; ctx.fill(); // Update graph data time += dt; setGraphData(prevData => [ ...prevData, { time, angle1: angle1 % (2 * Math.PI), angle2: angle2 % (2 * Math.PI) } ]); animationRef.current = requestAnimationFrame(animate); }; animate(); return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); } }; }, [initialAngle2]); const handleAngleChange = (e) => { setInitialAngle2(parseFloat(e.target.value)); }; return (

Interactive Double Pendulum Simulation