Tessellation in Max

ygreq's icon

Hey guys,

I am trying to create a repeating pattern of hexagons. And while searching on the net I found out that bees make natural tessellations of hexagons in their honeycombs. And from what I understand OpenGL does this virtually :)

Now I also found out that is not that easy to create such a thing on OpenGL and impossible on Max (either Jitter, lua or something else).

I would like to hear your thoughts about this. And of course I would love to see a solution for this.

All the best,
ygreq

Wesley Smith's icon

It's definitely possible to do in Jitter. You can do this with Jitter matrices and jit.gl.multiple or with Lua or JS depending on your needs. The basic thing to keep in mind is that a grid of hexagons is no different in structure than a grid of quads. The minor difference between the two is that every other row is offset and xy amount and hexagons in a row have a gap between them.

ygreq's icon

Hey Wesley,

Thank you so much for your advice. Now concerning LUA and JS I am in the dark (if someone comes with an example illustrating this, that would be terrific!).

And related to [jit.gl.multiple], do you think I can change specific hexagons once I create them using the jit.gl.multiple object? For example, let's say I create a 100x100 grid of white hexagons. And I want to change the color to red to only five of them in some specific order. Do you think I can do that and may I ask how?

hans's icon

JIt.gl.multiple has a @glparams attribute which allows you to change your hexagon texture.
Don't know if its the best way to change their color, but that is my little contribution....

Hexagon tesselation is something I'm also interested in.
My LUA or JS skills being very week, I'd be curious to see how people would do that using max object/operators only.
The "minor difference" wesley is talking about, is the main problem for me.

Wesley Smith's icon

You can make a hexagon with [jit.gl.gridshape @shape circle @dim 7 7]. With jit.gl.multiple, it's possible to give each hexagon a specific color.

huggh's icon

Dealing with positioning, could Jit.expr with norm/snorm tools be a good start?

Wesley Smith's icon

absolutely. I would probably use cell because you need to shift every other row. If you use cell, you can mark every other row with cell[1]%2.

ehdyn's icon

Thought you might like this - loosely related
http://bit.ly/zCVH8Q
http://scc.jezmckean.com/item/32

huggh's icon

I wanted to train myself with this positioning issue.

I found this interesting webpage
http://www.gamedev.net/page/resources/_/technical/game-programming/coordinates-in-hexagon-based-tile-maps-r1800
I'm definitely not skilled enough to cope with norm/snorm/cell tools, so I tried to do without it.

Max Patch
Copy patch and select New From Clipboard in Max.

Here is my patch.
obviously it is not the fastest solution.
Please let me know what I could have done differently, there may be mistakes by the way.

ygreq's icon

Thank you all, guys!

I will see what I can do and hopefully I will post some results here as well!

ygreq's icon

huggh, I am still trying to figure out what it is you posted :D

ygreq's icon

Okey, I need help.

I don't actually understand how I should implement [cell[1]%2].

And even though I played before with norm/snorm, I really have trouble implementing something that makes sense.

Wesley Smith's icon
Max Patch
Copy patch and select New From Clipboard in Max.

Have a look at this:

ygreq's icon

Hey Wesley,

Your patch does wonders! Thank you so much!!

I am trying now to add the "change colors" part. Hope I don't stumble again. I will post the results.

Just one question, though!

Do you think there is an algorithm that can make the hexagons change colors in a group, like change the color of a group of 6 hexagons (that are not aligned) here, and then change the color of another group on the other side?

(My solution now is using a black and/or white matrix as a way to represent the colors of the hexagons and while playing with that matrix, the colors of the hexagons would change accordingly. I wanted to know if there is a "more" automatic of doing this things instead of manually controlling the matrix.)

Wesley Smith's icon

There is definitely an algorithm for that. The key is to figure out what cells in the position matrix are adjacent to each other in the hexagrid. You can make a list of offsets and iterate over them to do the coloring.

huggh's icon
Max Patch
Copy patch and select New From Clipboard in Max.

hello Wesley.
thank you for this example.
May I ask you to explain this part of your patch?
Sorry if it's obvious but I can't figure out the sqrt(3) role in the calculation ( and the *3 and *6 operations by the way)
Thanks for helping me understand.

Wesley Smith's icon

The input to all of this is the radius of the hexagons. The *6 accounts for the spacing of hexagons within a single row. Set the input matrix to be a 2x1 matrix to see this. the *3 is the horizontal shift between successive rows. Set the input matrix to 1x2 to see this. The sqrt(3) is the vertical displacement of successive rows, which is calculated form the fact that the triangle between the center, vertex and midpoint of an edge is a 30-60-90 triangle.