# How to make 1 rectangle on mouse click and not make a million, but still change colour depending on mouse position

**URL:** <https://discourse.processing.org/t/how-to-make-1-rectangle-on-mouse-click-and-not-make-a-million-but-still-change-colour-depending-on-mouse-position/44107>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [March 16, 2024, 10:14am UTC](https://discourse.processing.org/t/how-to-make-1-rectangle-on-mouse-click-and-not-make-a-million-but-still-change-colour-depending-on-mouse-position/44107 "2024-03-16T10:14:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![celestia](https://avatars.discourse-cdn.com/v4/letter/c/85f322/32.png) [@celestia](https://discourse.processing.org/u/celestia)\
**Post date:** [March 16, 2024, 10:14am UTC](https://discourse.processing.org/t/how-to-make-1-rectangle-on-mouse-click-and-not-make-a-million-but-still-change-colour-depending-on-mouse-position/44107/1 "2024-03-16T10:14:41Z")

</div>

Help needed. We need to make an algorithm where:

- if you click somewhere with **left mouse button** , a rectangle appears (so if you click again with **left mouse button** , another one will appear and the old one will remain)
- if you drag your mouse, that same rectangle that appeared with left mouse button click will change colour depending on where your mouse is (but not the other rectangles, only the one you just spawned with left click)
- if you click with your **right mouse button** , everything dissapears (i just let another bigger rectangle spawn the same colour as the background)

The problem is, whenever i drag with my mouse, yes the colour of the rectangle does change, but it just wont stop making rectangles and we have to make only 1 rectangle at the position where you clicked your mouse. Can someone help??? (I am still a beginner, so no complex code pls).

Here is a photo of the example assignment: as you can see, the rectangles are different colours. When you click somewhere, a rectangle will appear. If you drag, the rectangle will turn for example pink. But if you click again **somewhere else** , another rectangle will appear in the same colour as the last one (except if you drag your mouse, then the colour will change).

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/7/b7be4cc1189bf6dcf3a230616c11358051e6d801.png)

Here is my extremely nooby code, someone pls help me fix it \<3  
\</\>  
void setup()  
{  
size(600, 600);  
}

float r;  
float g;  
void mouseDragged()  
{  
float rood = mouseX;  
float groen = mouseY;  
float r = map(rood, 0, width, 0, 255);  
float g = map(groen, 0, height, 0, 255);  
}

void draw()  
{  
if(mousePressed == true && mouseButton == LEFT)  
{

fill(r, 0, g);  
rectMode(CENTER);  
rect(pmouseX, pmouseY, 100, 100);  
}

if(mousePressed == true && mouseButton == RIGHT)  
{  
fill(200);  
rect(200, 200,800, 800);  
}  
}  
\</\>

---

