Dynamic Properties: Programming the Solar System, Part II | WebReference

# Dynamic Properties: Programming the Solar System, Part II

## 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
}
``````

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 *
}``````

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: http://www.webreference.com/js/column65/8.html