#### 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

edited July 2017

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.

• edited July 2017

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);
}
``````
• edited July 2017

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

``````tintVal = map(avgBPM, 55, 75, 255, 55);
``````
• edited August 2017