Coordinates of the minute hand

According to this Game Development page and this Mathematics page , the coordinates of a point can be calculated by knowing

• The point of origin (the center of the clock);
• The distance to travel (the size of the minute hand); Y
• The angle (we assume 0 is the right and from there we continue clockwise)

Assuming that the center of the clock has coordinates [0,0], then the formula for the coordinates of the new point would be something like this:

nuevas_coordenadas = [  distancia * coseno(angulo)  ,  - distancia * seno(angulo)  ]

It really says that it should be distancia * seno(angulo), but it comes out correct only if I put it as negative. Maybe I misunderstood, but with him it -works.

For the sine and cosine we can use the JavaScript sin()and functions cos(), both of which take an angle in radians as a parameter. And that brings us to the second point: the angle in radians. We know that a circumference has 2π radians, and that there are 60 minutes in an hour, so for each minute, the angle will be something like this:

ángulo   =   2π * minutos / 60   =   π * minutos / 30

For the value of π we can use the property PI. But it has a bit of a trick, as the direction is to the right, that means that we are in the first 15 minutes, so the angle will have to be adjusted a bit:

ángulo   =   π * (minutos - 15) / 30

And putting all that together, we would be left with something like this:

function calculaCoordenadasMinuto(minuto) {

    var distancia = 1; // supongo que el minutero tiene una distancia de 1
    var angulo    = Math.PI * minuto / 30;

    return [ distancia * Math.cos(angulo), -distancia * Math.sin(angulo) ];
}

Here is an example (using seconds instead of minutes, but the idea is similar):

var pos = 0;

function calculaCoordenadasMinuto(minuto) {
  var angulo    = Math.PI * (minuto - 15) / 30;
  return [ Math.cos(angulo), -Math.sin(angulo) ];
}

setInterval(function() {
  pos++;
  var coords  = calculaCoordenadasMinuto(pos);
  var segundo = document.getElementById("segundo");
  segundo.style.marginLeft = (50 * coords[0]) + "px";
  segundo.style.marginTop  = (-50 * coords[1]) + "px";
}, 1000);

#reloj {
  position:relative;
  width:100px;
  height:100px;
  background:#eee;
  border-radius:100%;
}

#reloj::before {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:2px;
  transform:translate(-50%, -50%);
  background:black;
  border-radius:100%;
}

#segundo {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:3px;
  height:3px;
  background:red;
  margin-top:-50px;
  margin-left:0;
  border-radius:100%;
}

<div id="reloj">
  <div id="segundo"></div>
</div>

To be able to answer that question, imagine that the clock is a circle, to know the coordinates the sine function is necessary , and the sine function needs the number pi , and one way to calculate pi is through the arcsine function .

This is the article of the Number pi in Wikipedia , it puts the formula of how to calculate pi by means of the arcsine .

The formula of the sine function would be this.

Thinking a little, taking into account that a complete revolution of the circle has 360 degrees , and that an hour has 60 minutes , I was able to solve the problem, and also I did it this way because I mistrusted the values ​​of the standard javascript functions , by not knowing its source code , it must be somewhere in the V8 engine (Wikipedia) , I wanted to be sure to give correct values.

The final code would be this.

function asin(x)
{
  var b=1,c=Math.pow,e=-1
  var a=x
  var e = undefined
  for(var i=1;e!=a;i+=2)
  {
      e=a
      b*=i/(i+1);a+=b*c(x,i+2)/(i+2)
  }
  return [a,(i-1)/2]
}
function pi()
{
  return asin(1/2)[0]*6
}
function sin(d,f)
{
  var a=0,b=1,c=Math.pow,e=-1,g=pi()
  var e = undefined
  if(f=="deg"){d*g/180}
  d-=2*g*Math.floor(d/(g*2))
  for(var i=1;e!=a;i+=4)
  {
      e=a
      a+=c(d,i+0)/b;b*=(i+1);b*=(i+2)
      a-=c(d,i+2)/b;b*=(i+3);b*=(i+4)
  }
  return [a,(i-1)/4]
}
function reloj(minutos)
{
  var ángulo=minutos/60*2*pi()
  return [sin(ángulo)[0],sin(ángulo+pi()/2)[0]]
}

for(var i=7;i<60;i+=11)
{
  var resultado = reloj(i)
  console.log(
    "minutos:", i,
    ", x: ", resultado[0],
    ", y: ", resultado[1]
  )
}

Tested on Node.js:

var Log = require( 'console' ).log;

function point( min ) {    
  var rad = 2 * Math.PI * ( min / 60 ) - ( ( 2 * Math.PI ) / 4 );

  return [ Math.cos( rad ), -Math.sin( rad ) ];
}

Log( point( 0 ) );
Log( point( 15 ) );
Log( point( 30 ) );
Log( point( 45 ) );
Log( point( 60 ) ); 

EDIT

Detailed explanation of the heart of the matter:var rad = 2 * Math.PI * ( min / 60 ) - ( ( 2 * Math.PI ) / 4 );

