Click Animate and then Random:
Or play with the first two sliders for the pattern and layout, and the others for style. This was inspired by watabou’s post about triangle hatching[1]. I wanted to try implementing it with shaders, using the patterns from this experiment of mine, and then developing more. However, I got distracted by all the cool patterns I found, and never got back to hatching…
1 How this works#
First step is to scatter some points around. Second step is to run Delaunay Triangulation on them. Then paint a texture inside each triangle: Optionally rotate the triangle to face a specific direction.
2 More#
- Design: Watabou tweeted[2] about orienting the triangles by edge length. The connected areas are longer and more interesting.
- Design: it might be interesting to trace a long path in the triangle graph and then orient the triangles to match that path.
- Design: the shader pattern is controlled from a single expression; it might be nice to generate these randomly or with genetic algorithms.
- UI: I’d like to replace the color sliders with something more visual, maybe in the CIE color space. The colors could be picked out of a texture instead of a simple linear interpolation.
- UI: drag an image onto the diagram to use the colors from that image. I’m not sure if it will be as interesting as with the previous project.
- UI: it might be interesting to paint any texture on the triangle instead of generating textures from the shader.
- Implementation: I should reuse the shader if the shader setting hasn’t changed.
There’s always more ideas but I ran out of time, so I wrapped up and moved on.
Source: triangle-lines.js