DNGunpla

Moving the Clock Minute and Hour Hand

Recommended Posts

I am creating a game that allows me to move the Minute Hand and the Hour Hand just like the clock in real life.

I am using 

Quote

minute.rotation = game.physics.arcade.angleToPointer(minute);

and gotten my minute hand to move like I wanted.

But I want to make the hour hand move according to the minute hand like a real clock when I drag the minute hand.

Is there anyway to make it move as such?

Share this post


Link to post
Share on other sites

I guess you should simply move the hour hand by half a degree for each passed minute. 360 degrees in the whole circle, 30 degrees for each hour (360/12), 0.5 degrees for each minute (30/60) as far as the hour hand is concerned.

Share this post


Link to post
Share on other sites

Well I did try that out but the problem is that when I try to move from 180 to -180, it doesn't increase the angle but decrease the angle instead

The code is as follow below

Quote

var p = game.input.activePointer;
            angle = Phaser.Math.angleBetween(minute.x, minute.y,p.x, p.y);
            if (minute.rotation <= game.math.degToRad(-174))
            {
                if(angle <= game.math.degToRad(177) && angle > game.math.degToRad(0))
                {
                    minute.angle -= 6;
                    hour.angle -= 0.5;
                }
                else if(angle >= game.math.degToRad(-177) && angle < game.math.degToRad(0))
                {
                    minute.angle += 6;
                    hour.angle += 0.5;
                }
                return;
            }
            else 
            {
                if(!game.math.fuzzyEqual(minute.rotation, angle, game.math.degToRad(3)) && minute.rotation < angle)
                {
                    minute.angle += 6;
                    hour.angle += 0.5;
                }
                if(!game.math.fuzzyEqual(minute.rotation, angle, game.math.degToRad(3)) && minute.rotation > angle)
                {
                    minute.angle -= 6;
                    hour.angle -= 0.5;
                }
            }

Is there any way to fix it?

Share this post


Link to post
Share on other sites

You could multiply the angle change with the sign of the current angle:

minute.angle += Math.sign(minute.angle) * 6

Or adding 180 to the pointer angle to deal with the wrapping.

Instead of using increments I would count the minutes and set the hours according to the minutes , 24h = 1440 minutes.

h = (m/1440)*360*2 +90.

 

Share this post


Link to post
Share on other sites
49 minutes ago, samid737 said:

h = (m/1440)*360*2 +90.

 

I am not sure about this code, can you explain it for me?

and also I tried using 

Quote

minute.angle += Math.sign(minute.angle) * 6

it works for when I turn clockwise.

But when I try to turn it anti-clockwise, the minute hand gets stuck at the 180 degrees part

Issue:
https://gyazo.com/5c0ca2992f0a3bb998e87b07773bd9af

Any ideas?

Share this post


Link to post
Share on other sites

An example to support :

You can adjust the minute dial by incrementing, but the hour dial can be set if you know the amount of minutes passed.  The same can be done vice versa.

The problem with the stuck dial is that the angles are wrapped between 180 and -180 and when you go from 10 o 'clock to 8, the difference is 170 - (-170), so the difference becomes large and reverses sign and goes haywire. Its pretty tedious to solve, but most of the time you can add 180 to the calculated angle.

Hope this helps.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.