Click Button to Add an Object -- OOP

Programming Questions

CivicImag..

Click Button to Add an Object -- OOP

in Programming Questions • 1 year ago

Hi,

I have written a small program that allows you to manipulate objects with the mouse and some key strokes. I want to start with a blank canvas with a button. When you click on the button a new ShapeMove is added to the canvas. I feel like this should be pretty simple, but I'm stumped.

Here's my code so far. Sorry it's so long. The button class is at the very bottom. I'm using PImages but in this example it's all rectangles.

Thanks

Copy code

int x; // shape x
int y; // shape y
int h; // shape height
int w; // shape width
int b = 0; //counts button clicks
boolean captured;
boolean isOverSomething;
ShapeMove[] shapeMove = new ShapeMove[3];
Button button;
void setup()
{
size(800, 500);
for (int i = 0; i <= 2; i++)
{
shapeMove[i] = new ShapeMove(0, 0, 200, 200);
}
button = new Button(200, 300);
}
void draw()
{
background(255);
button.display();
if (b > 0)
{
fill(120, 250,0);
shapeMove[b-1].update();
shapeMove[b-1].display();
}
}
//////////////////////////////////////////////////////////////////////////
class ShapeMove
{
int x;
int y;
int h;
int w;
int origx;
int origy;
int deltax;
int deltay;
int posXdiff;
int posYdiff;
int xdragdelta;
int ydragdelta;
boolean over;
boolean locked = false;
boolean imCaptured = false;
boolean overMe = false;
ShapeMove(int _x, int _y, int _h, int _w)
{
x = _x;
y = _y;
h = _h;
w = _w;
}
void isover()
{
if (mouseX >= x && mouseX <=x+w &&
mouseY >= y && mouseY <= y+h)
{
over = true;
isOverSomething = true;
}
else
{
over = false;
isOverSomething = false;
}
}
void overme()
{
if(isOverSomething) // over something
{
if(overMe) // over me!
{
if(!over)
{
overMe = false;
isOverSomething = false;
}
}
}
else // not over anything at the moment
{
if(over) // over me!
{
overMe = true;
isOverSomething = true;
}
}
}
void update()
{
if (over && mousePressed && !imCaptured && !captured)
{
deltax = x - mouseX;
deltay = y - mouseY;
origx = x;
origy = y;
captured = true;
imCaptured = true;
}
if (!mousePressed && imCaptured)
{
captured = false;
imCaptured = false;
}
if (imCaptured)
{
xdragdelta = x - (mouseX + posXdiff);
ydragdelta = y - (mouseY + posYdiff);
x = mouseX + deltax;
y = mouseY + deltay;
}
}
void changesize()
{
if (over && keyPressed)
{
if (key == 'b')
{
h += 2;
w += 2;
}
if (key == 's')
{
h -= 2;
w -= 2;
}
}
}
void display()
{
rect(x, y, h, w);
changesize();
}
}
/////////////////////////////////////////////////////////////////////////
class Button
{
int rectX, rectY; // Position of square button
int rectSize = 50; // Diameter of rect
color rectColor;
color rectHighlight;
boolean rectOver = false;
Button(int _rectX, int _rectY)
{
smooth();
rectColor = color(0);
rectHighlight = color(51);
rectX = _rectX;
rectY = _rectY;
}
void display()
{
update(mouseX, mouseY);
if(rectOver) {
fill(rectHighlight);
} else {
fill(rectColor);
}
stroke(255);
rect(rectX, rectY, rectSize, rectSize);
}
void update(int x, int y)
{
if ( overRect(rectX, rectY, rectSize, rectSize) )
{
rectOver = true;
} else {
rectOver = false;
}
}
void mousePressed()
{
if(rectOver)
{
b++;
}
}
boolean overRect(int x, int y, int width, int height)
{
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
}

Replies(14)

a__g

Re: Click Button to Add an Object -- OOP

1 year ago

First: You really should avoid re-using keywords defined by Processing. I'm mostly thinking about your function "void mousePressed()" inside your button class.

You could use an array for your "ShapeMove" collection, but I would strongly suggest using a list instead. This will simplify the addition or removal of ShapeMove objects!

Copy code

int x; // shape x
int y; // shape y
int h; // shape height
int w; // shape width
int b = 0; //counts button clicks
boolean captured;
boolean isOverSomething;
//ShapeMove[] shapeMove = new ShapeMove[3];
ArrayList shapeMove = new ArrayList();
Button button;
void setup()
{
size(800, 500);
button = new Button(200, 300);
}
void draw()
{
background(255);
button.display();
for( int i = 0; i < shapeMove.size(); i++ ){
((ShapeMove)shapeMove.get(i)).update();
((ShapeMove)shapeMove.get(i)).display();
}
}
void mousePressed(){
if( button.pressed(mouseX, mouseY) ){
shapeMove.add( new ShapeMove((int)random(0,width),(int)random(0,height), (int)random(10,20), (int)random(10,20)) );
}
}
//////////////////////////////////////////////////////////////////////////
class ShapeMove
{
int x;
int y;
int h;
int w;
int origx;
int origy;
int deltax;
int deltay;
int posXdiff;
int posYdiff;
int xdragdelta;
int ydragdelta;
boolean over;
boolean locked = false;
boolean imCaptured = false;
boolean overMe = false;
ShapeMove(int _x, int _y, int _h, int _w)
{
x = _x;
y = _y;
h = _h;
w = _w;
}
void isover()
{
if (mouseX >= x && mouseX <=x+w &&
mouseY >= y && mouseY <= y+h)
{
over = true;
isOverSomething = true;
}
else
{
over = false;
isOverSomething = false;
}
}
void overme()
{
if (isOverSomething) // over something
{
if (overMe) // over me!
{
if (!over)
{
overMe = false;
isOverSomething = false;
}
}
}
else // not over anything at the moment
{
if (over) // over me!
{
overMe = true;
isOverSomething = true;
}
}
}
void update()
{
if (over && mousePressed && !imCaptured && !captured)
{
deltax = x - mouseX;
deltay = y - mouseY;
origx = x;
origy = y;
captured = true;
imCaptured = true;
}
if (!mousePressed && imCaptured)
{
captured = false;
imCaptured = false;
}
if (imCaptured)
{
xdragdelta = x - (mouseX + posXdiff);
ydragdelta = y - (mouseY + posYdiff);
x = mouseX + deltax;
y = mouseY + deltay;
}
}
void changesize()
{
if (over && keyPressed)
{
if (key == 'b')
{
h += 2;
w += 2;
}
if (key == 's')
{
h -= 2;
w -= 2;
}
}
}
void display()
{
rect(x, y, h, w);
changesize();
}
}
/////////////////////////////////////////////////////////////////////////
class Button
{
int rectX, rectY; // Position of square button
int rectSize = 50; // Diameter of rect
color rectColor;
color rectHighlight;
boolean rectOver = false;
Button(int _rectX, int _rectY)
{
smooth();
rectColor = color(0);
rectHighlight = color(51);
rectX = _rectX;
rectY = _rectY;
}
void display()
{
update(mouseX, mouseY);
if (rectOver) {
fill(rectHighlight);
}
else {
fill(rectColor);
}
stroke(255);
rect(rectX, rectY, rectSize, rectSize);
}
void update(int x, int y)
{
if ( overRect(rectX, rectY, rectSize, rectSize) )
{
rectOver = true;
}
else {
rectOver = false;
}
}
boolean overRect(int x, int y, int width, int height)
{
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
}
else {
return false;
}
}
boolean pressed(int _x, int _y){
if( rectOver )
return true;
return false;
}
}

