Determine if line intersects CGRect - graphics

What is the most efficient way to determine if a line intersects a rectangle?
I'm looking for something similar to this:
CGPoint startLine = CGPointMake(5.0f,5.0f);
CGPoint endLine = CGPointMake(25.0f,25.0f);
CGRect intersectingRect = CGRectMake(10.0f,10.0f,50.0f,50.0f);
if (CGRectContainsLine(intersectingRect,startLine,endLine)) { //true
//line intersects rectangle
}

There's nothing built in, but this ought to do it:
BOOL RectContainsLine(CGRect r, CGPoint lineStart, CGPoint lineEnd)
{
BOOL (^LineIntersectsLine)(CGPoint, CGPoint, CGPoint, CGPoint) = ^BOOL(CGPoint line1Start, CGPoint line1End, CGPoint line2Start, CGPoint line2End)
{
CGFloat q =
//Distance between the lines' starting rows times line2's horizontal length
(line1Start.y - line2Start.y) * (line2End.x - line2Start.x)
//Distance between the lines' starting columns times line2's vertical length
- (line1Start.x - line2Start.x) * (line2End.y - line2Start.y);
CGFloat d =
//Line 1's horizontal length times line 2's vertical length
(line1End.x - line1Start.x) * (line2End.y - line2Start.y)
//Line 1's vertical length times line 2's horizontal length
- (line1End.y - line1Start.y) * (line2End.x - line2Start.x);
if( d == 0 )
return NO;
CGFloat r = q / d;
q =
//Distance between the lines' starting rows times line 1's horizontal length
(line1Start.y - line2Start.y) * (line1End.x - line1Start.x)
//Distance between the lines' starting columns times line 1's vertical length
- (line1Start.x - line2Start.x) * (line1End.y - line1Start.y);
CGFloat s = q / d;
if( r < 0 || r > 1 || s < 0 || s > 1 )
return NO;
return YES;
};
/*Test whether the line intersects any of:
*- the bottom edge of the rectangle
*- the right edge of the rectangle
*- the top edge of the rectangle
*- the left edge of the rectangle
*- the interior of the rectangle (both points inside)
*/
return (LineIntersectsLine(lineStart, lineEnd, CGPointMake(r.origin.x, r.origin.y), CGPointMake(r.origin.x + r.size.width, r.origin.y)) ||
LineIntersectsLine(lineStart, lineEnd, CGPointMake(r.origin.x + r.size.width, r.origin.y), CGPointMake(r.origin.x + r.size.width, r.origin.y + r.size.height)) ||
LineIntersectsLine(lineStart, lineEnd, CGPointMake(r.origin.x + r.size.width, r.origin.y + r.size.height), CGPointMake(r.origin.x, r.origin.y + r.size.height)) ||
LineIntersectsLine(lineStart, lineEnd, CGPointMake(r.origin.x, r.origin.y + r.size.height), CGPointMake(r.origin.x, r.origin.y)) ||
(CGRectContainsPoint(r, lineStart) && CGRectContainsPoint(r, lineEnd)));
}
Trivially ported from this question: How to know if a line intersects a rectangle

For anyone using objective-c:
- (BOOL)rectContainsLine:(CGRect)rect startPoint:(CGPoint)lineStart endPoint:(CGPoint)lineEnd {
BOOL (^LineIntersectsLine)(CGPoint, CGPoint, CGPoint, CGPoint) = ^BOOL(CGPoint line1Start, CGPoint line1End, CGPoint line2Start, CGPoint line2End) {
CGFloat q =
//Distance between the lines' starting rows times line2's horizontal length
(line1Start.y - line2Start.y) * (line2End.x - line2Start.x)
//Distance between the lines' starting columns times line2's vertical length
- (line1Start.x - line2Start.x) * (line2End.y - line2Start.y);
CGFloat d =
//Line 1's horizontal length times line 2's vertical length
(line1End.x - line1Start.x) * (line2End.y - line2Start.y)
//Line 1's vertical length times line 2's horizontal length
- (line1End.y - line1Start.y) * (line2End.x - line2Start.x);
if( d == 0 )
return NO;
CGFloat r = q / d;
q =
//Distance between the lines' starting rows times line 1's horizontal length
(line1Start.y - line2Start.y) * (line1End.x - line1Start.x)
//Distance between the lines' starting columns times line 1's vertical length
- (line1Start.x - line2Start.x) * (line1End.y - line1Start.y);
CGFloat s = q / d;
if( r < 0 || r > 1 || s < 0 || s > 1 )
return NO;
return YES;
};
/*Test whether the line intersects any of:
*- the bottom edge of the rectangle
*- the right edge of the rectangle
*- the top edge of the rectangle
*- the left edge of the rectangle
*- the interior of the rectangle (both points inside)
*/
return (LineIntersectsLine(lineStart, lineEnd, CGPointMake(rect.origin.x, rect.origin.y), CGPointMake(rect.origin.x + rect.size.width, rect.origin.y)) ||
LineIntersectsLine(lineStart, lineEnd, CGPointMake(rect.origin.x + rect.size.width, rect.origin.y), CGPointMake(rect.origin.x + rect.size.width, rect.origin.y + rect.size.height)) ||
LineIntersectsLine(lineStart, lineEnd, CGPointMake(rect.origin.x + rect.size.width, rect.origin.y + rect.size.height), CGPointMake(rect.origin.x, rect.origin.y + rect.size.height)) ||
LineIntersectsLine(lineStart, lineEnd, CGPointMake(rect.origin.x, rect.origin.y + rect.size.height), CGPointMake(rect.origin.x, rect.origin.y)) ||
(CGRectContainsPoint(rect, lineStart) && CGRectContainsPoint(rect, lineEnd)));
}

