Dynamic Properties: Programming the Solar System, Part I

Dynamic Properties

Programming the Solar System, Part I

The BODY of the page is straightforward. It includes three instruction lines, an input field, and three DIV tags: one for the Sun, one for the Earth, and one for the Moon:

<BODY>
<P>Click the Sun to start dragging<BR>
Drag the Sun by slowly moving the cursor<BR>
Stop dragging with another click</P>>
<P>Multiply Orbit Radius by:
<INPUT TYPE="text" VALUE="1" onkeyup="fnUpdate()"
  ID="oRadius" SIZE="3">
</P>
<DIV ID="oSun" CLASS="planet" STYLE="cursor: move"
  onmousemove="fnMove()" onclick="fnStartStopMoving()">
  <IMG SRC="sun.gif"></DIV>
<DIV ID="oEarth" CLASS="planet"><IMG SRC="earth.gif"></DIV>
<DIV ID="oMoon" CLASS="planet"><IMG SRC="moon.gif">></DIV>
</BODY>

The input field accepts a floating number that multiplies the orbiting radii of both the Earth and the Moon. We call the function fnUpdate() after any key is released. The function fnUpdate() is a one-liner. It updates the floating-point radius factor:

function fnUpdate() {
  fRadius = parseFloat(oRadius.value);
}

Also worth noting is the Sun's DIV declaration. It includes two event handler definitions, both related to the dragging ability of the Sun. The onclick event handler triggers both the initiation and termination of the Sun dragging. The first click signals the start, while the second click wraps it up:

function fnStartStopMoving() {
  if (oSun.moving == true) {
    oSun.moving = false;
    oSun.style.removeExpression("left");
    oSun.style.removeExpression("top");
    intervalID = setInterval("triggerRecalculation()",
      frequencyOfRecalc);
  }
  else { // oSun.moving = false
    oSun.clickOffsetX = event.clientX - oSun.offsetLeft;
    oSun.clickOffsetY = event.clientY - oSun.offsetTop;
    oSun.moving = true;
    clearInterval(intervalID);
  }
}

The top portion of the function above handles the second click case. It sets the moving property to false and removes the expression assigned to the left and top parameters of the Sun. This is needed because otherwise, the Sun will return to its expression-driven value which is in the center of the page. We also need to reinstall the setInterval() function that will trigger the recalculation every time interval of frequencyOfRecalc. The bottom portion of the function above handles the first click case. We first compute the distance between the mouse position during the click (event.clientX, event.clientY), and the left top corner of the image (oSun.offsetLeft, oSun.offsetTop):

oSun.clickOffsetX = event.clientX - oSun.offsetLeft;
oSun.clickOffsetY = event.clientY - oSun.offsetTop;

These values are needed for positioning the Sun every stroke of the dragging, taken care by the onmousemove event handler. We also need to clear the setInterval() pointer, so the Earth will stop orbiting during the Sun drag.

The onmousemove event handler makes sure the the mouse drags the Sun:

function fnMove() {
  if (oSun.moving == false) return true;
  newX = event.clientX - oSun.clickOffsetX;
  newY = event.clientY - oSun.clickOffsetY;
  oSun.style.left = newX;
  oSun.style.top = newY;
}

We first check that the the drag is on (oSun.moving == false). We then update the Sun position according the where the mouse is currently, and according to the first-click offset from the top left corner of the Sun.

Next: How to program the Solar System, Part II

Produced by Yehuda Shiran and Tomer Shiran

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

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

Dynamic Properties: Programming the Solar System, Part I

Dynamic Properties

Programming the Solar System, Part I

Find a programming school near you