GLSL shader example
Triangular Tessellation Pattern
Transform into an oblique lattice and split each cell along its diagonal to index the two triangles independently.
Live example
Edit the code and the preview updates as you type.
What to observe
Triangular Tessellation Pattern.
Mechanism
Transform into an oblique lattice and split each cell along its diagonal to index the two triangles independently.
The controlling code
vec2 q=vec2(p.x-p.y*.57735,p.y*1.1547)*5.;vec2 id=floor(q),f=fract(q);float side=step(1.,f.x+f.y);c=palette(hash(id+side*31.));float edge=min(min(f.x,f.y),abs(f.x+f.y-1.)*.707);c*=.7+.3*smoothstep(.01,.04,edge);
Experiment
Change the final lattice scale in vec2(p.x-p.y*.57735,p.y*1.1547)*5. from 5. to 3.. Larger triangles fill the canvas while the two triangles within each cell still receive separate hashes.
Debugging and cost
step(1.,f.x+f.y) decides which side of the cell diagonal supplies the color id. Replace id+side*31. with id in hash to give both triangles the same color and expose the underlying oblique cells.