Memorandum of Shadertoy Learning. part1

I’m trying shadertoy these days. This is my tutorial for shadertoy.

1 main function

void mainImage( out vec4 fragColor, in vec2 fragCoord ) is the entry point in Shadertoy.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
 //main drawing process is here
}

Variable fragCoord contains the pixel coordinates for which the shader needs to compute a color. The resulting color is gathered in fragColor as a four component vector

Modifiers

• in
  • an “in” variable is used only in this function and not output.
• out
  • an “out” variable is an output variable that can be passed by reference.
• inout
  • an “inout” variable is an output and input variable.

2 fragColor

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
fragColor = vec4(0.98, 0.808, 0.333, 1.0);
}

Assign vec4 (R, G, B, alpha) to fragColor variable.

3 fragCoord

variable fragCoord is coordinate of target pixel. fragCoord.x is x coordinate and fragCoord.y is y coordinate and fragCoord.xy is (x,y) coordinate.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec3 color1 = vec3(1.0, 1.0, 0.5);
    vec3 color2 = vec3(0.98, 0.808, 0.333);
    if (int(fragCoord.x )% 50 < 25){
        fragColor = vec4(color1, 1.0);
    }
    else{
        fragColor = vec4(color2, 1.0);
    }
}

4 iResolution

Uniform variable iResolution passes the resolution of the image to the shader. iResolution.x is x coordinate and iResolution.y is y coordinate and iResolution.xy is (x,y) coordinate.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    int n = 4;
    int width = int(iResolution.x)/n;
    if (int(fragCoord.x )% width < width/2){
        fragColor = vec4(1.0, 1.0, 1.0-fragCoord.y/iResolution.y, 1.0);
    }
    else{
        fragColor = vec4(1.0, 0.0, fragCoord.y/iResolution.y, 1.0);
    }
}

5 Conditional branch and color setting

Check the article “How to Convert HSV to RGB” for more information about hsv2rgb.

vec3 hsv2rgb(in vec3 hsv){
    vec3 rgb;
    float h = hsv.x * 360.0;
    float s = hsv.y;
    float v = hsv.z;
    float c =v * s;
    float h2 = h/60.0;
    float x = c*(1.0 - abs( mod(h2, 2.0) - 1.0));
    switch(int(h2)){
        case 0: rgb = vec3(v-c) + vec3(c, x, 0.0); return rgb;
        case 1: rgb = vec3(v-c) + vec3(x, c, 0.0); return rgb;
        case 2: rgb = vec3(v-c) + vec3(0.0, c, x); return rgb;
        case 3: rgb = vec3(v-c) + vec3(0.0, x, c); return rgb;
        case 4: rgb = vec3(v-c) + vec3(x, 0.0, c); return rgb;
        case 5: rgb = vec3(v-c) + vec3(c, 0.0, x); return rgb;
        case 6: rgb = vec3(v-c) + vec3(c, x, 0.0); return rgb;
    }
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 coordinate =  fragCoord.xy - 0.5*iResolution.xy;
    vec3 pixel_color = vec3(0.5);
    
    int gradation = 10;
    
    int r_width = int(0.5*iResolution.y/float(gradation));
    int r;
    for(int i =0; i<gradation+1; i++){
        r = r_width*i;
        float i_flaot = float(float(i)/float(gradation+1));
        if(coordinate.x*coordinate.x + coordinate.y*coordinate.y < float(r*r)){
        	pixel_color = hsv2rgb(vec3((1.0/float(gradation))*float(i), 1.0, 1.0));
            break;
    	}
    }
    fragColor = vec4(pixel_color, 1.0);
}