Double Pendulum
Double Pendulum is a simple chaotic system. It is deterministic chaos.
Code
elem=document.querySelector(".example-container");
setCanvas(elem);
w=WIDTH;
h=HEIGHT;
///////////////////////////////////////////////////////////////////////////////
canvw = 600;
canvh = 600;
r1 = 100;
r2 = 100;
m1 = 10;
m2 = 10;
a1 = Math.PI / 2;
a2 = Math.PI / 2;
a1_v = 0;
a2_v = 0;
a1_a = 0;
a2_a = 0;
g = 1;
points=[];
function draw(){
clearCanvas()
let num1 = -g * (2 * m1 + m2) * sin(a1);
let num2 = -m2 * g * sin(a1 - 2 * a2);
let num3 = -2 * sin(a1 - a2) * m2;
let num4 = a2_v * a2_v * r2 + a1_v * a1_v * r1 * cos(a1 - a2);
let den = r1 * (2 * m1 + m2 - m2 * cos(2 * a1 - 2 * a2));
let a1_a = (num1 + num2 + num3 * num4) / den;
num1 = 2 * sin(a1 - a2);
num2 = a1_v * a1_v * r1 * (m1 + m2);
num3 = g * (m1 + m2) * cos(a1);
num4 = a2_v * a2_v * r2 * m2 * cos(a1 - a2);
den = r2 * (2 * m1 + m2 - m2 * cos(2 * a1 - 2 * a2));
let a2_a = (num1 * (num2 + num3 + num4)) / den;
x1 = r1 * sin(a1);
y1 = r1 * cos(a1);
x2 = x1 + r2 * sin(a2);
y2 = y1 + r2 * cos(a2);
new line(w/2,0+h/2, w/2+x1, y1+h/2 , "#8D2FED", 2 );
new line(w/2 + x1, y1 +h/2, w/2+ x2, y2 +h/2 , "#8D2FED",2);
new circle(w/2+x1, y1 +h/2, m1, "#C10FF0", "#000000");
new circle(w/2+x2, y2 +h/2, m2, "hsl(300,100%,50%)", "#000000");
a1_v += a1_a;
a2_v += a2_a;
a1 += a1_v;
a2 += a2_v;
if(points.length==0){
px2=x2;
py2=y2;
}
points.push([[w/2+x2, y2 +h/2],[w/2+px2, py2 +h/2]]);
if(points.length>50){
points.shift();
}
if(points.length>1){
for(let i=0;i<points.length-1;i++){
color=`hsl(${i*6},100%,50%)`
strokew=mapRange(i,0,points.length-1,1,15);
new line(points[i][0][0],points[i][0][1],points[i][1][0],points[i][1][1], color, strokew, "round");
}
}
px2 = x2;
py2 = y2;
requestAnimationFrame(draw);
}
draw();