Welcome, Guest. Please Login.
Gravity Simulator
11/21/17 at 04:15:03
News: Registration for new users has been disabled to discourage spam. If you would like to join the forum please send me an email with your desired screen name to tony at gravitysimulator dot com.
Home Help Search Login


Pages: 1
Send Topic Print
Autopilot in the browser version (Read 1275 times)
Tony
YaBB Administrator
*****




Posts: 1051
Gender: male
Autopilot in the browser version
05/05/17 at 18:31:23
 
Autopilot in the browser version is very different than the Windows version.
There are 3 Autopilot modes:
  • Single Events
  • Per Iteration
  • Per Graphic Update

Each one allows you to add Javascript code to modify the program. Even if you do not know Javascript, the syntax is rather straightforward. By looking at the examples in this thread, you can probably get a good feel for it without too much trouble. Here is a description of each of the three autopilots.
 
Single Events
Type a date and a time. Put " UTC" at the end or it will use your computer's time zone.
Open a set of double curley braces {{
Type your code.
Close the double curley braces }}
Press "Update".
 
Example. To pause the simulation on January 21, 2018 at 1:27 in the afternoon, enter the following and press [Update].
Code:
1/21/2018 13:27:00 UTC {{
   pause();
}} 


 
Per Iteration
Code entered here will executed every time an iteration of the system happens.
 
Example. I want to see what happens if the Sun slowly loses mass. So every iteration I will make it lose 1 Earth mass. Using a dropdown list, you can see that the Sun is the first object.
Enter the following and press [Update].
Code:
objMass[1] = objMass[1] - 1; 


 
Per Graphic Update
Code entered here will be executed every time the graphics are updated. Under the Preferences menu, the number in the "Do Events" box tells it how often to update the graphics. For example, 100 means perform 100 iterations for every 1 graphic update.
Example. I want the title of the browser tab to display how many seconds have elapsed since the simulation began.
Enter the following and press [Update]
Code:
document.title = elapsedTime;
 


 
Additional examples will be posted in individual posts in this thread. If you have questions or comments, please start a new thread. If you have written some code and would like to share it, post it here.
Back to top
 
 
Email View Profile WWW   IP Logged
Tony
YaBB Administrator
*****




Posts: 1051
Gender: male
Put ear on the screen
Reply #1 - 05/05/17 at 18:50:45
 
Sometimes you only want the year to be displayed. Enter the following code in the Per Graphics Update autopilot and press [Update].
You can change the font and and size if you like.  
The hexidecimal code in fillStyle lets you set the color.
The next line is for font size and font name.
The line below this lets you set the position on the screen where the year will display. (0, 0) is the upper right of the screen.
 
Code:
var d = currentDate.getFullYear();
pContextA.fillStyle = '#FFFF00';
pContextA.font="30px Verdana";
x=1050; y=410;
pContextA.clearRect(x,y-30,100,50);
pContextA.fillText(d, x, y);
 


 
Put UTC date on the screen
Enter the following in the Per Graphics Update autopilot and press [Update].
 
Code:
var d = UTC(elapsedTime * 1000 + startDate);
var arrd = d.split(" ");
d = arrd[1] + " " + arrd[2] + " " + arrd[3] + " ";
pContextA.fillStyle = '#FFFF00';
pContextA.font="20px Verdana";
var x = 800, y = 280;
pContextA.clearRect(x,y-30,500,50);
pContextA.fillText(d, x, y); 


 
 
