randRange( 1, 12 )
15
randRange( 0, (60 / MINUTE_INCREMENT) - 1 ) * MINUTE_INCREMENT
MINUTE === 0
MINUTE > 5 ? MINUTE : "0" + MINUTE
HOUR + ":" + NICE_MINUTE
Märgi kellaajaks TIME. Tunniosuti on sinine ja minutiosuti on oranž.
init({ range: [ [-4, 4 ], [ -4, 4 ] ], scale: 45 });
var clockRadius = 3.75;
var minuteSnapPoints = 12;
var hourSnapPoints = 12 * 60 / MINUTE_INCREMENT;
var outerPointRadius = clockRadius * 1.01;
var minuteRadius = clockRadius * 0.6;
var hourRadius = clockRadius * 0.45;
minuteStartAngle = 90;
hourStartAngle = 60;
minuteSnapDegrees = 360 / minuteSnapPoints;
hourSnapDegrees = 360 / hourSnapPoints;
var clock = addAnalogClock( { radius: clockRadius, minuteTicks: hourSnapPoints } );
clock.draw();
addMouseLayer();
function movePartnerPoint( options ) {
var x = options.x;
var y = options.y;
var point = options.point;
var outerPoint = options.outerPoint;
var isOuterPoint = options.isOuterPoint;
var ratio = outerPoint.constraints.fixedDistance.dist / point.constraints.fixedDistance.dist;
if (isOuterPoint) {
ratio = 1 / ratio;
point.setCoord( [ x * ratio , y * ratio ] );
outerPoint.setCoord( [ x, y ] );
} else {
point.setCoord( [ x, y ] );
outerPoint.setCoord( [ x * ratio, y * ratio ] );
}
point.updateLineEnds();
return true;
}
minutePoint = addMovablePoint({
coord: polar( minuteRadius, minuteStartAngle ),
constraints: {
fixedDistance: {
dist: minuteRadius,
point: [ 0, 0 ],
snapPoints: 12
}
},
onMove: function( x, y ) {
return movePartnerPoint( { x: x, y: y, point: this, outerPoint: outerMinutePoint, isOuterPoint: false } );
},
normalStyle: {
fill: ORANGE,
stroke: ORANGE
},
highlightStyle: {
fill: ORANGE,
stroke: ORANGE
}
});
outerMinutePoint = addMovablePoint({
coord: polar( outerPointRadius, minuteStartAngle ),
constraints: {
fixedDistance: {
dist: outerPointRadius,
point: [ 0, 0 ],
snapPoints: 12
}
},
onMove: function( x, y ) {
return movePartnerPoint( { x: x, y: y, point: minutePoint, outerPoint: this, isOuterPoint: true } );
},
normalStyle: {
fill: ORANGE,
stroke: ORANGE
},
highlightStyle: {
fill: ORANGE,
stroke: ORANGE
}
});
hourPoint = addMovablePoint({
coord: polar( hourRadius, hourStartAngle ),
constraints: {
fixedDistance: {
dist: hourRadius,
point: [ 0, 0 ],
snapPoints: hourSnapPoints
}
},
onMove: function( x, y ) {
return movePartnerPoint( { x: x, y: y, point: this, outerPoint: outerHourPoint, isOuterPoint: false } );
},
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( x, y ) {
return movePartnerPoint( { x: x, y: y, point: hourPoint, outerPoint: this, isOuterPoint: true } );
},
normalStyle: {
fill: BLUE,
stroke: BLUE
},
highlightStyle: {
fill: BLUE,
stroke: BLUE
}
});
minuteHand = addMovableLineSegment({
pointA: minutePoint,
coordZ: [ 0, 0 ],
fixed: true,
normalStyle: {
stroke: ORANGE,
"stroke-width": 10
}
});
hourHand = addMovableLineSegment({
pointA: hourPoint,
coordZ: [ 0, 0 ],
fixed: true,
normalStyle: {
stroke: BLUE,
"stroke-width": 10
}
});
centerPoint = addMovablePoint({
coord: [ 0, 0 ],
constraints: {
fixed: true
},
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 );
Sikuta mõlemad osutid paika nii, et kell näitaks HOUR:NICE_MINUTE.
[ minutePoint.coord, hourPoint.coord ]
var minuteAngle = cartToPolar( guess[0] )[1];
var hourAngle = cartToPolar( guess[1] )[1];
minuteAngle = roundToNearest( minuteSnapDegrees, minuteAngle );
hourAngle = roundToNearest( hourSnapDegrees, hourAngle );
// if hands have not been moved, return `""`
if ( minuteAngle === minuteStartAngle && hourAngle === hourStartAngle) {
return "";
}
return (minuteAngle === correctMinuteAngle) && (hourAngle === correctHourAngle);
minutePoint.moveTo( guess[0][0], guess[0][1], true );
hourPoint.moveTo( guess[1][0], guess[1][1], true );
Number pärast \Large{:} sümbolit näitab minuteid, mis on möödunud eelmisest tunnist. Seega TIME näitab, et MINUTE minutit on möödunud kella HOUR.
Esiteks paneme paika minutiosuti.
Iga pikk kriips kellal tähendab 5 minutit, sest 60 minutit / 12 kriipsuga = 5 minutit kriipsu kohta.
Kuna eelmisest tunnist on möödunud MINUTE minutit , siis minutiseier peaks paiknema numbril 12, mis on esimene kriips kellal ja tähistab 0, minuti möödumist tunnist ja iga kriipsu vahe on 5 minutit, siis peaks minutiosuti olema numbril fraction(MINUTE, 5) = MINUTE/5.
Järgmisena paneme paika tunniosuti.
Iga pikk kriips vastab ühele tunnile. Ööpäevas teeb tunniosuti kaks ringi.
Kui minutiosuti näitab 0. minutit, siis asub tunniosuti alati pika kriipsu peal. Ülejäänud kellaaegade puhul on tunniosuti kahe pika kriipsu vahel. Kaugus kriipsudest on vastavuses läbitud minutite arvuga.
Kuna me peame märkima kellaajaks HOUR tundi ja 0 minutit, siis tunniosuti peaks olema täpselt HOUR. tunnikriipsul.
Kuna me peame märkima kellaajaks HOUR tundi ja MINUTE minutit, siis tunniosuti peaks olema fraction(MINUTE, 60) = fraction(MINUTE, 60, false, true) möödunud HOUR. tunnikriipsust.
var minuteRadius = minutePoint.constraints.fixedDistance.dist;
var hourRadius = hourPoint.constraints.fixedDistance.dist;
var minuteCoord = polar( minuteRadius, correctMinuteAngle );
var hourCoord = polar( hourRadius, correctHourAngle );
var dotOpacity = 0.4;
var handOpacity = 0.3;
addMovableLineSegment({
coordA: minuteCoord,
coordZ: [ 0, 0 ],
fixed: true,
normalStyle: {
stroke: ORANGE,
"stroke-width": 10,
"stroke-dasharray": ".",
"stroke-linecap": "round",
"stroke-opacity": dotOpacity
},
});
addMovableLineSegment({
coordA: minuteCoord,
coordZ: [ 0, 0 ],
fixed: true,
normalStyle: {
stroke: ORANGE,
"stroke-width": 10,
"stroke-linecap": "round",
"stroke-opacity": handOpacity
},
});
addMovableLineSegment({
coordA: hourCoord,
coordZ: [ 0, 0 ],
fixed: true,
normalStyle: {
stroke: BLUE,
"stroke-width": 10,
"stroke-dasharray": ".",
"stroke-linecap": "round",
"stroke-opacity": dotOpacity
},
});
addMovableLineSegment({
coordA: hourCoord,
coordZ: [ 0, 0 ],
fixed: true,
normalStyle: {
stroke: BLUE,
"stroke-width": 10,
"stroke-linecap": "round",
"stroke-opacity": handOpacity
},
});
// for some reason this doesn't work, so for now, create another center point
// centerPoint.toFront();
addMovablePoint({
coord: [ 0, 0 ],
constraints: {
fixed: true
},
normalStyle: {
fill: "#fff",
stroke: "#000",
"stroke-dasharray": "",
"stroke-width": 2,
"stroke-opacity": 1
}
});
20
30
(sulge)
- « Tagasi kõigi harjutuste juurde
- Näita sodipaberit Sodipaber pole lubatud