Shadertoy – examples and circle . – free-tutorials.org news free tutorials source code development scripts

In this tutorial, I will deal with some examples.
The goal of this tutorial is to understand how shadertoy works and what are the requirements to be able to work properly with this tool.
You need an account then start with the New button to create a new shadertoy workspace.
The Shaderstoy (shaders theory) work on the principle of levels of light, darkness, and color within an input and output result.
The Shadertoy tool has input elements that you can use in source code and predefined input items.
The source code input elements can be found at Shader Inputs, see:

uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iTime;                 // shader playback time (in seconds)
uniform float     iTimeDelta;            // render time (in seconds)
uniform int       iFrame;                // shader playback frame
uniform float     iChannelTime[4];       // channel playback time (in seconds)
uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3;          // input channel. XX = 2D/Cube
uniform vec4      iDate;                 // (year, month, day, time in seconds)
uniform float     iSampleRate;           // sound sample rate (i.e., 44100)

uniform vec3 iResolution; // viewport resolution (in pixels)

uniform float iTime; // shader playback time (in seconds)

uniform float iTimeDelta; // render time (in seconds)

uniform int iFrame; // shader playback frame

uniform float iChannelTime[4]; // channel playback time (in seconds)

uniform vec3 iChannelResolution[4]; // channel resolution (in pixels)

uniform vec4 iMouse; // mouse pixel coords. xy: current (if MLB down), zw: click

uniform samplerXX iChannel0..3; // input channel. XX = 2D/Cube

uniform vec4 iDate; // (year, month, day, time in seconds)

uniform float iSampleRate; // sound sample rate (i.e., 44100)

Other input elements are a keyboard, image, video, sound, buffers, etc.
This can be used into source code with iChannel (uniforms into shader theory).
Those who have taught at the university about field theory or special mathematics will have greater chances to succeed in understanding these shaders theory.
The theory of shaders is applicable very well in complex scientific representations.
Look at my example and try to understand what vectors, functions and Shader Inputs I used.
Read the comments made in the source code and Shader Inputs.

// Created by Cătălin George Feștilă - http://free-tutorials.org
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // default start main function to set uv (https://en.wikipedia.org/wiki/UV_mapping) 
    // this with viewport resolution (in pixels) if you use iResolution.xy
    // fragColor is the output to screen = uv (if you use WebGL / OpenGL then you need to use 
    // because shadertoy uses technique called rendering to texture).
    
    //
    // -- ex1: random colors 
    // vec2 uv = fragCoord.xy ;
    // vec4 for fragColor and use operators and math functions(ex: +* and sin)
    // fragColor = vec4(uv,0.5+0.5*sin(iTime),1.0);
    // will show random colors by fragment shader xy 
    
    //
    // -- ex2: random colors with viewport resolution
    // same effect with the next row 
    // this will show random colors by iResolution (see: Shader Inputs uniform )
    // uniforms is like constants 
    // vec2 uv = iResolution.xy ;
    // and
    // fragColor = vec4(uv,0.5+0.5*sin(iTime),1.0);
    
    //
    // -- ex3: one color
    // set yout uv to display 
    // vec2 uv = fragCoord.xy / iResolution.xy; or just fragCoord.xy
    // vec2 uv = fragCoord.xy;
    // create a vec3 color 
    // vec3 col = vec3(0, 110,110);
    // show the color 
    // fragColor = vec4( col,0.0 );
    
    //
    // -- ex4: circle with 30% from iResolution
    vec2 uv = fragCoord.xy;
    // set center for circle
    vec2 center = iResolution.xy * 0.5;
    // set radius of circle
    float radius = 0.30 * iResolution.y;
    // create circle with delta and theta function
    // make delta 
    float d = length(center - uv) - radius;
    // make theta with color transparency to 0.4 and set 1 for clamp
    // the clamp is a returned value computed as min(max( x , minVal ), maxVal ).
    float t = clamp(d, 0.4, 1.0);
    fragColor = vec4( t, center, (120,230,0));
}

// Created by Cătălin George Feștilă - http://free-tutorials.org

// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

void mainImage( out vec4 fragColor, in vec2 fragCoord )

{

// default start main function to set uv (https://en.wikipedia.org/wiki/UV_mapping)

// this with viewport resolution (in pixels) if you use iResolution.xy

// fragColor is the output to screen = uv (if you use WebGL / OpenGL then you need to use

// because shadertoy uses technique called rendering to texture).

// -- ex1: random colors

// vec2 uv = fragCoord.xy ;

// vec4 for fragColor and use operators and math functions(ex: +* and sin)

// fragColor = vec4(uv,0.5+0.5*sin(iTime),1.0);

// will show random colors by fragment shader xy

// -- ex2: random colors with viewport resolution

// same effect with the next row

// this will show random colors by iResolution (see: Shader Inputs uniform )

// uniforms is like constants

// vec2 uv = iResolution.xy ;

// and

// fragColor = vec4(uv,0.5+0.5*sin(iTime),1.0);

// -- ex3: one color

// set yout uv to display

// vec2 uv = fragCoord.xy / iResolution.xy; or just fragCoord.xy

// vec2 uv = fragCoord.xy;

// create a vec3 color

// vec3 col = vec3(0, 110,110);

// show the color

// fragColor = vec4( col,0.0 );

// -- ex4: circle with 30% from iResolution

vec2 uv = fragCoord.xy;

// set center for circle

vec2 center = iResolution.xy * 0.5;

// set radius of circle

float radius = 0.30 * iResolution.y;

// create circle with delta and theta function

// make delta

float d = length(center - uv) - radius;

// make theta with color transparency to 0.4 and set 1 for clamp

// the clamp is a returned value computed as min(max( x , minVal ), maxVal ).

float t = clamp(d, 0.4, 1.0);

fragColor = vec4( t, center, (120,230,0));

}

This is the result of this source code:

Leave a Reply Cancel reply