Change tint/color of image on click

Processing Coding Questions
1

Hi! I am new to processing and I was wondering if it is possible to change the tint of an image on click?

1 Like
2

Yeah. Have a boolean variable that tracks if the tinting should happen or not.

Initially it has a false value and so the tinting (which is done conditionally ) is not done.

When a click is detected, set the boolean to true.

Then the condition is true, and the tinting is done.

// Not a running example - look at the code's structure!
boolean do_tint;

void setup(){
  size();
  do_tint = false;
}

void draw(){
  image();
  if( do_tint ){
    tint();
  }
}

void mousePressed(){
  do_tint = true;
}
1 Like
3

Thank you so much!

What statement can I add so that when the user click on the image again, the the image goes back to its original state (no tint)?

4

Good question! You can add addition logic to the mousePressed() function, to do different things based on if there is currently tint or not. This means adding a conditional statement:

void mousePressed(){
  if( do_tint ) { // If there is tint now,
    do_tint = false; // Stop doing the tinting.
  } else { // Otherwise, there is was no tint,
    do_tint = true; // so start doing the tinting.
  }
}

This basically causes the tinting to toggle from true to false or false to true each time the mouse is clicked.

1 Like
5

Ok, so I’m doing this for multiple images. A group of images stay not tinted and another set is supposed to change from not tinted to tinted.

Do I create two boolean variables for the two? Because they keep getting tinted if I use the if else statement.

6

Does each image need to have it’s own variable tracking it it is tinted or not?

Or are there groups of images that all tint/untint together?

In any case, you will need one boolean for each set of things that tint together (even if that set is a single image).