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 radius r, centred at (0,0). Then the n vertices 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
sinhere 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 :)