Make rect when clicked

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);
}

Hello,

Please format your code:
https://discourse.processing.org/faq#format-your-code

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

Read the tutorial:

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!

:)

HEy scammer just wanna tell you ive told fish boy

Bout what, that you called him fish boy?