Swift version:
extension CGRect {
private func lineIntersectsLine(_ line1Start: CGPoint, _ line1End: CGPoint, _ line2Start: CGPoint, _ line2End: CGPoint) -> Bool {
// Distance between the lines' starting rows times line2's horizontal length
var q = (line1Start.y - line2Start.y) * (line2End.x - line2Start.x)
//Distance between the lines' starting columns times line2's vertical length
- (line1Start.x - line2Start.x) * (line2End.y - line2Start.y)
let d =
//Line 1's horizontal length times line 2's vertical length
(line1End.x - line1Start.x) * (line2End.y - line2Start.y)
//Line 1's vertical length times line 2's horizontal length
- (line1End.y - line1Start.y) * (line2End.x - line2Start.x)
if d == 0 {
return false
}
let r = q / d
q =
//Distance between the lines' starting rows times line 1's horizontal length
(line1Start.y - line2Start.y) * (line1End.x - line1Start.x)
//Distance between the lines' starting columns times line 1's vertical length
- (line1Start.x - line2Start.x) * (line1End.y - line1Start.y);
let s = q / d
if r < 0 || r > 1 || s < 0 || s > 1 {
return false
}
return true
}
func instersectsLine(start lineStart: CGPoint, end lineEnd: CGPoint) -> Bool
{
/*Test whether the line intersects any of:
*- the bottom edge of the rectangle
*- the right edge of the rectangle
*- the top edge of the rectangle
*- the left edge of the rectangle
*- the interior of the rectangle (both points inside)
*/
return (lineIntersectsLine(lineStart, lineEnd, CGPoint(x:self.origin.x, y: self.origin.y), CGPoint(x: self.origin.x + self.size.width, y: self.origin.y)) ||
lineIntersectsLine(lineStart, lineEnd, CGPoint(x: self.origin.x + self.size.width, y: self.origin.y), CGPoint(x: self.origin.x + self.size.width, y: self.origin.y + self.size.height)) ||
lineIntersectsLine(lineStart, lineEnd, CGPoint(x: self.origin.x + self.size.width, y: self.origin.y + self.size.height), CGPoint(x: self.origin.x, y: self.origin.y + self.size.height)) ||
lineIntersectsLine(lineStart, lineEnd, CGPoint(x: self.origin.x, y: self.origin.y + self.size.height), CGPoint(x: self.origin.x, y: self.origin.y)) ||
(contains(lineStart) && contains(lineEnd)))
}
}

Related

How to draw the scale meter/ ruler for the 3D model in WebGL

I want to draw a fixed horizontal line (or a ruler) that gives info about size/distance or zooming factor like the one in Google Maps (see here).
Here is the another example with different zoom levels and camera used is orthographic
I try to implement the same with perspective camera but I would not able do it correctly
Below is the result I am getting with perspective camera
The logic that i am using to draw the ruler is
var rect = myCanvas.getBoundingClientRect();
var canvasWidth = rect.right - rect.left;
var canvasHeight = rect.bottom - rect.top;
var Canvas2D_ctx = myCanvas.getContext("2d");
// logic to calculate the rulerwidth
var distance = getDistance(camera.position, model.center);
canvasWidth > canvasHeight && (distance *= canvasWidth / canvasHeight);
var a = 1 / 3 * distance,
l = Math.log(a) / Math.LN10,
l = Math.pow(10, Math.floor(l)),
a = Math.floor(a / l) * l;
var rulerWidth = a / h;
var text = 1E5 <= a ? a.toExponential(3) : 1E3 <= a ? a.toFixed(0) : 100 <= a ? a.toFixed(1) : 10 <= a ? a.toFixed(2) : 1 <= a ? a.toFixed(3) : .01 <= a ? a.toFixed(4) : a.toExponential(3);
Canvas2D_ctx.lineCap = "round";
Canvas2D_ctx.textBaseline = "middle";
Canvas2D_ctx.textAlign = "start";
Canvas2D_ctx.font = "12px Sans-Serif";
Canvas2D_ctx.strokeStyle = 'rgba(255, 0, 0, 1)';
Canvas2D_ctx.lineWidth = 0;
var m = canvasWidth * 0.01;
var n = canvasHeight - 50;
Canvas2D_ctx.beginPath();
Canvas2D_ctx.moveTo(m, n);
n += 12;
Canvas2D_ctx.lineTo(m, n);
m += canvasWidth * rulerWidth;
Canvas2D_ctx.lineTo(m, n);
n -= 12;
Canvas2D_ctx.lineTo(m, n);
Canvas2D_ctx.stroke();
Canvas2D_ctx.fillStyle = 'rgba(255, 0, 0, 1)';
Canvas2D_ctx.fillText(text + " ( m )", (m) /2 , n + 6)
Can any one help me ( logic to calculate the ruler Width) in fixing this issue and to render the scale meter / ruler correctly for both perspective and orthographic camera.

