Daylight color

Calculates noon and midnight time by sunrise and sunset time.

by Victor Melnik

HTML

Time: <span id="time"></span><br/>
<input type="range" id="range" max="1439" />
<br/>
Sunrise: <span id="sunrise"></span><br/>
<input type="range" id="sunrise_range" max="1439" />
<br/>
Sunset: <span id="sunset"></span><br/>
<input type="range" id="sunset_range" max="1439" />
<br/>
<span id="info"></span><br/>
<div id="panel">
    <canvas id="canvas" width="250" height="250"></canvas>
</div>
<p id="coef"></p>

CSS

input[type="range"] {
    width: 50%;
}
input[type="text"] {
    width: 75px;
}

#panel {
    width: 250px;
    height: 250px;
}

JavaScript

// Исходные данные: время рассвета и заката
var sunrise = timeToMinutes(05, 46);
var sunset  = timeToMinutes(21, 22);
// Текущее время
var time = Math.floor(new Date().getTime() / 60000) % 1440;


// Инициализация
var canv = new Canv(canvas.getContext('2d'),
                    canvas.width, canvas.height);

$('#range').val(time);
$('#range').on("change mousemove", function () {
    time = $(this).val();
    recalculate();
});
$('#sunrise_range').val(sunrise);
$('#sunrise_range').on("change mousemove", function () {
    sunrise = $(this).val();
    recalculate();
});
$('#sunset_range').val(sunset);
$('#sunset_range').on("change mousemove", function () {
    sunset = $(this).val();
    recalculate();
});
recalculate();


function recalculate() {
    // Находим полдень и полночь
    var sunriseRad = timeToRadians(sunrise);
    var sunsetRad = timeToRadians(sunset);
    var noonRad = ((sunriseRad + sunsetRad) / 2) % (2*Math.PI);
    var midnightRad = (Math.PI + noonRad) % (2*Math.PI);
    var noon = radiansToTime(noonRad);
    var midnight = radiansToTime(midnightRad);
    
    
    // Вывод времени
    $('#time').text(minutesToTime(time));
    $('#sunrise').text(minutesToTime(sunrise));
    $('#sunset').text(minutesToTime(sunset));
    $('#info').html(
        'Midnight: ' + minutesToTime(midnight) + '<br/>'
        + 'Noon: ' + minutesToTime(noon));
    
    
    // Рисуем метки на окружности
    canv.drawArc();
    // Восход и закат солнца
    canv.drawLine(sunriseRad, "#ff0");
    canv.drawLine(sunsetRad, "#ff0");
    // Полдень и полночь
    canv.drawLine(noonRad, "#ff7f00");
    canv.drawLine(midnightRad, "#7f00ff");
    // Текущее время
    var timeRad = timeToRadians(time);
    canv.drawLine(timeRad, "#fff");
    
    
    // Расчёт коэффициента для смешивания цветов
    var startAngle = sunriseRad;
    var endAngle = sunsetRad;
    // Если время заката превысило полночь
    // увеличиваем его на один оборот.
    
    // Полдень
    var mean = (startAngle +...