Estoy trabajando en un visualizador de música y espero que los colores del espectro cambien gradualmente de verde a rojo según la amplitud. Aquí están las instrucciones dadas:
Cambie el color de cada barra para que cambie gradualmente de verde a rojo según el valor de amplitud [2 puntos]. Por ejemplo
Un valor de amplitud de 0 los valores de color son R:0, G:255 y B:0. Un valor de amplitud de 127 valores de color son R:127, G:127 y B:0 Un valor de amplitud de 255 valores de color son R:255, G:0 y B: 0
Aquí está mi código:
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); }El color cambió según la amplitud, sin embargo, quiero que cambien gradualmente. te agradeceria tu ayuda
lo que tiene allí son puntos específicos en una función, pero ha definido esos puntos para rangos completos. Lo que debe hacer es escribir una función que genere estos valores sin problemas.
Así que echemos un vistazo a su primer número, que supongo que es el valor R (rojo). if(spectrum[i] > 200) red = 255; if(spectrum[i] > 100 && spectrum[i] < 200) red = 127; else red = 0; ¿Qué pasaría si en lugar de generar valores únicos, hiciera una función para asignar la amplitud directamente a un valor rojo? Para empezar, hazlo realmente simple:
function getRed(amplitude) return amplitude; Suponiendo que la amplitude comienza en 0 y alcanza un máximo de 255, esta función tal como está ya le daría cerca de lo que desea para la variable R. Si esa suposición no es segura, puede modificar fácilmente la función para que tenga un mínimo de 0 y un máximo de 255.
Y luego queremos hacer exactamente lo contrario para el siguiente valor, Verde. Así que imaginemos que tenemos el valor red : el verde podría ser tan simple como:
function getGreen(red) return 255 - red;Entonces, cuando Red es 0, Green es 255. Cuando Red es 255, Green es 0. Son aproximadamente iguales en el medio. Nuevamente, puede agregar lógica mínima/máxima si es necesario.
entonces tu función se ve así:
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); }