Kol kas apie dienos laiką:
Laikas matuojamas muhurtomis, para turi 30 muhurtų. Tai reiškia, kad 1 muhurta = 24val*60min/30=1440min/30=48min
Teoriškai, muhurtos turėtų būti pradedamos skaičiuoti nuo saulės patekėjimo, nes dienos pradžios momentu laikomas saulės patekėjimo momentas.
Kiekviena muhurta dar skiriama į 30 smulkesnių dalių (atitiktų "minutes"), vadinamų "kala", o kalos skiriamos dar į 30 dalių (atitiktų "sekundes"), vadinamų "kaštha".
Kaip galėtų atrodyti muhurtų laikrodis?
Atsiverskite metrinio laikrodžio Javascript kodo pavyzdį: https://codepen.io/cjnorec/pen/pgjvXR
Vietoje to kodo, kuris yra dešiniame langelyje, įkelkite pakoreguotą kodą, kuris sugeneruos "muhurtinį laikrodį", su 30 muhurtų ciferblatu, nustatytą taip, kad pirmos muhurtos skaičiavimas prasidėtų nuo saulės patekėjimo laiko sausio 2 d. Lietuvoje (saulė teka 8:42):
Gal kas nors turi ką bendro su javascript programavimu? Būtų galima kažką dar įdomesnio padaryti, pvz. automatiškai veikiantį appsą mobiliam telefonui, kuris automatiškai nustatytų saulės tekėjimo laiką pagal lokaciją, ir toks laikrodis visada būtų sureguliuotas pagal konkretų saulės tekėjimo laiką konkrečioje vietoje.console.clear();
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//console.log(ctx);
var CYCLES_PER_DAY = 1
var HOURS_PER_DAY = 30
var HOURS_PER_CYCLE = HOURS_PER_DAY/CYCLES_PER_DAY
var MINUTES_PER_HOUR = 30
var SECONDS_PER_MINUTE = 30
var FPS = 20
var width = canvas.width
var borderWidthLeft = width * .02
var borderWidthRight = width * .02
var height = canvas.height
var borderHeightTop = height * .02
var borderHeightBottom = height * .02
var clockRadius = Math.min(width, height) * .5 - Math.min(borderWidthLeft, borderWidthRight)
function drawCircle(x, y, r, color, border, bordercolor) {
ctx.save();
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fillStyle = color
ctx.fill();
ctx.lineWidth = border
ctx.strokeStyle = bordercolor
ctx.stroke();
ctx.restore();
}
function drawLine(x1, y1, x2, y2, color, border) {
ctx.save();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = color
ctx.lineWidth = border
ctx.stroke();
ctx.restore();
}
function fromRadians(radians, radius) {
var x = Math.cos(radians) * radius + width / 2
var y = -Math.sin(radians) * radius + height / 2
return [x, y]
}
function drawHand(decimal, radius, color, border) {
var radians = -decimal * Math.PI * 2 + Math.PI / 2
drawLine(width / 2, height / 2, fromRadians(radians, clockRadius * radius)[0], fromRadians(radians, clockRadius * radius)[1], color, border)
drawLine(width / 2, height / 2, fromRadians(radians + Math.PI, clockRadius * radius * .1)[0], fromRadians(radians + Math.PI, clockRadius * radius * .1)[1], color, border)
}
function drawFace() {
var NUMBER_SIZE = clockRadius*.10
var OUTER_BORDER = 5
var BORDER_TRIM = 3
var BACKGROUND_COLOR="#CCCCCC"
var BACKGROUND_COLOR="#1D1F20"
var PRIMARY_COLOR='#1D1F20'
var PRIMARY_COLOR='#CCCCCC'
var SECONDARY_COLOR='#CCCCCC'
var ACCENT_COLOR='red'
d = new Date()
var total_milliseconds = (d.getHours()-8) * 3600000 + (d.getMinutes()-42) * 60000 + d.getSeconds() * 1000 + d.getMilliseconds()
var hours = total_milliseconds / 86400000 * HOURS_PER_DAY % HOURS_PER_CYCLE
var minutes = total_milliseconds % (86400000/HOURS_PER_DAY) / (86400000/HOURS_PER_DAY) * MINUTES_PER_HOUR
var seconds = total_milliseconds % (86400000/HOURS_PER_DAY/MINUTES_PER_HOUR) / (86400000/HOURS_PER_DAY/MINUTES_PER_HOUR) * SECONDS_PER_MINUTE
drawCircle(width / 2, height / 2, clockRadius, BACKGROUND_COLOR, OUTER_BORDER, PRIMARY_COLOR)
drawCircle(width / 2, height / 2, clockRadius - BORDER_TRIM * 2, BACKGROUND_COLOR, BORDER_TRIM, PRIMARY_COLOR)
ctx.textAlign = "center"
ctx.fillStyle = PRIMARY_COLOR
/* ctx.font = '24px Arial'
ctx.fillText('¯\\_(ツ)_/¯', width / 2, height / 5 * 2)
ctx.font = '12px Consolas'
ctx.fillText("Not Water Proof", width / 2, height / 5 * 3)*/
ctx.font = NUMBER_SIZE + "px Arial"
for (var i = 1; i <= HOURS_PER_CYCLE; i++) {
var axy = fromRadians((-i + HOURS_PER_CYCLE/4) / (HOURS_PER_CYCLE/2) * Math.PI, clockRadius * .90)
var bxy = fromRadians((-i + HOURS_PER_CYCLE/4) / (HOURS_PER_CYCLE/2) * Math.PI, clockRadius * 1 - OUTER_BORDER / 2 - BORDER_TRIM)
var xy = fromRadians((-i + HOURS_PER_CYCLE/4) / (HOURS_PER_CYCLE/2) * Math.PI, clockRadius * .73)
ctx.fillText(i, xy[0], xy[1] + NUMBER_SIZE / 2.9)
drawLine(axy[0], axy[1], bxy[0], bxy[1], PRIMARY_COLOR, 3)
}
for (var i = 0; i < MINUTES_PER_HOUR; i++) {
var axy = fromRadians((-i + (MINUTES_PER_HOUR/2)) / (MINUTES_PER_HOUR/2) * Math.PI, clockRadius * .95)
var bxy = fromRadians((-i + (MINUTES_PER_HOUR/2)) / (MINUTES_PER_HOUR/2) * Math.PI, clockRadius * 1 - OUTER_BORDER / 2 - BORDER_TRIM)
drawLine(axy[0], axy[1], bxy[0], bxy[1], PRIMARY_COLOR, 3)
}
drawHand(hours / (HOURS_PER_DAY/CYCLES_PER_DAY), .6, SECONDARY_COLOR, 6)
drawHand(minutes / MINUTES_PER_HOUR, .8, SECONDARY_COLOR, 4)
drawCircle(width / 2, height / 2, clockRadius * .02, PRIMARY_COLOR)
drawHand(seconds / SECONDS_PER_MINUTE, .8, ACCENT_COLOR, 3)
drawCircle(width / 2, height / 2, clockRadius * .01, ACCENT_COLOR)
}
window.onresize = function(){
width = canvas.width = window.innerWidth
height = canvas.height = window.innerHeight
borderWidthLeft = width * .02
borderWidthRight = width * .02
borderHeightTop = height * .02
borderHeightBottom = height * .02
clockRadius = Math.min(width, height) * .5 - Math.min(borderWidthLeft, borderWidthRight)
}
setInterval(drawFace, 1000/FPS)
onresize()