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.
4
-
1$\begingroup$ To be clear—is your question how to compute the coordinates of the intersection box without an if statement? $\endgroup$– Nathan ReedAug 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 WolfeAug 5, 2017 at 0:21
-
$\begingroup$ Yes, how to compute (/find) the coordinates. $\endgroup$– ebcodeAug 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$– ebcodeAug 6, 2017 at 9:27
Add a comment
|
1 Answer
$\begingroup$
$\endgroup$
4
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, andrightare references;topjust references whatever one of the two is higher, andbottomthe lower one.leftreferences whatever one is to the left, andrightthe one to the right. So, for instance,topcould be rectangle A, andrightcould be rectangle A also. I'll edit the answer to clarify about the coordinates. $\endgroup$– clabe45Aug 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$– ebcodeAug 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$ Aug 7, 2017 at 15:47