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

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).

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

1 Like

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.

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.

1 Like

``````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!

1 Like
``````i still didnâ€™t know how to store the old rectagleâ€™s data
``````

Consider using an array or ArrayList with Rect class.

1 Like

Hello @celestia,

I commented some of your code from first example posted:

``````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

`:)`

1 Like

Hello!

Idea

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

so in mousePressed:

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

before setup():

``````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;`

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

Warm regards,

Chrisir

2 Likes

Hello @celestia,

Explore the Mouse references:
https://processing.org/reference

https://processing.org/tutorials/interactivity

This is not in the tutorial:
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.

Consider this to achieve the same:
https://processing.org/reference/background_.html

`:)`

1 Like