<h2>Basic calculations</h2>
<p>I'm assuming you want to calculate the bounds of the rectangle of intersection, so you can draw it later. As AlanWolfe mentioned, you will want to use the max and min functions. This is so you can retrieve the left-most, right-most, top and bottom squares. We'll call these placeholders <code>right</code>, <code>bottom</code>, <code>left</code>, and <code>top</code> (each of these will point to one of the two squares).</p>
<p>Now that you know these, you can start mathing. The top-left position of the intersection will be at <code>(right.x_left, bottom.y_top)</code>. The bottom-right position of the intersection will be at <code>(left.x_left + left.width, bottom.y_top + bottom.height)</code>.</p>
<h2>Rendering the intersection</h2>
<p>To draw this rectangle (unconditionally), first you will need a location and a dimension, because most draw functions require these.</p>
<pre><code>Intersection.width = Intersection.x_right - Intersection.x_left
</code></pre>
<p>and the same for the height. Now suppose the squares don't overlap. This would mean at least one dimension is negative. We don't want anything to draw in this case, so we will set any negative dimensions to zero.</p>
<pre><code>Intersection.width = max(Intersection.width, 0)
</code></pre>
<p>and the same for the height. And to wrap up, we render our rectangle:</p>
<pre><code>fillRect(Intersection.x_left, Intersection.y_top, Intersection.width, Intersection.height)
</code></pre>

CC BY-SA 3.0
2017-08-05T04:05:18.163Z
You lost me somewhere. In the first paragraph, you mention finding the left-most, right-most, top and bottom *squares*. Aren't there only 2 squares? Then, in the second paragraph, you're talking about `(right.x, bottom.y)`, which sound like points, not rectangles. Can you clarify? I'm not understanding how the top-left position is `(right.x, bottom.y)` given what you've written above that.
user1118321
CC BY-SA 3.0
2017-08-05T12:02:56.740Z
Okay, `top`, `bottom`, `left`, and `right` are references; `top` just references whatever one of the two is higher, and `bottom` the lower one. `left` references whatever one is to the left, and `right` the one to the right. So, for instance, `top` could be rectangle A, and `right` could be rectangle A also. I'll edit the answer to clarify about the coordinates.
clabe45
CC BY-SA 3.0
2017-08-06T09:29:59.600Z
Thanks for the breakdown, @clabe45. I'm using JavaScript, so now I'm researching if JavaScript's Math.max and Math.min functions are branchless.
ebcode
CC BY-SA 3.0
2017-08-07T15:47:49.010Z
I'm curious why you care about it being branchless in JavaScript.  If you were doing this in a shader I can see why you'd want that (for efficiency), but branching is less of a problem on the CPU and JavaScript has much bigger perf issues than worrying about your code being branchless.
Alan Wolfe
CC BY-SA 3.0
2017-08-05T03:32:17.380Z
2017-08-05T12:20:52.950Z
2020-06-18T08:32:12.800Z
clabe45
<p>Say I have two squares, both 10x10, with some small, unknown overlap.</p>

<p>Is there a way to draw the intersection of these two squares using the width, height and x,y coordinates of each square, while also not using an if statement?</p>

<p>Thanks.</p>

CC BY-SA 3.0
2017-08-05T00:10:06.090Z
To be clear—is your question how to _compute the coordinates_ of the intersection box without an if statement?
Nathan Reed
CC BY-SA 3.0
2017-08-05T00:21:54.560Z
Also are you on cpu or gpu? What language? It can vary but min and max functions are probably the key component to answering your question, so long as they are branchless where you are using them. They are branchless in hlsl/glsl for what it's worth.
Alan Wolfe
CC BY-SA 3.0
2017-08-06T06:18:59.177Z
Yes, how to compute (/find) the coordinates.
ebcode
CC BY-SA 3.0
2017-08-06T09:27:17.337Z
@AlanWolfe I'm using JavaScript in the web browser, so CPU. I had not heard of branchless min/max functions, but that seems to be the right direction to go in. Thanks.
ebcode
<geometry><animation>
Is it possible to draw the intersection of two squares of known dimension using only x,y coordinates and without an if statement?
ebcode
# Is it possible to draw the intersection of two squares of known dimension using only x,y coordinates and without an if statement?

(Asked by: username_0 on 2017-08-04)

Say I have two squares, both 10x10, with some small, unknown overlap.

Is there a way to draw the intersection of these two squares using the width, height and x,y coordinates of each square, while also not using an if statement?

Thanks.

**Tags:** geometry, animation

> **Comments:**
> **username_1**: To be clear—is your question how to _compute the coordinates_ of the intersection box without an if statement?  
> **username_2**: Also are you on cpu or gpu? What language? It can vary but min and max functions are probably the key component to answering your question, so long as they are branchless where you are using them. They are branchless in hlsl/glsl for what it's worth.  
> **username_0**: Yes, how to compute (/find) the coordinates.  
> **username_0**: @username_2 I'm using JavaScript in the web browser, so CPU. I had not heard of branchless min/max functions, but that seems to be the right direction to go in. Thanks.  

---

## 1 answers

### Answer by username_3 on 2017-08-05. Score: 1

## Basic calculations

I'm assuming you want to calculate the bounds of the rectangle of intersection, so you can draw it later. As username_2 mentioned, you will want to use the max and min functions. This is so you can retrieve the left-most, right-most, top and bottom squares. We'll call these placeholders `right`, `bottom`, `left`, and `top` (each of these will point to one of the two squares).

Now that you know these, you can start mathing. The top-left position of the intersection will be at `(right.x_left, bottom.y_top)`. The bottom-right position of the intersection will be at `(left.x_left + left.width, bottom.y_top + bottom.height)`.

## Rendering the intersection

To draw this rectangle (unconditionally), first you will need a location and a dimension, because most draw functions require these.

```
Intersection.width = Intersection.x_right - Intersection.x_left

```

and the same for the height. Now suppose the squares don't overlap. This would mean at least one dimension is negative. We don't want anything to draw in this case, so we will set any negative dimensions to zero.

```
Intersection.width = max(Intersection.width, 0)

```

and the same for the height. And to wrap up, we render our rectangle:

```
fillRect(Intersection.x_left, Intersection.y_top, Intersection.width, Intersection.height)

```

> **Comments:**
> **username_4**: You lost me somewhere. In the first paragraph, you mention finding the left-most, right-most, top and bottom *squares*. Aren't there only 2 squares? Then, in the second paragraph, you're talking about `(right.x, bottom.y)`, which sound like points, not rectangles. Can you clarify? I'm not understanding how the top-left position is `(right.x, bottom.y)` given what you've written above that.  
> **username_3**: Okay, `top`, `bottom`, `left`, and `right` are references; `top` just references whatever one of the two is higher, and `bottom` the lower one. `left` references whatever one is to the left, and `right` the one to the right. So, for instance, `top` could be rectangle A, and `right` could be rectangle A also. I'll edit the answer to clarify about the coordinates.  
> **username_0**: Thanks for the breakdown, @username_3. I'm using JavaScript, so now I'm researching if JavaScript's Math.max and Math.min functions are branchless.  
> **username_2**: I'm curious why you care about it being branchless in JavaScript.  If you were doing this in a shader I can see why you'd want that (for efficiency), but branching is less of a problem on the CPU and JavaScript has much bigger perf issues than worrying about your code being branchless.  

---

