## How to draw a Perfect Octagon!

November 11th, 2014 4:45 am

I did some maths while I was bored, and I calculated a way to draw a perfect octagon.
I thought this might come in useful for some of you :3

Maths:

Imagine a square, with side length a.

Our octagon will fit in this square.

We will call the length of a side of the octagon b.

Now you put a into this equation:

Which can also be written as:

And you get b.

Now, round b to the nearest number. We can’t be dealing with fractions of pixels now, can we?

Now you have b, we can draw the octagon.

Drawing:

For this example, our reference point will be in the center of the octagon, which is also the center of our imaginary square.

Our first 2 co-ordinates will be a/2 up and b/2 to either side.

For the sides, it will be a/2 to the side and b/2 up or down.

Then, draw lines between the co-ordinates to finish the octagon.

And there you have a regular octagon!

Pseudo code:

Initialize:

size = (length of side of square)
oct_side = round((size*sqrt(2))/(2+sqrt(2)))

Loop:

coord_1x = x – oct_side/2
coord_1y = y + size/2
coord_2x = x + oct_side/2
coord_2y = y + size/2
coord_3x = x + size/2
coord_3y = y + oct_side/2
coord_4x = x + size/2
coord_4y = y – oct_side/2
coord_5x = x + oct_side/2
coord_5y = y – size/2
coord_6x = x – oct_side/2
coord_6y = y – size/2
coord_7x = x – size/2
coord_7y = y – oct_side/2
coord_8x = x – size/2
coord_8y = y + oct_side/2

//draw_line(from_x,from_y,to_x,to_y)

draw_line(coord_1x,coord_1y,coord_2x,coord_2y)
draw_line(coord_2x,coord_2y,coord_3x,coord_3y)
draw_line(coord_3x,coord_3y,coord_4x,coord_4y)
draw_line(coord_4x,coord_4y,coord_5x,coord_5y)
draw_line(coord_5x,coord_5y,coord_6x,coord_6y)
draw_line(coord_6x,coord_6y,coord_7x,coord_7y)
draw_line(coord_7x,coord_7y,coord_8x,coord_8y)
draw_line(coord_8x,coord_8y,coord_1x,coord_1y)

And that’s how to draw a perfect octagon!

Coming soon: How to draw a perfect hexagon!

To those interested in the maths involved to get the equation:

I originally calculated this to be able to draw the Aperture Science logo by hand, but I also saw the use of it on the computer!

Tags: , , , ,

### 3 Responses to “How to draw a Perfect Octagon!”

1. Doctor Broccoli says:

Alternatively:

for (int i = 0; i < 8; i++)
{
float v1 = ((2 * pi) / n) * i;
float v2 = ((2 * pi) / n) * (i+1);
}

It's not that your method is wrong, it's just that this saves a couple of lines of code and can easily be adapted to suit different kinds of n-gons.

I see where you are coming from, but alternatives without much use of sin, cos, tan etc can increase performance on certain machines, or can make coding this easier for languages without trig functions (I think MSDOS batch language doesn’t have trig). Plus, using this kind of logic, I’m building up to a hexagonal grids tutorial ðŸ˜›

Very interesting. Ill remember that :3

[cache: storing page]