#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

#### In this Discussion

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); }```

Tagged:

• @blabberbytes -- use map:

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.

• 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);
}

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);
}
``````
• You can map from an increasing range onto a decreasing range and skip line 17

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