Procedurally Generating My First Tattoo

If words bore you and are more interested in the code I’ve put it on GitHub. I have also put together an online demo for generating your own transmutation circles.

I have been working on a VR videogame called Rapture for around a year now in my free time when college has not been killing me. Rapture is a game where you play as a demon and use your supernatural powers to destroy. At one point I was working on building a skill tree for the player to progressively unlock different powers. Somewhere down the line, the idea was thrown out for using pentagrams to represent the skill tree. The problem with doing this is in the name, there are only 5 points to a pentagram. If you image search the term “satanic circle”, you will find multiple images where they have 5 symbols located at each point of the pentagram. This makes placing any more or any less than 5 skills on the pentagram look awkward and kind of lazy, and I didn’t want to be constrained to exactly 5.

Luckily, people are creative and have come up with plenty of cool looking designs that uses geometry and symbols to encapsulate the feel of mysticism. If you search for “magic circles” you will get a massive amount of varying designs that represent different things. You see these circles throughout media as well but what I decided to focus on was Fullmetal Alchemist's interpretation of it, the transmutation circle. Reading the lore is pretty interesting if you’re unfamiliar with the anime. My goal was to write a program that would generate a circle to fit any arbitrary number of symbols inside of it to represent the skill tree.

Generating The Transmutation Circle

My first goal when setting out to accomplish this task was just writing code to reproduce a certain transmutation circle from the anime. In doing this I could reuse the methods I used to build the first transmutation circle and begin to generate my own. Immediately when looking at this you can see there are circles inscribed in polygons inscribed in circles. Some of these circles are made of text, and some circles lie on the midpoints of the lines that make up the triangle. The circles lying on the midpoints are attractive to me as they can be used to house the icons for the different skills the player can unlock. With this, we can start to break this symbol down into 3 main sections to be expanded on.

  1. The outer section acts as a border composed of only circles. There are 3 circles made of single lines, and one circle made from text.
  2. There is a middle section that contains the triangle and hexagon shapes with extra decoration like the arcs that cut along the inner walls of the hexagon.
  3. The inner section is another 4 circles both made from text or just single lines.

One important detail to note is that the hexagon’s number of sides is actually a multiple of the number of sides that the triangle has, and that’s why they are able to line up perfectly. We could perfectly inscribe the triangle inside a nonagon if we wanted to as well.

We can compose these sections into 3 different functions. Each of these sections reduces the area available, so each of these functions will take the available area and return the area that remains after they complete. For randomly generating these transmutation circles we can vary how these 3 sections are constructed.

The Outer Section

The outer section was the most straight forward to randomize. In the final implementation, the border can be built using a minimum of 2 circles and at most 5 circles. Each circle has a random chance of either being made of text, a single line, or missing entirely. The goal of allowing a circle to not exist is to act as padding between different sections and allow for more variations. The number of possible borders is:

Take note that in the scenario that the outermost circle turns out to be missing, then the resulting transmutation circle looks smaller. So a configuration with 5 circles and the outermost missing looks like a smaller version of a configuration with 4 circles. If you assume that these two situations are the same situation then the number of possible configurations decreases.

The Middle Section

The middle section is where the largest amount of variability can occur. It begins by selecting the number of sides we want our smaller polygon to have. We then double this number to generate a larger polygon that the smaller polygon can be inscribed inside of. The minimum number of sides the smaller polygon can have is 3 and I set an arbitrary upper limit of 8 as the larger polygon would have 16 sides and it begins to look ridiculous. Then there is a 50/50 chance as to whether or not there are circles located at the midpoints of the lines on the smaller polygon. There is also another 50/50 chance there are arcs formed along the larger polygon. Since at the end of this process the available space remaining is returned, we can just repeat it again with the available space. I set it to repeat a max of 3 times because after that the lines are very squished together. For a given number of sides, there are 4 possibilities for the polygon: no circles or arcs, circles but no arcs, arcs but no circles, and both arcs and circles. There are 5 possibilities for the number of sides the polygon can have, giving us 4*5=20 for the number of possibilities a single polygon can have. The number of possibilities for the middle configuration is:

The Inner Section

Finally, the inner section is composed of another outer section and an optional middle section. This time however the middle section can only have up to 6 sides and be made of a single polygon. The number of possibilities for the inner section would then be:

Totaling All Possibilities

Before going into generating the symbols, the current possible number of unique transmutation circles is:

I’m going to have to leave the number at 14 billion because once I start to get into the different symbol generation I no longer know how to calculate the different possibilities.

Generating The Symbols

For generating the symbols I took heavy inspiration from watawatabou’s technique and I am in no way original.

The idea is you start with a 3 by 3 grid of points, with each point having an assigned possibility for either being turned on or off. Once it has been determined what points are going to be turned on, they are compared to other neighboring points. If two points are neighbors then there is an arbitrary 70% chance a line will form between the two points. If a symbol comes out to have less than 5 lines then the whole process would start over. After the lines had been determined, they would be shifted around some to make them look less precise. A total of 26 symbols were generated, each to map to a single letter in the English alphabet.

Fixing Symbol Generation

After deciding on a transmutation circle I liked I took it to a tattoo artist to be evaluated. After about a 30 minutes consultation she determined that some of the symbols where problematic and would bleed together. She identified anytime a triangle was formed inside of the symbol it was problematic. This gave me something concrete to work towards.

I am not proud of the code that was written in order to detect smaller triangles inside the symbols. The resulting symbols were less interesting but got the job done.

It’s interesting to see that duplicates and look-alikes are actually starting to pop up with this method of generation. Removing the smaller triangles must have drastically reduced the number of symbol possibilities.

Results

I’m pretty happy with how things turned out. The symbols along the outside perimeter are lyrics to one of my favorite Aesop Rock songs: Shrunk.

Also, I’d like to thank the tattoo artist Brittany for working with me to help make this happen. She does really great work that you can see here.

Developer of VR and all things associated. And also things not associated. I uh, write code.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store