Hello, I’ve created some code that moves a grey arrow from left to right. What i want to do is that when the mouse is pressed, the arrow stops and the colour of the arrow increased from a green to yellow to red colour. When the mouse is pressed again, the arrow should go back to its grey colour and continue moving left to right.
I have managed to make the arrow stop when mouse is pressed but i am not sure how to change the colour so that it gradually increases. Any help would be greatly appreciated. 
float speedRect = 3;
float speedTri = 3;
float rectx = 50;
float trix1 = 25;
float trix2 = 65;
float trix3 = 105;
void setup(){
size(500, 500);
rectMode(CORNER);
}
void draw(){
noStroke();
background(100);
fill(50);
stroke(50);
rect(rectx, 350, 30, 100);
triangle(trix1, 350, trix2, 300, trix3, 350);
rectx = rectx + speedRect;
trix1 = trix1 + speedTri;
trix2 = trix2 + speedTri;
trix3 = trix3 + speedTri;
if(rectx + 28 > width || rectx < 0) {
speedRect = speedRect * -1.0;
}
if(trix1 + 25 < 0) {
speedTri = speedTri * -1.0;
}
if(trix2 > width || trix2 < 0) {
speedTri = speedTri * -1.1;
}
if(trix3 - 25 > width || trix3 < 0) {
speedTri = speedTri * -1.0;
}
if (mousePressed == true){
rectx = rectx - speedRect;
trix1 = trix1 - speedTri;
trix2 = trix2 - speedTri;
trix3 = trix3 - speedTri;
}