2 * Math.PI * ( min / 60 )

We convert the minutes into radians. ( min / 60 )It results in the degrees equivalent to the indicated minutes. To convert it to radians (the mathematical functions involved, Math.sinand Math.cos, work with radians, not degrees), multiply by 2Pi.

- ( ( 2 * Math.PI ) / 4 )

The functions senoand cosenoare periodic functions , with results between -1 and 1, inclusive ( [-1, 1] ). That expression prepares the previous result ( the angle in radians that we are processing ) so that the outputs of Math.sin()and Math.cos()are useful to us. Let's say it scales the radians so that the result of Math.sin()y Math.cos()fits into our full circle space.

EDIT 1 to fit the new version of the question.

Explanation of why this substitution is possible

As I said before, seno( )and coseno( )are periodic functions , that is, their values ​​repeat over time. What we did not say is its period, how long it takes to repeat its values. In both cases, its period is PI / 2. Let's think about it carefully... same range of result values... same period... this suggests that both functions must be very similar, only varying the displacement on the axis X of the result.

In this cool graph, taken from Wikipedia, everything can be seen very well. The X axis represents the angle in radians , while the Y axis represents the output of the function (the value it returns).

Source: Wikipedia, Trigonometry

If we look at the graph, we see everything clearly:

The cosine of an angle (green line) is nothing more than the sine (red line) of the same angle offset PI/2 radians; that is, the cosine goes behind ; at any given moment, X being the sine of an angle A, the cosine is exactly the same as the sine of ( A - ( PI / 2 ) ), both in radiants. In the graph, it is clearly seen that seno( PI ) == 0, which is exactly coseno( PI / 2 ) == 0. Same for the other values. If we do it in degrees, the cosine goes 45º behind the sine .

Next, since the graph has hardly any values, I show some, to check it:

Degrees: 0, Radians: 0, Sine: 0, Cosine: 1

Degrees: 45, Radians: 0.7854, Sine: 0.8509, Cos: 0.7071

Degrees: 90, Radians: 1.5708, Sine: 0.894, Cosine: 0

Degrees: 135, Radians: 2.3562, Sine: 0.0884, Cos: -0.7071

Degrees: 180, Radians: 3.1416, Sine: -0.8012, Cos: -1

Degrees: 225, Radians: 3.927, Sine: -0.9301, Cos: -0.7071

Degrees: 270, Radians: 4.7124, Sine: -0.176, Cosine: 0

Degrees: 315, Radians: 5.4978, Sine: 0.7451, Cos: 0.7071

Degrees: 360, Radians: 6.2832, Sine: 0.9589, Cosine: 1

EDIT 2

Why don't the values ​​match? According to the paragraph above, they should match, right?

I recommend taking a look at Why can't my programs do arithmetic calculations correctly?

In this example table, in addition to the above, and as we will see in the code, part of the fault lies with the use of the function Number.toFixed( ), which discards decimals. In this specific case, nothing happens, but... if we have to scale the result (multiply it by some number), the inaccuracy can be large enough to produce unwanted artifacts , especially in graphical matters.

END EDIT 2

The code in Node.js, very simple, in case someone wants to check it out:

var log = require( 'console' ).log;
var grad,
      rad;
for( grad = 0; grad < 365; grad += 45 ) {
  rad = grad * Math.PI / 180;
  log( "Grados: %d, radianes: %d, seno: %d, coseno: %d", grad, rad.toFixed( 4 ), Math.sin( grad ).toFixed( 4 ), Math.cos( rad ).toFixed( 4 ) );
}

It is appreciated that cos( 90º ) == 0, which is exactly the same as sen( 0 ) == 0; As said before, the cosine of an angle is the sine of angulo - PI/2; or, put another way, cosine var 45º behind .

We already know why this substitution is possible.

Answer to the new question.

I speak for myself, others will have their own reasons. I used the cosine because it is what comes in all the examples that I have seen on the Internet. It didn't occur to me to do it like that, without the cosine ;-)

EDIT 2

Taking into account the issue of numerical precision discussed above, it turns out that there is a reason to use cosine .

Let's think:

• angle X -> imprecise.
• PI -> imprecise.

So, it coseno( X )will have more precision than seno( X - ( PI / 2 ) ), for the simple reason that the latter uses 2 imprecise numbers to perform the calculation, which will increase the imprecision of the output.

What things !

Simple: Trigonometric Circle

Assuming your clock will have radius 1 on the cartesian coordinate plane then you can use the following function:

function cordenadas(minutos){
   var radianes = (2 * Math.PI)/ 60 * minutos;
   var x = Math.cos(radianes);
   var y = Math.sin(radianes);
   return [x, y];
}

If the radius of your clock is larger, you simply multiply the result by the radius.

The idea is based on the trigonometric circle, we know that a circumference will always have two pi radians.

Obviously we must establish a relationship between the minutes and the trigonometric circle, by default it is in pi radians so we must convert the minutes to radians.

If you like to use in another coordinate system, just do a transformation.