How to draw this circle instead of Bresenham's Circle Algorithm

int main()
{
const auto console = ::GetConsoleWindow();
const auto context = ::GetDC(console);
constexpr auto red = RGB(255, 0, 0);
constexpr auto yellow = RGB(255, 255, 0);
RECT rectClient, rectWindow;
GetClientRect(console, &rectClient);
GetWindowRect(console, &rectWindow);
int posx, posy;
posx = GetSystemMetrics(SM_CXSCREEN) / 2 - (rectWindow.right - rectWindow.left) / 2;
posy = GetSystemMetrics(SM_CYSCREEN) / 2 - (rectWindow.bottom - rectWindow.top) / 2;
const int radius = 150;
for (int y = -radius; y <= radius; y++)
for (int x = -radius; x <= radius; x++)
if (x * x + y * y <= radius * radius)
SetPixel(context, posx + x, posy + y, red);
}
It gives me this result img
it looks good but i saw this weird pixels at sides (up, down, right, left)
img
and this is what I want (I added some pixels at the top so it looks better)
enter image description here
Your "what I want" looks anti-aliased. So draw anti-aliased.
If the original condition is not met, but x*x + y*y <= (radius+1)*(radius+1) is met then you need a partially-shaded pixel.
Another way to do anti-aliasing is to test not the center of each pixel but the four corners (x \plusminus 0.5, y \plusminus 0.5). If more than zero but fewer than four corners are inside the circle, you need a partially-shaded pixel.

How to center this grid of squares?

I am trying to simply produce a grid of 5 rotated rectangles. But the grid will not come out centered. Can anyone help me out?
int margin = 150; //padding to sides and top/bottom
int rectH = 60; // height of rectangle
int rectW = 20; // width of rectangle
int n_rectangles = 5; // 5 rectangles to draw
size(800,800);
for (int x = margin+rectW; x <= width - margin; x += (width-2*(margin+rectW))/n_rectangles) {
for (int y = margin+rectH; y <= height - margin; y += (height-2*(margin+rectH))/n_rectangles) {
fill(255);
//now rotate matrix 45 degrees
pushMatrix();
translate(x, y);
rotate(radians(45));
// draw rectangle at x,y point
rect(0, 0, rectW, rectH);
popMatrix();
}
}
I recommend to draw single "centered" rectangles, the origin of the rectangle is (-rectW/2, -rectH/2):
rect(-rectW/2, -rectH/2, rectW, rectH);
Calculate the distance of the first rectangle center tor the last rectangle center, for row and column:
int size_x = margin * (n_rectangles-1);
int size_y = margin * (n_rectangles-1);
Translate to the center of the screen (width/2, height/2),
to the position of the upper left rectangle (-size_x/2, -size_y/2)
and finally each rectangle to its position (i*margin, j*margin):
translate(width/2 - size_x/2 + i*margin, height/2 - size_y/2 + j*margin);
See the final code:
int margin = 150; //padding to sides and top/bottom
int rectH = 60; // height of rectangle
int rectW = 20; // width of rectangle
int n_rectangles = 5; // 5 rectangles to draw
size(800,800);
int size_x = margin * (n_rectangles-1);
int size_y = margin * (n_rectangles-1);
for (int i = 0; i < n_rectangles; ++i ) {
for (int j = 0; j < n_rectangles; ++j ) {
fill(255);
pushMatrix();
translate(width/2 - size_x/2 + i*margin, height/2 -size_y/2 + j*margin);
rotate(radians(45));
rect(-rectW/2, -rectH/2, rectW, rectH);
popMatrix();
}
}

Circle Rasterization Algorithm - center between pixels

