# Collision between rectangles

**URL:** <https://discourse.processing.org/t/collision-between-rectangles/39834>\
**Category:** Coding Questions\
**Created:** [November 23, 2022, 1:10am UTC](https://discourse.processing.org/t/collision-between-rectangles/39834 "2022-11-23T01:10:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![turke1034](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/turke1034/32/16910_2.png) [@turke1034](https://discourse.processing.org/u/turke1034)\
**Post date:** [November 23, 2022, 1:10am UTC](https://discourse.processing.org/t/collision-between-rectangles/39834/1 "2022-11-23T01:10:09Z")

</div>

I am trying to make collision between rectangles in my game. The player can move with W, A, S, D and there are ‘blocks’ that the player is supposed to collide with. I’m able to make it so the player can collide normally along 1 axis, but whenever I combine the x and y axis it creates strange behaviour. I’ve tried making it so it checks which axis the player is closer to the center of the block on, but it only makes it worse.

```auto
if (pos.x + WIDTH / 2f > block.pos.x - block.width / 2f && pos.x - WIDTH / 2f < block.pos.x + block.width / 2f
                    && pos.y + HEIGHT / 2f > block.pos.y - block.width / 2f && pos.y - HEIGHT / 2f < block.pos.y + block.height / 2f)
            {
                float dx = Application.dist(pos.x, 0, block.pos.x, 0);
                float dy = Application.dist(0, pos.y, 0, block.pos.y);

                if (dx < dy)
                {
                    // left
                    if (pos.x + WIDTH / 2f > block.pos.x - block.width / 2f && pos.x < block.pos.x)
                    {
                        pos.x = block.pos.x - block.width / 2f - WIDTH / 2f;
                    }
                }
                else
                {
                    // top
                    if (pos.y + HEIGHT / 2f > block.pos.y - block.height / 2f && pos.y < block.pos.y)
                    {
                        pos.y = block.pos.y - block.height / 2f - HEIGHT / 2f;
                    }
                }

                if (dx < dy)
                {
                    // right
                    if (pos.x - WIDTH / 2f < block.pos.x + block.width / 2f && pos.x > block.pos.x)
                    {
                        pos.x = block.pos.x + block.width / 2f + WIDTH / 2f;
                    }

                    // bottom
                    if (pos.y - HEIGHT / 2f > block.pos.y + block.height / 2f && pos.y < block.pos.y)
                    {
                        pos.y = block.pos.y + block.height / 2f + HEIGHT / 2f;
                    }
                }
            }

```

I also know why it doesn’t work, though I don’t have a clue on how to fix it.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [November 23, 2022, 2:06am UTC](https://discourse.processing.org/t/collision-between-rectangles/39834/2 "2022-11-23T02:06:04Z")

</div>

Hi

> **[Processing Collision Detection](https://happycoding.io/tutorials/processing/collision-detection)**
>
> Learn how to trigger an action when objects overlap in Processing!

---

<div class="post-metadata">

**Author:** ![Divitiacus](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@Divitiacus](https://discourse.processing.org/u/Divitiacus)\
**Post date:** [November 23, 2022, 2:14am UTC](https://discourse.processing.org/t/collision-between-rectangles/39834/3 "2022-11-23T02:14:30Z")

</div>

You don’t show, how you draw your blocks.  
If you didn’t change rectMode the position of the block is in the upper left corner.

---

<div class="post-metadata">

**Author:** ![turke1034](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/turke1034/32/16910_2.png) [@turke1034](https://discourse.processing.org/u/turke1034)\
**Post date:** [November 23, 2022, 2:26am UTC](https://discourse.processing.org/t/collision-between-rectangles/39834/4 "2022-11-23T02:26:04Z")

</div>

Oh sorry about that. I use rectmode center.

---

<div class="post-metadata">

**Author:** ![turke1034](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/turke1034/32/16910_2.png) [@turke1034](https://discourse.processing.org/u/turke1034)\
**Post date:** [November 23, 2022, 2:51am UTC](https://discourse.processing.org/t/collision-between-rectangles/39834/5 "2022-11-23T02:51:04Z")

</div>

Solution:

```auto
for (Block block : blocks)
        {
            float dx = Application.dist(pos.x, 0, block.pos.x, 0);
            float dy = Application.dist(0, pos.y, 0, block.pos.y);

            if (dx > dy)
            {
                // left
                if (pos.x + WIDTH / 2f > block.pos.x - block.width / 2f && pos.x < block.pos.x)
                {
                    pos.x = block.pos.x - block.width / 2f - WIDTH / 2f;
                }

                // right
                if (pos.x - WIDTH / 2f < block.pos.x + block.width / 2f && pos.x > block.pos.x)
                {
                    pos.x = block.pos.x + block.width / 2f + WIDTH / 2f;
                }
            }
            else
            {
                if (pos.y + HEIGHT / 2f > block.pos.y - block.height / 2f && pos.y < block.pos.y)
                {
                    pos.y = block.pos.y - block.height / 2f - HEIGHT / 2f;
                }

                if (pos.y - HEIGHT / 2f < block.pos.y + block.height / 2f && pos.y > block.pos.y)
                {
                    pos.y = block.pos.y + block.height / 2f + HEIGHT / 2f;
                }
            }
        }

```

(Sorry about the formatting)

I don’t know if this is a good way, but it achieves exactly what I wanted, so.