Gradually change color

blabberbytes

So I have a Heart Pulse sensor, and I want the color to gradually change after each 5 BPM Increments. So far I have it changing abruptly. How do I change it gradually, like a fade?

if (avgBPM < 55){ tint(255, 255, 255, 200); } } else if ((avgBPM > 55) && (avgBPM < 60)){ tint(215, 255, 255, 200); } } else if ((avgBPM > 60) && (avgBPM < 65)){ tint(175, 255, 255, 200); } } else if ((avgBPM > 65) && (avgBPM < 70)){ tint(135, 255, 255, 200); } else if ((avgBPM > 70) && (avgBPM < 75)){ tint(95, 255, 255, 200); } else if ((avgBPM > 75) && (avgBPM < 80)){ tint(55, 255, 0, 200); }

jeremydouglass

@blabberbytes -- use map:

• https://processing.org/reference/map_.html

Your inputs are the range of BPM. Your outputs are the range of tint values. If you want to cap those values at minimum or maximum, you can constrain() either the inputs or the outputs.

• https://processing.org/reference/constrain_.html

jeremydouglass

There are also a few tiny gotchas. 1) map works low-high 2) you need to constrain.

PImage img;
float avgBPM;
float tintVal;

void setup() {
  size(512,512);
  frameRate(1);
  img = loadImage("http" + "://processing.org/img/processing3-logo.png");
}

void draw() {
  background(0);
  avgBPM = random(40, 85); // fake BPM
  // how much tint?
  tintVal = map(avgBPM, 55, 75, 0, 200);
  // more BPM = less red, so subtract
  tintVal = 255-tintVal; 
  // map puts vals outside range (35 = -200), so constrain
  tintVal = constrain(tintVal, 55, 255); 
  // display
  tint(tintVal, 255, 255, 200);
  image(img, 0, 0, width, height);
  println(tintVal);
}

koogs

You can map from an increasing range onto a decreasing range and skip line 17

tintVal = map(avgBPM, 55, 75, 255, 55);

kfrajer

Relevant post for reference:

https://forum.processing.org/two/search?Search=fade

For instance:

https://forum.processing.org/two/discussion/23399/how-to-sincronize-the-audio-in-a-way-that-fade-out-the-image/p1

Kf

Tags: Fade, fading, transition, color-change