Finding points on a rectangle at a given angle

I'm trying to draw a gradient in a rectangle object, with a given angle (Theta), where the ends of the gradient are touching the perimeter of the rectangle.

I thought that using tangent would work, but I'm having trouble getting the kinks out. Is there an easy algorithm that I am just missing?

End Result

So, this is going to be a function of (angle, RectX1, RectX2, RectY1, RectY2). I want it returned in the form of [x1, x2, y1, y2], so that the gradient will draw across the square. In my problem, if the origin is 0, then x2 = -x1 and y2 = -y1. But it's not always going to be on the origin.


Let's call a and b your rectangle sides, and (x0,y0) the coordinates of your rectangle center.

You have four regions to consider:

    Region    from               to                 Where
    ====================================================================
       1      -arctan(b/a)       +arctan(b/a)       Right green triangle
       2      +arctan(b/a)        π-arctan(b/a)     Upper yellow triangle
       3       π-arctan(b/a)      π+arctan(b/a)     Left green triangle
       4       π+arctan(b/a)     -arctan(b/a)       Lower yellow triangle

With a little of trigonometry-fu, we can get the coordinates for your desired intersection in each region.

So Z0 is the expression for the intersection point for regions 1 and 3 And Z1 is the expression for the intersection point for regions 2 and 4