<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:** [March 16, 2024, 1:05pm UTC](https://discourse.processing.org/t/how-to-make-1-rectangle-on-mouse-click-and-not-make-a-million-but-still-change-colour-depending-on-mouse-position/44107/2 "2024-03-16T13:05:54Z")

</div>

Maybe you can understand the task so that  
when you click and hold the mouse (without releasing it first!!!) and drag  
the mouse the current rectangle gets changed.

**In General**

In general I recommend to use the function mousePressed() amd not the boolean variable of the same name (without the brackets () in the reference).

There is also a function mouseReleased and mouseMoved  
/ **mouseDragged** which you can use, if I remember correctly.

This should help already.

**Idea Two**

You could in the function mousePressed make a rectangle and  
in the function **mouseDragged** just change the  
last rectangle. You can store the old rectangle’s data and  
just redraw the same rectangle with different colors.

---

<div class="post-metadata">

**Author:** ![celestia](https://avatars.discourse-cdn.com/v4/letter/c/85f322/32.png) [@celestia](https://discourse.processing.org/u/celestia)\
**Post date:** [March 16, 2024, 1:43pm UTC](https://discourse.processing.org/t/how-to-make-1-rectangle-on-mouse-click-and-not-make-a-million-but-still-change-colour-depending-on-mouse-position/44107/3 "2024-03-16T13:43:34Z")

</div>

> [@celestia](#):
>
> float g;  
> void mouseDragged()  
> {  
> float rood = mouseX;  
> float groen = mouseY;  
> float r = map(rood, 0, width, 0, 255);  
> float g = map(groen, 0, height, 0, 255);  
> }
> 
> void draw()  
> {  
> if(mousePressed == true && mouseButton == LEFT)  
> {
> 
> fill(r, 0, g);  
> rectMode(CENTER);  
> rect(pmouseX, pmouseY, 100, 100);  
> }
> 
> if(mousePressed == true && mouseButton == RIGHT)  
> {  
> fill(200);  
> rect(200, 200,800, 800);  
> }  
> }

> [@Chrisir](#):
>
> mouseReleased

thanks kind stranger for your reply, i tried following your advice and ended up with this:

```auto
float rood, groen, r , g , b;
void setup()
{ 
  size(600, 600);
}

void draw()
{
} 

void mouseDragged()
{ 
  rood = mouseX; 
  groen = mouseY;
  float r = map(rood, 0, width, 0, 255); 
  float g = map(groen, 0, height, 0, 255);
  fill(r, g, 255);
} 

void mousePressed() { 
  if(mouseButton == LEFT){ 
  rect(mouseX, mouseY, 100, 100);
  } 
  
  if(mouseButton == RIGHT){
  fill(200);
  rect(-5,-5,800, 800);
  }
} 

```

it definitely works wayyyy better than the first one, but the colour of the last drawn rectangle doesn’t change when I drag my mouse. I tried following your advice but i still didn’t know how to store the old rectagle’s data? help again pls?? thank you! 🥰

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [March 16, 2024, 3:02pm UTC](https://discourse.processing.org/t/how-to-make-1-rectangle-on-mouse-click-and-not-make-a-million-but-still-change-colour-depending-on-mouse-position/44107/4 "2024-03-16T15:02:50Z")

</div>

```auto
i still didn’t know how to store the old rectagle’s data

```

Consider using an array or ArrayList with Rect class.

---

<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:** [March 16, 2024, 4:50pm UTC](https://discourse.processing.org/t/how-to-make-1-rectangle-on-mouse-click-and-not-make-a-million-but-still-change-colour-depending-on-mouse-position/44107/5 "2024-03-16T16:50:15Z")

</div>

Hello @celestia,

I commented some of your code from first example posted:

```auto
float r; // global variable
float g; // global variable

void mouseDragged()
  {
  float rood = mouseX;
  float groen = mouseY;
  float r = map(rood, 0, width, 0, 255); // local variable
  float g = map(groen, 0, height, 0, 255); // local variable
 }

```

The local variables can only be used inside the `mouseDragged()` function!

This will help you understand how to use local and global variables:

[https://funprogramming.org/50-What-are-global-and-local-variables.html](https://funprogramming.org/50-What-are-global-and-local-variables.html)

`:)`

---

<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:** [March 16, 2024, 9:02pm UTC](https://discourse.processing.org/t/how-to-make-1-rectangle-on-mouse-click-and-not-make-a-million-but-still-change-colour-depending-on-mouse-position/44107/6 "2024-03-16T21:02:31Z")

</div>

Hello!

> [@celestia](#):
>
> i still didn’t know how to store the old rectagle’s data?

**Idea**

You can store the mouseX and the mouseY in two variables (float) in `mousePressed()`

so in mousePressed:

```auto
    lastX=mouseX;
    lastY=mouseY;

```

before setup():

```auto
float lastX, lastY;

```

and in draw()  
use the 2 vars:

` rect(lastX, lastY, 100, 100);`  
(this draw every time in a different color because of drag)

* * *

**Wrong rects**

To avoid that a new rect is drawn when mouse is not down, you can make a boolean variable `down`.

So before setup():  
`boolean down=false;`

and in mousePressed(): `down=true;`

and additionally:

```auto
void mouseReleased() {
  down=false;
}

```

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:** [March 16, 2024, 10:05pm UTC](https://discourse.processing.org/t/how-to-make-1-rectangle-on-mouse-click-and-not-make-a-million-but-still-change-colour-depending-on-mouse-position/44107/7 "2024-03-16T22:05:32Z")

</div>

Hello @celestia,

Explore the _Mouse_ references:  
[https://processing.org/reference](https://processing.org/reference)

Read the tutorial:  
[https://processing.org/tutorials/interactivity](https://processing.org/tutorials/interactivity)

This is not in the tutorial:  
[https://processing.org/reference/mouseClicked\_.html](https://processing.org/reference/mouseClicked_.html)

I was able to achieve the outcomes using the the _event driven mouse functions_ and a few simple lines of code similar to your original code.

Keep it simple and then consider options once you understand the mouse functions and your programming skills progress.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/d/6df7b4013ff2715d05171de79ced0b188621580e.png)

> [@celestia](#):
>
> if you click with your **right mouse button** , everything dissapears (i just let another bigger rectangle spawn the same colour as the background)

Consider this to achieve the same:  
[https://processing.org/reference/background\_.html](https://processing.org/reference/background_.html)

`:)`