This next example puts the UTC date and hours, minutes, seconds followed by the letters UTC on the screen.
Code:
var d = UTC(elapsedTime * 1000 + startDate);
var arrd = d.split(" ");
var arrd2 = arrd[4].split(":");
d = arrd[1] + " " + arrd[2] + " " + arrd[3] + " " + arrd2[0] + ":" + arrd2[1] + " UTC";
pContextA.fillStyle = '#FFFF00';
pContextA.font="20px Verdana";
var x = 965, y = 320;
pContextA.clearRect(x,y-30,500,50);
pContextA.fillText(d, x, y); 


 
Javascript does not recognize any any dates past the year 100,000. So if your simulation runs deep into the future you will get an "Invalid Date" message.  Here is a workaround that doesn't rely on Javascript's Date object. It displays how many years have elapsed since 2016. It also inserts commas in the number to make it more readable.
Code:
var d = parseInt(2016+elapsedTime/31557600).toString();
var e = d.split('');
document.title = e.length;
if (e.length == 7){
var f = e[0] + "," + e[1] + e[2] + e[3] + "," + e[4] + e[5] + e[6];}
if (e.length == 8){
var f = e[0] + e[1] + "," + e[2] + e[3] + e[4] + "," + e[5] + e[6] + e[7];}
if (e.length == 9){
var f = e[0] + e[1] + e[2] + "," + e[3] + e[4] + e[5] + "," + e[6] + e[7] + e[8];
} else {var f = d;}
pContextA.fillStyle = '#FFFF00';
pContextA.font="30px Verdana";
x=1050; y=110;
pContextA.clearRect(x,y-30,200,50);
pContextA.fillText(f, x, y);
 

Back to top
 
« Last Edit: 10/04/17 at 17:33:58 by Tony »  
Email View Profile WWW   IP Logged
Tony
YaBB Administrator
*****




Posts: 1051
Gender: male
Re: Autopilot in the browser version
Reply #2 - 05/07/17 at 09:58:59
 
Place Camera B one LY away positioned for viewing maximum bend of a close flyby.
Sometimes the viewing angle can be deceiving. For example, sometimes as seen from Earth, Jupiter and Venus appear very close in the sky, giving them the impression that they are close, when in fact they are over 6 AU apart.  This is also a problem viewing asteroids passing close to Earth. If an asteroid has a close approach of 3 Lunar distances, certain viewing angles may give the impression that the passage was much closer.  Additionally, an asteroid's orbit may be bent by the Earth flyby.  Some viewing angles may show no bend at all, while others maximize the bend.
 
This autopilot code places Camera B where it will see maximum separation and maximum bend. It places it 1 Light Year away, so you will have to zoom in a bit.

  • Autopilot > Single Events
  • Pause sim at moment of close approach.
  • Paste the following code in the Autopilot > Now box.
  • Edit the code so that parnt = id of object being flown by.
  • Edit chld to id of object doing the fly by.
  • You can get the objects' ids by counting in the "Target object A" dropdown list. The Sun is 1, the Earth is 4, etc.
  • Update autopilot date to 1 second after paused date. Press
  • [Update] and run for 1 second to update camera B's position.
  • Pause again.
  • Zoom in on Earth.
  • Press Time Backwards [>>] on the Time Step interface. Let the sim run backwards until the asteroid is off the screen.
  • Make time run forwards again. Save the sim. Unpause and enjoy!
  • For an equally-good viewing position, pause the Sim, Press E to edit object. Choose Camera B with respect to the Earth. Change the signs of the x, y, z components of the position vector. This will move you to 1 light year on the other side of Earth.


Code:

var parnt = 4, chld = 13;

px = objx[parnt] - objx[chld]; 
py = objy[parnt] - objy[chld]; 
pz = objz[parnt] - objz[chld]; 

vx = objvx[parnt] - objvx[chld]; 
vy = objvy[parnt] - objvy[chld]; 
vz = objvz[parnt] - objvz[chld]; 

qx = px + vx;
qy = py + vy;
qz = pz + vz;

rx = py*qz - pz*qy;
ry = -(px*qz - pz*qx);
rz = px*qy - py*qx;

d=Math.sqrt(rx*rx + ry*ry + rz*rz);
rx = rx / d;
ry = ry / d;
rz = rz / d;

var c = objects + 2;
var distance = 9.4605284E+15;
objx[c] = distance * rx;
objy[c] = distance * ry;
objz[c] = distance * rz;

