I am working on a music visualizer and I am hoping for the colors on the spectrum to gradually change from green to red based on the amplitude. Here are the instructions given:
Change the colour of each bar such that it gradually changes from green to red based on the amplitude value [2 marks]. For example
An amplitude value of 0 the colour values are R:0, G:255 and B:0. An amplitude value of 127 colour values are R:127, G:127 and B:0 An amplitude value of 255 colour values are R:255, G:0 and B: 0
Here is my code:
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);
}
The color changed based on the amplitude however I want them to gradually change. I would be thankful for your help
what you have there are specific points in a function, but you've defined those points for entire ranges. What you should do is write a function that outputs these values in a smooth fashion.
So let's look at your first number, which I assume is the R (red) value. if(spectrum[i] > 200) red = 255; if(spectrum[i] > 100 && spectrum[i] < 200) red = 127; else red = 0; What if instead of outputting single values, you made a function to map the amplitude directly to a Red value? To start with, make it really simple:
function getRed(amplitude) return amplitude;
Assuming amplitude starts at 0 and maxes out at 255, this function as it is would already give you close to what you want for the R variable. If that assumption isn't safe, then you can easily rejig the function to min out at 0 and max out at 255.
And then we want to sort of do the exact reverse for the next value, Green. So let's imagine we have the red value: green could be as simple as:
function getGreen(red) return 255 - red;
Then, when Red is 0, Green is 255. When Red is 255, Green is 0. They're approximately equal in the middle. Again you can add min/max logic if necessary.
so you have your function look like this:
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);
}