a__g

Re: Re: Click Button to Add an Object -- OOP

1 year ago

Hmm, a bit better maybe... ?

Copy code

boolean pressed(int _x, int _y){
return rectOver;
}

Chrisir

Re: Click Button to Add an Object -- OOP

1 year ago

yeah , I just wrote the same code than a__g

there's a lot of stuff in both classes that are not needed and come from your experiments probably...

a__g

Re: Re: Click Button to Add an Object -- OOP

1 year ago

Lists are fun! =)

CivicImag..

Re: Click Button to Add an Object -- OOP

1 year ago

Thanks a__g, that solves part of my problem. I'm pretty new to programming, so any tips are greatly appreciated.

I want to be able to grab the shapes with a mouse click and drag them around the screen. With the setup and draw that you suggest I can't manipulate the shapes. I think this is because the ints x, y, h, and w are called inside the button.

I might have somehow broken the code in the first example. Anyway, if you run the following code you'll get two squares that you can resize with 's' and 'b' and move with the mouse. What I want is what you suggested, but with the ability to manipulate the shapes.

Thanks so much for the help.

Copy code

//PImage clv;
int x; // x, y, height and width of shapeMove
int y;
int h;
int w;
boolean captured;
boolean selected = false;
ShapeMove[] shapeMove = new ShapeMove[2];
Button button;
void setup()
{
size(800, 500);
//clv = loadImage("clv.png");
int i;
i = 0;
shapeMove[0] = new ShapeMove(0, 0, 200, 200);
shapeMove[1] = new ShapeMove(250, y, 250, 250);
button = new Button(200, 300);
}
void draw()
{
background(255);
button.display();
fill(120, 250,0);
for (int i = shapeMove.length-1; i >=0; i--)
{
shapeMove[i].update();
shapeMove[i].display();
}
}
//////////////////////////////////////////////////////////////////////////
class ShapeMove
{
int x;
int y;
int h;
int w;
int origx;
int origy;
int deltax;
int deltay;
int posXdiff;
int posYdiff;
boolean over;
boolean locked = false;
boolean imCaptured = false;
int xdragdelta, ydragdelta;
ShapeMove(int _x, int _y, int _h, int _w)
{
x = _x;
y = _y;
h = _h;
w = _w;
}
boolean over()
{
if (mouseX >= x && mouseX <=x+w &&
mouseY >= y && mouseY <= y+h)
{
over = true;
return true;
}
else
{
over = false;
return false;
}
}
void update()
{
if (over() && mousePressed && !imCaptured && !captured)
{
deltax = x - mouseX;
deltay = y - mouseY;
origx = x;
origy = y;
captured = true;
imCaptured = true;
}
if (!mousePressed && imCaptured)
{
captured = false;
imCaptured = false;
}
if (imCaptured)
{
xdragdelta = x - (mouseX + posXdiff);
ydragdelta = y - (mouseY + posYdiff);
x = mouseX + deltax;
y = mouseY + deltay;
}
}
void changesize()
{
if (over() && keyPressed)
{
if (key == 'b')
{
h += 2;
w += 2;
}
if (key == 's')
{
h -= 2;
w -= 2;
}
}
}
void display()
{
rect(x, y, h, w);
changesize();
}
}
/////////////////////////////////////////////////////////////////////////
class Button
{
int rectX, rectY; // Position of square button
int rectSize = 50; // Diameter of rect
color rectColor;
color rectHighlight;
boolean rectOver = false;
Button(int _rectX, int _rectY)
{
smooth();
rectColor = color(0);
rectHighlight = color(51);
rectX = _rectX;
rectY = _rectY;
}
void display()
{
update(mouseX, mouseY);
if(rectOver) {
fill(rectHighlight);
} else {
fill(rectColor);
}
stroke(255);
rect(rectX, rectY, rectSize, rectSize);
}
void update(int x, int y)
{
if ( overRect(rectX, rectY, rectSize, rectSize) ) {
rectOver = true;
} else {
rectOver = false;
}
}
void mousePressed()
{
if(rectOver) {
// currentColor = rectColor;
}
}
boolean overRect(int x, int y, int width, int height)
{
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
}

CivicImag..

Re: Click Button to Add an Object -- OOP

1 year ago

I was writing my response before I saw yours. I'll see if that helps.

Chrisir, yeah, new to programming and a little overwhelmed. I'm going to try clean it up once I get this button working.

Thanks!

CivicImag..

Re: Click Button to Add an Object -- OOP

1 year ago

Here is a version using processing.js that has images rather than shapes. This way you might be able to better understand what I'm talking about.

http://whereimliving.com/trees/trees.html

I want the button to add trees and then I want to be able to move them around and resize them.

Thanks for all the help. I really appreciate it.

PhiLho

Re: Click Button to Add an Object -- OOP

1 year ago

" You really should avoid re-using keywords defined by Processing. I'm mostly thinking about your function "void mousePressed()" inside your button class."
In this case, I disagree. I can have mousePressed() and draw() in my classes, there is no ambiguity there. But there can be issues with variables names, like width or keyCode.

Chrisir

Re: Click Button to Add an Object -- OOP

1 year ago

this one works

drag around
resize

Copy code

int x; // shape x
int y; // shape y
int h; // shape height
int w; // shape width
int b = 0; //counts button clicks
boolean captured;
boolean isOverSomething;
ShapeMove[] shapeMove = new ShapeMove[30300];
Button button;
int i=0;
//
void setup()
{
size(800, 500);
i=0;
/*
for (int i = 0; i <= 2; i++)
{
shapeMove[i] = new ShapeMove(i*33, 0, 20, 20);
} */
button = new Button(200, 300);
}
//
void draw()
{
background(255);
button.display();
fill(120, 250, 0);
for (int myShapeNum=0; myShapeNum<i;myShapeNum++) {
shapeMove[myShapeNum].isover();
shapeMove[myShapeNum].changesize();
shapeMove[myShapeNum].update();
shapeMove[myShapeNum].display();
}
}
//
void mousePressed()
{
if (button.rectOver)
{
println("Hurray!");
shapeMove[i] = new ShapeMove(i*33+33, 0, 20, 20);
i++;
b++;
}
else
{
println("Nope.");
}
}
//
//////////////////////////////////////////////////////////////////////////
//
class ShapeMove
{
int x;
int y;
int h;
int w;
int origx;
int origy;
int deltax;
int deltay;
int posXdiff;
int posYdiff;
int xdragdelta;
int ydragdelta;
boolean over;
boolean locked = false;
boolean imCaptured = false;
boolean overMe = false;
//
ShapeMove(int _x, int _y, int _h, int _w)
{
x = _x;
y = _y;
h = _h;
w = _w;
}
void isover()
{
if (mouseX >= x && mouseX <=x+w &&
mouseY >= y && mouseY <= y+h)
{
over = true;
isOverSomething = true;
}
else
{
over = false;
isOverSomething = false;
}
}
void overme()
{
if (isOverSomething) // over something
{
if (overMe) // over me!
{
if (!over)
{
overMe = false;
isOverSomething = false;
}
}
}
else // not over anything at the moment
{
if (over) // over me!
{
overMe = true;
isOverSomething = true;
}
}
}
void update()
{
if (over && mousePressed && !imCaptured && !captured)
{
deltax = x - mouseX;
deltay = y - mouseY;
origx = x;
origy = y;
captured = true;
imCaptured = true;
}
if (!mousePressed && imCaptured)
{
captured = false;
imCaptured = false;
}
if (imCaptured)
{
xdragdelta = x - (mouseX + posXdiff);
ydragdelta = y - (mouseY + posYdiff);
x = mouseX + deltax;
y = mouseY + deltay;
}
}
void changesize()
{
if (over && keyPressed)
{
if (key == 'b')
{
h += 2;
w += 2;
}
if (key == 's')
{
h -= 2;
w -= 2;
}
}
}
void display()
{
rect(x, y, h, w);
changesize();
}
}
// ======================================================================
/////////////////////////////////////////////////////////////////////////
class Button
{
int rectX, rectY; // Position of square button
int rectSize = 50; // Diameter of rect
color rectColor;
color rectHighlight;
boolean rectOver = false;
Button(int _rectX, int _rectY)
{
smooth();
rectColor = color(0);
rectHighlight = color(51);
rectX = _rectX;
rectY = _rectY;
}
void display()
{
update(mouseX, mouseY);
if (rectOver) {
fill(rectHighlight);
}
else {
fill(rectColor);
}
stroke(255);
rect(rectX, rectY, rectSize, rectSize);
}
void update(int x, int y)
{
if ( overRect(rectX, rectY, rectSize, rectSize) )
{
rectOver = true;
}
else {
rectOver = false;
}
}
boolean overRect(int x, int y, int width, int height)
{
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
}
else {
return false;
}
}
}
// ---------------------------------------------------------------

