In the process of making a random flag generator twitter bot, I did a lot of research into heraldry and vexillology. I learned a great deal about layering shapes and working with colour. The following might be useful if you'd like to learn the basic principles of good flag design, and for advice on random flag generation in games.

I'll share the heraldic and vexillological research that I found most useful, and then I'll expand more on shape, layering, fimbriation, alignment, colour, mottos, p5.js and twitter bots. Lastly, I'll answer miscellaneous questions on how I designed and built the generator. I'm still accepting questions over on my discord server.

Contents

  1. Reading list
  2. Shape and layering
  3. Alignment
  4. Colour and fimbriation
  5. Motto
  6. p5.js
  7. Twitter and Mastodon bots
  8. FAQ

https://twitter.com/vexillographing/status/1543996380045246468

Reading list

I recommend starting with a bit of history. This is a good explainer on the use of shape and colour in heraldry.


Next step is to learn about how heraldic principles apply to flags and the importance of simplicity.


This is a breakdown of current flag design and trends. Useful if you're going to make a weighted random generator that imitates the real life frequency of common versus more unique flags.


Lastly, some inspiration. Every month the vexillology subreddit hosts a design competition and the submissions tend to be well made and unique. More useful for designing unique flags rather than making a generator.

Shape and layering

The shapes that form the foundation of flags and heraldry are largely made up of simple lines, circles and primitive polygons like triangles and quadrilaterals. These basic shapes and simple lines are layered on top of each other to create more interesting geometry.

There are four main layers in heraldry: field, division, ordinary and charge. The field is the background layer; a single plain colour. We’ll be using three colours to make our combined geometry, with the field being drawn in colour A. The charge is an emblem or symbol, usually a more complex shape like a star or a crescent (or even more complex for example an animal). We’ll be focusing mainly on the combined geometry of the field, division and ordinary.

Simple divisions - https://heraldry.sca.org/kwhss/2020/Parði_Beginner_Heraldry.pdf

Simple divisions - https://heraldry.sca.org/kwhss/2020/Parði_Beginner_Heraldry.pdf

Complex divisions - https://heraldry.sca.org/kwhss/2020/Parði_Beginner_Heraldry.pdf

Complex divisions - https://heraldry.sca.org/kwhss/2020/Parði_Beginner_Heraldry.pdf

The division is a simple layer that divides the field into two colours that usually take up the same amount of space. The division is drawn in colour B. In the two images above you can see that there are on average an equal amount of black pixels as there are white pixels on each shield, so the split between colours A and B is even. For our purposes I would ignore per pall and per pall inverted for now, as they use three colours.