How would I make procedural HEXAGONAL tiles?

Started by cyphyr, August 20, 2019, 03:30:09 pm

cyphyr

August 20, 2019, 03:30:09 pm
How would I make procedural HEXAGONAL tiles?

I can see how too do it with the simple shape shader and a couple of shader arrays but this is VERY slow and limited to just the area the Shader array is.

Could this be done with a blue node function network? Of course it can but I have next to no idea where to start.

Just using a black and white image may be the easiest way but nodes would be at least more educational.

www.richardfraser.co.uk
/|\

Ryzen 9 3900X @3.79Ghz, 64Gb (TG4 benchmark 6:20)
i7 5930K @3.5Ghz, 32Gb (TG4 benchmark 13.44)

WAS

August 20, 2019, 04:00:40 pm #1
I'd be interested in this as well. I looked up some examples and some of them are a lot more complex than Manhattan Voronoi lol

https://rosettacode.org/wiki/Honeycombs

Hetzen

August 20, 2019, 04:45:16 pm #2
It certainly can be done. There's several things to consider. Hex side length and hex side thickness and what plane do you want to project this.

To break it down, there's two pulses of lines in one rotation axis. The pulses up the Y axis for example, go 2x on, 4x off, 2x on, 4x off....the next one is the same but offset by 3x up, x(SquareRoot 3) along. Get those right, you can just rotate that output by 60 degrees two more times. Then combine.

Depending on what level of detail you would want this for, you could get a high rez bitmap and just repeat in an image map node.

WAS

August 20, 2019, 05:08:47 pm #3
Quote from: Hetzen on August 20, 2019, 04:45:16 pmIt certainly can be done. There's several things to consider. Hex side length and hex side thickness and what plane do you want to project this.

To break it down, there's two pulses of lines in one rotation axis. The pulses up the Y axis for example, go 2x on, 4x off, 2x on, 4x off....the next one is the same but offset by 3x up, x(SquareRoot 3) along. Get those right, you can just rotate that output by 60 degrees two more times. Then combine.

Depending on what level of detail you would want this for, you could get a high rez bitmap and just repeat in an image map node.

Not gonna pretend to understand the function explanation xD I think I have an idea but I'm not sure. Are pulses basically waves? Like Sine?

A bitmap would probably be pretty simple to do, and probably a smaller impact on the scenes render time. I know the pattern is available for Illustrator (least I see it a loot) and that would give you a good starting point to get a high res version to export.

Hetzen

August 20, 2019, 06:06:24 pm #4
The pulses 'on' are your hex sides. Pulses 'off' is the gap between them.

I just called them pulses because they would need a thickness. Hex edge thickness. I wouldn't use a sine function in this instance.

With a procedural you can get a pin sharp pattern. Does the scene need that?

cyphyr

August 20, 2019, 07:12:43 pm #5
Hmm ok pulses to make a dashed line ... that could work.

The edges do not need to be sharp

Aiming for some kind of basis for hexagonal cell clouds. Another variety to add into the mix. So the edges do not need to be sharp

https://www.esrl.noaa.gov/psd/outreach/education//science/convection/img/OpenCells1.jpg

I was initially wondering about using vectors (not that I know where to start) but directing a line in a direction (y+1) and then changing the vector ... err (y+1)(x+1) or some thing ...
www.richardfraser.co.uk
/|\

Ryzen 9 3900X @3.79Ghz, 64Gb (TG4 benchmark 6:20)
i7 5930K @3.5Ghz, 32Gb (TG4 benchmark 13.44)

WAS

August 20, 2019, 11:43:13 pm #6
For the sake of effort to the community I'll upload this experiment. I noticed that divided lines almost make a hexagon. So I took that displacement on negative and converted to scalar, clamped and hardened the colour (as if not two sides are soft).

It won't work for your needed use but just for the sake of something...

Apparently a sin can be used xD

Kinda cool star of David hexagon pattern.

Dune

August 21, 2019, 02:00:34 am #7
The clouds you posted almost look like voronoi cells, so why not use that? I'd simply use an image map, fast and simple.

WAS

August 21, 2019, 02:25:32 am #8
Quote from: Dune on August 21, 2019, 02:00:34 amThe clouds you posted almost look like voronoi cells, so why not use that? I'd simply use an image map, fast and simple.
I would agree. Even when searching for honeycomb/hexagonal clouds, the shape is not really exact and someone always has to draw on the image to really get you to see it. And it's always one or two cells. Most I seen defined were like 3 over Antarctica. Most are just voronoi shapes.

cyphyr

August 21, 2019, 03:28:31 am #9
Thanks guys.

Yes I think Voronoi may be a better way forward in this case

I was sure I had seen some really regular(ish with raggedy edges and pretty warped) hexagonal cloud systems but I also can't find them now.

It's still a good learning exercise. ANd as much as Simple Shape Shaders have a multitude of practical uses I think a way of setting up simple repeat tiling functions would end up being used in many unforeseen ways.
www.richardfraser.co.uk