Draw regular polygons inscribed in a circle

Asked 26/6, 2015 at 3:36 Answered 26/6, 2015 at 3:52

I'm trying to draw regular polygons(square and equilateral triangle) inscribed in a circle of a given centre (x,y) and a radius (r). I'm using raphael.js.

Here's my function to draw a inscribed square:

function draw_square(x,y,radius){
    var side= radius*(Math.sqrt(2));
    var x = x - (side/2);
    var y = y - (side/2);
    var square= paper.rect(x, y, side, side);
}

Can anyone shed some light on how I could draw an equilateral triangle(inscribed in a given circle)?

Beaconsfield answered 26/6, 2015 at 3:36 Comment(0)

First time I've used raphael, so you'll have to extract what you need from the following:

<html>
<body>
    <div id="paper"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
    <script>
        var paper = new Raphael(document.getElementById('paper'), 256, 256);
        var x = 128, y = 128, r = 64, n = 9;
        paper.circle(x, y, r);
        var xx, yy, i, a, pathString = "";
        for (i = 0; i <= n; ++i) {
            a = ((4 * Math.PI * i) + (Math.PI * n) + (2 * Math.PI)) / (2 * n);
            xx = x + r * Math.cos(a);
            yy = y + r * Math.sin(a);
            pathString += (i == 0 ? "M " : " L ") + xx + " " + yy;
        }
        pathString += " z";
        paper.path(pathString);
    </script>
</body>
</html>

EDIT: Refactored to use var a, and to always have a horizontal base.

Mcnully answered 26/6, 2015 at 3:52 Comment(6)

This is exactly what I'm trying to do. By any chance, the polygons could be rotated? – Beaconsfield 26/6, 2015 at 4:13

Yep! So I've done a bit of redundant work there, calculating the angle twice. The bit that says 2 * Math.PI / n * i. You can add some number to that to rotate. Remember that you need to add radians, not degrees, where 2*PI radians == 360 degrees. If you need help with the conversion, let me know! – Mcnully 26/6, 2015 at 5:3

I can use shape.rotate(degrees, x, y). but I don't know what the relationship between the angle of rotation and the number of sides of the polygon is. – Beaconsfield 26/6, 2015 at 5:53

Oh, what rotation do you want? Are you wanting to always guarantee a point at the north position, say? Or are you trying to rotate by some variable, unknown amount? – Mcnully 26/6, 2015 at 6:41

I'm trying to rotate in such a way that the base line is always horizontal. For triangle – Beaconsfield 26/6, 2015 at 6:47

Ugh, the calculation to make the base line horizontal is a little bit overwhelming, but that should work! :) – Mcnully 26/6, 2015 at 7:53

function draw_triangle(x, y, radius){
    var x_offset =radius*(Math.cos(Math.PI/6));
    var y_offset =radius*(Math.sin(Math.PI/6));
    var x1 = x;
    var y1 = y - radius;
    var x2 = x + x_offset;
    var y2 = y + y_offset;
    var x3 = x - x_offset;
    var y3 = y + y_offset;
    var triangle = "M"+x1+","+y1+"L"+x2+","+y2+"L"+x3+","+y3+"Z";
    var triangle= paper.path(triangle);
}

With a little help of trigo and raphael paper.path().

Delacroix answered 26/6, 2015 at 3:40 Comment(0)

Recommended topics

Hot tags