About this flag you can read at Wikipedia.
The goal of this simple tutorial is to learn the link between iResolution and the fill areas.
First, you need to normalized pixel coordinates from 0 to 1.
The gl_FragColor is a vec4 type of float values in the range 0 to 1.
We can use this property by fill the areas of the screen.
The example can be changed to use the RGBA.
The source code is this:
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Output to screen
// fill the screen with red
fragColor = vec4(1,0,0,0);
// fill the 2/3 of size with yellow color
if(uv.x<(1.0/1.5))
fragColor = vec4(1,1,0,0);
// fill the last 1/3 with the blue color
if(uv.x<1 .0="" code="" fragcolor="vec4(0,0,1,0);">