Jump to content

Parallelogram Law Summations

Professional Strawman
in Computer Science

Featured Replies

Hi all. I am looking to plot a graph of the Parallelogram Law summations shown in the link below. I am not sure how to do this, since the vector g, needs to continuously point to the origin after each summation. Does anyone here know how to do this or on what platform to do this?

 

Using the graph, one can determine the rate of precession per revolution. Also the vector, g, needs to incorporate the inverse square law. The initial velocity is something the user determines. The rest should be done by the software. Thanks in advance for the help.

 

http://3.bp.blogspot.com/-tFDkItTrHWY/Ug-bh0x_NRI/AAAAAAAAE6U/PKx81419uBA/s1600/Kepler

 

For some background on the question, please see the link below.

 

http://www.scienceforums.net/topic/88054-parallelogram-law-summations-precession-of-orbits/

 

------

 

The precession looks like the images in the following links.

 

http://www.rkm.com.au/ANIMATIONS/animation-graphics/Black-Hole-Rosette-Orbit-label.png

http://www.relativity.li/en/epstein2/read/i0_en/i1_en/

Edited by Goeton 

    <canvas id="myCanvas" width="578" height="700"></canvas>
    <script>
    function drawparallelogram(ax,ay,bx,by,cx,cy,dx,dy,canvasid,context){
    var atob= Math.sqrt( (bx-ax)*(bx-ax) + (by-ay)*(by-ay) );
    var atoc= Math.sqrt( (cx-ax)*(cx-ax) + (cy-ay)*(cy-ay) );
    var ctod= Math.sqrt( (cx-dx)*(cx-dx) + (cy-dy)*(cy-dy) );
    var dtob= Math.sqrt( (bx-dx)*(bx-dx) + (by-dy)*(by-dy) );
    var ctob= Math.sqrt( (bx-cx)*(bx-cx) + (by-cy)*(by-cy) );
    if (atob===ctod && atoc===dtob){
    //only runs if points equal a paralleogram
      var canvas = document.getElementById(canvasid);
      var context = canvas.getContext(context);
      context.beginPath();
            context.moveTo(cx, cy);      
            context.lineTo(bx, by);//c>b
            context.moveTo(bx, by);
            context.lineTo(dx, dy);//d>b
        context.moveTo(dx, dy);
        context.lineTo(cx, cy);//c>d
        context.moveTo(ax, ay);
        context.lineTo(cx, cy);//a>c
        context.moveTo(ax, ay);
        context.lineTo(bx, by);//a > b
        context.fillText(atoc,((ax+cx)/2)-10,((ay+cy)/2)-10);
        context.fillText(dtob,((dx+bx)/2)-10,((dy+by)/2)-10);
        context.fillText(ctod,((dx+cx)/2)-10,((dy+cy)/2)-10);
        context.fillText(atob,((bx+ax)/2)-10,((by+ay)/2)-10);
        context.fillText(ctob,((bx+cx)/2)-10,((by+cy)/2)-10);
      context.stroke();}
      }
      var a=100;
      var b=50;
      var c=100;
      var d=150;
      while (a<400){
      
      drawparallelogram(a,b,450,50,c,d,450,150,'myCanvas','2d');
    a=a+10;
    b=b+10;
    c=c+10;
    d=d+10;
            }
    </script>

If you wanted all parallelogram diagonals to be the same length you would need to use the formula to find a point on the circle

Edited by fiveworlds

  • Author

Thanks fiveworlds, for your program. I tried on it an online html platform and I did not see an orbit/graph. How do I run this program?


Also, the diagonals should not be of equal lengths and they won't since Kepler's 2nd law is inherent in this Summation method. That is, at the farther point in the orbit, relative to the origin, the diagonals will get smaller and become longer at the nearest points. So you can ignore the length of the diagonals.

Edited by Goeton

Thanks fiveworlds, for your program. I tried on it an online html platform and I did not see an orbit/graph. How do I run this program?

 

fiveworlds has habit of giving chunks of code that doesn't work to any post..

 

You need html body tags:

<html>
<body>
 <canvas id="myCanvas" width="578" height="700"></canvas>
    <script>
    function drawparallelogram(ax,ay,bx,by,cx,cy,dx,dy,canvasid,context){
    var atob= Math.sqrt( (bx-ax)*(bx-ax) + (by-ay)*(by-ay) );
    var atoc= Math.sqrt( (cx-ax)*(cx-ax) + (cy-ay)*(cy-ay) );
    var ctod= Math.sqrt( (cx-dx)*(cx-dx) + (cy-dy)*(cy-dy) );
    var dtob= Math.sqrt( (bx-dx)*(bx-dx) + (by-dy)*(by-dy) );
    var ctob= Math.sqrt( (bx-cx)*(bx-cx) + (by-cy)*(by-cy) );
    if (atob===ctod && atoc===dtob){
    //only runs if points equal a paralleogram
      var canvas = document.getElementById(canvasid);
      var context = canvas.getContext(context);
      context.beginPath();
            context.moveTo(cx, cy);      
            context.lineTo(bx, by);//c>b
            context.moveTo(bx, by);
            context.lineTo(dx, dy);//d>b
        context.moveTo(dx, dy);
        context.lineTo(cx, cy);//c>d
        context.moveTo(ax, ay);
        context.lineTo(cx, cy);//a>c
        context.moveTo(ax, ay);
        context.lineTo(bx, by);//a > b
        context.fillText(atoc,((ax+cx)/2)-10,((ay+cy)/2)-10);
        context.fillText(dtob,((dx+bx)/2)-10,((dy+by)/2)-10);
        context.fillText(ctod,((dx+cx)/2)-10,((dy+cy)/2)-10);
        context.fillText(atob,((bx+ax)/2)-10,((by+ay)/2)-10);
        context.fillText(ctob,((bx+cx)/2)-10,((by+cy)/2)-10);
      context.stroke();}
      }
      var a=100;
      var b=50;
      var c=100;
      var d=150;
      while (a<400){
      
      drawparallelogram(a,b,450,50,c,d,450,150,'myCanvas','2d');
    a=a+10;
    b=b+10;
    c=c+10;
    d=d+10;
            }
    </script>
 </body></html>

