function movePartnerPoint(e){var r=e.x,a=e.y,t=e.point,n=e.outerPoint,i=e.isOuterPoint,s=n.constraints.fixedDistance.dist/t.constraints.fixedDistance.dist;return i?(s=1/s,t.setCoord([r*s,a*s]),n.setCoord([r,a])):(t.setCoord([r,a]),n.setCoord([r*s,a*s])),t.updateLineEnds(),!0}init({range:[[-4.5,4.5],[-4.5,4.5]],scale:30});var clockRadius=3.75,minuteSnapPoints=12,hourSnapPoints=720/MINUTE_INCREMENT,outerPointRadius=1.1*clockRadius,minuteRadius=.65*clockRadius,hourRadius=.45*clockRadius;minuteStartAngle=90,hourStartAngle=60,minuteSnapDegrees=360/minuteSnapPoints,hourSnapDegrees=360/hourSnapPoints;var clock=addAnalogClock({radius:clockRadius,minuteTicks:60});clock.draw(),addMouseLayer(),minutePoint=addMovablePoint({coord:polar(minuteRadius,minuteStartAngle),constraints:{fixedDistance:{dist:minuteRadius,point:[0,0],snapPoints:12}},onMove:function(e,r){return movePartnerPoint({x:e,y:r,point:this,outerPoint:outerMinutePoint,isOuterPoint:!1})},normalStyle:{fill:RED,stroke:RED},highlightStyle:{fill:RED,stroke:RED}}),outerMinutePoint=addMovablePoint({coord:polar(outerPointRadius,minuteStartAngle),constraints:{fixedDistance:{dist:outerPointRadius,point:[0,0],snapPoints:12}},onMove:function(e,r){return movePartnerPoint({x:e,y:r,point:minutePoint,outerPoint:this,isOuterPoint:!0})},normalStyle:{fill:RED,stroke:RED},highlightStyle:{fill:RED,stroke:RED}}),hourPoint=addMovablePoint({coord:polar(hourRadius,hourStartAngle),constraints:{fixedDistance:{dist:hourRadius,point:[0,0],snapPoints:hourSnapPoints}},onMove:function(e,r){return movePartnerPoint({x:e,y:r,point:this,outerPoint:outerHourPoint,isOuterPoint:!1})},normalStyle:{fill:BLUE,stroke:BLUE},highlightStyle:{fill:BLUE,stroke:BLUE}}),outerHourPoint=addMovablePoint({coord:polar(outerPointRadius,hourStartAngle),constraints:{fixedDistance:{dist:outerPointRadius,point:[0,0],snapPoints:hourSnapPoints}},onMove:function(e,r){return movePartnerPoint({x:e,y:r,point:hourPoint,outerPoint:this,isOuterPoint:!0})},normalStyle:{fill:BLUE,stroke:BLUE},highlightStyle:{fill:BLUE,stroke:BLUE}}),minuteHand=addMovableLineSegment({pointA:minutePoint,coordZ:[0,0],fixed:!0,normalStyle:{stroke:RED,"stroke-width":10}}),hourHand=addMovableLineSegment({pointA:hourPoint,coordZ:[0,0],fixed:!0,normalStyle:{stroke:BLUE,"stroke-width":10}}),centerPoint=addMovablePoint({coord:[0,0],constraints:{fixed:!0},normalStyle:{fill:"#fff",stroke:"#000","stroke-width":2}}),correctMinuteAngle=timeToDegrees(MINUTE),correctHourAngle=timeToDegrees(5*(HOUR+MINUTE/60)),correctMinuteAngle=roundToNearest(minuteSnapDegrees,correctMinuteAngle),correctHourAngle=roundToNearest(hourSnapDegrees,correctHourAngle)
Arrastra las manecillas del reloj de forma que el reloj muestre las HOUR:NICE_MINUTE.
[minutePoint.coord, hourPoint.coord]
var e=cartToPolar(guess[0])[1],r=cartToPolar(guess[1])[1];return e=roundToNearest(minuteSnapDegrees,e),r=roundToNearest(hourSnapDegrees,r),e===minuteStartAngle&&r===hourStartAngle?"":e!==correctMinuteAngle||r!==correctHourAngle?e===correctHourAngle&&r===correctMinuteAngle?$._("Recuerda que la manecilla de las horas es la manecilla pequeña y la manecilla de los minutos es la más grande"):e===correctMinuteAngle&&r!==correctHourAngle&&r===roundToNearest(hourSnapDegrees,timeToDegrees(5*HOUR))?$._("Recuerda que la manecilla de las horas debe moverse durante el transcurso de la hora"):!1:!0
minutePoint.moveTo(guess[0][0],guess[0][1],!0),hourPoint.moveTo(guess[1][0],guess[1][1],!0)
La manecilla de las horas es la barra azul corta y la manecilla de los minutos es la barra roja.
El número después del símbolo \Large{:} representa el número de minutos que han pasado de la hora. Así TIME representa MINUTE minutos pasada la hora HOUR.
Primero, vamos a ajustar la manecilla de los minutos.
Cada una de las marcas grandes indica un incremento de 5 minutos, porque 60 minutos / 12 marcas = 5 minutos por cada marca.
Since we are MINUTE
minutes past the hour, the minute hand should
be at the mark numbered
12, which is
the first tick mark on the clock and represents
0 minutes past the hour.
Since we are MINUTE
minutes past the hour, and there are 5 minutes
per tick mark, the minute hand should be at the
mark numbered
fraction(MINUTE, 5) = MINUTE/5
Ahora coloquemos la manecilla de las horas.
Las 12 marcas grandes corresponden a las horas del día (suponiendo el tiempo como AM/PM).
Si han pasado 0 minutos después de la hora, la manecilla de las horas apunta exactamente la marca correspondiente a la hora. Pero en una hora la manecilla de las horas debe moverse hasta alcanzar la siguiente marca.
Puesto que son 0 minutos pasada la hora, la manecilla de las horas debe estar justo en la marca de las HOUR horas.
Como son MINUTE minutos pasada la hora, la manecilla de las horas habrá viajado fraction(MINUTE, 60) = fraction(MINUTE, 60, false, true) del camino hacia la marca de 1HOUR + 1 horas.
Así que la manecilla de las horas debe colocarse justo antes de la segunda marca pequeña pasada la marca de HOUR horas.
Así que la manecilla de las horas debe colocarse justo después de la tercera marca pequeña pasada la marca de HOUR horas.
Así que la manecilla de las horas debe colocarse justo después de la primera marca pequeña pasada la marca de HOUR horas.
Así que la manecilla de las horas debe colocarse entre la segunda y la tercera de las marcas pequeñas pasada la marca de HOUR horas.
Así que la manecilla de las horas debe colocarse justo antes de la cuarta marca pequeña pasada la marca de HOUR horas.
var minuteRadius=minutePoint.constraints.fixedDistance.dist,hourRadius=hourPoint.constraints.fixedDistance.dist,minuteCoord=polar(minuteRadius,correctMinuteAngle),hourCoord=polar(hourRadius,correctHourAngle),dotOpacity=.4,handOpacity=.3;addMovableLineSegment({coordA:minuteCoord,coordZ:[0,0],fixed:!0,normalStyle:{stroke:RED,"stroke-width":10,"stroke-dasharray":".","stroke-linecap":"round","stroke-opacity":dotOpacity}}),addMovableLineSegment({coordA:minuteCoord,coordZ:[0,0],fixed:!0,normalStyle:{stroke:RED,"stroke-width":10,"stroke-linecap":"round","stroke-opacity":handOpacity}}),addMovableLineSegment({coordA:hourCoord,coordZ:[0,0],fixed:!0,normalStyle:{stroke:BLUE,"stroke-width":10,"stroke-dasharray":".","stroke-linecap":"round","stroke-opacity":dotOpacity}}),addMovableLineSegment({coordA:hourCoord,coordZ:[0,0],fixed:!0,normalStyle:{stroke:BLUE,"stroke-width":10,"stroke-linecap":"round","stroke-opacity":handOpacity}}),addMovablePoint({coord:[0,0],constraints:{fixed:!0},normalStyle:{fill:"#fff",stroke:"#000","stroke-dasharray":"","stroke-width":2,"stroke-opacity":1}})