objvx[c] = 0;
objvy[c] = 0;
objvz[c] = 0;
 


Back to top
 
« Last Edit: 10/29/17 at 20:28:58 by Tony »  
Email View Profile WWW   IP Logged
Tony
YaBB Administrator
*****




Posts: 1051
Gender: male
New functions and variables for Autopilot
Reply #3 - 09/04/17 at 11:04:45
 
Note that to use any new feature, you must start with:
http://orbitsimulator.com/gsim.html
 
All additional features are added to this file only.
Any previously-created simulations will not have the new features.
 
Here are a few new functions and variables available to you in the Auto Pilot:
variables and constants:
LF : line feed. LF = String.fromCharCode(10); // Used for printing to one of the text areas.
PI, pi, Pi = 3.14159265358979 // now you don't have to remember the capitalization rules. All 3 work.
APA[] // this is an empty array that is not used at all by the program, so you now have as many variables as you want for auto pilot use.
 
toDeg(x); //converts x from radians to degrees
toDegrees(x); // converts x from radians to degrees
 
toRad(x); // converts x from degrees to radians
toRadians(x); // converts x from degrees to radians
 
elongation (x,y,z); // returns the visual seperation in degrees between object x, object y, as viewed from object z. If Earth is object z, it will use the selection in the menu Display > Cities A drop down list. So you can choose Geocenter, or move around on the surface.
 
speed(a,b); // returns the speed in m/s between object a and object b.
distance(a,b); // returns the distance in m...
radialSpeed(a,b); //....
tangentialSpeed(a,b); //....
 
bend (a, b); // See above post for description
bTo (RA, Dec); // Places camera B at a specific RA and Dec. Example bTo(5.5, 32.25) or bTo("5 30 0", "32 15 0")
shorten();  //Shortens the names of the planets and Moon, so "Jupiter barycenter" becomes "Jupiter"
Back to top
 
« Last Edit: 11/03/17 at 17:38:06 by Tony »  
Email View Profile WWW   IP Logged
Tony
YaBB Administrator
*****




Posts: 1051
Gender: male
Re: Autopilot in the browser version
Reply #4 - 11/01/17 at 17:46:08
 
Place Camera B at a certain RA and Dec (one time or per graphic update)
Code:
var RA = 18 + 36/60 + 56/3600;
var Dec = 38+47/60;

Dec = Math.PI * Dec / 180;
RA = Math.PI * RA / 12;
var d = 1e20;
var c = objects + 2;

var e = Math.PI * 23.4392810833333 / 180;

var xEq = Math.cos(RA) * Math.cos(Dec);
var yEq = Math.sin(RA) * Math.cos(Dec);
var zEq = Math.sin(Dec);

unitVectorVelocityX = xEq;
unitVectorVelocityY = Math.cos(e) * yEq + Math.sin(e) * zEq;
unitVectorVelocityZ = -Math.sin(e) * yEq +Math.cos(e) * zEq;
distance = 5e20;

objx[c] = distance * unitVectorVelocityX;
objy[c] = distance * unitVectorVelocityY;
objz[c] = distance * unitVectorVelocityZ;
objvx[c] = 0;
objvy[c] = 0;
objvz[c] = 0;
 


Back to top
 
 
Email View Profile WWW   IP Logged
Tony
YaBB Administrator
*****




Posts: 1051
Gender: male
Re: Autopilot in the browser version
Reply #5 - 11/06/17 at 09:51:18
 
This turns off the border and makes the background transparent for the date interface.
Put it in the Autopilot Now box.
Note: this hides the close button. To get it back you have to do btnCalendarDateUTCClose.style.visibility = 'visible';
 
Code:
lblCalendarUTC.style.visibility = 'hidden';
btnCalendarDateUTCClose.style.visibility = 'hidden';
divCalendarDateUTC.style.backgroundColor = 'rgba(0,0,255,0.0)'; 
divCalendarDateUTC.style.border = 'none';
 

