40

Quiero saber cómo se hace una función en javaScript que devuelva las coordenadas en determinado minuto. Las coordenadas centrales son el centro del reloj, así que pueden ser negativas.

En Microsiervos encontré un enlace, que hace paralelismo a lo que yo pregunto, es un reloj que te da la hora en coordenadas.

Estoy probando la división o la resta, pero no me sale.

function(minutos)
{
    var x=0,y=0
    x=minutos*60
    y=x-12
    return [x,y]
}

Edito:

Mirando algunas respuestas he visto algo extraño: ¿Por qué usar coseno, si es posible extraer en valor usando seno?

Fórmula pi medio

0

4 respuestas 4

46
+100

Según esta página de Game Development y esta otra de Mathematics (ambas en inglés), las coordenadas de un punto se pueden calcular conociendo

  • El punto de origen (el centro del reloj);
  • La distancia a recorrer (el tamaño del minutero); y
  • El ángulo (suponemos 0 es la derecha y partir de ahí seguimos el sentido de las agujas del reloj)

Partiendo de que le centro del reloj tiene las coordenadas [0,0], entonces la fórmula para las coordenadas del nuevo punto sería algo como esto:

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

Realmente pone que debería ser distancia * seno(angulo), pero me sale correcto sólo si lo pongo como negativo. Quizás entendí mal, pero con el - funciona.

Para el seno y coseno podemos usar las funciones sin() y cos() de JavaScript, ambas toman como parámetro un ángulo en radianes. Y eso nos lleva al segundo punto: el ángulo en radianes. Sabemos que una circunferencia tiene 2π radianes, y que hay 60 minutos en una hora, por lo que para cada minuto, el ángulo será algo como esto:

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

Para el valor de π podemos usar la propiedad PI. Pero tiene un poco de truco, como la dirección es a la derecha, eso significa que estamos en el minuto 15 de primeras, por lo que habrá que ajustar un poco el ángulo:

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

Y poniendo todo eso junto, nos quedaría algo como esto:

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) ];
}

Aquí dejo un ejemplo (usando segundos en lugar de minutos, pero la idea es 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>

11

Para poder responder esa pregunta, imagina que el reloj es un círculo, para conocer las coordenadas es necesaria la función seno, y la función seno necesita del número pi, y una manera de calcular pi es mediante la función arcoseno.

Este es el artículo del Número pi en Wikipedia, en él se pone la fórmula de cómo calcular pi mediante el arcoseno.

Fórmulas de arcoseno.

La fórmula de la función seno sería esta.

Fórmula de seno.

Pensando un poco, teniendo en cuenta que una vuelta completa del círculo tiene 360 grados, y que una hora tiene 60 minutos, pude resolver el problema, y además lo hice de esta manera porque desconfiaba de los valores de las funciones estándar de javascript, al desconocer su código fuente, debe estar en alguna parte del motor V8 (Wikipedia), quise estar seguro de dar valores correctos.

El código final sería este.

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]
  )
}

1
  • 15
    Puedes utilizar Math.PI, Math.sin, etc. No es una idea seria desconfiar de las funciones estandar de javascript ya que estan bien probadas, seguramente mejor probadas que cualquier otra que tu o yo podamos hacer, ademas de que probablemente utilizen el procesador matematico del CPU. el 22 sep. 2016 a las 17:55
8
+200

Probado en 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 ) ); 

EDITO

Explicación detallada del meollo del asunto: var rad = 2 * Math.PI * ( min / 60 ) - ( ( 2 * Math.PI ) / 4 );

2 * Math.PI * ( min / 60 )

Transformamos los minutos en radianes. ( min / 60 ) nos resulta en los grados equivalentes a los minutos indicados. Para convertirlo en radianes (las funciones matemáticas implicadas, Math.sin y Math.cos, trabajan con radianes, no con grados), se multiplican por 2Pi.

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

Las funciones seno y coseno son funciones periódicas, con resultados comprendidos entre -1 y 1, ambos incluidos ( [-1, 1] ). Esa expresión prepara el anterior resultado ( el angulo en radianes que estamos procesando ) para que las salidas de Math.sin() y Math.cos() nos resulten útiles. Digamos que escala los radianes para que el resultado de Math.sin() y Math.cos() encajen en nuestro espacio completo de la circunferencia.

EDITO 1 para adecuarlo a la nueva versión de la pregunta.

Explicación de porque es posible esa sustitución

