Gravitational Field

Gravitational Field simulation of a planet revolving around a star 20 times its mass. Every vector shows the direction and magnitude of the gravitational field intensity at that point.

Code

            
    elem = document.getElementsByClassName("example-container")[0];
    setCanvas(elem);
    
    w=WIDTH;
    h=HEIGHT;
    

    G=10**1;
    m1=200;
    m2=10;
    
    
    x1=w/2;
    y1=h/2;
    x2=w/2+200;
    y2=h/2;
    vm1={x:0,y:-0.1};
    vm2={x:0,y:2};
    
    
    colors=['#17078B','#4F03A1','#AA2595','#C5417D','#DB5C67','#E97158','#F8973F','#FCB530','#F3EE22']
    Fabsmax=0;
    Fabsmin=0;
    t=0;
    
    function draw() {
        
        clearCanvas();
    
        for(i=0;i<w;i+=30) {
            for(j=0;j<h;j+=30) {
                x=i;
                y=j;
                r1=Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1));
                r2=Math.sqrt((x-x2)*(x-x2)+(y-y2)*(y-y2));
                Fp1={
                x:((G*m1)/(r1*r1*r1))*(x-x1),
                y:((G*m1)/(r1*r1*r1))*(y-y1)
                }
                Fp2={
                x:((G*m2)/(r2*r2*r2))*(x-x2),
                y:((G*m2)/(r2*r2*r2))*(y-y2)
                }
                F={
                x:Fp1.x+Fp2.x,
                y:Fp1.y+Fp2.y
                }
                Fabs=Math.sqrt(F.x*F.x+F.y*F.y);

                if(abs(r1)>m1 && abs(r2)>m2) {
                Fabsmax= Fabs>Fabsmax?Fabs:Fabsmax;
                Fabsmin= Fabs<Fabsmin?Fabs:Fabsmin;
                }

                new line(x,y,x-20*F.x/Fabs,y-20*F.y/Fabs,colors[round(mapRange(Fabs,Fabsmin,Fabsmax,0,colors.length-1))],1);
            
            }
        }
        new circle(x1,y1,30,'#E5F6F3',1,'#A2E2F7',4);
        new circle(x2,y2,10,'#63B95C',1,'#70C9E1',2);
    
        Fm1m2=Fbetween(x1,y1,x2,y2,m1,m2);
        
        Fon1=Fm1m2;
        Fon2={x:-Fm1m2.x,y:-Fm1m2.y};
        
        am1={x:Fon1.x/m1,y:Fon1.y/m1};
        am2={x:Fon2.x/m2,y:Fon2.y/m2};
        
        vm1.x+=am1.x;
        vm1.y+=am1.y;
        vm2.x+=am2.x;
        vm2.y+=am2.y;
    
        x1+=vm1.x;
        y1+=vm1.y;
        x2+=vm2.x;
        y2+=vm2.y;
    
        requestAnimationFrame(draw);
        
    }
    
    function Fbetween(x1,y1,x2,y2,m1,m2) {
        r=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
        F={
        x:((G*m1*m2)/(r*r*r))*(x2-x1),
        y:((G*m1*m2)/(r*r*r))*(y2-y1)
        }
        return F;
    }

    draw();