# Change color with click or touch

**URL:** <https://discourse.processing.org/t/change-color-with-click-or-touch/31295>\
**Category:** Beginners\
**Created:** [July 17, 2021, 12:11pm UTC](https://discourse.processing.org/t/change-color-with-click-or-touch/31295 "2021-07-17T12:11:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lion](https://avatars.discourse-cdn.com/v4/letter/l/57b2e6/32.png) [@lion](https://discourse.processing.org/u/lion)\
**Post date:** [July 17, 2021, 12:12pm UTC](https://discourse.processing.org/t/change-color-with-click-or-touch/31295/1 "2021-07-17T12:12:00Z")

</div>

Good day, everyone! A beginner here.

I’m trying to change the colors of a few squares whenever the mouse click upon them but can’t figure out a working solution. Here is what I’ve done so far:

I created four values and assigned those to the fills inside void draw().

```auto
int color1 = 0;
int color2 = 0;
int color3 = 0;
int color4 = 0;

void setup() {
  size(400,400);
  background(255);
}

void draw(){
  fill(color1);
  stroke(0);
  rect(20,20,40,40);
  fill(color2);
  rect(60,20,40,40);
  fill(color3);
  rect(100,20,40,40);
  fill(color4);
  rect(140,20,40,40);
}

```

After this, I writed a void mousePressed() with if statements that checks for the mouse position. I tried the switch/case but with no result. The if statement works only for the fist square; if I try to add more statements it stops working and most importantly it only works if the mouse is placed upon a tiny pixel.

```auto
void mousePressed() {
  if(color1 == 0 && pmouseY == 20){
    color1 = 255;
  } else {
    color1 = 0;
  }
}

```

My intentions are:

- Having a bigger number of squares and other shapes that can change color with mouse click or touch
- Change the size of the mouse selection if possible

Thanks in advance for any help!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 17, 2021, 12:35pm UTC](https://discourse.processing.org/t/change-color-with-click-or-touch/31295/2 "2021-07-17T12:35:51Z")

</div>

Hello,

There are resources (tutorials, references, examples, etc.) here:  
_[https://processing.org/](https://processing.org/)_

I always look there first. `:)`

There is a tutorial on _Interactivity_.  
Take a look at the _GUI_ section in examples and the _Input_ references.

`:)`

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [July 17, 2021, 1:34pm UTC](https://discourse.processing.org/t/change-color-with-click-or-touch/31295/3 "2021-07-17T13:34:53Z")

</div>

Hi!

First I’ll address the bigger selection.  
Currently you are using `pmouseX=20`.

First of all, using pmouseX is not reccomended. Use mouseX instead. pmouseX is the previous X position of mouse (in previous frame), while mouseX reffers to current frame.

Secondly you need to define the area where mouse can click on the square.  
Look at this image for help

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/247b48ddd81120e2d431a16d4e3283fd09216d32.png)  
Not much of an artist but it should do.

1. Altho integers CAN store color values, it is hard to memorise the numbers. That’s why there is a color varriable. You can use #RRGGBB to tell the color or `color clr = new color(RRR,GGG,BBB)`

---

<div class="post-metadata">

**Author:** ![lion](https://avatars.discourse-cdn.com/v4/letter/l/57b2e6/32.png) [@lion](https://discourse.processing.org/u/lion)\
**Post date:** [July 19, 2021, 2:38pm UTC](https://discourse.processing.org/t/change-color-with-click-or-touch/31295/4 "2021-07-19T14:38:50Z")

</div>

Thank you, both!

I was able to make a workable sketch:

```auto
int color1 = 255;
int color2 = 255;
int color3 = 255;
int color4 = 255;

void setup() {
  size(400,400);
  background(255);
}

void draw(){
  println(mouseX + " : " + mouseY);
  fill(color1);
  stroke(0);
  rect(20,20,40,40);
  fill(color2);
  rect(60,20,40,40);
  fill(color3);
  rect(100,20,40,40);
  fill(color4);
  rect(140,20,40,40);
}

void mousePressed() {
  if(color1 == 255 && mouseX>20 && mouseY>20 && mouseX<20+40 && mouseY<20+40) {
    color1 = color(255,0,0);
  } else {
    color1 = 255;
   }
  if(color2 == 255 && mouseX>60 && mouseY>20 && mouseX<20+80 && mouseY<20+40) {
    color2 = color(0,0,255);
  } else {
    color2 = 255;
  }
  if(color3 == 255 && mouseX>100 && mouseY>20 && mouseX<20+120 && mouseY<20+40) {
    color3 = color(0,255,255);
  } else {
    color3 = 255;
  }
  if(color4 == 255 && mouseX>140 && mouseY>20 && mouseX<20+160 && mouseY<20+40) {
    color4 = color(0,255,0);
  } else {
    color4 = 255;
  }
}

```

Now I would like to have more than one color active, i.e. it should remember if something is on or off. Can I keep posting here since it is related or should I open another topic if I can’t find a solution on my own?

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [July 19, 2021, 4:34pm UTC](https://discourse.processing.org/t/change-color-with-click-or-touch/31295/5 "2021-07-19T16:34:53Z")

</div>

So you want to create on/off buttons of sort?

If you want to do that, than on every click execute

```auto
boolean active = true;

//on click:
active = !active;

//while displaying the button
if(active) {
  fill(255,0,0);
} else {
  fill(0,0,255);
}

```

---

<div class="post-metadata">

**Author:** ![syngola](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@syngola](https://discourse.processing.org/u/syngola)\
**Post date:** [July 23, 2021, 5:17pm UTC](https://discourse.processing.org/t/change-color-with-click-or-touch/31295/6 "2021-07-23T17:17:48Z")

</div>

Hi there,

i would recommend to write a class for this type of problem. Otherwise you’ll quickly run into if ladders, which can be quite confusing.

I whipped up an example. It might not be very elegant, but it does what you want to do. Feel free to change it however you want.

```auto
class ColorRect {
 
  int c1x, c1y;
  int c2x, c2y;
  color col;
  boolean active;
  
  ColorRect(int x1, int y1, int x2, int y2, color c) {
    this.c1x = x1;
    this.c1y = y1;
    this.c2x = x2;
    this.c2y = y2;
    this.col = c;
    this.active = false;
  }
  
  boolean isHit(int x, int y) {
    if(c1x <= x && x <= c2x && c1y <= y && y <= c2y) {
      println("something hit me!");
      active = !active;
      return true;
    }
    else {
      return false;
    }
  }
  
  void display() {
    if(active) {
      fill(200,0,0);
    }
    else {
      fill(col);
    }
    rect(c1x, c1y, c2x-c1x, c2y-c1y);
  }
  
}

ArrayList<ColorRect> rects = new ArrayList<ColorRect>();

void setup() {
  size(800,800);
  
  ColorRect r1 = new ColorRect(10,10,150,150,color(0,200,0));
  ColorRect r2 = new ColorRect(160,160,210,210,color(0,0,200));
  
  rects.add(r2);
  rects.add(r1);
  
}

void draw() {
  for( ColorRect r : rects) {
    r.display();
  }
}

void mouseClicked() {
  for( ColorRect r : rects) {
    r.isHit(mouseX, mouseY);
  }
}

```

Regards, Peter

---

<div class="post-metadata">

**Author:** ![lion](https://avatars.discourse-cdn.com/v4/letter/l/57b2e6/32.png) [@lion](https://discourse.processing.org/u/lion)\
**Post date:** [July 25, 2021, 11:31am UTC](https://discourse.processing.org/t/change-color-with-click-or-touch/31295/7 "2021-07-25T11:31:21Z")

</div>

Hi Peter, thanks for joining in.  
I’m indeed trying to learn classes. This part from your code is interesting:

```auto
void setup() {
  size(800,800);
  
  ColorRect r1 = new ColorRect(10,10,150,150,color(0,200,0));
  ColorRect r2 = new ColorRect(160,160,210,210,color(0,0,200));
  
  rects.add(r2);
  rects.add(r1);
  
}

```

Can you point out some reference material so I can get a better understanding of the logic?

As of now, I’m trying to implement the boolean suggested by @CodeMasterX on the previous code without success, but I will update about it on the following days.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 25, 2021, 12:11pm UTC](https://discourse.processing.org/t/change-color-with-click-or-touch/31295/8 "2021-07-25T12:11:10Z")

</div>

> [@lion](#):
>
> Can you point out some reference material so I can get a better understanding of the logic?

- [Objects / Processing.org](https://processing.org/tutorials/objects/)
- [class / Reference / Processing.org](https://processing.org/reference/class.html)
- [Object / Reference / Processing.org](https://processing.org/reference/Object.html)
- [https://www.youtube.com/c/TheCodingTrain/playlists](https://www.youtube.com/c/TheCodingTrain/playlists)  
This is a good one:  
[https://youtu.be/YcbcfkLzgvs](https://youtu.be/YcbcfkLzgvs)

`:)`