Draw a equilateral triangle given the center

Question

How do I draw an equilateral triangle given the center as cx and cy and the radius of the centroid circle ?

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

PS: I am building this for android , but this question is language agnostic.

Answer 1

Here's my Python implementation, hope it helps:

def construct_eq_triangle(centroid, radius):
    side_length = radius * math.sqrt(3)
    # Calculate three vertices of the triangle
    a = [centroid[0], centroid[1] + (math.sqrt(3) / 3) * side_length]  # Top vertex
    b = [centroid[0] - (side_length / 2), centroid[1] - (math.sqrt(3) / 6) * side_length]  # Bottom left vertex
    c = [centroid[0] + (side_length / 2), centroid[1] - (math.sqrt(3) / 6) * side_length]  # Bottom right vertex

    return a, b, c

You can substitute side_length with any arbitrary value, also centroid could be a tuple or a list with 2 elements, with the first one being the x and the second being y.

Answer 2

For anyone lazy (like me) who just wants coordinates for an equilateral triangle on the 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 coordinates and cy to the ys.

Answer 3

This is my methods for drawing triangle on 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's 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 double type.

Answer 4

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

I attempted Xantix's answer to the first question in order to plot an equilateral triangle given a center point (cx,cy) and radius of the circumcircle (r), which as was pointed out, easily solves coordinates for point C (cx, cy + r).

However, I could not figure out how to get the rotational equations to solve either coordinates for points A & B, so my solution is as follows.

Math time - solve for x

Assume 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 x coordinates. Add s/2 (5.2) to cx for Bx (14.2), and subtract s/2 from cx for Ax (3.8).

x solved now need y

Speaking of s/2, if we split the triangle in half vertically (from point C to midpoint between points A & 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

Subtract this y value from cy + r (15 - 8.99 = 6.01) gives us our new y plot 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

Once we know the length of the sides of an equilaterial triangle, it's possible to calculate the point coordinates given a center point, circumcircle radius, and a horizontal base.

Answer 5

For your first question

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

I can think of two fairly easy ways to get the points a and b:

First Method: Pretend that (cx,cy) is the origin and rotate point C by 60 degrees and by 120 degrees in order get a and b. This can be accomplished with the formula:

• b.x = c.x * cos( 120 degrees ) - ( c.y * sin( 120 degrees ) )
• b.y = c.x * sin( 120 degrees ) + ( c.y * cos( 120 degrees ) )
• a.x = c.x * cos( 240 degrees ) - ( c.y * sin( 240 degrees ) )
• a.y = c.x * sin( 240 degrees ) + ( c.y * cos( 240 degrees ) )

Also take a look at this article on wikipedia.

Second Method: draw a line which passes through (c.x, c.y) and has a -30 degree slope. Where that line intersects with the circle will be point b. The circle is defined by the equation:

 ( x - c.x )^2 + ( y - c.y )^2 = r^2 

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

Then do the same with a positive 30 degree angle line through (c.x, c.y) to get point a.

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

For your second question

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

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

The following method quoted from here lets you check if a point is to the left of a vector.

public bool isLeft(Point A, Point B, Point C){
    return ((B.x - A.x)*(C.y - A.y) - (B.y - A.y)*( C.x - A.x)) > 0;
}

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

Answer 6

At this moment, i can only answer your second question. Just do a point-line intersection test, provided that you have stored the points which define your triangle. You can find many relative algorithms in computer graphics books.

Edit: I thought a methodology to solve your basic problem (find the 3 points which define the equilateral triangle with cx, cy and radius as given data). It relies on the property that the sum of the 3 angles of any triangle is 180 degrees. I need some time to do a further check to ensure it's correct. Then, i will edit my answer to post it.

Edit-Full Answer: Implementation of this algorithmic sketch is relying on the programming language and graphics API of your choice:

• Translate the center of the 2D coordinate system (assume it's clockwise) to the center of the centroid circle.
• Store the 2 points which defines 2 straight line segments, along with the center of the circle. The union of these segments may give you the diameter of the circle. Both segments have the center of the circle as their 1 defining point. The other 2 defining points (which you need to store) are on the circumference of the circle (use the radius length of the circle to find them).
• Rotate the 2 points onto circumference by 60 degrees, one of them clockwise and the other counterclockwise. Store their new coordinates. Draw the line that connects them. You have the 2 of the 3 triangle vertices.
• Do inverse translation of the coordinate system's center.
• The remaining vertex of the triangle is the intersection point of a circle radius and the two line segments, each of them starts from its respective known triangle vertex.
• At last, store the vertices and draw the triangle.

Hope that helps. I will try to add some drawings to clarify a bit more the steps of this methodology. Also, I will program and test these steps to ensure that solve your problem correctly.