Chrisir

Re: Click Button to Add an Object -- OOP

1 year ago

there is an error: you had swapped w and h for shape in the constructor and in the method display of the shape.

w=width and h=height, w is before h in the convention, e.g. with rect.

in void isover() you got it right.

It is still in the code I posted.

CivicImag..

Re: Click Button to Add an Object -- OOP

1 year ago

Wow, perfect. That's brilliant.

Thanks for the "Hurray!" line too. That made my day.

jas0501

Re: Click Button to Add an Object -- OOP

1 year ago

I haven't run the code, but it seems to me that isOverSomething should only be set to false when it is true, as it is a global variable. If one is not over button A one should not set isOverSomething = false as one might be over button B.

One should only set isOverSomething to false when one transitions from being over to not over for the item that set isOverSomething to true.

CivicImag..

Re: Click Button to Add an Object -- OOP

1 year ago

jas0501, I realize I've muddled up the example you gave me earlier for isOver and isOverSomething. If the mouse is hovering over two objects, they both resize. I follow your logic, but I just can't seem to translate it to code.

jas0501

Re: Click Button to Add an Object -- OOP

1 year ago

I was commenting on line 91 (line 10 below). I think is should be removed.

Copy code

if (mouseX >= x && mouseX <=x+w &&
mouseY >= y && mouseY <= y+h)
{
over = true;
isOverSomething = true;
}
else
{
over = false;
isOverSomething = false;
}

Top Reply