This problem has driven me nuts and I’m looking for insight into best way to solve this problem.
I have a div $(“.sun”) that I want to move along the circumference of an ellipse, which I’ve generated with Raphael.js, so that the ellipse is as wide as the screen and horizontally centered, and as tall as half of the width, and is absolutely positioned at 0,0 (top left):
//draw ellipse that is as wide as the window and half as tall as the width
var paper = Raphael(document.getElementById("ellipse"), Wwidth, halfIt);
var c = paper.ellipse(Wwidth/2, halfIt/2, Wwidth/2, halfIt/2);
c.attr({'fill': 'transparent', 'stroke': 'red'});
jsfiddle here (changed values in jsfiddle for demo)
The ellipse is a stylized representation of the path a celestial body travels in the sky. This means that at 6am, the sun is at the far left side of the screen at the ellipse’s major axis. At 12noon the sun would be at the top center of the screen, and at 6pm the sun is on the far right of the ellipse’s major axis.
Put in terms of degrees, 6AM = 180 degrees, 12 noon = 90 degrees, 3PM = 45 degrees, and so on. Essentially, each hour between 6am and 6pm is separated by 15 degrees. Add in a calculation for the minutes:
var hours = new Date().getHours();
(removed code that converts the numerical hour to my stylized degrees for brevity)
var mins = new Date().getMinutes();
var minsdegree = mins * .25;
var skyangle = hourdegree + minsdegree;
So for example, if it were 11:39AM, skyangle would equal 114.75 degrees.
The Challenge:
How can I animate the sun along the path of the ellipse such that it corresponds to my custom angle depending on the time. Technically, I don’t need it to “animate” so much as simply correspond to the correct angle upon page load. However, it would be neat to have it animate along the path, if you kept the page open long enough.
Here you go: http://jsfiddle.net/y47Cr/54/
updates every second.