Sine-cosine polygon construction

What it is

Place a shape’s vertices by holding the radius fixed and stepping the angle evenly around a circle, then convert each polar point to Cartesian coordinates for drawing. Varun Vachhar frames the underlying choice this way: “Cartesian coordinates are a great choice for placing things evenly on a rectangular grid. However, if you want to distribute things evenly around a circle then polar coordinates are generally the better option.” A regular polygon falls straight out of this loop, because a regular polygon is exactly a shape that is “equiangular… [with] all the vertices… points evenly spaced on a circle” — which is what a constant-radius, constant-angle-step loop produces without any extra work.

How it works

1. Pick a vertex count N and a radius r.
2. Compute the angle step so that N steps close back to the start: 360° / N (or 2π / N in radians).
3. For each vertex i from 0 to N - 1, compute angle = i × step — this is the “stepping the angle evenly around a circle” the record describes.
4. Convert (r, angle) to Cartesian: x = cx + r·cos(angle), y = cy + r·sin(angle) — the sine/cosine conversion the technique is named for.
5. Connect the vertices in order and close the path back to vertex 0 to finish the outline.

Programming Design Systems treats this loop as the general engine behind an entire family of shapes, not just one polygon: “By changing the number of iterations and the spacing between the vertices, you can draw all of the basic shapes.” Iterations is step 1’s N; spacing is step 2’s angle step — named as two separate knobs in that sentence, which is worth noticing because it implies they can be varied independently rather than one being derived from the other. None of the excerpts gathered here spell out how that squares with closing the loop in step 5, or whether the closing segment is automatic or something you add yourself — check the source’s actual code before assuming either.

Parameters & tuning

• Vertex count. Fewer vertices produce sharper, more angular results; enough vertices and the same loop reads as a circle at typical stroke widths. This is PDS’s “iterations” knob.
• Angle spacing. PDS names this as a knob distinct from count — how much the angle advances per vertex. Varying it alongside count is what the source means by drawing “all of the basic shapes” from one loop, though the excerpts don’t give the exact relationship between the two knobs when the path still needs to close.
• Radius. Held constant, every vertex lands on one circle and the result is a regular polygon. The clearest way to see what breaking that constraint does is the star-polygon variant: it keeps this construction’s angle-stepping loop untouched and alternates the radius between a low value and a high value on successive vertices, so alternating vertices pull toward the centre and alternating vertices push outward — the flat convex edge becomes a spiked outline.

Where it’s been used

Both sources in this bundle treat the construction as infrastructure rather than as a named artwork’s signature move. Programming Design Systems positions it as the shared engine behind its procedural-shapes chapter — the one loop that, by varying vertex count and angle spacing, draws every basic shape covered there. Varun Vachhar’s practical-js post presents it as the definition of a regular polygon, built from a polar-coordinate helper function. Neither excerpt names a specific artwork that used this construction, so treat that as an open question rather than an omission.

Variants & neighbours

The one documented neighbour is the star polygon, which keeps this page’s angle-stepping loop untouched and changes exactly one thing: the radius alternates between a low value and a high value at each successive vertex instead of staying fixed. The even angle step, the polar-to-Cartesian conversion, and the closing of the path are all identical — the star’s points and valleys are just what a bouncing radius does to an otherwise ordinary vertex loop.

Go deeper

Programming Design Systems’ procedural shapes page works through the iteration-and-spacing version of this loop as one instance of a broader shape-drawing pattern. Varun Vachhar’s polar coordinates post builds the regular-polygon function directly from the polar-vs-Cartesian argument quoted above.

Connected to

Variant of: Star polygon

Variants: Star polygon

Try it yourself

Take the regular-polygon loop and, instead of holding the radius constant, alternate it between a low value and a high value on successive vertices. What does the outline become, and which single line of the loop did you actually change?

It becomes a star. The angle still steps evenly around the circle exactly as before — nothing about the loop structure changes. The only edit is which radius gets multiplied by cos/sin at each vertex: low-radius vertices pull inward to become the star's valleys, high-radius vertices push outward to become its points. That is the whole difference between this construction and its star-polygon variant.

The regular polygon's edges are all one length and the outline is convex; alternating the radius pulls every other vertex toward the centre, so the smooth convex outline becomes a spiked star instead.

---

Revision 1 · 2 sources · Something wrong? Tell us.