The desired lines pass from (X0,Y0) to Z0 or Z1 depending the region. So remembering that Tan(φ)=Sin(φ)/Cos(φ)


    Lines in regions      Start                   End
    ======================================================================
       1 and 3           (X0,Y0)      (X0 + a/2 , (a/2 * Tan(φ))+ Y0
       2 and 4           (X0,Y0)      (X0 + b/(2* Tan(φ)) , b/2 + Y0)

Just be aware of the signs of Tan(φ) in each quadrant, and that the angle is always measured from THE POSITIVE x axis ANTICLOCKWISE.

HTH!

Find a new point on a rectangle given an angle from the center , A quadrilateral where all interior angles are 90°, and whose location on the It will remain a rectangle and its dimensions calculated from its coordinates. You can Recall that we can find the distance between any two points if we know their  The Rectangle is inclined at a certain angle with the axes The first two cases are trivial and can easily be solved using basic geometry. For the third case we need to apply some mathematical concepts to find the points.


Ok, whew!, I finally got this one.

NOTE: I based this off of belisarius's awesome answer. If you like this, please like his, too. All I did was turn what he said into code.

Here's what it looks like in Objective-C. It should be simple enough to convert to whatever your favorite language is.

+ (CGPoint) edgeOfView: (UIView*) view atAngle: (float) theta
{
    // Move theta to range -M_PI .. M_PI
    const double twoPI = M_PI * 2.;
    while (theta < -M_PI)
    {
        theta += twoPI;
    }

    while (theta > M_PI)
    {
        theta -= twoPI;
    }

    // find edge ofview
    // Ref: http://stackoverflow.com/questions/4061576/finding-points-on-a-rectangle-at-a-given-angle
    float aa = view.bounds.size.width;                                          // "a" in the diagram
    float bb = view.bounds.size.height;                                         // "b"

    // Find our region (diagram)
    float rectAtan = atan2f(bb, aa);
    float tanTheta = tan(theta);

    int region;
    if ((theta > -rectAtan)
    &&  (theta <= rectAtan) )
    {
        region = 1;
    }
    else if ((theta >  rectAtan)
    &&       (theta <= (M_PI - rectAtan)) )
    {
        region = 2;
    }
    else if ((theta >   (M_PI - rectAtan))
    ||       (theta <= -(M_PI - rectAtan)) )
    {
        region = 3;
    }
    else
    {
        region = 4;
    }

    CGPoint edgePoint = view.center;
    float xFactor = 1;
    float yFactor = 1;

    switch (region)
    {
        case 1: yFactor = -1;       break;
        case 2: yFactor = -1;       break;
        case 3: xFactor = -1;       break;
        case 4: xFactor = -1;       break;
    }

    if ((region == 1)
    ||  (region == 3) )
    {
        edgePoint.x += xFactor * (aa / 2.);                                     // "Z0"
        edgePoint.y += yFactor * (aa / 2.) * tanTheta;
    }
    else                                                                        // region 2 or 4
    {
        edgePoint.x += xFactor * (bb / (2. * tanTheta));                        // "Z1"
        edgePoint.y += yFactor * (bb /  2.);
    }

    return edgePoint;
}

In addition, here's a little test-view I created to verify that it works. Create this view and put it somewhere, it will make another little view scoot around the edge.

@interface DebugEdgeView()
{
    int degrees;
    UIView *dotView;
    NSTimer *timer;
}

@end

@implementation DebugEdgeView

- (void) dealloc
{
    [timer invalidate];
}


- (id) initWithFrame: (CGRect) frame
{
    self = [super initWithFrame: frame];
    if (self)
    {
        self.backgroundColor = [[UIColor magentaColor] colorWithAlphaComponent: 0.25];
        degrees = 0;
        self.clipsToBounds = NO;

        // create subview dot
        CGRect dotRect = CGRectMake(frame.size.width / 2., frame.size.height / 2., 20, 20);
        dotView = [[DotView alloc] initWithFrame: dotRect];
        dotView.backgroundColor = [UIColor magentaColor];
        [self addSubview: dotView];

        // move it around our edges
        timer = [NSTimer scheduledTimerWithTimeInterval: (5. / 360.)
                                                 target: self
                                               selector: @selector(timerFired:)
                                               userInfo: nil
                                                repeats: YES];
    }

    return self;
}


- (void) timerFired: (NSTimer*) timer
{
    float radians = ++degrees * M_PI / 180.;
    if (degrees > 360)
    {
        degrees -= 360;
    }

    dispatch_async(dispatch_get_main_queue(), ^{
        CGPoint edgePoint = [MFUtils edgeOfView: self atAngle: radians];
        edgePoint.x += (self.bounds.size.width  / 2.) - self.center.x;
        edgePoint.y += (self.bounds.size.height / 2.) - self.center.y;
        dotView.center = edgePoint;
    });
}

@end

What is Rectangle? - [Definition, Facts & Example], So I know the centre and I know an arbitrary angle from a controller for example. I cannot figure out the next step on how to reach the Red Circle  Finding length of MO. Since the diagonals of a rectangle are congruent MO = 26. Finding length of MZ. To find MZ, you must remember that the diagonals of a parallelogram bisect each other.(Remember a rectangle is a type of parallelogram so rectangles get all of the parallelogram properties)


Javascript version:

function edgeOfView(rect, deg) {
  var twoPI = Math.PI*2;
  var theta = deg * Math.PI / 180;
  
  while (theta < -Math.PI) {
    theta += twoPI;
  }
  
  while (theta > Math.PI) {
    theta -= twoPI;
  }
  
  var rectAtan = Math.atan2(rect.height, rect.width);
  var tanTheta = Math.tan(theta);
  var region;
  
  if ((theta > -rectAtan) && (theta <= rectAtan)) {
      region = 1;
  } else if ((theta > rectAtan) && (theta <= (Math.PI - rectAtan))) {
      region = 2;
  } else if ((theta > (Math.PI - rectAtan)) || (theta <= -(Math.PI - rectAtan))) {
      region = 3;
  } else {
      region = 4;
  }
  
  var edgePoint = {x: rect.width/2, y: rect.height/2};
  var xFactor = 1;
  var yFactor = 1;
  
  switch (region) {
    case 1: yFactor = -1; break;
    case 2: yFactor = -1; break;
    case 3: xFactor = -1; break;
    case 4: xFactor = -1; break;
  }
  
  if ((region === 1) || (region === 3)) {
    edgePoint.x += xFactor * (rect.width / 2.);                                     // "Z0"
    edgePoint.y += yFactor * (rect.width / 2.) * tanTheta;
  } else {
    edgePoint.x += xFactor * (rect.height / (2. * tanTheta));                        // "Z1"
    edgePoint.y += yFactor * (rect.height /  2.);
  }
  
  return edgePoint;
};

Rectangle and its properties. (Coordinate Geometry), Prove or disprove that a figure defined by four given points in the coordinate plane is a rectangle. For these all vertices are right angles; opposite sides are congruent. Example 1 Let's calculate the slopes of DA and DC to find out. Given length/width and angle: d = w / sin(α/2) or d = l / cos(α/2), Given area and perimeter: d = √(P² - 2*A), Given area and angle: d = √(2 * A / sin(α)), Given perimeter and angle: d = P / (2*sin(α/2) + 2*cos(α/2)), Given circumcircle radius: d = 2 * r. Note: The angle α between diagonals is in the front of the length like in the first figure. Also, remember that the diagonal of a rectangle calculator assumes that the length is longer than the width!


Following your picture, I'm going to assume that the rectangle is centered at (0,0), and that the upper right corner is (w,h). Then the line connecting (0,0) to (w,h) forms an angle φ with the X axis, where tan(φ) = h/w.

Assuming that θ > φ, we are looking for the point (x,y) where the line that you have drawn intersects the top edge of the rectangle. Then y/x = tan(θ). We know that y=h so, solving for x, we get x = h/tan(θ).

If θ < φ, the line intersects with the right edge of the rectangle at (x,y). This time, we know that x=w, so y = tan(θ)*w.

Finding Point on a Bounds (2D Rectangle) using its Centre and an , Finding Angles in a Rectangle. Jacqueline Phillips. Loading Unsubscribe from Jacqueline Duration: 2:51 Posted: Nov 6, 2015 This problem is already discussed in a previous post.In this post we have discussed a new approach. Approach: The above problem can be solved by observation. A point lies inside or not the rectangle if and only if it’s x-coordinate lies between the x-coordinate of the given bottom-right and top-left coordinates of the rectangle and y-coordinate lies between the y-coordinate of the given


There's a good (more programmatic iOS / Objective-C) answer to this question at Find the CGPoint on a UIView rectangle intersected by a straight line at a given angle from the center point involving the following steps:

  1. Assume that the angle is greater than or equal to 0 and less than 2*π, going counterclockwise from 0 (East).
  2. Get the y coordinate of the intersection with the right edge of the rectangle [tan(angle)*width/2].
  3. Check whether this y coordinate is in the rectangle frame (absolute value less than or equal to half the height).
  4. If the y intersection is in the rectangle, then if the angle is less than π/2 or greater than 3π/2 choose the right edge (width/2, -y coord). Otherwise choose the left edge (-width/2, y coord).
  5. If the y coordinate of the right edge intersection was out-of-bounds, calculate the x coordinate of the intersection with the bottom edge [half the height/tan(angle)].
  6. Next determine whether you want the top edge or the bottom edge. If the angle is less than π, we want the bottom edge (x, -half the height). Otherwise, we want the top edge (-x coord, half the height).
  7. Then (if the center of the frame is not 0,0), offset the point by the actual center of the frame.

Are 4 given points a rectangle - Mr. Rose's Site, Given three of the vertices of a rectangle, can you find the fourth?Duration: 2:41 Posted: Sep 26, 2016 If this quadrilateral is a rectangle (all four angles are 90 degrees), then it can be solved. (if it could be any quadrilateral, then it is not solvable) if the points are (x1,y1), and (x2, y2), and if the two points are not perfectly vertical (x1 = x2) or horizontal (y1 = y2), then the slope of one edge of the rectangle is. m1 = (y2-y1) / (x2-x1)


Finding Angles in a Rectangle, Given two arrays X[] and Y[] with n-elements, where (Xi, Yi) represent a point on coordinate system, find the smallest rectangle such that all points from given  Given (1) A point inside an axis aligned rectangle and (2) An angle, find where a line drawn from that point at the specified angle will intersect the edge of the rectangle. The Solution I linked to works where the point is in the center of the rectangle. I need it to work for any point in the rectangle.


Coordinates of a missing vertex (video), The sides and angles of a rectangle: Lines: Finding a Slope With Just Two Points  The sides and angles of a rectangle: Opposite sides of a rectangle are the same length (congruent). The angles of a rectangle are all congruent (the same size and measure.) Remember that a 90 degree angle is called a "right angle." So, a rectangle has four right angles. Opposite angles of a rectangle are congruent.


Coordinates of rectangle with given points lie inside, When you draw a rectangle, you can select two points in the viewport or on a draw a rectangle; for example, to find the midpoint of a side of a rectangle. You can also draw a rectangle at a specific angle to the X-axis using the Slant option. Free Rectangle Width & Length Calculator - calculate width & length of a rectangle step by step This website uses cookies to ensure you get the best experience. By using this website, you agree to our Cookie Policy.