Transmutation Circle

Procedurally generate random transmutation circles from Fullmetal Alchemist. Implemented in both the web browser and an exmaple Unity Project. Read more about how it works @eli.davis1995/procedurally-generating-my-first-tattoo-9f81ed617089">here.

Example Output

Unity Version

Example

The Unity version uses drawing interface that is passed to it to make the transmutation circle. I implemented it using something that will use the line renderer tool to draw it. If you want to create your own drawing tool you just have to implement 3 methods

public interface IDrawingTool
{
    void Line(Vector2 starting, Vector2 ending, float thickness);
    void Polygon(Vector2 center, float radius, int sides, float rotation, float thickness);
    void Circle(Vector2 center, float radius, float thickness);
}

Typescript Canvas Version

Example

Inspiration

I want to procedurally generate a skill tree based on the number of powers and upgrades that exist for Scry’s upcoming game Rapture. I thought I’d try my hand at building these circles to see how feasable such a thing would be.

Inspiration for rune generation pulled from here.

Dev

npm run dev

Open your web browser to localhost:3000, webpage refreshes on save