MouseX and mouseY

FunkyMonky

So (mouseX > 0 && mouseX < width /2 && mouseY > 0 && mouseY < height/2) makes it so it displays whenever the mouse is in the top left corner of the screen, how would I make it to do the same thing except for the bottom left corner, top right corner and lower right corner of the screen if the size is 600 by 600?

GoToLoop

http://studio.ProcessingTogether.com/sp/pad/export/ro.9hc1FSKJk66wK

/**
 * Quadrant Mouse Position (v1.0)
 * GoToLoop (2016-Feb-25)
 *
 * forum.Processing.org/two/discussion/15129/mousex-and-mousey
 * studio.ProcessingTogether.com/sp/pad/export/ro.9hc1FSKJk66wK
 */

static final int FPS = 5, BOLD = 8;
static final boolean ONLINE = 1/2 == 1/2.;

String quadrant;

void setup() {
  size(800, 600);
  smooth(4);
  noLoop();
  frameRate(FPS);

  stroke(0);
  strokeWeight(BOLD);
  rectMode(CORNER);

  mouseMoved();
}

void draw() {
  fill((color) random(#000000));
  rect(0, 0, width, height);

  final int cx = width>>1, cy = height>>1;
  line(0, cy, width, cy);
  line(cx, 0, cx, height);

  if (!ONLINE)  frame.setTitle("Quadrant: " + quadrant);
  else          println("Quadrant: " + quadrant);
}

void mouseMoved() {
  final int cx = width>>1, cy = height>>1;
  final int mx = mouseX, my = mouseY;

  if      (mx < cx & my < cy)   quadrant = "Top-Left";
  else if (mx < cx & my >= cy)  quadrant = "Bottom-Left";
  else if (mx >= cx & my < cy)  quadrant = "Top-Right";
  else                          quadrant = "Bottom-Right";

  redraw();
}

Chrisir

this is wrong:::::::::

I misunderstood you...

if (mouseX > 0 && mouseX < width /2 && mouseY > 0 && mouseY < height/2 

&& !(mouseX.......) 

&& !(...........)) 

So the ! means not

FunkyMonky

void setup ()
{
    size (600, 600); 
    rectMode (CENTER);
}

void draw()
{
    background (255);
    //when the mouse is in the top left portion
    if (mouseX > 0 && mouseX < width /2 && mouseY > 0 && mouseY < height/2)
    {
        ellipse(width /2, height /2, 100, 100);
    }

    //when the mouse is in the top right portion
    //...

    //when the mouse is in the bottom left portion
    //...

    //when the mouse is in the bottom right portion
    //...
}

This is what i am trying to do except make something for each portion of the screen.

TfGuy44

Do you understand - at all - what the code on line 11 says?

If you did, you should be able to do this yourself.

Let's break it down.

if (mouseX > 0 && mouseX < width /2 && mouseY > 0 && mouseY < height/2) 

This is a conditional statement. If the conditions are all met, then the code that is between the {} that follow it will be executed.

Cooking is a good analogy. Let's say you're making a sandwich.

If you have some cheese, you should put cheese on your sandwich.

Whoa, did you grok that? A conditional statement in English! Here's what it might look like in code:

if( you.have( cheese ) ){
  sandwich.put( cheese );
}

But wait, what if the cheese is moldy?!? You need to add an additional conditional! If you have cheese AND the cheese is mold-free....

if( you.have( cheese ) && cheese.is( mold_free ) ){
  sandwich.put( cheese );
}

Ok. Now let's look at the line of code again.

    if (mouseX > 0 && mouseX < width /2 && mouseY > 0 && mouseY < height/2)

Hopefully now you can see this as the ANDing of several conditionals.

if( 
  mouseX > 0 
  &&
  mouseX < width /2
  &&
  mouseY > 0
  &&
  mouseY < height/2
)

Now what does the first conditional check? It's doing a comparison between the variable mouseX and the value 0. If you were to read this out loud, you might read it as "mouse X is greater than zero", because the > symbol is a greater-than sign.

This first conditional makes sure that the mouses X position is greater than zero.

What does the second conditional say? Like the first, it is doing a comparison with mouseX, so you know it is checking if the mouse's X position meets some criteria.

The criteria is that mouseX is less than width / 2.

What is width / 2? Half the width of the sketch!

What does it mean for mouseX to be less than half the sketch's width?

It means that the mouse is on the LEFT HALF of the sketch!

... You should be able to work the rest out from here on your own.

Chrisir

TfGuy44 explained it really well

I mean mouseX, and mouseY is the mouse position (x goes to the right, y to the bottom).

just try it here:

void setup()
{
  // init
  size(800, 600);
} // func 

void draw() 
{ 
  background(255);

  fill(0);
  text("mouseX is "
    +mouseX
    +" and mouseY "
    + mouseY, 20, 20);
} // func

now, we want to check the position of the mouse against an area on the screen, let's say a rectangle:

If the mouse is inside the rectangle it means that:

• the mouseX is bigger than > the left side of the rect (or the upper left corner if you like)

• the mouseY is bigger than > the upper side

now we took care of the upper left corner if you like.

but we also have to check that the mouse is really inside the rectangle and not somewhere far off to the right or below the rectangle!

Therefore we also check if :

• mouseX is smaller than < the right side of the rectangle (lower right corner) and

• mouseY is smaller than < the lower side of the rectangle

That's it. In an if-clause we connect those 4 criteria with AND &&.

Now, one thing that may confuse you is that we use the absolute screen position here 4 times: so upper left corner is x1,y1 and lower right corner is x2,y2 but the command rect() if you draw the rectangle uses only one absolute screen position x1,y1 and the two next parameters are width and height of the rectangle (w,h).

So when you draw the rectangle you say x1,y1,w,h and when you check the mouse against it you check it against x1,y1 and x2,y2 (but it is simple to calculate: x2 is x1+w and y2 is y1+h).

check it out:

void setup()
{
  // init
  size(800, 600);
} // func 

void draw() 
{ 
  background(255);

  fill(0);
  text("mouseX is "
    +mouseX
    +" and mouseY "
    + mouseY
    +": ", 20, 20);


  fill(255, 0, 0); // red 
  rect (110, 200, 60, 70); 

  fill(0);
  if ( 
    mouseX > 110
    &&
    mouseY > 200
    &&
    mouseX < 110 + 60
    &&
    mouseY < 200 + 70
    )
    text ("inside", 200, 20); 
  else
    text ("outside", 200, 20);
} // func

you see, we basically add

• 110 and 60 to get x2 and

• 200 and 70 to get y2

Best, Chrisir ;-)

Chrisir

here you can see the x1,y1 and x2,y2 on the rectangle:

PFont font;  

void setup()
{
  // init
  size(800, 600);
  font=createFont("Arial", 12);
  textFont(font);
} // func 

void draw() 
{ 
  background(255);

  fill(0);
  text("mouseX is "
    +mouseX
    +" and mouseY "
    + mouseY
    +": ", 20, 20);


  fill(255, 0, 0); // red 
  rect (110, 200, 60, 70); 

  fill(0);
  if ( 
    mouseX > 110
    &&
    mouseY > 200
    &&
    mouseX < 110 + 60
    &&
    mouseY < 200 + 70
    )
    text ("inside", 200, 20); 
  else
    text ("outside", 200, 20);

  textField(110, 200, false);
  textField(110 + 60, 200 + 70, true);
} // func 

void textField(float x, float y, boolean drawItToTheRight) {

  String myText = str(int(x)) +"," + str(int(y));

  if (drawItToTheRight) {
    // right from the rectangle 
    text(myText, 
      x+2, y, 
      24, 200);
  } else 
  {
    // left from the rectangle 
    text(myText, 
      x-textWidth(myText)/2, y-29, 
      24, 200);
  }
}

//