The story
A LONG time ago (in the days of Flash4/AS1) I found the celtic knot font, and wrote a knot builder tool v1. It was comprehensive, but even with the tool, making big knots was slow going. Fast forward eight or so years, Adobe buys Flash, computers get faster, and I learn a bit more about programming... So last weekend I was perusing my flash blogs, and I was blown away by Emanuele Feronato's awesome process for creating procedural land/water maps. Some comments on that article lead me to AngryFish studio's incredible infographic on bitmasking. After reading both, I was inspired to give the knot-builder concept a new twist.
How it works
In this widget, I am only checking 4 cardinal pixel values instead of the eight listed in the AngryFish example. This drops the number of possible combinations per pixel from 256 down to 16. This obviously makes things run much faster. It runs so fast in fact, that in the next iteration I plan to increase the number of knot patterns, which will kick the total possible combos up to 81.My generator uses a perlin filter to generate noise. I created a simple pixelBender shader which handles the 4 way mirroring. Since the bitmasking process still needs to check the pixels above, left, right, and below, for each valid pixel, I convert the source perlin noise BitmapData into a Vector list of uint values.
Each pixel (with a grey value darker than 128) is then assigned a tile from a sprite sheet like this:
The sprite tiles could get FAR more detailed, but this version is a 'proof-of-concept' so I'm deliberately keeping the 'art' side of things simple, so I can get something posted before next Christmas.
The sprite sheets were created in Illustrator using the celtic knot font from Clanbadge. The knot font can construct more complex knots than the ones I'm generating here, but if you want to make something big very quickly, or if you're just looking for inspiration, this should get you started. To keep things fast and light, I'm using bit-101's minimal-comps for the ui.
How to use it
You can animate the perlin noise in any direction, which changes the knots appearance. When you find a knot you like, click the toggle-animation button to freeze things, then hit the generate-text button and copy out the rendered text. If you have any of the celtic knot fonts installed, this pattern of letters will magically render the displayed knot for you in Illustrator, Photoshop, Corel Draw, Inkscape, Gimp, or even MSWord, if that's how you roll.
enjoy,
-J