# The best way to draw a (filled) hexagons in ofPath or ofPolyline

I have a collection of points for a hexagon that consist of a vector of 6 ofVec3f and one ofVec3f for the centre.

the 6 are in order and can create a polyline from points 0 - 5.

I can draw a filled ofPath currently, but I get voids when I try to fill them, as if the slope(?) or normal between points gets too extreme, although this isn’t consistent. (some ‘flatter’ hexagons have voids as well, and some extremely stretched ones are fine)

I know that, when using polylines, one gets better results when including triangles but I am unsure how to start this kind of polyline to get the best results.

``````             1      2

0     cp     3

5      6
``````

you can see some of the visual problems with just using the corners of the hexes for polylines here:

2 Likes

I found a way to generate each hex as a polyline and then tessellate them into a mesh.

``````        vector<ofPolyline> theseHexesOutline;
vector<ofMesh> theseHexesFilled;
ofPolyline thisHex;
ofMesh thisMesh;
thisMesh.setMode(OF_PRIMITIVE_LINE_LOOP );
for (int i=0; i<6;i++){
ofPoint testPointCorner;
testPointCorner = gridPoints[hexList[index].hexCorners[i]];
thisHex.addVertex(testPointCorner); //based off of the depth of the hex centrepoint
}
theseHexesOutline.push_back(thisHex);
tess.tessellateToMesh(thisHex, OF_POLY_WINDING_NONZERO, thisMesh);
for (int ii=0; ii<thisMesh.getNumVertices();ii++){
thisMesh.addColor(testColor); //need a color for each vertex in the mesh
}
theseHexesFilled.push_back(thisMesh);
``````

this generates a filled hex of a solid color and an outline hex. While one ‘could’ create a combined mesh, I have found that adding the outlines afterwards will result in oddities, where the fill and the outline are not consistent. It is better to draw them both at the same time. You can see an example of this discrepancy here:

2 Likes