Recomposing Flags
How does shader see the complex-looking flags?
When I was young, I used to play Red Alert 2, a strategy game set in a fictional Cold War theme. You could choose between the Allies and the Soviets, with each faction having nations that featured their own unique specialties. Part of the fun was deciding which country to pick.
If you look at the world map, it’s easy to spot the nations with their flags. Some flags share similarities, while others are truly unique. I used to imagine what the countries might look like based on their flag designs. However, some flags had such intricate patterns that, as a student who struggled to draw South Korean Flag, I often wondered how kids from those countries managed to draw their own flags.
Back to Red Alert 2, even with its old shader-based graphics and low resolution, the flag logos were surprisingly easy to recognize despite their low detail. Now, as an adult looking back at the UI from those days, it’s striking to see how the designers worked within the graphical limitations of the time, focusing on making things as intuitive and recognizable as possible.
Inspired by this, I wanted to experiment by recreating some of the more complex-looking flags using the coding platform ShaderToy. I wanted to see whether these flags would resemble their original designs or if they would turn into unexpectedly unique patterns.
However…
In the case of Spain, compared to the original, there were some critical missing elements. Firstly, Spain's coat of arms is primarily defined by white and red. While yellow plays a more prominent role compared to blue, in a low-resolution shader environment, there’s no need to emphasize yellow as much. However, I believed it was crucial to at least preserve the main composition of red and white to maintain the identity of the Spanish coat of arms.
Below is the code example of Spain.
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
vec2 uv = fragCoord / iResolution.xy;
// Colors: Red, Yellow and White
vec3 red = vec3(0.8, 0.0, 0.0); // Red (top and bottom stripes, emblem details)
vec3 yellow = vec3(1.0, 0.84, 0.0); // Yellow (middle stripe)
vec3 white = vec3(1.0, 1.0, 1.0); // White (emblem details)
// Stripe heights
float stripeHeight = 1.0 / 5.0;
// Stripe Color
vec3 color;
if (uv.y < stripeHeight || uv.y > (1.0 - stripeHeight)) {
color = red; // Top and bottom stripes
} else {
color = yellow; // Middle stripe
}
// Emblem
vec2 emblemCenter = vec2(0.5, 0.5); // Center of the flag
float dist = length(uv - emblemCenter);
// Add a larger red rectangle for the emblem base
if (uv.x > emblemCenter.x - 0.05 && uv.x < emblemCenter.x + 0.05 &&
uv.y > emblemCenter.y - 0.08 && uv.y < emblemCenter.y + 0.08) {
color = red; // Red rectangle
}
// Add Horizontal White Bar in the Emblem
if (uv.x > emblemCenter.x - 0.05 && uv.x < emblemCenter.x + 0.05 &&
abs(uv.y - emblemCenter.y) < 0.01) {
color = white; // Horizontal white bar
}
// Add Vertical White Bars
if ((abs(uv.x - (emblemCenter.x - 0.03)) < 0.005 || abs(uv.x - (emblemCenter.x + 0.03)) < 0.005) &&
uv.y > emblemCenter.y - 0.08 && uv.y < emblemCenter.y + 0.08) {
color = white; // Vertical white bars
}
// Add Small Squares
if ((uv.x > emblemCenter.x - 0.035 && uv.x < emblemCenter.x - 0.025 && uv.y > emblemCenter.y - 0.02 && uv.y < emblemCenter.y + 0.02) ||
(uv.x > emblemCenter.x + 0.025 && uv.x < emblemCenter.x + 0.035 && uv.y > emblemCenter.y - 0.02 && uv.y < emblemCenter.y + 0.02)) {
color = red; // Inner red squares
}
fragColor = vec4(color, 1.0);
}
While working on this, I came up with some criteria for how we recognize flags:
The base colors and how they are divided (ex. Russia and France).
The placement and composition of the emblem (ex. Slovenia and Croatia).
The main colors of the emblem (ex, Spain and Brazil).
Regardless of whether a flag shares visual elements with others or stands alone, I believe flags are the pinnacle of unique design. Even with a lack of intricate details, I think people can easily associate certain visual cues with specific flags. With that in mind, I created the images below.
Albania
Brazil
Butan
Cambodia
England
Ethiopia
Georgia
Guatemala
Kazakhstan
Mozambique
NATO
Oman
Papua New Guinea
Paraguai
Portugal
Spain
Uganda
United Nations
Uruguai
USA