Object changing colour over time

Processing Coding Questions
1

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. :slight_smile:

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;
  
}
2

Hi! I would break the task to two phases. First try to make the color change from gray to white (in grayscale). This would be easier than changing the speed and direction. You would need a variable for the grayscale color (int or float) and increment it if mousePressed == false.

Then if that is done, map the value to green-yellow-… For this second task, you can either hardcode RGB values or make it generic by lerping (reference: Linear color lerp with three colors)