mouseClicked on certain rects

Programming Questions

oxxiio

mouseClicked on certain rects

in Programming Questions • 1 year ago

How would I go about making mouseClicked only work when clicking on certain rects/objects. I have one square right now that works when the mouse gets clicked, but later on I would like to add more squares and have each one only move when the mouse gets clicked within that square. I'm thinking functions, but not sure how to implement this. If there is a cruder way to accomplish this without functions, that's ok too.

float x, x1, x2, x3, x4, x5, x6 = 40;

float y = 40;

int bxW = 60;

int bxH = 60;

boolean rectClicked = false;

float moveX = 2;

///////////////////////////////

void setup() {

size(700, 600);

smooth();

noStroke();

x = 40;

}

///////////////////////////////////////

void draw() {

background(255);

// draw the ball

fill(#7178E5);

noStroke();

rect(x, y, bxW, bxH);

if (rectClicked) {

x += moveX;

}

if (x>= 400) {

x = 400;

moveX = - moveX;

}

if (x<=40) {

x = 40;

moveX = - moveX;

}

//empty rect

stroke(#3C3D40);

fill(255, 15);

rect(40, 40, 60, 60);

}

///////////objects functions /////////

void mouseClicked() {

rectClicked = true;

}

Replies(6)

tfguy44

Re: mouseClicked on certain rects

1 year ago

Here's how I'd have several rectangles that can detect when they are clicked:

class Rec {
int x,y,w,h;
color c;
Rec(int _x, int _y, int _w, int _h){
x = _x;
y = _y;
w = _w;
h = _h;
c = rcolor();
}
void draw(){
fill(c);
rect(x,y,w,h);
}
void clickCheck( int _x, int _y ){
if( _x > x && _y > y && _x < x+w && _y < y+h ){
c = rcolor();
}
}
}
ArrayList recs;
void setup(){
size(200,200);
recs = new ArrayList();
recs.add( new Rec(20, 20, 20, 20) );
recs.add( new Rec(50, 20, 20, 20) );
recs.add( new Rec(20, 50, 20, 20) );
recs.add( new Rec(50, 50, 20, 20) );
recs.add( new Rec(80, 20, 50, 20) );
recs.add( new Rec(20, 80, 20, 50) );
recs.add( new Rec(80, 50, 50, 20) );
recs.add( new Rec(50, 80, 20, 50) );
recs.add( new Rec(80, 80, 50, 50) );
}
void draw(){
background(0);
for (int i = recs.size()-1; i >= 0; i--) {
Rec aRec = (Rec) recs.get(i);
aRec.draw();
}
}
void mouseClicked(){
for (int i = recs.size()-1; i >= 0; i--) {
Rec aRec = (Rec) recs.get(i);
aRec.clickCheck(mouseX, mouseY);
}
}
color rcolor(){
return color( random(255), random(255), random(255) );
}

oxxiio

Re: mouseClicked on certain rects

1 year ago

This might be way too advanced for me to implement this code at the moment, but I'll give it try. :)

andrewgie..

Re: mouseClicked on certain rects

1 year ago

When I want to detect whether the mouse is pressed inside a rect....I use if statements to check if the mouse is below the top edge....above the bottom edge....to the right of the left edge......to the left of the right edge and if the mouse is pressed. I would use something like this.

rectMode (CENTER);
rect (50, 50, 20, 20);
if (mousePressed && (mouseY > 30) && (mouseY < 70) && (mouseX > 30) && (mouseX < 70)) {
// this code is run only when the mouse is pressed inside the rectangle.
// the code in this if() statement needs to be modified if the rectangle in in a different place
// or a different size accordingly.
}

- Andrew G.

oxxiio

Re: mouseClicked on certain rects

1 year ago

Yes, this helped me solve my problem! I was already writing some similar code, but this cleared it up. Thanks! Here is the code that works.

float x, x1, x2, x3, x4, x5, x6 = 40;
float y = 40;
int bxW = 60;
int bxH = 60;
boolean rectClicked = false;
float moveX = 2;
///////////////////////////////
void setup() {
size(700, 600);
smooth();
noStroke();
x = 40;
}
///////////////////////////////////////
void draw() {
background(255);
// draw the ball
fill(#7178E5);
noStroke();
rect(x, y, bxW, bxH);
if (rectClicked) {
x += moveX;
if (x>= 400) {
x = 400;
moveX = - moveX;
}
if (x<=40) {
x = 40;
moveX = - moveX;
}
}
//empty rect
stroke(#3C3D40);
fill(255, 15);
rect(40, 40, 60, 60);
}
////////second square//////////////////
///////////objects functions /////////
void mouseClicked() {
if ( (mouseX>42) && (mouseX<=99) && (mouseY >44) && (mouseY<99)) {
rectClicked = true;
}
}

v.k.

Re: mouseClicked on certain rects

1 year ago

I liked the square leaving it's frame. Nice :-)

I would encourage you to try to understand the code suggested by tfguy44. It's not much different of what you are doing, but gives you a lot more. Classes (also referred as Objects) are a powerful tool and not that hard to understand and use.

This issue you are asking is particularly related to object oriented programming.

I have no programming background, and started with Processing. First time i crossed with one code like this i got lost. I still getting lost most of the time... But the truth is, when you get it, it is easier than the other way...

So I made some comments in tfguy44' s code to help you out. As I sad, i got no formal education in that, so i may be using some wrong terms, and concepts. This is pretty much the way I understand the code. Hope it helps. And please everyone correct me if i'm wrong.

/// this is the class (also known as object) declaration
/// could be any name you want, tfguy44 choose Rec
/// a easy way of thinking about this is like it was a personal kind of variable you
/// are going to create. It is more than that, it has methods... functions
/// It is an object with it's own characteristics
class Rec {
/// those are class variables, they can be directly acessed only from inside the class
/// each "Rec" you create (later) can hold differents values of each var
int x,y,w,h;
color c;
/// here the Constructor. It will initialize each instance of the class when called later
/// this Constructor just passes values from outside to the class vars
/// color is get from a function that randomizes it and not from a passed argument.
Rec(int _x, int _y, int _w, int _h){
x = _x;
y = _y;
w = _w;
h = _h;
c = rcolor();
}
/// this draw is a class function, nothing to do with the "main" draw u are used to...
/// it obviously draw each rect created when called.
void draw(){
fill(c);
rect(x,y,w,h);
}
/// here the same method suggested by andrewgie.. that u understood.
/// but as it is in the class it will be much easyier to re-use
/// compare both thinking you pass the mouseX/ mouseY as arguments called from void mouseClicked
/// here the andrewgie's code;
/// if (mousePressed && (mouseY > 30) && (mouseY < 70) && (mouseX > 30) && (mouseX < 70)) {
void clickCheck( int _x, int _y ){
if( _x > x && _y > y && _x < x+w && _y < y+h ){
c = rcolor();/// this could be your square leaving the frame code...
}
}
}
/// that's it. the class is done, let's see how to use it...
/// He is using an array list, could be an array also. It will hold a lot of Recs
/// ArrayList i think is great, but a bit more confusing, maybe u prefer using an array to begin
/// i'm not changing the code thoug
ArrayList recs;
void setup(){
size(200,200);
recs = new ArrayList();
/// creating the squares/objects and populating the array. The "new" creates the instance of the class
/// he made 9 Recs - if u want to make let's say 1000 usually you woul use a for() loop
/// so now u have 9 of your Rec, each one with independent variables.
recs.add( new Rec(20, 20, 20, 20) );
recs.add( new Rec(50, 20, 20, 20) );
recs.add( new Rec(20, 50, 20, 20) );
recs.add( new Rec(50, 50, 20, 20) );
recs.add( new Rec(80, 20, 50, 20) );
recs.add( new Rec(20, 80, 20, 50) );
recs.add( new Rec(80, 50, 50, 20) );
recs.add( new Rec(50, 80, 20, 50) );
recs.add( new Rec(80, 80, 50, 50) );
}
/// This is the usual "main" draw()
void draw(){
background(0);
/// calling the Rec class method draw() for each object
/// this weird (Rec) is casting. but would not be necessary in a array
/// in a array u could write: recs[i].draw()
for (int i = recs.size()-1; i >= 0; i--) {
Rec aRec = (Rec) recs.get(i);
aRec.draw();
}
}
void mouseClicked(){
/// again traverse the array checking for each Rec clickInside... same as recs[i].clickCheck(mx,my)
/// passing the mouseX and mouseY for the class method.
for (int i = recs.size()-1; i >= 0; i--) {
Rec aRec = (Rec) recs.get(i);
aRec.clickCheck(mouseX, mouseY);
}
}
/// lets luck decide color... called by clickCheck() class method
color rcolor(){
return color( random(255), random(255), random(255) );
}

oxxiio

Re: mouseClicked on certain rects

1 year ago

I really appreciate the explanation! OOP is still very new to me. The for loop is really confusing, but I know I'm going to have to implement OOP pretty soon as this program is my first attempt at a complete "Processing" application with the Minim Library. So wish me luck! :)

Top Reply