# My octagon is a circle and my pentagon is wonky :'(

## Recommended Posts

Its me the shape guy :/

Ok, i spent most of to trying to figure this out but I've hit a brick wall mentally, I output and image of a diamond and its all good, lines are straight and looks nice, I add functionality to draw a octagon and a pentagon and things stop drawing correctly.

The pentagon isn't far off but there's a few (x,y) * out of place but the octagon is...well...its a damn circle <_<

I use a formula of rotation based on the shapes centroid, with the octagon the vertices would be 72 degrees apart, in total 360 degrees with 5 points. Its just not happening for some reason. I have tried apply different degrees, looking at the draw line algorithm, clearing the vertices list before adding new vertices (just in case it was using vertices for other shapes) but still the issue persists.

The code below is the function for plotting the vertices of the octagon:

void octagon::plotVertices()
{
int x, y, xx, yy;

x = centroid.getX();
vertices.push_back(Vertex(x, y));

x = vertices.back().getX() - centroid.getX();
y = vertices.back().getY() - centroid.getY();

radians = 45 * PI / 180;
xx = xx + centroid.getX();
yy = yy + centroid.getY();
vertices.push_back(Vertex(xx, yy));

radians = 90 * PI / 180;
xx = xx + centroid.getX();
yy = yy + centroid.getY();
vertices.push_back(Vertex(xx, yy));

radians = 135 * PI / 180;
xx = xx + centroid.getX();
yy = yy + centroid.getY();
vertices.push_back(Vertex(xx, yy));

radians = 180 * PI / 180;
xx = xx + centroid.getX();
yy = yy + centroid.getY();
vertices.push_back(Vertex(xx, yy));

radians = 225 * PI / 180;
xx = xx + centroid.getX();
yy = yy + centroid.getY();
vertices.push_back(Vertex(xx, yy));

radians = 270 * PI / 180;
xx = xx + centroid.getX();
yy = yy + centroid.getY();
vertices.push_back(Vertex(xx, yy));

radians = 315 * PI / 180;
xx = xx + centroid.getX();
yy = yy + centroid.getY();
vertices.push_back(Vertex(xx, yy));

radians = 360 * PI / 180;
xx = xx + centroid.getX();
yy = yy + centroid.getY();
vertices.push_back(Vertex(xx, yy));
}


below is an image of the output:

:(

##### Share on other sites

:)

	int x, y, xx, yy;

x = centroid.getX();
vertices.push_back(Vertex(x, y));

x = vertices.back().getX() - centroid.getX();
y = vertices.back().getY() - centroid.getY();

int degree = 72;
for (int i = 0; i < 5; i++)
{
radians = degree * PI / 180;
xx = xx + centroid.getX();
yy = yy + centroid.getY();
degree = degree + 72;
vertices.push_back(Vertex(xx, yy));
}


still wonky tho :P

Edited by homi576

##### Share on other sites
You haven't shown us what your pentagon looks like.

##### Share on other sites

You haven't shown us what your pentagon looks like.

You have to buy me dinner first, just kidding.

The link in the original post shows the output

##### Share on other sites

The link in the original post shows the output

No, it doesn't. The pentagon is truncated.

##### Share on other sites

Is the weird appearance just due to the non-square grid that you're drawing to?

##### Share on other sites

Each cell of the console is not perfectly square. By default, on Win10, for example, my console cells are 8x16. They are twice as large as they are wide.

Also, the asterisk isn't centered properly in the cell, so try outputting a character like this.

##### Share on other sites
That looks like a perfectly good pentagon to me. If you are complaining that a 2-color display with a resolution of something like 20x20 isn't very good, I have to agree with you.

##### Share on other sites

Each cell of the console is not perfectly square. By default, on Win10, for example, my console cells are 8x16. They are twice as large as they are wide.

Also, the asterisk isn't centered properly in the cell, so try outputting a character like this.

Thanks

That looks like a perfectly good pentagon to me. If you are complaining that a 2-color display with a resolution of something like 20x20 isn't very good, I have to agree with you.

Ok cool it was the doubling up of some of the * made me think something was going quite right, whats your opinion on my octagon who wishes it was a circle?

##### Share on other sites
To expand on what SotL said, here’s a brief history on Windows terminals.

Prior to Windows 10, terminals used the System Typeface, which was a bitmap font carried over from the IBM days, and consequently stuck on Code Page 437. Unicode support was nonexistent, but at least you had pixel-perfect characters to make your rouge-like game.

Starting with Windows 10, the terminal was completely reworked and now supports Unicode and uses TrueType fonts with modern font rendering. It’s smooth as silk, but you no longer have square characters nor pixel perfect box drawing.

Additionally, since the terminal supports Unicode, you need to use the Unicode code points rather than Code Page 437 code points:
Before: cout << (char)251; // ?
After: wcout << L'?' /* or: */ << (wchar_t)0x221A;

So, here are some of your options:

1. Configure your terminal to use "Terminal" with an 8x8 font size. This is the easiest solution. Inserting wide characters should map to the original Code Page 437 code points: 0x221A -> 251.

2. Account for font proportions in your code. This involves scaling the Y-axis such that 1 unit along the Y-axis appears to be the same length as 1 unit along the X-axis, even if it doesn’t quite match up 1:1 to rows and columns.

3. Use U+2584, U+2580, and U+2588 (?, ?, and ? respectively) to split a character into two. This is trickier to do, as you would need to render to an "off-page" image before you can determine what characters to use. Don’t forget to use wcout to insert a “wide-character” into cout. Edited by fastcall22

##### Share on other sites
I am sorry I helped you figure out what was wrong with your code in that other thread. I really am, because although my help came with the warning "don't get used to it", you obviously got used to it.

You need to start debugging your own code and figuring out how to solve problems on your own. You are not going to get very far if we need to hold your hand every step of the way.

##### Share on other sites

I am sorry I helped you figure out what was wrong with your code in that other thread. I really am, because although my help came with the warning "don't get used to it", you obviously got used to it.

You need to start debugging your own code and figuring out how to solve problems on your own. You are not going to get very far if we need to hold your hand every step of the way.

ok point taken, I do appreciate the help everyone has given me thought thank you

##### Share on other sites

Try just outputting the endpoints for your octagon and see if they look appropriate.

given the low 'resolution' and unsquare nature of the ASCII view,  drawing short lines is going to look wonky with the aliasing that occurs when the lines are quantized.

I output and image of a diamond and its all good, lines are straight and looks nice

Rotate that diamond about 20º and see how nice the lines look.  A 45º angle aliases quite nicely.

The lower the resolution, the more a circle will look like an n-sided polygon.  A 1 pixel diameter circle is going to render as a square.  A 16 pixel diameter circle is going to look similar to an octagon.

On the flip side, even at high resolutions, a sufficiently high enough n-sided polygon is going to look like a circle.  A 100-sided polygon would take a fairly high resolution to render clearly as a polygon and not appear to be a circle.

## Create an account

Register a new account

• ### Forum Statistics

• Total Topics
628305
• Total Posts
2981967

• 9
• 13
• 11
• 12
• 11