# Making rect stop offset movement if the rect is touched by the mouse

**URL:** https://discourse.processing.org/t/making-rect-stop-offset-movement-if-the-rect-is-touched-by-the-mouse/16103
**Category:** Coding Questions
**Created:** [December 4, 2019, 7:35am UTC](https://discourse.processing.org/t/making-rect-stop-offset-movement-if-the-rect-is-touched-by-the-mouse/16103 "2019-12-04T07:35:11Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Adrian1998](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@Adrian1998](https://discourse.processing.org/u/Adrian1998)
#### Post date: [December 4, 2019, 7:35am UTC](https://discourse.processing.org/t/making-rect-stop-offset-movement-if-the-rect-is-touched-by-the-mouse/16103/1 "2019-12-04T07:35:11Z")

</div>

So i am currently trying to make my rectangles stop when a mouse touches a rectangle.  
Right now it only stop if the mouse reaches a certain Y axis. How can I make it stop when the mouse only touches the square.

```auto
int b = 50;
int c = 50;
int d = 50;
int i = 500;
int offset = 1;
int s = 800; 
int t = 1100;
int j = 0;
int o = 2000;
int test = 100;
int e = 980;
void setup () {
  size(400, 400);
}

void draw () {
  background(50);
  player();
  scoreboard ();
  obstacles();
  test();
  score();
  Victory();
  failed();
}

void player () {
  rect(mouseX-30, mouseY, b, c);
  ellipse(mouseX-15, mouseY+20, b-40, c-40);
  ellipse(mouseX+5, mouseY+20, b-40, c-40);
  rect(mouseX-15, mouseY+30, b-30, c-40);
}

void keyPressed () {
  if (key == 'a') {
    b += 20;
    c += 20;
  } else if (key == 's') {
    b -= 20;
    c -= 20;
  } else if (key =='r') {
    i += 500;
    i += 500;
  } else if (key == 't') {
    offset = offset -2;
  }
}

void score() {
  noStroke(); 
  fill(0, 0, 0);
  rect(0, 360, 700, 40); 
  fill(255, 255, 255);
  textSize(30);
  text(j, 190, 390);
}

void scoreboard () {
  if (mouseY < 100) { // need help here
    textSize(20);
    text("You have ran in to a object!", 20, 100);
    offset -= -2;
  }
}

void failed () {
  if (mouseY > 300) { // need help here
    textSize(20);
    text("You have ran in to a object!", 20, 100);
    offset -= -2;
  }
}

void obstacles () {
  fill(0, 255, 0);
  rect(offset + i, 0, 50, 100);
  rect(offset+ i, 300, 50, 100);
  rect(offset + t, 300, 50, 100);
  rect(offset+ s, 300, 50, 100);
  rect(offset + o, -100, 10, 10);
  rect(offset + t, 0, 50,100);
  rect(offset + s,0,50,100);
  rect(offset + e, 0,50,130);
  rect(offset + e , 0,50,100);
  offset = offset -2;
}

void test () {
  textSize(30);
  if (mouseX > offset + i) {
    text("Points:"+ j, 100, 50);
    j = 1;
  } else if (mouseX > offset + s) {
    j += 2;
  }
}

void test2 () {
  textSize(30);
  if (mouseX < offset + s) {
    j = 2;
  }
}

void Victory () {
  if ( mouseX > offset + o) {
    text("You win!", 100, 200);
  }
}

```

---

<div class="post-metadata">

### Author: ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)
#### Post date: [December 4, 2019, 8:16am UTC](https://discourse.processing.org/t/making-rect-stop-offset-movement-if-the-rect-is-touched-by-the-mouse/16103/2 "2019-12-04T08:16:37Z")

</div>

I would make it using objects; making your green rectangles having a method to see if the mouse (or white square) have touched them 😳

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 4, 2019, 6:26pm UTC](https://discourse.processing.org/t/making-rect-stop-offset-movement-if-the-rect-is-touched-by-the-mouse/16103/3 "2019-12-04T18:26:12Z")

</div>

You can use collision detection for that. What you need for that is :

•The x and y position of the rect  
•The width and height of the rect  
•The mouse x and y position.

Then just check if the mouseX coordinate is bigger than rectX and smaller than rectX + rectWidth and mouseY bigger than rectY and smaller than rectY + rectH.

---

<div class="post-metadata">

### Author: ![GeorgeJava](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/georgejava/32/7646_2.png) [@GeorgeJava](https://discourse.processing.org/u/GeorgeJava)
#### Post date: [December 4, 2019, 7:16pm UTC](https://discourse.processing.org/t/making-rect-stop-offset-movement-if-the-rect-is-touched-by-the-mouse/16103/4 "2019-12-04T19:16:23Z")

</div>

There is a lots of mistakes that makes code harder to read…

**1.** naming variables  
**2.** Functions in a draw is not in correct way,  
for example: _“score()”, “Victory()”, “failed()”_  
it looks like its being done every draw loop…  
by the way you can use some condition included in draw, to looks better,and **readable** better.  
**3.** Doing somethink with more instances or objects, its better to use OOP (Object-oriented programming)  
For example use arrays or arrayLists with classes  
[ArrayObjects](https://processing.org/examples/arrayobjects.html)  
[ArrayList](https://processing.org/reference/ArrayList.html)

---

<div class="post-metadata">

### Author: ![GeorgeJava](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/georgejava/32/7646_2.png) [@GeorgeJava](https://discourse.processing.org/u/GeorgeJava)
#### Post date: [December 4, 2019, 7:26pm UTC](https://discourse.processing.org/t/making-rect-stop-offset-movement-if-the-rect-is-touched-by-the-mouse/16103/5 "2019-12-04T19:26:24Z")

</div>

You can use somethink like this, its a collision system, thats you must connect with object and its all, just connect and everythink about collisions and detections being done with the **COLLISION** object connected with object

```auto
ArrayList<Collision> col = new ArrayList<Collision>();

class Collision extends Object {
  ArrayList<Collision> coliders = new ArrayList<Collision>();
  boolean enabled = true, collisionX, collisionY;
  Object driver;

  Collision(Object o) {
    super(o);
    driver = o;
  }
  void refresh() {
    speed = driver.speed;

    collisionX = false;
    collisionY = false;

    checkOverlapping();

    checkCollision(1, 0);
    checkCollision(0, 1);

    if (collisionX) {
      speed.x = 0;
    }
    if (collisionY) {
      speed.y = 0;
    }

    driver.pos = pos;
  }

  void checkOverlapping() {
    for (int i = coliders.size()-1; i >= 0; i--) {
      coliders.remove(i);
    }

    for (int i = 0; i < col.size(); i++) {
      Collision c = col.get(i);
      if (!this.equals(c)) {
        if (collision(this, c)) {
          coliders.add(c);
        }
      }
    }
  }

  void checkCollision(int X, int Y) {
    PVector dir = getDir(driver.speed);
    PVector oldPos;
    float dirSpd = 0;

    if (X==1) dirSpd = abs(driver.speed.x * deltaTime);
    if (Y==1) dirSpd = abs(driver.speed.y * deltaTime);

    for (int spd = 0; spd < dirSpd; spd++) {
      if (spd + 1 > dirSpd) {

        if (X==1)dir.x *= abs(dirSpd)%1;
        if (Y==1)dir.y *= abs(dirSpd)%1;
      }

      oldPos = pos.copy();

      pos.x += dir.x * X;
      pos.y += dir.y * Y;
      if (enabled) {
        for (int i = 0; i < col.size(); i++) {
          Collision c = col.get(i);
          if (!this.equals(c)) {
            if (collision(this, c)) {
              if (c.enabled) {
                pos.x = oldPos.x;
                pos.y = oldPos.y;
                if (X==1) {
                  collisionX = true;
                }
                if (Y==1) {
                  collisionY = true;
                }
              }
            }
          }
        }
      }
    }
  }

  boolean collision(Collision a, Collision b) {
    return collision(a.pos.x, a.pos.y, a.w, a.h, b.pos.x, b.pos.y, b.w, b.h);
  }

  boolean collision(float r1x, float r1y, float r1w, float r1h, float r2x, float r2y, float r2w, float r2h) {
    return (r1x+r1w > r2x &&
      r1x < r2x+r2w && 
      r1y+r1h > r2y &&
      r1y < r2y+r2h);
  }
}

PVector getDir(PVector v) {
  PVector dir = new PVector();
  if (v.x > 0) {
    dir.x = 1;
  }
  if (v.x < 0) {
    dir.x = -1;
  }
  if (v.y > 0) {
    dir.y = 1;
  }
  if (v.y < 0) {
    dir.y = -1;
  }

  return dir;
}

Collision addCollision(Object o) {
  col.add(new Collision(o));
  return col.get(col.size()-1);
}

```

if you have game object and you wanted to connect to Collision system, it can looks like this:

```auto
ArrayList<Object> obj = new ArrayList<Object>();

abstract class Object {
  PVector pos, speed;
  float w, h, maxSpeed;
  Collision mask;

  Object(float x, float y, float w, float h) {
    pos = new PVector(x, y);
    speed = new PVector();
    this.w = w;
    this.h = h;
  }
  Object(Object o) {
    speed = new PVector();
    this.pos = o.pos;
    this.speed = o.speed;
    this.w = o.w;
    this.h = o.h;
    this.maxSpeed = o.maxSpeed;
  }
  void remove(int i) {
    obj.remove(i);
    col.remove(i);
  }
  Object() {
  }
  void draw() {
  }
  void keyPressed() {
  }
  void keyReleased() {
  }

  void move(PVector movePos) {
    // move with object
    pos.x = movePos.x;
    pos.y = movePos.y;
    // move with collision mask
    mask.pos.x = movePos.x;
    mask.pos.y = movePos.y;
  }
}

Object addObject(Object o) {
  obj.add(o);
  return obj.get(obj.size()-1);
}

ObjManager objects = new ObjManager();

class ObjManager {
  void remove() {
    for (int i = obj.size()-1; i >= 0; i--) {
      obj.remove(i);
    }
    for (int i = col.size()-1; i >= 0; i--) {
      col.remove(i);
    }
  }
  void draw() {
    for (Object o : obj) {
      o.draw();
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 4, 2019, 8:12pm UTC](https://discourse.processing.org/t/making-rect-stop-offset-movement-if-the-rect-is-touched-by-the-mouse/16103/6 "2019-12-04T20:12:08Z")

</div>

That is indeed a way to do it, but the Code posted by the OP suggests that he‘s a beginner and therefore doesn‘t know/have much experience using class, and also not much with extending classes.

Generally you‘d want to answer this kind of question without giving a finished code, and only give some hints on how to do it and maybe the methods/references on how to do it, to help the OP learn to code better 😉