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

Processing Coding Questions
1

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

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
2

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.

1 Like
3

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

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! :smiling_face_with_three_hearts:

1 Like
4 
i still didn’t know how to store the old rectagle’s data

Consider using an array or ArrayList with Rect class.

1 Like
5

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
6

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;

and additionally:

void mouseReleased() {
  down=false;
}

Warm regards,

Chrisir

2 Likes
7

Hello @celestia,

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

Read the tutorial:
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.

image
image602Ă—639 99 KB

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

:)

1 Like