# Change tint/color of image on click

**URL:** <https://discourse.processing.org/t/change-tint-color-of-image-on-click/4517>\
**Category:** Coding Questions\
**Created:** [October 16, 2018, 4:28am UTC](https://discourse.processing.org/t/change-tint-color-of-image-on-click/4517 "2018-10-16T04:28:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dennisreyes](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@dennisreyes](https://discourse.processing.org/u/dennisreyes)\
**Post date:** [October 16, 2018, 4:28am UTC](https://discourse.processing.org/t/change-tint-color-of-image-on-click/4517/1 "2018-10-16T04:28:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 16, 2018, 4:40pm UTC](https://discourse.processing.org/t/change-tint-color-of-image-on-click/4517/2 "2018-10-16T16:40:25Z")

</div>

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.

```auto
// 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;
}

```

---

<div class="post-metadata">

**Author:** ![dennisreyes](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@dennisreyes](https://discourse.processing.org/u/dennisreyes)\
**Post date:** [October 16, 2018, 10:00pm UTC](https://discourse.processing.org/t/change-tint-color-of-image-on-click/4517/3 "2018-10-16T22:00:31Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 16, 2018, 10:17pm UTC](https://discourse.processing.org/t/change-tint-color-of-image-on-click/4517/4 "2018-10-16T22:17:22Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![dennisreyes](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@dennisreyes](https://discourse.processing.org/u/dennisreyes)\
**Post date:** [October 16, 2018, 10:27pm UTC](https://discourse.processing.org/t/change-tint-color-of-image-on-click/4517/5 "2018-10-16T22:27:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 16, 2018, 10:31pm UTC](https://discourse.processing.org/t/change-tint-color-of-image-on-click/4517/6 "2018-10-16T22:31:27Z")

</div>

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).