Back to top
 
 
Email View Profile WWW   IP Logged
Tony
YaBB Administrator
*****




Posts: 1051
Gender: male
Re: Autopilot in the browser version
Reply #6 - 11/18/17 at 14:00:32
 
In the Display menu is a choice called "Blank". It gives you a blank, unused interface that you can customize if you know a little HTML and Javascript.
 
Open the blank interface: menu Display > Blank
Open the Autopilot Now: menu Autopilot > Now
 
You can give the interface a name:
Enter the following into the Autopilot Now textarea and press Update.
Code:
lblBlankTitle.innerHTML = 'My Custom Div'; 


 
If you don't want your interface to have a title bar, use this line of code:
Code:
lblBlankTitle.style.visibility = 'hidden';
 


If you don't want your interface to have a close button, use this line of code:
Code:
btnBlankClose.style.visibility = 'hidden';
 


You can change the background color and opacity if your div with this line of code:
Code:
divBlank.style.backgroundColor = 'rgba(0,0,255,0.0)'; 
 

Setting the opacity to 0.0 means it will be transparent.
 
If you don't want your interface to have a border, use this line of code:
Code:
divBlank.style.border = 'none';
 


If you don't want your interface to be draggable, use this line of code (make sure to position it where you want it first!):
Code:
$("#divBlank").draggable({ disabled: true});
 


Your interface has a div (short for division. Basically a group of controls) inside it called divInBlank. Using this prevents you from messing up the title bar, borders, and close button. If you've eliminated your borders, title bar, close button, you don't have to use divInBlank. You can simply use divBlank instead.
 
Let's make an interface that give the user a text area where they can set the mass of the Sun in Solar masses, and a button that applies this change:
Code:
lblBlankTitle.innerHTML = "Set Sun's mass";
divInBlank.innerHTML = "<input type = 'text' id = 'txtSunMass' value = 1><br><input type = 'button' value = 'Apply' onclick = 'objMass[1] =Number(txtSunMass.value) * 332946.050894783;'>"; 


The line divInBlank.innerHTML lets you set the HTML inside this div. Don't press enter when typing this code. It has to be all one line. It can be as long as you like, but it has to be all one line.
Back to top
 
 
Email View Profile WWW   IP Logged
Tony
YaBB Administrator
*****




Posts: 1051
Gender: male
Re: Autopilot in the browser version
Reply #7 - 11/18/17 at 14:22:48
 
Here is a way to make a customized, borderless, draggable date.
In the menu Autopilot > Now textbox paste the following and hit Update.
Code:
lblBlankTitle.style.visibility = 'hidden';
btnBlankClose.style.visibility = 'hidden';
divBlank.style.backgroundColor = 'rgba(0,0,255,0.0)'; 
divBlank.style.border = 'none';

divInBlank.style.width = '300px';
divInBlank.style.color = '#FFFF00';
divInBlank.style.fontSize = '20px';
divInBlank.style.fontFamily = 'Arial';
 


You can customize the font size, font color, and font.
Courier is a good font for tables of numbers because all characters are the same size.
 
In the menu Autopilot > Per graphic update textbox paste the following and press Update:
Code:
var d = UTC(elapsedTime * 1000 + startDate);
var arrd = d.split(" ");
var arrd2 = arrd[4].split(":");
d = '';
d = d + arrd[1]; //Month
d = d + " " + arrd[2]; //Date
d = d + " " + arrd[3]; //Year
d = d + " " + arrd2[0]; //Hour
d = d + ":" + arrd2[1]; //colon and minute
d = d + ":" + arrd2[2]; //colon and second
d = d + " UTC";
divInBlank.innerHTML = d;  


Note that you can remove lines of code if for example you don't want to display the minutes and seconds.
You can rearrange the lines of code if you prefer a different date format, for example, Year first.
Back to top
 
 
Email View Profile WWW   IP Logged
Pages: 1
Send Topic Print