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.5","children":[["$","li",null,{"className":"inline-flex items-center gap-1.5","children":["$","a",null,{"className":"transition-colors hover:text-foreground","href":"/","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-home ","children":[["$","path","y5dka4",{"d":"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}],["$","polyline","e2us08",{"points":"9 22 9 12 15 12 15 22"}],"$undefined"]}]}]}],[[["$","li",null,{"role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","s

Interactive Double Pendulum Simulation