## Drawing (rotating) shapes

After writing the smooth line class last week I wanted to write another one, and I decided to write a class to aid the drawing regular shapes. While writing the library I found myself with some rather nice looking rotating shapes that I thought would make a good blog post here.

Before I go any further, here's the demo:

See the Pen Rotating shapes by Starbeamrainbowlabs (@sbrl) on CodePen.

The background is a just a set of fancy css3 radial and linear gradients layered on top of one another. The interesting part is the calculating of the points in each shape - let me explain with a hexagon.

In the above, the hexagon I am drawing is shown in red, and a circle in green. In order to work out the co-ordinates for each corner (or vertex) of the hexagon, we can walk around a circle and note down our location at regular intervals (shown by the blue lines). I learnt this trick from this stack overflow answer. They can explain it much better than I probably could:

Let's assume you want to draw an

N-sided polygon of radiusr, centred at (0,0). Then thenvertices are given by:`x[n] = r * cos(2*pi*n/N) y[n] = r * sin(2*pi*n/N)`

where 0 <=

n<N. Note that`cos`

and`sin`

here are working in radians, not degrees (this is pretty common in most programming languages).If you want a different centre, then just add the coordinates of the centre point to each (

x[n],y[n]). If you want a different orientation, you just need to add a constant angle. So the general form is:`x[n] = r * cos(2*pi*n/N + theta) + x_centre y[n] = r * sin(2*pi*n/N + theta) + y_centre`

By Oliver Charlesworth. Source: Stack Overflow

Anyway, here's the code I came up with:

I can't think of anything else I wanted to say, so I think I'll end this post here. Please comment down below if you have anything you want to say :)