Draw an equilateral triangle, given the center

Question

How to draw an equilateral triangle defined by the center as cx and cy and the radius of the centroid circle?

And how do I find if a point is in a triangle or not?

PS: I am building it for android , but this question is an agnostic of the language.

Answer 1

For your first question

Point C in the diagram above is simple, simple (cx, cy + r).

I can imagine two fairly simple ways to get points a and b:

First method . Pretend that (cx, cy) is the beginning and rotates point C 60 degrees and 120 degrees to get a and b. This can be done using the formula:

• bx = cx * cos (120 degrees) - (cy * sin (120 degrees))
• by = cx * sin (120 degrees) + (cy * cos (120 degrees))
• ax = cx * cos (240 degrees) - (cy * sin (240 degrees))
• ay = cx * sin (240 degrees) + (cy * cos (240 degrees))

Also view this wikipedia article .

The second method : draw a line that runs through (cx, cy) and has a tilt angle of -30 degrees. Where this line intersects the circle, there will be point b. The circle is defined by the equation:

  ( x - cx )^2 + ( y - cy )^2 = r^2 

(note that there will be two intersection points, so choose the right one).

Then do the same with the positive border of the angle of 30 degrees through (cx, cy) to get the point a.

Your lines will have slopes: 1 / sqrt (3) and -1 / sqrt (3)

For your second question

Once you have points A, B and C that form an equilateral triangle, one of the quickest and easiest ways to determine if a point (x, y) is in a triangle is based on cross product and vectors.

Basically, look if (x, y) is to the left of the “vector” A-> B. Then look if it is to the left of B-> C. Then check if it is to the left of C-> A.

The following method, mentioned in here , allows you to check if the point is to the left of the vector.

 public bool isLeft(Point A, Point B, Point C){ return ((Bx - Ax)*(Cy - Ay) - (By - Ay)*( Cx - Ax)) > 0; } 

In the method A = line point1, b = line point2 and c = point to check.

Answer 2

At this point, I can only answer your second question. Just do a point intersection test at a point if you saved the points that define your triangle. You can find many relative algorithms in computer graphics books.

Change I thought of a methodology to solve your main problem (find 3 points that define an equilateral triangle with cx, cy and radius as given data). He relies on the property that the sum of the three angles of any triangle is 180 degrees. I need some time to do one more check to make sure it is correct. Then I will edit my answer to post it.

Process the full answer . The implementation of this algorithmic sketch is based on the programming language and graphic API of your choice:

• Translate the center of the 2D coordinate system (suppose clockwise) to the center of the circle of centroids.
• Save 2 points that define 2 segments of the straight line, as well as the center of the circle. Combining these segments can give you the diameter of a circle. Both segments have a center circle as their defining point. The remaining 2 defining points (which you need to save) are on the circumference of the circle (use the radius of the length of the circle to find them).
• Rotate 2 points around the circle 60 degrees, one of them clockwise and the other counterclockwise. Save their new coordinates. Draw a line that connects them. You have 2 of 3 triangular vertices.
• Do a reverse translation of the center of the coordinate system.
• The remaining vertex of the triangle is the intersection point of the radius of the circle and two segments of the line, each of which begins with the corresponding known vertex of the triangle.
• Finally, save the vertices and draw a triangle.

Hope this helps. I will try to add some pictures to clarify a few steps of this methodology. In addition, I will program and test these steps to ensure that your problem works properly.

Answer 3

I needed to draw an equilateral triangle using SVG and Javascript ...

I tried to answer Xantix the first question in order to build an equilateral triangle defined by the center point (cx, cy) and the radius of the circle (r), which, as indicated, easily solves the coordinates for the point C (cx, cy + r).

However, I could not understand how to obtain the equations of rotation for solving both coordinates for points A and B, so my solution is this.

Math time - solve for x

Suppose cx = 9, cy = 9, r = 6 and a horizontal base.

First find the length of the sides of the triangle (a, b, c):

 9r^2 = a^2 + b^2 + c^2 r^2 = 36, 9r^2 = 324, 324/3 = 108, sqrt(432) = 10.39 

Once we know the length of each side of the triangle (s = 10.39), we can calculate for the x coordinates. Add s / 2 (5.2) to cx for Bx (14.2) and subtract s / 2 from cx for Ax (3.8).

x now requires y

Speaking of s / 2, if we divide the triangle in half vertically (from point C to the middle between points A and B), we can solve for y (ultimately giving us Ay and By):

 a^2 + b^2 = c^2 a^2 + 27.04 (1/2 s squared) = 107.95 (length s squared) a^2 = 80.91 sqrt(80.91) = 8.99 

Subtracting this y from cy + r (15 - 8.99 = 6.01) gives us a new graph of y for both points A and B.

 Center ( 9.00, 9.00) C ( 9.00,15.00) B (14.20, 6.01) A ( 3.80, 6.01) 

Conclusion

As soon as we know the length of the sides of the equivariant triangle, we can calculate the coordinates of the point given by the center point, the radius of the circle, and the horizontal base.

Answer 4

These are my triangle drawing methods in java (android):

 mA = new PointD(); mB = new PointD(); mC = new PointD(); mCos120 = Math.cos(AppHelper.toRadians(120)); mSin120 = Math.sin(AppHelper.toRadians(120)); mCos240 = Math.cos(AppHelper.toRadians(240)); mSin240 = Math.sin(AppHelper.toRadians(240)); double r = 30; // this is distance from the center to one of triangle point. mA.set(0 + r, 0); mB.x = mA.x * mCos120 - mA.y * mSin120; mB.y = mA.x * mSin120 + mA.y * mCos120; mC.x = mA.x * mCos240 - mA.y * mSin240; mC.y = mA.x * mSin240 + mA.y * mCos240; mA = AppHelper.toScreenCoordinates(mCenterPoint, mA); mB = AppHelper.toScreenCoordinates(mCenterPoint, mB); mC = AppHelper.toScreenCoordinates(mCenterPoint, mC); mPlayPath.reset(); mPlayPath.moveTo(mA.getX(), mA.getY()); mPlayPath.lineTo(mB.getX(), mB.getY()); mPlayPath.lineTo(mC.getX(), mC.getY()); mPlayPath.lineTo(mA.getX(), mA.getY()); mPlayPath.close(); public static PointD toScreenCoordinates(PointD center, PointD point) { return new PointD(point.x + center.x, center.y - point.y); } 

Where PointD is similar to PointF, but with a double type.

Answer 5

For any lazy (like me) who just wants coordinates for an equilateral triangle on a unit circle:

 A: (-0.866, -0.5) B: (0.866, -0.5) C: (0.0, 1.0) 

For a different position and / or radius, multiply all values ​​by r , then add cx to the x and cy coordinates to y s.