javascript - Lerp 背景颜色基于一天中的时间

Question

我一直在开发一个小型 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
 }
}

上面是设置页面天空颜色的函数。循环的起始位置(0)位于顶部，并从顶部开始逆时针旋转。

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

最初，我首先通过标准化一小时后的分钟来调整颜色，这导致天空颜色每小时在黑色和紫色之间转换，一旦过了晚上 8 点(20:00)，背景将继续调整为紫色即使午夜是黑色的。这让我怀疑获取时间的逻辑是否合理。

1. 是否有更好的方法来检查当前时间是否在两小时之间？
2. 如何获取距离下一个片段(天空颜色)的分钟数？

Answer 1

您也可以使用 lerpColor()功能，这将帮助您在颜色之间实现平滑过渡。由于 lerpColor 将从一种定义的颜色更改为另一种定义的颜色，因此我将更改时间间隔的边界来表示一天中相应颜色“最纯”的时间(午夜是“最黑”的) ，中午是“最蓝的”，等等)

我冒昧地重写了您的一些代码以制作一个您可以检查的片段。在其中，您可以使用 slider 控制一天中的时间并查看颜色变化。

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"/>

您还可以调整 setColours 方法的 if/else 部分中的时间间隔，以更好地反射(reflect)真实的颜色变化并在一段时间内保持颜色相同(也许开始在 17 点而不是 12 点从蓝色变为橙色)

if(hr > 12 && hr <=17){
  currentColor = blue
}
if(hr > 17 && hr <= 18.5){
  currentColor = lerpSkyColor(blue, orange, 17, 18.5)
}