根據 24 小時計時器將 RGB 從白色設置為黑色

Question

我有一個獨特的問題，我有點不知道如何去做。

我有一個 0-24 的計時器，代表一天中的小時數，包括十進制值。 我想根據這個數字將 RGB 值從 (0,0,0) 黑色轉換為 (255,255,255) 白色。 全黑應代表正午，全白應代表午夜和介於兩者之間的漸變值。

因此，如果計時器是 5.54，我會悶悶不樂地在中間的某個地方變成灰色。 我不確定這是否容易。 使用 c# 是首選，但應該可以在語言之間轉移。

編輯：計時器重置為 0 並在無限循環中再次啟動

所以它需要像這樣工作，頂部為白色，底部為黑色，0 - 24 為 X 軸

謝謝

Answer 1

好的，所以您必須意識到的第一件事是，通過選擇灰度漸變，您實際上已經讓問題變得非常簡單。 這是因為您只需計算出 1 個值 (0 - 255)，並且您可以對 R、G 和 B 使用相同的值。

至於如何計算價值——這也很簡單！ 你的梯度從中午到午夜，所以你只需要計算出你在這 12 小時內的第 256 個。

在這 12 小時內有 43200 秒，因此您只需將當前時間表示的正午之后的秒數除以 43200，然后乘以 256 - 然后您就可以得到 R、G 和 B 值。

在偽代碼中，它看起來像：

var secondsAfterMidday = GetSecondsAfterMidday();
var colorValue = secondsAfterMidday / 43200 * 255;
return color(red: colorValue, green: colorValue, blue: colorValue);

您可能想要使用的幾個類：

• 約會時間
• 時間跨度

Answer 2

我已經更新了答案（也有 0 和 24 小時的情況），你可以這樣做：

        double hour = 0; // any value between 0 and 24
        int rgb = 0; 
        // prevent DivideByZero for 0 and 24 hours
        if(hour > 0 && hour < 24)
        {
            double rgbDivider = hour <= 12 ? 12 / hour : 12/(24 - hour);
            rgb = (int)Math.Round(255 / rgbDivider, MidpointRounding.ToEven); // Round result number into int
        }

Answer 3

根據當天的當前秒數，這將返回 0 到 255 之間的值。

WolframAlpha 圖

static int MID_DAY_IN_SECONDS = 43200; // 12 hours (12*60*60)

public int GetLinearColor(int timeInSeconds)
{
    // Make sure the input loops around the 24 hour clock.
    timeInSeconds %= MID_DAY_IN_SECONDS*2;
    
    /*
        Seconds after 12:00 count in reverse to get:

        43200                     /\
                             /         \
                        /                   \
                   /                             \
            0 /                                       \
            
              00:00     06:00     12:00     18:00     00:00
    */
    
    if (timeInSeconds >= MID_DAY_IN_SECONDS)
    {
        timeInSeconds = MID_DAY_IN_SECONDS - (timeInSeconds-MID_DAY_IN_SECONDS);        
    }
    
    // Scale timeInSeconds from 0 to 1
    double scale = timeInSeconds / (double)MID_DAY_IN_SECONDS;
    
    // Scale to color
    return (int)(255 * scale);
}

我還添加了第二個變體，它彎曲（不太像圖像中的鍾形，但很接近）：

WolframAlpha 圖

public int GetCurvedColor(int timeInSeconds)
{
    // Make sure the input loops around the 24 hour clock.
    timeInSeconds %= MID_DAY_IN_SECONDS*2;
    
    /*
        Seconds after 12:00 count in reverse to get:

        43200                     /\
                             /         \
                        /                   \
                   /                             \
            0 /                                       \
            
              00:00     06:00     12:00     18:00     00:00
    */
    
    if (timeInSeconds >= MID_DAY_IN_SECONDS)
    {
        timeInSeconds = MID_DAY_IN_SECONDS - (timeInSeconds-MID_DAY_IN_SECONDS);        
    }
    
    // Scale timeInSeconds from 0 to 1
    double scale = timeInSeconds / (double)MID_DAY_IN_SECONDS;
    
    // Convert scale to radians
    double radians = scale * Math.PI; // Use only the first half
    
    
    // Use first half of cosine from 1 to -1, flip it up side down and scale it from 0 to 1
    /*
        Cosine:
        
         1 --_                 _--
               \              /
                \            /
         0 -  -  |  -  -  - |-  - 
                  \        /
                   \_    _/
        -1          ----
        
        
        Flipped first half of cosine, scaled from 0 to 1
        
         1        _---
                /       
              _/          
         0 ---  -  -  -
    */
            
    double cos = Math.Cos(radians);
    
    double curvedScale = 1.0 - ((cos + 1.0) / 2.0);

    // Scale to color
    return (int)(255 * curvedScale);
}

[編輯]

還找到了一種獲得鍾形曲線的方法：

WolframAlpha 圖

public int GetBellColor(int timeInSeconds)
{
    // Make sure the input loops around the 24 hour clock.
    timeInSeconds %= MID_DAY_IN_SECONDS*2;

    /*
        Seconds after 12:00 count in reverse to get:

        43200                     /\
                             /         \
                        /                   \
                   /                             \
            0 /                                       \

              00:00     06:00     12:00     18:00     00:00
    */

    if (timeInSeconds >= MID_DAY_IN_SECONDS)
    {
        timeInSeconds = MID_DAY_IN_SECONDS - (timeInSeconds-MID_DAY_IN_SECONDS);        
    }

    // Scale timeInSeconds from 0 to 1
    double scale = timeInSeconds / (double)MID_DAY_IN_SECONDS;

    /*
        Hubbert curve (1/(2+2*cosh(x))):
        
        0.250           /-\
                        | |
                        | |
        0.125          /   \
                      |     |
                    _/       \_
        0.000 ___---           ---___
             -8   -4     0     4     8

    */

    // Use left side (-8 to 0) of Hubbert curve, scale up (from 0 to 1 instead of 0 to 0.25)
    double curvedScale =  (1.0/(2.0+2.0*Math.Cosh((scale*8)-8)))*4.0;

    // Scale to color
    return (int)(255 * curvedScale);
}