[RESOLVED] JS calculate "sun" location (for img location)

[Static]

I am trying to figure out how to calculate the location to put a sun image on a page (theme really)


stats:

sunset location: 378px
sun peak: 18px

sun travel up 360 then down 360px

i already have code that will grab sunrise/sunset times - but i just filled in some times for now....

all in minutes....
i figure i need to calc total sunshine time, time since sunrise, peak time, pixel per min...

but i cant seem to figure out how to figure the current location?
I know i need to test to see if the time since sunrise is past the peak time..

help!

heres what i have so far (just starting)

var SnRs = new Date (new Date().toDateString() + ' ' + '6:30 am');
		var SnSt = new Date (new Date().toDateString() + ' ' + '9:15 pm');
		var cTime = new Date ( );
		

		var totalsuntime = Math.floor((Math.abs(SnSt - SnRs)/1000)/60);
		var minssincesunrise = Math.floor((Math.abs(cTime - SnRs)/1000)/60);
		alert("Total Mins: " + totalsuntime + "    Mins Since SR: " + minssincesunrise);
		var peaksun = Math.round(totalsuntime/2);
		var pxlpermin = Math.abs(peaksun/360).toFixed(2);
		
		var sLoc = Math.round(378 - (minssincesunrise * pxlpermin));
		
		alert(sLoc);

sLoc is too large... if i am thinking right, there should be a way to calc so that the value is always between 18 and 378 ? right?

THANKS!

[SambaNeko]

I'm not sure I'm right, but here's what I'm thinking:

var SnRs = new Date (new Date().toDateString() + ' ' + '6:30 am');
var SnSt = new Date (new Date().toDateString() + ' ' + '9:15 pm');
var midTime = new Date (SnRs.getTime() + (SnSt - SnRs)/2);
var cTime = new Date ( );

var pxlpermin = 360/((SnSt - SnRs)/2);
var sincesunrise = cTime - SnRs;
if(sincesunrise < 0){ /* don't display sun? */ }

if(cTime < midTime){
  //sun is ascending
  var sLoc = sincesunrise * pxlpermin + 18;
}else{
  //sun is descending
  var sLoc = 360 - (sincesunrise * pxlpermin - 378);
}
	
alert(sLoc);

I wouldn't do any rounding or units conversion until you're ready to output, and you should handle the case where sincesunrise could be negative.

pxlpermin is equal to the distance to move (360px) divided by the time to move over it (half of the time between sunset and sunrise). Then you need to differentiate the placement based on whether the sun is ascending or descending.

[Static]

it doesnt seem to be working correctly.. as i change the SnSt time (lowering it makes hte sun go up)



EDIT: got it

		var SnRs = new Date (new Date().toDateString() + ' ' + '7:30 am');
		var SnSt = new Date (new Date().toDateString() + ' ' + '7:30 pm');
		var midTime = new Date (SnRs.getTime() + (SnSt - SnRs)/2);
		
		var cTime = new Date ( );
		
		var pxlpermin = 360/((SnSt - SnRs)/2);
		var sincesunrise = cTime - SnRs;
		
		if(sincesunrise < 0){ /* don't display sun? */ }
		
		if(cTime <= midTime){
		  //sun is ascending
		  var sLoc = 378 - (sincesunrise * pxlpermin);
		  alert('U:' + sLoc);
		}else{
		  //sun is descending
		  
		  var sLoc = (sincesunrise * pxlpermin + 18) - 360;
		  alert('D:' + sLoc);
		}
		
		document.getElementById("sunIco").style.top=sLoc + 'px';

[Static]

ok.. any idea how to pull this off with the moon?

i tried and tried but the switch of dates at midnight has me baffled! lol

[Static]

after.... about 9 hours of trial and error!
Ive done it!

the moon rises after sunset and sets before sunrise... AND the sky turns dark!

// Begin Sun/Moon/NightFall
		var OneDay = 86400000;
		var SnRs = new Date (new Date().toDateString() + ' ' + obj.sunrise);
		var SnSt = new Date (new Date().toDateString() + ' ' + obj.sunset);
		var midTime = new Date (SnRs.getTime() + (SnSt - SnRs)/2);
		var midNTime = (SnSt.getTime() + ((OneDay - (SnSt - SnRs))/2));
		var cTime = new Date ( );
		
		var op = '0';
		var pxlpermin = 360/((SnSt - SnRs)/2);
		var pxlpermin_n = 390/((OneDay - (SnSt - SnRs))/2);
		var sincesunrise = cTime - SnRs;
		var sincesunset = cTime - SnSt;
		var beforesunrise = SnRs - cTime;

		if(cTime <= midTime){
		  //sun is ascending
		  var sLoc = 378 - (sincesunrise * pxlpermin);
		}else{
		  //sun is descending
		  
		  var sLoc = (sincesunrise * pxlpermin + 18) - 360;
		}
		
		if(cTime > SnSt){
		  //sun is ascending
		  var mLoc = 390 - (sincesunset * pxlpermin_n);
		}else{
		  //sun is descending
		  
		  var mLoc = 390 - (beforesunrise * pxlpermin_n + 18) ;
		}
		if(sLoc > 380) { sLoc = 380; }
		if(mLoc > 390) { mLoc = 390; }
		
		document.getElementById("sunIco").style.top=sLoc + 'px';
		document.getElementById("moonIco").style.top=mLoc + 'px';
				
		//nightfall opacity
		var x = Math.round(380 - sLoc);
		if(x < 9) {
			op = '0.' + (9 - x);
			
		}
		if (parseFloat(op) > .9) { op = '0.9'; }
		document.getElementById("nite").style.opacity=op;
		document.getElementById("hn").style.opacity=op;
		document.getElementById("mn").style.opacity=op;
		// End Sun/Moon/NightFall