Nub question: Need help with making/changing an (image) button

Programming Questions

fiskefyre

Nub question: Need help with making/changing an (image) button

in Programming Questions • 1 month ago

I just started to learn processing like 2 days ago, so please bear over with me :)

I haven't made it too far on this "project". I'm trying to make one image being replaced by clicking on it with the mouse.

PS. could someone also explain the mouseX and mouseY to me? I know it's the current location of wherever the mouse is but I don't understand how to use that for telling the mousePressed as to where it's actually clicking. I also don't understand the y+height and x+width (which can explain why the code below might not make all that much sense as to my mouseX and mouseY values), to me it sounds like if x=100 then it's 100+the width which I guess is the void setup size? Which makes no sense to me...

Thanks in advance! <3

void setup() {

size(600,400);

background(255);

image(loadImage("black_arrow_left.gif"),100,100);

//image(loadImage("black_arrow_right.gif"),300,100);

}

void mousePressed() {

if (mouseX >= 100 && mouseX <= 10+width &&

mouseY >= 100 && mouseY <= 10+height ) {

image(loadImage("blue_arrow_left.gif"),100,100);

}

Replies(12)

GoToLoop

Re: Nub question: Need help with making/changing an (image) button

1 month ago

int x, y, w, h;

PImage currImg, img1, img2;

final static String FILE  = "_arrow_left.gif";
final static String FILE1 = "black" + FILE;
final static String FILE2 = "blue"  + FILE;

void setup() {
  size(600, 400);
  noLoop();
  imageMode(CORNER);

  img1 = loadImage(FILE1);
  img2 = loadImage(FILE2);

  x = y = 100;

  w = img1.width;
  h = img1.height;

  mousePressed();
}

void draw() {
  background(-1);
  image(currImg, x, y);
}

void mousePressed() {
  final int mx = mouseX, my = mouseY;
  currImg = mx >= x & mx < x+w & my >= y & my < y+h ? img2 : img1;
  redraw();
}

tfguy44

Re: Nub question: Need help with making/changing an (image) button

1 month ago

Indeed, mouseX and mouseY are used to determine to position of the mouse pointer.
You can check if that point meets certain criteria to determine if the mouse is within a given area.
You should also only load your images once, and have variables that track your program's state.

Example:

PImage blueLeft, blueRight, blackLeft, blackRight;
boolean isRightBlue, isLeftBlue;
void setup() {
size(600,400); // The sketch's window is 600 pixels wide and 400 high.
// Load the images to use - be sure to load them in setup() so they only load once!
blueLeft = loadImage("blue_arrow_left.gif");
blueRight = loadImage("blue_arrow_right.gif");
blackLeft = loadImage("black_arrow_left.gif");
blackRight = loadImage("black_arrow_right.gif");
isRightBlue = false;
isLeftBlue = false;
}
void draw(){
background(255); // Draw a white background.
if( isLeftBlue ){
image( blueLeft, 100, 100);
} else {
image( blackLeft, 100, 100);
}
if( isRightBlue ){
image( blueRight, 300, 100);
} else {
image( blackRight, 300, 100);
}
}
void mousePressed() {
// If the mouse's position is over the left arrow...
if( mouseX >= 100 && mouseX <= 100 + blueLeft.width && mouseY >= 100 && mouseY <= 100 + blueLeft.height ){
isLeftBlue = !isLeftBlue; // Toggle the left arrow's color.
}
// If the mouse's position is over the right arrow...
if( mouseX >= 300 && mouseX <= 300 + blueLeft.width && mouseY >= 100 && mouseY <= 100 + blueLeft.height ){
isRightBlue = !isRightBlue; // Toggle the right arrow's color.
}
}

tfguy44

Re: Re: Nub question: Need help with making/changing an (image) button

1 month ago

Dang, I am the slow.

fiskefyre

Re: Nub question: Need help with making/changing an (image) button

29 days ago

Thanks a lot so far, I had hoped it could be written more easily :/

Anyway, I still don't understand the need for " <= 100 + blueLeft.width && mouseY" and " <= 100 + blueLeft.height" I don't really understand what is being done there, why do you have to + it with width and height?

PS. what's currImg?

tfguy44

Re: Nub question: Need help with making/changing an (image) button

29 days ago

I think you're looking at this conditional check wrong:

if( mouseX >= 100 && mouseX <= 100 + blueLeft.width && mouseY >= 100 && mouseY <= 100 + blueLeft.height ){

Let's break this down.

if(
mouseX >= 100
&&
mouseX <= 100 + blueLeft.width
&&
mouseY >= 100
&&
mouseY <= 100 + blueLeft.height
){

Ok, so now you can clearly see that this is checking 4 different conditions.
Now look at this image:

The thick colored lines are X = 100, X = 100+ someWidth, Y = 100, Y = 100 + someHeight

Notice that they surround a square area. When all four of the above conditions are met, the mouse is inside that square. This is shown by the thin colored lines.

Since that square is where your image is being drawn, the correct amount to use for someWidth and someHeight are the image's width and height.

Does that make sense?

fiskefyre

Re: Nub question: Need help with making/changing an (image) button

29 days ago

tfguy44,

The right one doesn't work, I see that you made a typo but even if i fixed it it still doesn't work :/

fiskefyre

Re: Nub question: Need help with making/changing an (image) button

29 days ago

oh... so the width and the height is like a minus factor? meaning if you just say 100 it's from 100 and forward while 100+width is everything from 100 and backwards? wouldn't it have made more sense to call it -100 then? but i guess that doesn't work...

fiskefyre

Re: Nub question: Need help with making/changing an (image) button

29 days ago

Hello again,

I've tried something new but my right button still doesn't work, I'd assume that something is wrong with the mouse values :( it works just fine for the button on the left but the right one doesn't work at all.

int width = 188;

int height = 184;

void setup() {

size(600,400);

background(255);

}

void draw() {

image(loadImage("black_arrow_left.gif"),100,100);

if (mouseX >= 100 && mouseX <= 100 + width &&

mouseY >= 100 && mouseY <= 100 + height )

{

image(loadImage("blue_arrow_left.gif"),100,100);

}

image(loadImage("black_arrow_right.gif"),300,100);

if (mouseX >= 300 && mouseX <= 100 + width &&

mouseY >= 100 && mouseY <= 100 + height )

{

image(loadImage("blue_arrow_right.gif"),300,100);

}

void mousePressed() {

if (mouseX >= 100 && mouseX <= 100 + width &&

mouseY >= 100 && mouseY <= 100 + height )

{

background(203,8,151);

}

if (mouseX >= 300 && mouseX <= 100 + width &&

mouseY >= 100 && mouseY <= 100 + height )

{

background(184,8,203);

}

fiskefyre

Re: Nub question: Need help with making/changing an (image) button

29 days ago

Oh... nevermind... I'm just an idiot...

if (mouseX >= 300 && mouseX <= 300 + width &&

mouseY >= 100 && mouseY <= 100 + height )

now it's flawless :) thanks a lot <3

fiskefyre

Re: Nub question: Need help with making/changing an (image) button

28 days ago

Hello tfguy44,

Could you explain to me the reasoning behind isLeftBlue = false;? Because it seems like it can work without it.

railon

Re: Nub question: Need help with making/changing an (image) button

28 days ago

isLeftBlue is a boolean value, meaning it equals either true or false. Setting it to false in the setup means that at the start of the sketch your left button will be black.

Now if you don't set isLeftBlue to anything, it defaults to false I believe so it does this anyway. However it's good practice to declare it as false as you should assign a value to a variable before using it (unless you expect null) to avoid problems.

GoToLoop

Re: Nub question: Need help with making/changing an (image) button

27 days ago

Only for local variables initialization before use is obligatory.
For field variables, any of the 8 primitive data-type got its own automatic initial values.
Mainly 0, 0.0 or '\0' for numerical types and false for boolean type.
And any non-primitive type gets null as initial value.

Top Reply