)); 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 (

); }; export default DoublePendulum; 5:["$L20",["$","div",null,{"className":"container px-8 mt-4","children":["$","nav",null,{"aria-label":"breadcrumb","children":["$","ol",null,{"className":"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.

Interactive Double Pendulum Simulation