Hexagonal Grid in processing

[Prodigenius10]

It would be cool if you could do an implementation of Hexagonal Grid creation in p5.js. I believe there are a lot of possibilities especially in the realm of gaming.

This following link contains some excellent examples of Hexagonal Grids and various examples of ways they can be manipulated. I'd love to see you do an implementation of this in p5.js.
http://www.redblobgames.com/grids/hexagons/

P.S. You're awesome dude. You have re-instilled my faith in being able to code #beginner

[toferj]

I came here to suggest some tutorials on working with hexagonal grids. I started trying to reproduce a game I've been playing on my phone called "Influence". It's a very simple game in concept, so I thought I'd give it a go, but dealing with hexagonal grids is not as easy as I'd thought it might be.

Like the original poster (Prodigenius10) I also ran across the redblobgames.com site, though more specifically I ran across this: http://www.redblobgames.com/grids/hexagons/implementation.html

Anyway, I would love the guidance of someone like you to explain some of the math involved in drawing hexagons, and arranging them in a grid. I've seen (obviously) arranging them in a honeycomb pattern, but there's another arrangement I've seen where each hexagon is connected to its neighboring hexagon by a line drawn between two of the vertices (if that makes any sense).

Here's a link to a video demo of the game I'm attempting to clone:
https://www.youtube.com/watch?v=SfRBF8Ukpd0

Thanks Daniel!! :)

[TitouanT]

here is a great page about hexagonal grid !
http://www.redblobgames.com/grids/hexagons/

[sergiuwd]

I'm using this script for a hexagonal grid:

var screenWidth = 800;
var screenHeight = 400;
var cols = 7;
var rows = 7;
var cellSize = 30;
var grid = [];
var xOffset = 200;
var yOffset = 50;

function setup () {
    createCanvas(screenWidth, screenHeight);

    for(j = 0; j < rows; j++) {
        for(i = 0; i < cols; i++) {
            var cell = new Cell(i, j);
            
            grid.push(cell);
        }
    }
}

function draw () {
    background(0, 114, 183);

    for(var i = 0; i < grid.length; i++) {
        grid[i].show();
    }
}

function Cell(i, j) {
    this.i = i;
    this.j = j;

    if(j % 2 === 0) {
        this.x = this.i * cellSize * 2 + xOffset;
    } else {
        this.x = this.i * cellSize * 2 + cellSize + xOffset;
    }
    
    this.y = this.j * cellSize * 1.7 + yOffset;
    this.hasPlayer = false;

    this.show = function () {
        stroke(255, 255, 255, 50)
        fill(0, 114, 183);
 
        push(); 
        translate(this.x, this.y);
        rotate(radians(30));
        polygon(0, 0, cellSize, 6);
        pop();
    }
}

function polygon(x, y, radius, npoints) {
    var angle = TWO_PI / npoints;
    beginShape();
    for (var a = 0; a < TWO_PI; a += angle) {
        var sx = x + cos(a) * radius;
        var sy = y + sin(a) * radius;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}   

(P.S: It's a little messy)
You should get this result: https://image.ibb.co/ieUVcR/Screenshot_from_2018_01_09_14_59_34.png

You can use this foreach loop in the setup:

for(j = 0; j < rows; j++) {
        for(i = 0; i < cols - j % 2; i++) {
            var cell = new Cell(i, j);
            
            grid.push(cell);
        }
}

So you can get more symmetry: https://image.ibb.co/cVFLcR/Screenshot_from_2018_01_09_15_04_16.png

[toferj]

I was also thinking about how to arrange the hexagons further apart, but connecting some of them via their vertices... like this:

It just seems like something that @shiffman could cover pretty well in a coding challenge.

Still I really like your polygon function @sergiuwd. Nice work. :)

[sergiuwd]

@toferj, you can achieve the cell distance by playing with the offsets in the Cell constructor.
I will try to achieve the effect you want if I find some time, then get back to you.

[toferj]

@sergiuwd, don't go out of your way on my account. I'm not really doing anything with this anymore. Insofar as someone else might find it useful, it might still be worth it though.

[sergiuwd]

Yeah, that's why I'll do it.

[sergiuwd]

@toferj here you go: https://github.com/sergiuwd/p5js-Hexagonal-Interconnected-Grid
The code is messy though, since I don't have much free time and I was rushing to finish it. I will improve it soon and push the modifications.

Result: https://image.ibb.co/bCfygw/Screenshot_from_2018_01_20_16_26_12.png