How to create and draw a Cartesian Grid

[ok-ttc]

Hello,

I have been traversing many different Hex libraries. This one seems to be the most complete and best documented. But I am still failing. I am trying to output a hexgrid from a database which stores the hexes as x/y coordinates (cartesian). I want generate the grid with Honeycomb and output it by using PixiJS.

To test it I wanted to just have several hexes in one line next to each other to see how the coordinate system works. So, using the sample code from the documentation, I did this:

const app = new PIXI.Application({ transparent: true, antialias: true })
const graphics = new PIXI.Graphics()

const Hex = Honeycomb.extendHex({
    size: 45,
    offset: 1,
    orientation: 'flat'
})
const Grid = Honeycomb.defineGrid(Hex)

hexgrid.appendChild(app.view)

// set a line style of 1px wide and color #999
graphics.lineStyle(1, 0x999999)

Grid(Hex((0,0), (1,0), (2,0), (3,0))).forEach(hex => {
    const point = hex.toPoint()
    // add the hex's position to each of its corner points
    const corners = hex.corners().map(corner => corner.add(point))
    // separate the first from the other corners
    const [firstCorner, ...otherCorners] = corners

    // move the "pencil" to the first corner
    graphics.moveTo(firstCorner.x, firstCorner.y)
    // draw lines to the other corners
    otherCorners.forEach(({ x, y }) => graphics.lineTo(x, y))
    // finish at the first corner
    graphics.lineTo(firstCorner.x, firstCorner.y)

    app.stage.addChild(graphics)
})

The key being this line:

Grid(Hex((0,0), (1,0), (2,0), (3,0))).forEach(hex => {

I was just hoping to get 4 horizontal hexes following the cartesian coordinate system, but I get just one (or probably 4 drawn on top of each other). What am I not understanding?

If I understand how this works, generating the rest from the database should be not that much of an issue... I hope. :-)

Thank you for your help.

[flauwekeul]

Try this:

Grid(Hex(0,0), Hex(1,0), Hex(2,0), Hex(3,0)).forEach(hex => {

or shorter:

Grid([0,0], [1,0], [2,0], [3,0]).forEach(hex => {

[ok-ttc]

Ah! Thanks.

I feel thoroughly silly now. 🤦‍♂️ Sorry for bothering.

Now on to the real chore - getting pixie to display PNGs instead of drawn lines. 😉

Thank you!