How to convert grids to Cube with pixijs

[mbzr]

Hi, First of all, thanks for this plugin. I need a little help with converting coordinate systems from cartesian to cube. I am using this example, https://jsfiddle.net/Flauwekeul/qmfgey44/

So I converted the point variable using the toCube method but it doesn't seem to work. Any help would be greatly appreciated. Here's the fiddle i am using: https://jsfiddle.net/qmfgey44/306/

[flauwekeul]

Hey there. Thanks for asking your question.

Why

const point = hex.toCube(hex.toPoint())

when this works fine:

const point = hex.toPoint()

?

[mbzr]

Hi Thanks for the response. Sorry if i was not clear. What i meant was, by default the plugin uses cartesian coordinate system. How do i convert it to use the cube coordinate system?

[flauwekeul]

hex.toCube(hex) returns the 3 cube coordinates of the passed hex. hex.toCube(hex.toPoint()) (like you had before) should also work. A hex instance is already a "point-like", so just passing a hex instance to toCube() is enough.

You can also get the 3 cube coordinates separately using: hex.q, hex.r and hex.s.

What do you want to do with the cube coordinates?

[mbzr]

I want it to look like this (notice the pattern), in other words, i want to generate a honeycomb of hexagons like the image using axial coordinates. By default it looks like a rectangular grid.

[flauwekeul]

Well...if you use the rectangle() method you get a grid in a rectangular shape. There's also a hexagon() method.

I've updated another jsfiddle that shows how to get the grid you want: https://jsfiddle.net/Flauwekeul/arxo1vqo/354/. Notice that I only use the cube coordinates (q and r) for the numbers in each grid. And on line 11 you see each hex is offsetted 100px to the right and bottom to make the grid visible in the window. If you remove the .add(100, 100) you'll see what I mean.

[mbzr]

hey @flauwekeul, sorry for the late response. Thank you, that solved my problem.