Цвет фона Lerp в зависимости от времени суток - PullRequest
Новая
       11

Цвет фона Lerp в зависимости от времени суток

2 голосов
/ 12 февраля 2020

Я разрабатывал небольшой веб-проект, который отображает время и использует 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) позиция цикла находится сверху и вращается против часовой стрелки, начиная с.

черный -> фиолетовый -> оранжевый -> синий -> оранжевый -> фиолетовый -> черный

Первоначально я начал с изменения цвета, нормализуя минуты после часа, в результате цвет неба переходил между черным и фиолетовым каждый час, а после 20:00 фон продолжал бы меняться до фиолетового. хотя полночь черная. это заставляет меня задаться вопросом, хорош ли лог c для определения времени.

  1. , есть ли лучший способ проверить, находится ли он в настоящее время между двумя часами?
  2. как узнать количество минут до следующего сегмента (цвет неба)?

Ответы [ 2 ]

2 голосов
/ 13 февраля 2020

Вы также можете использовать функцию 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)
}
2 голосов
/ 13 февраля 2020

Чтобы заставить холст циклически проходить через черный -> фиолетовый -> оранжевый -> синий -> оранжевый -> фиолетовый -> черный, случаи if else могут быть упрощены. Мы также можем упростить чтение кода, создав цветовые константы, которые являются индексами в паллете.

Чтобы получить количество минут до следующего изменения цвета, мы можем просто вычесть текущий час из следующего Граница часа и умножить на 60. 

function setup() {
  createCanvas(1120, 630);
  frameRate(60);
}
var mn = 0;
function draw() {
if (mn > 1439)
  mn = 0;
  mn++;
  setColours();
}

function setColours(){
  var black = 0;
  var orange = 1;
  var purple = 2;
  var blue = 3;
  var pallete = [color(0),color(232, 131, 72),color(88,52,133),color(45, 221, 227)];
 // let hr = mn/60.0; // will also work instead of map
  let hr = map(mn,0,1440,0,23);
  if (hr < 4){
    background(pallete[black]);
    console.log("Minutes until color change " + ((4 - hr)*60)); 
  } else if (hr < 6){
    background(pallete[purple]);
    console.log("Minutes until color change " + ((6 - hr)*60)); 
  } else if (hr < 8){
    background(pallete[orange]);
    console.log("Minutes until color change " + ((8 - hr)*60)); 
  } else if (hr < 16){
    background(pallete[blue]);
    console.log("Minutes until color change " + ((16 - hr)*60)); 
  } else if (hr < 18){
    background(pallete[orange]);
    console.log("Minutes until color change " + ((18 - hr)*60)); 
  } else if (hr < 20){
    background(pallete[purple]);
    console.log("Minutes until color change " + ((20 - hr)*60)); 
  } else {
     background(pallete[black]);
     // here we subtract our hour from 28 to account for the 4 hours at the beginning
     console.log("Minutes until color change " + ((28- hr)*60)); 
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
...