How to draw a Perfect Octagon!

Posted by (twitter: @theupgradezone)
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

Warning! Maths ahead!

 

Maths:

Imagine a square, with side length a.

001

Our octagon will fit in this square.

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

002

 

Now you put a into this equation:

003

Which can also be written as:

004

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.

005

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

006

007

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

008

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

009

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

010

//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:

Maths

 

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);
    draw_line(cos(v1)*radius, sin(v1)*radius, cos(v2)*radius, sin(v2)*radius);
    }

    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.

    • r2d2upgrade says:

      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 😛

  2. r2d2upgrade says:

    Very interesting. Ill remember that :3

Leave a Reply

You must be logged in to post a comment.

[cache: storing page]