Any Math Wizards out there?

Started by Darth Mandarb, Fri 28/10/2011 20:18:11

Previous topic - Next topic

Darth Mandarb

Okay, here's the deal; I suck at math.  I don't know if it's a mental block or if I'm just not smart enough but either way, I suck at it.  I have a problem ... it's a bit long-winded so bear with me here:

I'm working on a little project that involves making a clock in HTML/CSS3.  For the sake of this question I'm going to focus solely on the seconds hand of the clock.  I set the seconds hand's starting rotation by grabbing the current time, stripping the seconds from it, and multiplying that by 6.  Since there are 60 seconds in a minute, divide 360 by 60 and you get 6.

So if the current seconds are 10, the rotation is 60 degrees.  Simple (even I can do that!).  Then I just call that same javascript function every 1000ms and it works a charm and the seconds hand just works its way around the clock in 1 second increments!

However...

I have added in some CSS3 transitions on the movement so it's 'animated' smoother (it still ticks each second but rather than just blinking from point A to point B with no 'tweening' it actually moves the distance smoothly).  Don't worry about this if you don't know CSS transitions it's not really all that important to the over-all question which I am getting to :)

The problem with the transitions is that when it gets back to 360 degrees it spins all the way around COUNTER clockwise to get back to the start of the clock rather than just continuing smoothly into the next minute.  I have tested and confirmed it is definitely the transitions doing this.  If I remove them, it just works as it should (without the smoother animation).

So...

To fix this I stopped setting the rotation based on the TIME and, instead, pass the function the current rotation which I then just add 6 degrees to.  This works perfectly so instead of going back to 6 degrees for the first second it would rotate to 366 degrees.  (I calculated, based on javascript's highest allowed integer that it would take approximately 47 million years to crash when it reaches a number that js can't handle).

Here is (finally) the problem:

Because the rotation is no longer being based off the actual time, I want to be able to check (after X amount of time) that the time is being kept accurately and, if not, just re-init the clock.  I am wanting to say:

current passed in rotation value = X;
rotation value based off current time = Y;

And then somehow discover if they are equal, meaning X is the same rotational value as Y!  So like if X = 366 and Y = 6 those are the same!  It's easy on the second time around but when you get up higher it's a jumbled mess!

I have a suspicion is has something to do with the current 'second' ... like if it's the 10th second that would be 60degrees so I have to do something with 420degrees and 10 ... but I'm just not seeing it :(

Is there a formula or something?  I'm guessing this is something REALLY simple and I'm just not mathematically gifted enough to grasp it!  Any and all help, advice, ideas are much appreciated!

I did have an idea about setting a global variable in the init function but I wanted to focus on the above first!

Eigen

366 % 360 = 6
950 % 360 = 230

It's modulus operator you want.

Darth Mandarb

I humbly thank you kind sir!

I guessed it was something simple, but damn... that really is simple!

Works perfectly man, thanks a million!

SMF spam blocked by CleanTalk