# Four rectangle buttons

**URL:** <https://discourse.processing.org/t/four-rectangle-buttons/31047>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [July 4, 2021, 3:35pm UTC](https://discourse.processing.org/t/four-rectangle-buttons/31047 "2021-07-04T15:35:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![PARINAZ129](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@PARINAZ129](https://discourse.processing.org/u/PARINAZ129)\
**Post date:** [July 4, 2021, 3:35pm UTC](https://discourse.processing.org/t/four-rectangle-buttons/31047/1 "2021-07-04T15:35:40Z")

</div>

Hello  
I wanted to make 4buttons that show individual color. however, when I click on each of them all buttons are turned on together. I know my problem is with the draw event but I don’t know what should I do.  
may I kindly ask you to help me?

color colA = color(125);  
color colB = color(0,255,0);  
color colC = color(0,0,255);  
color colD = color(255,0,0);  
color colE = color(120,0,200);  
float colSwitch = 0;  
float X = 740;  
float Y = 740;  
float x;  
float y;

void setup()  
{  
size(740,740);  
background(0);  
}  
void draw()  
{

rect(0,0,X/2,Y/2);

rect(width/2,0,X/2,Y/2);

rect(0,height/2,X/2,Y/2);

rect(width/2,height/2,X/2,Y/2);

//line(width/2,0,width/2,Y);  
//line(0,height/2,X,height/2);

}  
void mousePressed()  
{

if(mouseX \> width/4-X/4 && mouseX \< width/4+X/4 && mouseY \> height/4-Y/4 && mouseY\< height/4+Y/4 )  
{  
fill(colB);

}else if(mouseX \> width/2 && mouseX\<width/2+X/2 && mouseY \> height/2-Y/2 && mouseY\< Y/2)  
{  
fill(colC);  
}else if(mouseX \> width/4-X/4 && mouseX \< width/4+X/4 && mouseY \>height/2 && mouseY\< Y)  
{  
fill(colD);  
}else if(mouseX \> width/2 && mouseX \< width/2+X/2 && mouseY \> height/2 && mouseY\< Y)  
{  
fill(colE);  
}

}

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 4, 2021, 3:40pm UTC](https://discourse.processing.org/t/four-rectangle-buttons/31047/2 "2021-07-04T15:40:38Z")

</div>

Why have you posted the same question twice. Once is plenty. Also please format your code, to improve readability. CTRL + E

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [July 4, 2021, 3:44pm UTC](https://discourse.processing.org/t/four-rectangle-buttons/31047/3 "2021-07-04T15:44:59Z")

</div>

PLEASE DELETE THIS DUPLICATE POST:  
[https://discourse.processing.org/t/4rectangle-buttons/31046?u=debxyz](https://discourse.processing.org/t/4rectangle-buttons/31046)

---

<div class="post-metadata">

**Author:** ![PARINAZ129](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@PARINAZ129](https://discourse.processing.org/u/PARINAZ129)\
**Post date:** [July 4, 2021, 4:29pm UTC](https://discourse.processing.org/t/four-rectangle-buttons/31047/4 "2021-07-04T16:29:55Z")

</div>

Im sorry its because of lack of the internet in my country

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 4, 2021, 5:11pm UTC](https://discourse.processing.org/t/four-rectangle-buttons/31047/5 "2021-07-04T17:11:53Z")

</div>

Because each button has a different color you have to set **each color** before drawing **each** rectangle

> [@PARINAZ129](#):
>
> void draw()  
> {
> 
> rect(0,0,X/2,Y/2);
> 
> rect(width/2,0,X/2,Y/2);
> 
> rect(0,height/2,X/2,Y/2);
> 
> rect(width/2,height/2,X/2,Y/2);

before each of the rect() commands say fill(…color ) ;

```auto
void draw()
{
   fill(colB);
   rect(0,0,X/2,Y/2);

   fill(colC);
   rect(width/2,0,X/2,Y/2);

   fill(colD);
   rect(0,height/2,X/2,Y/2);

   fill(colE);
   rect(width/2,height/2,X/2,Y/2);

```

* * *

Then in mousePressed()

say

colE=color(random(255),random(255),random(255));

or

colB=color(random(255),random(255),random(255));

etc.

Don’t use fill() in mousePressed() since you say that in draw().

Warm regards,

Chrisir

---

<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 4, 2021, 8:38pm UTC](https://discourse.processing.org/t/four-rectangle-buttons/31047/6 "2021-07-04T20:38:03Z")

</div>

@PARINAZ129,

I have shared these two with you in other posts:

- Please format your code as a courtesy to the community:  
[FAQ - Processing Foundation](https://discourse.processing.org/faq#format-your-code)

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

Assuming you are working on a PC:

The references are available locally on your PC as well:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/594c6715c48ea78aedae06ae0aa68690bc53e38a.png)

As a beginner you should be going through the tutorials and read all the _references_ + _related references_ for each function along with related examples:

- [VariableScope \ Examples \ Processing.org](https://processing.org/examples/variablescope.html)
- setup()
- draw()
- fill()
- mousePressed()

You can also explore the examples (available locally on PC) to get some insight:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8b669cef9c2868a123acbbf23ec0de769cd55350.png)

There is a learning curve to all of this and you have to invest some time in yourself.

`:)`