and save it as index.html

 

Either in Firefox and Chrome it renders this image:

post-100882-0-93099300-1426154208_thumb.png

 

I don't think so it's correct result.

Edited by Sensei

Either in Firefox and Chrome it renders this image:

 

It used to be that way update your other browsers internet explorer, opera etc support canvas now.

while (a<400){

drawparallelogram(a,b,450,50,c,d,450,150,'myCanvas','2d');
a=a+10;
b=b+10;
c=c+10;
d=d+10;
}

take this and use just

      var a=100;
      var b=50;
      var c=100;
      var d=150;

      drawparallelogram(a,b,450,50,c,d,450,150,'myCanvas','2d');

gives just one paralleogram on it's own. and if you just want one diagonal line pointing to origin

An5UT8Q.jpg?1?2726

 

use

            context.beginPath();
            context.moveTo(cx, cy);      
            context.lineTo(bx, by);//c>b


        context.fillText(ctob,((bx+cx)/2)-10,((by+cy)/2)-10);
      context.stroke();}

I am using points a>b for the top of paralleogram and c>d for the bottom of the paralleogram which is I am also labeling the line lengths using context.fillText if you don't want the labels just delete that

R8RTNt2.jpg?1

 

Further explained

drawparallelogram(point ax,point ay,point bx,point by,point cx,point cy,point dx,point dy,'myCanvas','2d');

Edited by fiveworlds

  • Author

fiveworlds, many thanks for your explanation. You clearly misunderstood my drawing. The diagonals are the bold arrows in the drawing. Do you notice the black bold arrows in my drawing? [this drawing is also my profile picture]

 

http://3.bp.blogspot.com/-tFDkItTrHWY/Ug-bh0x_NRI/AAAAAAAAE6U/PKx81419uBA/s1600/Kepler%27s+Second+Law_4.bmp

 

At 1, you see the arms of the parallelogram: v and g. Therefore the diagonal is r. I use the resultant r, at 2, and point g towards the origin and get the diagonal again and so.

 

Sensei, I think fiveworlds misunderstood my drawing.

Edited by Goeton

  • Author

fiveworlds, this video helps you see the orbital prcession of a marble. See how the marble's orbit begins to precess? It traces a flower orbit, if you notice carefully.

 

  • Author

 

fiveworlds has habit of giving chunks of code that doesn't work to any post..

 

Fiveworlds is not a physicist, and even if he were, he is not doing that bad. He will eventually get around to it, and did I mention the code for friction?

Edited by Goeton

I am sorry I am quite busy at the moment can you show me how far you have gotten with canvas? below is a function to return the exact point of click

<script>

function show_coords(event)
{

    var x,y;
    if (event.pageX != undefined && event.pageY != undefined)
    {
        x = event.pageX;
        y = event.pageY;
    }
    else
    {
        x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    
    x=parseInt(x)- parseInt(document.getElementById('canvas').offsetLeft);
    y=parseInt(y)-parseInt(document.getElementById('canvas').offsetTop);
    document.getElementById("demo").innerHTML =    "X= " + x + "<br>Y= " + y;
    
}

</script>
</head>

<body>

<canvas id="canvas" style="margin-top:-9px;top:0px;left:0px;" onmousedown="show_coords(event)" width="1000px" height="1000px"></canvas>

</body>

this should give you an idea of some of the gravity simulations possible with canvas http://www.arachnoid.com/orbital_dynamics/index.html

http://jarrodoverson.com/static/demos/particleSystem/#0,variable:Sv1%285000|1|0|0|1|E388,158:2,0:8:-1:0.10:4|F443,211:500%29

http://www.arachnoid.com/graphinity_online/index.html

Edited by fiveworlds

  • Author

fiveworlds, I tried and learned a little canvas, but I was never going to automate this. But the Excel program works exactly right. My summation method is equivalent to the Leapfrog method, so that was just the program I was looking for. So I found what I was looking for. Many thanks for trying.

 

If you want to see other Excel programs, here they are:

http://galileo.phys.virginia.edu/classes/581/

Edited by Professional Strawman

fiveworlds, I tried and learned a little canvas, but I was never going to automate this. But the Excel program works exactly right. My summation method is equivalent to the Leapfrog method, so that was just the program I was looking for. So I found what I was looking for. Many thanks for trying.

 

I need to learn excel too you know I am just teaching you something that I know. For instance I know that in order to map 2d equations onto a graph I need to be able to convert the canvas into the normal 2d axis. Like so

 

 

<script>

 

function show_coords(event)

{

 

var x,y;

if (event.pageX != undefined && event.pageY != undefined)

{

x = event.pageX;

y = event.pageY;

}

else

{

x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;

}

x=parseInt(x)- parseInt(document.getElementById('canvas').offsetLeft);

y=parseInt(y)-parseInt(document.getElementById('canvas').offsetTop);

x=x-parseInt(canvas.width)/2;

y=parseInt(canvas.height)/2-y;

document.getElementById("demo").innerHTML = "X= " + x + "<br>Y= " + y;

}

 

</script>

</head>

 

<body>

 

<canvas id="canvas" style="margin-top:-9px;top:0px;left:0px;" onmousedown="show_coords(event)" width="1000px" height="1000px"></canvas>

 

</body>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.