# Make rect when clicked

**URL:** <https://discourse.processing.org/t/make-rect-when-clicked/25987>\
**Category:** Coding Questions\
**Created:** [December 6, 2020, 5:36am UTC](https://discourse.processing.org/t/make-rect-when-clicked/25987 "2020-12-06T05:36:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tyler](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@Tyler](https://discourse.processing.org/u/Tyler)\
**Post date:** [December 6, 2020, 5:36am UTC](https://discourse.processing.org/t/make-rect-when-clicked/25987/1 "2020-12-06T05:36:37Z")

</div>

I’ve been making a drawing project and I wanted the boxes on the left to change the colour of the ellipse and for the boxes on the right to change the colour of the background. It doesn’t matter if the background removes everything on the drawing area, I don’t know where to put my code.  
void setup(){  
fullScreen();  
background(255);//white  
noStroke();//don’t use an outline on shapes  
drawControls();  
fill(0);//black  
frameRate(100);  
}  
void draw(){  
if(mousePressed&&mouseY\>100){  
ellipse(mouseX,mouseY,20,20);  
}  
}  
void mousePressed(){  
if(mousePressed==true&&mouseX\<50&&mouseY\<50){//t1  
fill(255,0,0);  
}else if(mouseX\<50&&mouseY\<100&&mouseY\>50){//b1  
fill(0);  
}else if(mouseX\<100&&mouseX\>50&&mouseY\<50){//t2  
fill(0,255,0);  
}else if(mouseX\<100&&mouseX\>50&&mouseY\<100&&mouseY\>50){//b2  
fill(0,0,255);  
}else if(mouseX\<150&&mouseX\>100&&mouseY\<50){//t3  
fill(255);  
}else if(mouseX\<150&&mouseX\>100&&mouseY\<100&&mouseY\>50){//b3  
fill(255,255,0);  
}else if(mouseX\<200&&mouseX\>150&&mouseY\<50){//t4  
fill(0,128,0);  
}else if(mouseX\<200&&mouseX\>150&&mouseY\<100&&mouseY\>50){//b4  
fill(255,165,0);  
}else if(mouseX\<250&&mouseX\>200&&mouseY\<50){//t5  
fill(165,42,42);  
}else if(mouseX\<250&&mouseX\>200&&mouseY\<100&&mouseY\>50){//b5  
fill(0,255,255);  
}else if(mouseX\<300&&mouseX\>250&&mouseY\<50){//t6  
fill(128,0,128);  
}else if(mouseX\<300&&mouseX\>250&&mouseY\<100&&mouseY\>50){//b6  
fill(255,100,255);  
}  
}

void drawControls(){  
fill(255,0,0);//red  
rect(0,0,50,50);//t1  
fill(0);//black  
rect(0,50,50,50);//b1  
fill(0,0,255);//blue  
rect(50,50,50,50);//b2  
fill(0,255,0);//lime  
rect(50,0,50,50);//t2  
fill(255);//white  
rect(100,0,50,50);//t3  
fill(255,255,0);//yellow  
rect(100,50,50,50);//b3  
fill(0,128,0);//green  
rect(150,0,50,50);//t4  
fill(255,165,0);//orange  
rect(150,50,50,50);//b4  
fill(165,42,42);//brown  
rect(200,0,50,50);//t5  
fill(0,255,255);//cyan  
rect(200,50,50,50);//b5  
fill(128,0,128);//purple  
rect(250,0,50,50);//t6  
fill(255,100,255);//pink  
rect(250,50,50,50);//b6  
fill(128,0,128);//purple  
rect(1870,0,50,50);//bt1  
fill(255,100,255);//pink  
rect(1870,50,50,50);//bb1  
fill(165,42,42);//brown  
rect(1820,0,50,50);//bt2  
fill(0,255,255);//cyan  
rect(1820,50,50,50);//bb2  
fill(0,128,0);//green  
rect(1770,0,50,50);//bt3  
fill(255,165,0);//orange  
rect(1770,50,50,50);//bb3  
fill(255);//white  
rect(1720,0,50,50);//bt4  
fill(255,255,0);//yellow  
rect(1720,50,50,50);//bb4  
fill(0,255,0);//lime  
rect(1670,0,50,50);//bt5  
fill(0);//black  
rect(1670,50,50,50);//bb5  
fill(255,0,0);//red  
rect(1620,0,50,50);//bt6  
fill(0,0,255);//blue  
rect(1620,50,50,50);//bb6  
textSize(50);  
fill(0);  
text(“Don’t move your mouse too fast”,520,75);  
}

---

<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:** [December 6, 2020, 10:35am UTC](https://discourse.processing.org/t/make-rect-when-clicked/25987/2 "2020-12-06T10:35:05Z")

</div>

Hello,

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

There are resources (examples, tutorials, references, etc.) available here:

> **[Processing.org](https://processing.org/)**

Read the tutorial:

> **[Processing Overview \\ Processing.org](https://processing.org/tutorials/overview/)**

You should take a look at the reference for and read the description:  
setup()  
draw()

And then decide where to place:  
drawControls()  
background() \< To update background()

It will come to you!

`:)`

---

<div class="post-metadata">

**Author:** ![0w3n928](https://avatars.discourse-cdn.com/v4/letter/0/b77776/32.png) [@0w3n928](https://discourse.processing.org/u/0w3n928)\
**Post date:** [December 7, 2020, 3:09am UTC](https://discourse.processing.org/t/make-rect-when-clicked/25987/3 "2020-12-07T03:09:12Z")

</div>

HEy scammer just wanna tell you ive told fish boy

---

<div class="post-metadata">

**Author:** ![Tyler](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@Tyler](https://discourse.processing.org/u/Tyler)\
**Post date:** [December 7, 2020, 3:21am UTC](https://discourse.processing.org/t/make-rect-when-clicked/25987/4 "2020-12-07T03:21:04Z")

</div>

Bout what, that you called him fish boy?