Skip to main content

hexTile: Hexagonal Tessellation Function

Procedural Hexagonal Grid Coordinate System​

The hexTile function transforms rectangular coordinates into hexagonal tessellation space, returning both local cell coordinates and cell indices. This enables creation of honeycomb patterns and hexagonal grid-based effects.

Mathematical Foundation​

Hexagonal tessellation uses a skewed coordinate system where:

s=(1,3)≈(1,1.732)s = (1, \sqrt{3}) \approx (1, 1.732)

The transformation maps rectangular UV coordinates to hexagonal cells through distance comparison between adjacent cell centers.

Return Structure​

The function returns a vec4 containing:

  • .xy: Local coordinates within the hexagonal cell [0,1]
  • .zw: Integer cell indices identifying the specific hexagon
Live Editor
const fragment = () => {
      const hex = hexTile(uv.mul(6))
      const id = hex.w.mul(iTime).add(hex.z)
      const localPos = hex.xy.mul(2).sub(1)
      const pattern = sin(localPos.x.mul(6)).mul(sin(localPos.y.mul(6)))
      const cellColor = sin(id.mul(2.3)).mul(0.5).add(0.5)
      const final = pattern.mul(0.5).add(0.5).mul(cellColor)
      return vec4(vec3(final, cellColor.mul(0.7), float(1).sub(cellColor)), 1)
}