Dynamic Properties: Programming the Solar System, Part II

Dynamic Properties

Programming the Solar System, Part II

Notice that we have covered on the previous page all the active functions, and we have not touched upon the issue of how to update the planets properties to accomplish the animation effect. The reason being that these properties are updated via the expressions that they are initially bound to. We have a hierarchy of functions involved in setting the functional dependency of these parameters. Let's start with the orbiting angle's dependency on the time in seconds since the page initially loaded:

function angle(periodInDays, t) {
  return ((t / seconds2daysFactor) / periodInDays) % (2 * Math.PI);
}

The mathematical function involves some constants, such as seconds2daysFactor and Math.PI. The factor seconds2daysFactor converts seconds in interactive usage to days in plant's life. A reasonable factor here is 10, i.e. we take the number of seconds, divide by 10, and get the number of days passed since the page loaded for the last time.

The xLocation() function describes the dependency between a planet's x coordinate and:

• obj. The object of the planet around which the current planet revolves.
• distance factor. The number of earth's distances from the center planet. Should be 1 for the Earth orbiting the Sun.
• daysPerRound. How many days it takes to accomplish one round. For the Earth this is 365.26.
• t. Time in seconds since the page initially loaded.

Here is the xLocation() function:

function xLocation(obj, distanceFactor, daysPerRound, t) {
  return (obj.style.pixelLeft + obj.style.pixelWidth / 2) +
    Math.round(Math.cos(angle(daysPerRound, t)) * distanceFactor
      * fRadius * distanceOfEarth);
}

We use here the cos() method to compute the cosine of the orbit's angle. We then multiply the cosine value by the distanceFactor parameter, distanceOfEarth, and fRadius. The fRadius here demonstrates the dependency of element parameters on user-given constants. In computing yLocation(), we use the sin() method instead of the cos() method:

function yLocation(obj, distanceFactor, daysPerRound, t) {
  return (obj.style.pixelTop + obj.style.pixelHeight / 2) +
    Math.round(Math.sin(angle(daysPerRound, t)) * distanceFactor *
      fRadius * distanceOfEarth);
}

Setting the dynamic properties occurs in the initialization function, fnInit():

function fnInit() {
  oSun.style.pixelWidth = 161;
  oSun.style.pixelHeight = 161;
  oEarth.style.pixelWidth = 100;
  oEarth.style.pixelHeight = 100;
  oMoon.style.pixelWidth = 23;
  oMoon.style.pixelHeight = 23;
  oSun.moving = false;
  oSun.style.setExpression("left", "document.body.clientWidth / 2 -
    oSun.style.pixelWidth / 2");
  oSun.style.setExpression("top", "document.body.clientHeight / 2 -
    oSun.style.pixelHeight / 2");
  oEarth.style.setExpression("left", "xLocation(oSun, 1.0, 365.26,
    currentTime) - oEarth.style.pixelWidth / 2");
  oEarth.style.setExpression("top", "yLocation(oSun, 1.0, 365.26,
    currentTime) - oEarth.style.pixelHeight / 2");
  oMoon.style.setExpression("left", "xLocation(oEarth, 0.25, 28,
    currentTime) - oMoon.style.pixelWidth / 2");
  oMoon.style.setExpression("top", "yLocation(oEarth, 0.25, 28,
    currentTime) - oMoon.style.pixelHeight / 2");
  intervalID = setInterval("triggerRecalculation()",
    frequencyOfRecalc);
}

This function first assigns the image size in pixels of the Sun, the Earth, and the Moon. Normally, these assignments are not needed, as the browser knows these measurements. For some reasons, the width and the height of all planets come out zero if not assigned first. The main task of this function is to set the left and top properties of each planet. The Sun stays centered to the client area. The Earth is assigned to revolve around the Sun, and the moon is assigned to orbit the Earth.

The last function to cover here is triggerRecalculation. It is called in the setInterval() method:

function triggerRecalculation() {
	currentTime = new Date() - timeAt0;
	document.recalc(true);
}

where currentTime is the time in seconds since the page has been loaded.

Next: How to write the Solar System code

Produced by Yehuda Shiran and Tomer Shiran

Created: July 18, 2000
Revised: July 18, 2000

URL: https://www.webreference.com/js/column65/8.html