Hexagon pattern

schotsl

Hello,

For fun I wanted to create an online version of "colonist of catan" but I've really been struggling to make the pattern of the board since you have to rotate al the Hexagons to fit into each other. (See picture)

So far I've create a board with a width of 3 with this code

void draw() {
  pushMatrix();
  translate(width / 2, height / 2);
  float drawAngle = TWO_PI / 6;
  for (float i = 0; i < TWO_PI; i += drawAngle) {
    float hexagonXpos = cos(i) * 120;
    float hexagonYpos = sin(i) * 120;
    drawHexagon(hexagonXpos, hexagonYpos, 70);
  }
  popMatrix();
}

void drawHexagon(float x, float y, float radius) {
  float hexagonAngle = TWO_PI / 6;

  beginShape();
  for (float a = PI / 2; a < TWO_PI + PI / 2; a += hexagonAngle) {
    float sx = x + cos(a) * radius;
    float sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

and this is the resulting image

But now I would like the board to be larger (with a width of 7) without manually enter the coordinates, but I really dont know since they have to weirdly rotate. Could anyone help me out

koogs

without manually enter the coordinates

Why not?

I'd start by drawing a row of 7 centred on the middle of the screen. Then a row of 6. I wouldn't use rotation.

koogs

octagonAngle

Wha?

schotsl

@koogs before I confused hexagon for octagon I've changed it now.

I wanted to use some kind of loop so if I ever wanted to change the board width I would only have to change one value Instead of remove a lot of hexagons although I suppose that would work to.

koogs

That is good practice, yes. But fiddly.

20 seconds with a pen and paper tells me that with an odd number (n) in the middle you get a balanced grid, with sides (n + 1) / 2 on each side... Even values of n don't work.

So start in the middle and go up until you have drawn (n + 1) / 2, then do the same going down.

jeremydouglass

@schotsl -- There are several posts on the forum about drawing hex grids that you might find interesting, e.g.

• https://forum.processing.org/two/discussion/comment/97762/#Comment_97762

Regarding rotation of port water pieces, the nice thing about Settlers of... ahem, the nice thing about Colonists is that it is always a centered blob. So you don't need to know anything about the board at all except where your piece is compared to the centerline.

1. All ports begin facing east (0)

Counter-clockwise, if a port piece is placed:

1. on the centerline and west of center, it faces east (0)
2. southwest of center, it faces northeast (1)
3. southeast of center, it faces northwest (2)
4. on the centerline and east, it faces west (3)
5. northeast of center, it faces southwest (4)
6. northwest of center, it faces southeast (5)

To make it fancy, you can additionally randomize non-corner and non-centerline ports between two possible orientations.

xxMrPHDxx

Try this

    import java.util.List;

    List<Hexagon> hexs = new ArrayList();
    float WIDTH = 5;
    float HEIGHT;
    float RADIUS = 70;

    void setup(){
      size(800,800);

      float gap = sqrt(pow(RADIUS,2)-pow(RADIUS/2,2));

      float center = WIDTH % 2 == 0 ? WIDTH / 2 : (WIDTH-1) / 2;
      for(int row=0;row<WIDTH;row++){
        int cols = (int)WIDTH - (int)(row >= center ? row - center : center - row);
        println(WIDTH - cols);
        int offset = (int)(WIDTH - cols);
        for(int col=offset;col<offset + cols;col++){
          float x = col * gap * 2 - offset * gap;
          float y = row * sqrt(pow(RADIUS,2)-pow(gap,2)) * 3;
          hexs.add(new Hexagon(x,y,RADIUS));
        }
      }
    }

    void draw() {
      background(255);
      pushMatrix();
      translate(RADIUS,RADIUS);
      for (final Hexagon h : hexs) {
        h.draw();
      }
      popMatrix();
    }

    class Hexagon{
      private final float x,y,radius;
      public Hexagon(float x,float y,float radius){
        this.x = x;
        this.y = y;
        this.radius = radius;
      }

      public void draw() {
        fill(200);
        float hexagonAngle = TWO_PI / 6;

        beginShape();
        for (float a = PI / 2; a < TWO_PI + PI / 2; a += hexagonAngle) {
          float sx = x + cos(a) * radius;
          float sy = y + sin(a) * radius;
          vertex(sx, sy);
        }
        endShape(CLOSE);
      }
    }

If you want WIDTH of 3 or 7 just change the WIDTH variable. But the grid won't look nice if the WIDTH is even though.

Hope this helps...

Chrisir

I started to make some decoration for your game

images are coded as text

please note that you can tell the village / house symbol the player color, same with city / cathedral

There are also some sheep and trees for decoration of the hexagon cards for pasture and forest

Chrisir

.

Chrisir

.

Chrisir

.

Chrisir

Sorry, my code was way too long so I had to copy it into different posts....

very annoying....

Chrisir

but I haven't done SEA-Hexagons, just a blue background

Chrisir

Since the project I posted above was too long, I decided to delete my posts with the code above and instead post a version of Settlers on github:

There is still a LOT to do. But you get the idea.

Best you download the entire Games repository and then turn to the Settler3 folder.

Best, Chrisir ;-)

https://github.com/Kango/Games

Chrisir