mapping colors to amplitude

user_17584236 0
Viewed 87

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

p5.js mapping javascript
1 Answers

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);
    }
user_19590540
Related