Como dije anteriormente, seno( ) y coseno( ) son funciones periodicas, es decir, sus valores se repiten con el tiempo. Lo que no dijimos es su periodo, lo que tardan en repetir sus valores. En ambos casos, su periodo es PI / 2. Pensemoslo con detenimiento ... mismo rango de valores de resultado ... mismo periodo ... esto nos sugiere que ambas funciones han de ser muy similares, variando unicamente el desplazamiento sobre el eje X del resultado.

En esta gráfica tan chula, tomada de la Wikipedia, se aprecia todo muy bien. El eje X representa el angulo en radianes, mientras que el eje Y representa la salida de la función (el valor que devuelve).

introducir la descripción de la imagen aquí

Fuente: Wikipedia, Trigonometría

Si miramos la gráfica, lo vemos todo claro:

El coseno de un ángulo (línea verde), no es más que el seno (línea roja) del mismo angulo desfasado PI/2 radianes; es decir, el coseno va por detrás; en un momento dado cualquiera, siendo X el seno de un angulo A, el coseno es exactamente el mismo que el seno de ( A - ( PI / 2 ) ), ambos en radiantes. En la gráfica, se aprecia claramente que seno( PI ) == 0, que es exactamente coseno( PI / 2 ) == 0. Igual para los demás valores. Si lo hacemos en grados, el coseno va 45º por detrás del seno.

A continuación, puesto que la gráfica no tiene apenas valores, muestro algunos, para comprobarlo:

Grados: 0, radianes: 0, seno: 0, coseno: 1

Grados: 45, radianes: 0.7854, seno: 0.8509, coseno: 0.7071

Grados: 90, radianes: 1.5708, seno: 0.894, coseno: 0

Grados: 135, radianes: 2.3562, seno: 0.0884, coseno: -0.7071

Grados: 180, radianes: 3.1416, seno: -0.8012, coseno: -1

Grados: 225, radianes: 3.927, seno: -0.9301, coseno: -0.7071

Grados: 270, radianes: 4.7124, seno: -0.176, coseno: 0

Grados: 315, radianes: 5.4978, seno: 0.7451, coseno: 0.7071

Grados: 360, radianes: 6.2832, seno: 0.9589, coseno: 1

EDITO 2

¿ Porqué no coinciden los valores ? según la parrafada de antes, deberían coincidir, ¿ no ?

Recomiendo hechar un ojo a ¿Por qué mis programas no pueden hacer cálculos aritméticos correctamente?

En esta tabla de ejemplo, además de lo anterior, y como veremos en el código, parte de la culpa la tiene el uso de la función Number.toFixed( ), que descarta decimales. En este caso concreto, no ocurre nada, pero... si tenemos que escalar el resultado (multiplicarlo por algún número), la imprecisión puede ser suficientemente grande como para producir artefactos no deseados, sobre todo en temas gráficos.

FIN EDITO 2

El código en Node.js, muy simple, por si alguien quiere comprobarlo:

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 ) );
}

Se aprecia que cos( 90º ) == 0, que es exactamente lo mismo que sen( 0 ) == 0; Lo dicho anteriormente, el coseno de un angulo es el seno de angulo - PI/2; o, dicho de otra forma, el coseno var 45º por detrás.

Ya sabemos porqué es posible esa sustitución.

Respuesta a la nueva pregunta.

Hablo por mí, los demás tendrán sus propias razonas. Usé el coseno porqué es lo que viene en todos los ejemplo que he visto en Internet. No se me ocurrio hacerlo asi, sin el coseno ;-)

EDITO 2

Teniendo en cuenta el tema de la precisión numérica expuesto mas arriba, resulta que si hay un motivo para usar el coseno.

Pensemos:

  • ángulo X -> impreciso.
  • PI -> impreciso.

Entonces, coseno( X ) tendrá mas precisión que seno( X - ( PI / 2 ) ), por el sencillo motivo de que lo segundo usa 2 números imprecisos pare realizar el cálculo, lo cual aumentará la imprecisión de la salida.

¡ Que cosas !

6

Simple: Circulo Trigonometrico

introducir la descripción de la imagen aquí

Asumiendo que tu reloj tendrá radio 1 en el plano de coordenadas cartesiano entonces puedes usar la siguiente función:

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

si el radio de tu reloj fuese mayor, simplemente multiplicas el resultado por el radio.

La idea esta basada en el circulo trigonométrico, sabemos que una circunferencia siempre tendrá dos pi radianes.

Obviamente debemos de establecer una relación entre los minutos y el circulo trigonometrico, por defecto esta en pi radianes entonces debemos de convertir los minutos a radianes.

Si gustas usar en otro sistema de coordenadas, simplemente se hace una transformación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.