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?


  • 1
    $\begingroup$ To be clear—is your question how to compute the coordinates of the intersection box without an if statement? $\endgroup$ Aug 5, 2017 at 0:10
  • $\begingroup$ 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. $\endgroup$
    – Alan Wolfe
    Aug 5, 2017 at 0:21
  • $\begingroup$ Yes, how to compute (/find) the coordinates. $\endgroup$
    – ebcode
    Aug 6, 2017 at 6:18
  • $\begingroup$ @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. $\endgroup$
    – ebcode
    Aug 6, 2017 at 9:27

1 Answer 1


Basic calculations

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 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)
  • $\begingroup$ 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. $\endgroup$ Aug 5, 2017 at 4:05
  • $\begingroup$ 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. $\endgroup$
    – clabe45
    Aug 5, 2017 at 12:02
  • $\begingroup$ 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. $\endgroup$
    – ebcode
    Aug 6, 2017 at 9:29
  • 2
    $\begingroup$ 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. $\endgroup$
    – Alan Wolfe
    Aug 7, 2017 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.