Javascript 基于一天中的时间的Lerp背景色

我一直在开发一个小的web项目，它显示时间，并使用p5.js设置太阳和月亮在背景中旋转的动画。我面临的问题是实现从一种背景天空颜色到另一种背景天空颜色的逐渐过渡

function setColours(){
 var pallete = [color(0),color(232, 131, 72),color(88,52,133),color(45, 221, 227)]
 var cMin = slider.value();
 hr = cMin / 60;
 //lerpAmt = map(mn,0,1440,0,1);
 console.log(hr);

 if(hr <= 4 || hr >= 20) { 
   background(pallete[0])//black
 } 

 else if(hr >5 && hr <= 6){
   background(232, 131, 72)//orange
 } 

 else if(hr >18 && hr <=19){
   background(232, 131, 72)
 }

 else if(hr >4 && hr <= 5){
   background(88,52,133) //purple    
 } 

 else if(hr > 19 && hr <= 20){
   background(88,52,133)       
 }

 else if(hr >= 7|| hr <18){
   background(45, 221, 227) //blue
 }
}

上面是在页面上设置天空颜色的功能。循环的starting0位置位于顶部，从开始逆时针旋转

黑色->紫色->橙色->蓝色->橙色->紫色->黑色

最初，我通过标准化一小时后的分钟数来调整颜色，这导致天空颜色每小时在黑色和紫色之间转换，一旦超过8PM20:00，即使午夜是黑色，背景也会继续变为紫色。这让我怀疑获得时间的逻辑是否合理

有没有更好的方法来检查当前是否在两个小时之间？ 我怎样才能得到距离下一段天空颜色的分钟数？

---

要使画布在黑色->紫色->橙色->蓝色->橙色->紫色->黑色之间循环，可以简化if-else情况。我们还可以通过创建颜色常量（作为pallete的索引）使代码更易于阅读

要得到距离下一次颜色变化的分钟数，我们只需从下一个小时的边界减去当前小时，然后乘以60即可

功能设置{ CreateCanvas1120630； 帧率60； } var-mn=0； 函数图{ 如果mn>1439 mn=0； mn++； 设置颜色； } 函数集颜色{ var black=0； var orange=1； 紫色变种=2； var蓝=3； var pallete=[color0，color232，131，72，color88，52133，color45221227]； //让hr=mn/60.0；//也可以工作，而不是映射 设hr=mapmn，01440,0,23； 如果hr<4{ 背景板[黑色]； console.Log变色前的分钟数+4-小时*60； }否则，如果hr<6{ 背景板[紫色]； console.Log变色前的分钟数+6-小时*60； }如果hr<8，则为其他{ 背景托盘[橙色]； console.Log变色前的分钟数+8-小时*60； }如果hr<16，则为其他{ 背景板[蓝色]； console.LOG变色前的分钟数+16-小时*60； }否则，如果hr<18{ 背景托盘[橙色]； console.Log变色前的分钟数+18-小时*60； }否则，如果hr<20{ 背景板[紫色]； console.Log变色前的分钟数+20-小时*60； }否则{ 背景板[黑色]； //在这里，我们从28减去我们的小时，以说明开始时的4小时 console.Log颜色变化前的分钟数+28-小时*60； } }

---

您也可以使用该功能，它将帮助您在颜色之间进行平滑过渡。由于lerpColor将从一种定义的颜色更改为另一种，我将更改时间间隔的边界，以表示一天中对应颜色最纯净的时间，午夜是最黑的，中午是最蓝的，等等

我冒昧地重写了您的一些代码，以生成一个您可以检查的代码片段。在它中，你可以控制一天的时间与滑块，并看到颜色的变化

常量滑块=document.getElementById'slider' const label=document.getElementById'sliderValue' slider.oninput=handleChange 函数handleChangeevent{ cMin=event.target.value sliderValue.innerText=parseIntcMin/60+h/+cMin+m 色系 } 常量黑=[0,0,0] 常量紫色=[88,52,133] 常数橙色=[232,131,72] 常数蓝=[45221227] 让我进来 让人力资源部 让我们来看看颜色 功能设置{ createCanvas300，50 背景黑 } 函数集颜色{ hr=cMin/60； 如果hr>=0&&hr 4.5&&hr 5.5&&hr 12&&hr 18.5&&hr 19.5&&hr