将颜色映射到振幅

Question

我正在研究音乐可视化工具，我希望频谱上的颜色根据振幅逐渐从绿色变为红色。以下是给出的说明：

更改每个条的颜色，使其根据振幅值逐渐从绿色变为红色 [2 分]。例如

振幅值为 0，颜色值为 R:0、G:255 和 B:0。 127个色值的振幅值分别是R:127、G:127和B:0 255个色值的振幅值分别是R:255、G:0和B:0

这是我的代码：

        var spectrum = fourier.analyze();
    noStroke();
    
    for (var i = 0; i< spectrum.length; i++){
        var y = map(i, 0, spectrum.length, 0, height);
        var w = map(spectrum[i], 0, 255, 0, width);
        if(spectrum[i] > 200)
        {
            fill(255,0,0);
        }
        if(spectrum[i] > 100 && spectrum[i] < 200)
        {
            fill(127,127,0);
        }

        if(spectrum[i] > 0 && spectrum[i] < 100)
        {
            fill(0,255,0);
        }
        rect(0,y,w,height/spectrum.length);
    }

颜色根据幅度变化，但我希望它们逐渐变化。感谢您的帮助

Answer 1

你所拥有的是函数中的特定点，但你已经为整个范围定义了这些点。你应该做的是编写一个函数，以平滑的方式输出这些值。

让我们看看您的第一个数字，我假设它是 R（红色）值。 if(spectrum[i] > 200) red = 255; if(spectrum[i] > 100 && spectrum[i] < 200) red = 127; else red = 0; 如果您不输出单个值，而是创建一个将振幅直接映射到红色值的函数，会怎样？首先，让它变得非常简单：

function getRed(amplitude) return amplitude;

假设 amplitude 从 0 开始并在 255 处达到最大值，这个函数已经让你接近你想要的 R 变量。如果该假设不安全，那么您可以轻松地重新调整函数以最小化为 0，最大化为 255。

然后我们想对下一个值 Green 做完全相反的操作。所以让我们假设我们有 red 值：绿色可以像这样简单：

function getGreen(red) return 255 - red;

那么，当红色为0时，绿色为255。当红色为255时，绿色为0。它们在中间大约相等。如有必要，您可以再次添加 min/max 逻辑。

所以你的函数看起来像这样：

for (var i = 0; i< spectrum.length; i++){
        var y = map(i, 0, spectrum.length, 0, height);
        var w = map(spectrum[i], 0, 255, 0, width);
        const amp = spectrum[i];
        const red = getRed(amp);
        const green = getGreen(red);

        fill(red, green, 0);
        rect(0,y,w,height/spectrum.length);
    }

将颜色映射到振幅

mapping colors to amplitude

javascript

mapping

p5.js