So, I have an interesting problem that I’d love to get solved by tomorrow afternoon, but trying to cram Trigonometry 101 into an evening where I’m not feeling that well doesn’t seem to be feasible. So, I figured I’d ask the Interweb Tubes in hopes that one of my readers likes math.
Here’s the scenario. The application I’m working on has a user who needs to draw a rectangle of a known width, but not length nor angle. The user draws a line by clicking and dragging. The first point (P1) is where they clicked, the 2nd point (P2) is where they released. I need to take those two points and extrapolate the corners of a rectangle of a known width at the same angle as such
Because of the object I have to work with, I have to manually draw the rectangle by drawing a line between RP1 -> RP2 ->RP3 ->Rp4, then back to RP1. But I have to figure out what those are. And Maffs are hard.
Any help?
Update- Found what I was looking for thanks to some coworkers who apparently don’t realize you’re supposed to not be working at 8:30PM like I am.
Given two points, start and end, this works pretty well so far. There’s a *bit* of skewing at the ends and 45° seems to make the line disappear,but I think I can get around that.
var V = new Vector(end.X - start.X, end.Y - start.Y);
var P = new Vector(V.Y, V.X);
var Length = Math.Sqrt(P.X * P.X + P.Y * P.Y);
var N = new Vector();
N.X = P.X / Length;
N.Y = P.Y / Length;this.p1 = new Point(start.X + N.X * lineWidth / 2, start.Y + N.Y * lineWidth / 2);
this.p2 = new Point(start.X - N.X * lineWidth / 2, start.Y - N.Y * lineWidth / 2);
this.p3 = new Point(end.X + N.X * lineWidth / 2, end.Y + N.Y * lineWidth / 2);
this.p4 = new Point(end.X - N.X * lineWidth / 2, end.Y - N.Y * lineWidth / 2);
Comments
Then you get:
RP1x = P1x + (w/2)*cos(rho)
RP1y = P1y + (w/2)*sin(rho)
RP2x = P1x - (w/2)*cos(rho)
RP2y = P1y - (w/2)*sin(rho)
RP3x = P2x - (w/2)*cos(rho)
RP3y = P2y - (w/2)*sin(rho)
RP3x = P2x + (w/2)*cos(rho)
RP3y = P2y + (w/2)*sin(rho)
Where w is the line width. I think this should work irrespective of the angle the line is drawn, but trig angles can get tricky. Hope this helps.
Anyway, glad solutions were found!
Most drawing libraries have built in functions for this sort of thing... :)
This might be easier in polar coordinates. Basically you have two points, p1 and p2 which describe an angle. Think of P1 and P2 as describing the hypotenuse of a right triangle, with P1 at the origin of a Cartesian graph. There's an implicit angle between P1->P2 and the x-axes, which determines the slope of that hypotenuse.
That angle will be your theta (t) for the polar coordinates. Depending on what language you're working in, there should already be a method that calculates this theta. An example would be Java's Math.atan2(x,y). Note this method returns Radians and it's pretty common to use Radians for theta. There are 2*pi Radians in a full circle.
The distance between p1 and p2 will be your R coordinate. You can find this with the Pythagorean theorem, in this case,
sqrt(abs(P2.x-P1.x)+abs(P2.y-P1.y))
So now we have polar coordinates (r,t) from P1 to P2. This is where polar coordinates come in handy.
RP1 and RP2 will be (width/2, t+(pi/2)) and (width/2, t-(pi/2)) in polar coordinates.
So now you have polar coordinates for your RP1 and RP2. You can convert that back to Cartesian coordinates:
x = r*cos(t)
y = r*sin(t)
Again, depending on what language you're working in, check your math libraries for sin and cos functions.
This will give you the Cartesian coordinates of RP1 and RP2, you already had the Cartesian coordinates of P1, so that allows you to calculate offsets and apply those relative to P2 to get RP3 and RP4.
Alternately you could just redo these calculations with P2 as the origin instead of P1.
I hope this helps! Best of luck!
Check your spam filter.
Otherwise, it's not perpendicular. v(1,1) is perpendicular to v(1,-1), not to itself. That might be the cause of some of the weirdness you're seeing around 45°.
Let W = width of your line ( blue line )
1) rp1.x == p1.x - (W sin(theta) / 2)
2) rp1.y == p1.y + (W cos(theta) / 2)
3) rp2.x == p1.x + (W sin(theta) / 2)
4) rp2.y == p1.y - (W cos(theta) / 2)
5) rp3 => same as rp2 replacing p1 with p2
6) rp4 => same as rp1 replacing p1 with p2
7) theta == arctan( (p2.x - p1.x)/(p2.y - p1.y) )
Little rusty but should work. If using screen points (0,0) is upper left, reverse the signs on the y calculations and check for negative values.