# Stuck with replicating the mouseover function

**URL:** https://discourse.processing.org/t/stuck-with-replicating-the-mouseover-function/27039
**Category:** Coding Questions
**Created:** [January 13, 2021, 9:52pm UTC](https://discourse.processing.org/t/stuck-with-replicating-the-mouseover-function/27039 "2021-01-13T21:52:57Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![georg2a](https://avatars.discourse-cdn.com/v4/letter/g/ecc23a/32.png) [@georg2a](https://discourse.processing.org/u/georg2a)
#### Post date: [January 13, 2021, 9:52pm UTC](https://discourse.processing.org/t/stuck-with-replicating-the-mouseover-function/27039/1 "2021-01-13T21:52:57Z")

</div>

hello, i’m having some trouble constricting the box space that triggers a change in visuals. i’ve drawn an outline of the area i want the visuals/mouse to change within. as the cursor moves out of this box, it should return to normal as the conditions become false. it does this correctly past the bottom and right sides of the box, but it changes too soon near the origin in the top left corner.  
link to preview: [https://editor.p5js.org/georg2a/present/kIcojHyUF](https://editor.p5js.org/georg2a/present/kIcojHyUF)  
thanks to anybody who takes the time to read/respond to this!

```auto
let deer;
let love;

let dx;
let dy;

let dSize=180;

let overdBox=false;
let dlocked=false;

function preload(){
  deer = loadImage("love.gif");
  love = loadImage("deer.gif");
}

function setup() {
  imageMode(CENTER);
  //rectMode(CENTER);
  createCanvas(600, 600);
  
  dx = 200;
  dy = 100;
}

function draw() {
  background(0);
  image(deer, width/2,height/2,600,600);
  
  if (
   mouseX > dx - dSize &&
   mouseX < dx + dSize &&
   mouseY > dy - dSize &&
   mouseY < dy + dSize
  ) {
    overdBox=true;
    if (!dlocked) {
      //deer.reset();
   image(love,width/2,height/2,600,600);
    }
  }
    else {
      //love.reset();
    image(deer,width/2,height/2,600,600);
      overdBox=false;
    }
  //noStroke();
  noFill();
  square(dx,dy,dSize);
 // square(100,100,dSize);
;  
  if (overdBox == true){
      cursor(HAND);
      } else {
        cursor(ARROW);
  }
}

```

---

<div class="post-metadata">

### Author: ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)
#### Post date: [January 13, 2021, 10:42pm UTC](https://discourse.processing.org/t/stuck-with-replicating-the-mouseover-function/27039/2 "2021-01-13T22:42:49Z")

</div>

moving the boolean logic out of the main sketch and into a separate function can help readability/reusability.

```auto
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  if (mouseIsIn(50,80,100,140)) {
    fill(255, 0, 0)
  } else {
    fill(255)
  }
  rect(50, 80, 100, 140)
  
}

function mouseIsIn(x, y, w, h) {
  if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
    return true
  }
  return false
}

```

---

<div class="post-metadata">

### Author: ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [January 13, 2021, 10:42pm UTC](https://discourse.processing.org/t/stuck-with-replicating-the-mouseover-function/27039/3 "2021-01-13T22:42:54Z")

</div>

I made a processing program that does that:

> **Code**
>
> ```auto
> void setup() {
> size(600,600);
> }
> void draw() {
> background(0);
> fill( ((inBounds(200,200,200,200,mouseX,mouseY))? color(255,0,0) : color(0,0,255)));
> rect(200,200,200,200);
> println(inBounds(200,200,200,200,mouseX,mouseY));
> }
> boolean inBounds(float x, float y, float w, float h, float px, float py) {
> return(px > x && py > y && px < x + w && py < y + h);
> }
> 
> ```

enter (top left corner x, top left corner y, rect width, rect height, position x (mouseX), position y (mouseY) )

---

<div class="post-metadata">

### Author: ![georg2a](https://avatars.discourse-cdn.com/v4/letter/g/ecc23a/32.png) [@georg2a](https://discourse.processing.org/u/georg2a)
#### Post date: [January 13, 2021, 11:09pm UTC](https://discourse.processing.org/t/stuck-with-replicating-the-mouseover-function/27039/4 "2021-01-13T23:09:22Z")

</div>

thank you so much, it’s working now!

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 14, 2021, 8:53am UTC](https://discourse.processing.org/t/stuck-with-replicating-the-mouseover-function/27039/5 "2021-01-14T08:53:49Z")

</div>

> [@CodeMasterX](#):
>
> ```auto
> boolean inBounds(float x, float y, float w, float h, float px, float py) {
> return(px > x && py > y && px < x + w && py < y + h);
> }
> 
> ```

OR with line breaks:

```auto
boolean inBounds(float x, float y,
     float w, float h,
     float px, float py) {
  return
          px > x &&
          py > y && 
          px < x + w && 
          py < y + h;
}

```