Вы также можете использовать функцию lerpColor () , которая поможет вам сделать плавный переход между цветами. Поскольку lerpColor
изменится с одного определенного цвета на другой, я бы изменил границы временных интервалов, чтобы представить время дня, когда соответствующий цвет является "самым чистым" (полночь - "самый черный", полдень - " bluest ", et c)
Я позволил себе переписать часть вашего кода, чтобы сделать фрагмент, который вы можете проверить. В нем вы можете контролировать время суток с помощью ползунка и видеть изменение цвета.
const slider = document.getElementById('slider')
const label = document.getElementById('sliderValue')
slider.oninput = handleChange
function handleChange(event){
cMin = event.target.value
sliderValue.innerText = parseInt(cMin/60)+"h / "+cMin + "m"
setColours()
}
const black = [0, 0, 0]
const purple = [88, 52, 133]
const orange = [232, 131, 72]
const blue = [45, 221, 227]
let cMin
let hr
let currentColor
function setup(){
createCanvas(300, 50)
background(black)
}
function setColours(){
hr = cMin / 60;
if(hr >= 0 && hr <= 4.5){
currentColor = lerpSkyColor(black, purple, 0, 4.5)
}
if(hr > 4.5 && hr <= 5.5){
currentColor = lerpSkyColor(purple, orange, 4.5, 5.5)
}
if(hr > 5.5 && hr <= 12){
currentColor = lerpSkyColor(orange, blue, 5.5, 12)
}
if(hr > 12 && hr <= 18.5){
currentColor = lerpSkyColor(blue, orange, 12, 18.5)
}
if(hr > 18.5 && hr <= 19.5){
currentColor = lerpSkyColor(orange, purple, 18.5, 19.5)
}
if(hr > 19.5 && hr <= 24){
currentColor = lerpSkyColor(purple, black, 19.5, 24)
}
background(currentColor)
}
function lerpSkyColor(from, to, startTime, endTime){
const lerpAmt = map(hr, startTime, endTime, 0, 1)
return lerpColor(color(from), color(to), lerpAmt)
}
#slider{
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
<h2 id="sliderValue">0h / 0m</h2>
<input id="slider" type="range" min="0" max="1440" value="1"/>
Также можно настроить временные интервалы в части if / else метода setColours
, чтобы лучше отражать реальные изменения цвета и Сохраняйте цвет в течение некоторого времени (возможно, начните менять цвет с голубого на оранжевый в 17 часов вместо 12 часов)
if(hr > 12 && hr <=17){
currentColor = blue
}
if(hr > 17 && hr <= 18.5){
currentColor = lerpSkyColor(blue, orange, 17, 18.5)
}