I have a problem where I have to select all squares (think pixels) that are partially within a circle (even if the circle only cuts through a small corner of the square, but not if it goes through one of the corner vertices). The radius is an integer multiple of the pixel size.
The problem is that the center of the circle is between pixels, i.e. on the corner vertices of four pixels.
I want to visit each pixel only once.
For example, I would like to select all white pixels in the following images:
R = 8 px
R = 10 px
For a circle with the center in the center of a pixel, this wouldn't be a problem, and I could use the usual form of the Bresenham algorithm:
public void checkCircle(int x0, int y0, int radius) {
int x = radius;
int y = 0;
int err = -x;
while (x > 0) {
while (err <= 0) {
y++;
err += 2 * y + 1;
}
checkVLine(x0 + x, y0 - y, y0 + y);
checkVLine(x0 - x, y0 - y, y0 + y);
x--;
err -= 2 * x + 1;
}
checkVLine(x0, y0 - radius, y0 + radius);
}
public void checkVLine(int x, int y0, int y1) {
assert(y0 <= y1);
for (int y = y0; y <= y1; y++)
checkPixel(x, y);
}
Sadly, I don't see how to adapt it to support inter-pixel circles.
For the first quadrant - cell should be marked if its left bottom corner lies inside circle, so you can rasterize with simple loops
for dy = 0 to R-1
dx = 0
sq = R * R - dy * dy
while dx * dx < sq
mark (dx, dy)
mark (dx, -dy-1)
mark (-dx-1, dy)
mark (-dx-1, -dy-1)
To fill whole horizontal lines, you can calculate max value for dx
for dy = 0 to R-1
mdx = Floor(Sqrt(R * R - dy * dy))
fill line (-mdx-1,dy)-(mdx,dy)
fill line (-mdx-1,-dy-1)-(mdx,-dy-1)

Geometry Arc Algorithm

I searched all internet and didn't find any pseudo code that solved this problem,
I want to find an Arc between two points, A and B, using 5 arguments:
Start Point
End Point
Radius (Don't know if this is needed)
Angle
Quality
Example:
StartPoint = The green point on the left is the Start Point set on the arguments
EndPoint = The green point on the right is the End Point set on the arguments
Angle = Angle of the Arc(Semi Circle)
Quality = How many red circles to create
I would like to have a pseudo code to solve this problem
Thanks in advance :D
Let start point is P0, end point P1, angle Fi. R is not needed
At first find arc center. Get middle of P0-P1 segment.
M = (P0 + P1) / 2
// M.x = (P0.x + P1.x) / 2 , same for y
And direction vector
D = (P1 - P0) / 2
Get length of D
lenD = Math.Hypot(D.x, D.y) //Vector.Length, sqrt of sum of squares
Get unit vector
uD = D / lenD
Get (left) perpendicular vector
(P.x, P.y) = (-uD.y, ud.x)
Now circle center
if F = Pi then
C.x = M.x
C.y = M.y
else
C.x = M.x + P.x * Len / Tan(Fi/2)
C.y = M.y + P.y * Len / Tan(Fi/2)
Vector from center to start point:
CP0.x = P0.x - C.x
CP0.y = P0.y - C.y
Then you can calculate coordinates of N intermediate points at the arc using rotation of vector CP0 around center point
an = i * Fi / (NSeg + 1);
X[i] = C.x + CP0.x * Cos(an) - CP0.y * Sin(an)
Y[i] = C.y + CP0.x * Sin(an) + CP0.y * Cos(an)
Working Delphi code
procedure ArcByStartEndAngle(P0, P1: TPoint; Angle: Double; NSeg: Integer);
var
i: Integer;
len, dx, dy, mx, my, px, py, t, cx, cy, p0x, p0y, an: Double;
xx, yy: Integer;
begin
mx := (P0.x + P1.x) / 2;
my := (P0.y + P1.y) / 2;
dx := (P1.x - P0.x) / 2;
dy := (P1.y - P0.y) / 2;
len := Math.Hypot(dx, dy);
px := -dy / len;
py := dx / len;
if Angle = Pi then
t := 0
else
t := len / Math.Tan(Angle / 2);
cx := mx + px * t;
cy := my + py * t;
p0x := P0.x - cx;
p0y := P0.y - cy;
for i := 0 to NSeg + 1 do begin
an := i * Angle / (NSeg + 1);
xx := Round(cx + p0x * Cos(an) - p0y * Sin(an));
yy := Round(cy + p0x * Sin(an) + p0y * Cos(an));
Canvas.Ellipse(xx - 3, yy - 3, xx + 4, yy + 4);
end;
end;
Result for (Point(100, 0), Point(0, 100), Pi / 2, 8 (Y-axis down at the picture)

Resources