Shaders

A memo in GLSL programming.

Generally the vec2 uv is used to describe a normalized input coordinates by dividing the coordinate by the current resolution :

Different compilers use different syntax to describe the resolution.

vec2 uv = fragCoord.xy / iResolution.xy;

The origin (0.0 ; 0.0) of this normalized vector is the bottom left.

To move the origin to the center of the screen, remove 0.5 to both components :

uv -= 0.5;

To correct the aspect ratio on non-square displays, we multiply one component (generally x) by the Resolution's aspect ratio.

uv.x *= iResolution.x / iResolution.y;

To draw a circle, define a center point where the circle should be drawn and use a length function to calculate the length of the coordinates to this center.

One simple way is to compare the length to a value and draw a color if it's less and another if it's more :

    float d = length(uv);
    float c = d;
 
    if (d < .3) c = 0.0 ; else c = 1.0;
 
    // Output to screen
    fragColor = vec4(vec3(c),1.0);

However, this is not recommended as it creates a discontinuity of the values where they jump from 0.0 to 1.0 when reaching the radius of the circle.

It's better to use a smoothstep function like this :

    float d = length(uv);
    float c = ;
 
    float d = length(uv);
    float r = .3
    float c = 1.-smoothstep(r, r-.02, d);
 
    // Output to screen
    fragColor = vec4(vec3(c), 1.0);

Here in a dedicated function :

float drawCircle(vec2 uv, float r, float blur) {
    float d = length(uv);
    float c = 1.-smoothstep(r, r-0.02, d);
 
    return c;
}

ISF stands for Interactive Shader Format and is a file format used to describe GLSL shaders for real-time image filtering and generation.

* ISF Main Site

* TwiGL App and TwiGL GitHub

* ISF Editor

* Book of Shader's Editor

* ShaderToy's Editor

* Graph Toy : Display math functions

* Color Palettes : Interactive Color Palettes

* Desmos : Great math tools

* Inigo Quilez's website

* Shadertoy's unofficial WordPress