Dynamic Properties: The Code

Dynamic Properties

The Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<title>Solar System</title>
<STYLE>
.sunball {
  position: absolute; 
  top: 250; 
  left: 250; 
  pixelWidth: 161; 
  pixelHeight: 161
}
.planet {
  position: absolute; 
  top: 100; 
  left: 100; 
  pixelWidth: 91; 
  pixelHeight: 91 
}
</STYLE>
<SCRIPT>
window.onload = fnInit;
var timeAt0 = new Date();
var currentTime = timeAt0;
var distanceOfEarth = 200;
var seconds2daysFactor = 10;
var frequencyOfRecalc = 50;
var fRadius = 1;
function fnUpdate() {
  fRadius = parseFloat(oRadius.value);
}
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);
}
function triggerRecalculation() {
	currentTime = new Date() - timeAt0;
	document.recalc(true);
}
function angle(periodInDays, t) {
  return ((t / seconds2daysFactor) / periodInDays) % (2 * Math.PI);
}
function xLocation(obj, distanceFactor, daysPerRound, t) {
  return (obj.style.pixelLeft + obj.style.pixelWidth / 2) + Math.round(Math.cos(angle(daysPerRound, t)) * distanceFactor * fRadius * distanceOfEarth);
}
function yLocation(obj, distanceFactor, daysPerRound, t) {
  return (obj.style.pixelTop + obj.style.pixelHeight / 2) + Math.round(Math.sin(angle(daysPerRound, t)) * distanceFactor * fRadius * distanceOfEarth);
}
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);
  }
}
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;
}
</SCRIPT>
</HEAD>
<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>
</HTML>
Next: A Final Word
Produced by Yehuda Shiran and Tomer Shiran

Created: July 18, 2000
Revised: July 18, 2000
URL: https://www.webreference.com/js/column65/9.html
Dynamic Properties: The Code

Dynamic Properties

The Code

Find a programming school near you
