GLSL Procedural Texture

Question

can someone help me, i need to make some procedural textures in shader program GLSL, i have one of them but i need all and i don't know how to do them.

http://puu.sh/plXYT/4c279d6de3.png - This can be useful

This is what i have:

    #version 140

in vec2 texCoord; 

out vec4 fColor; 


    void main()
    {
        const float size = 10.0; 

        fColor = vec4(mod(floor(size * texCoord.t) + floor(size * texCoord.s), 2.0) + (mod(floor(size * texCoord.s),2.0) * mix(  vec4(0.0, 1.0, 0.0, 1.0) , ( vec4(0.0, 0.0, 1.0, 1.0) ), (fract(size * texCoord.s) + fract(size * texCoord.t))/2.0 )));

    }

And this is what i need to do http://puu.sh/plSwB/9ae1adee13.png

Answer 1

Try this for the second one:

const float num = 6.0;
const float wid = 0.1;
const vec4 c_back = vec4(0.55, 0.35, 0.0, 1.0);
const vec4 c_edge = vec4(0.28, 0.48, 0.05, 1.0);
const vec4 c_beam = vec4(0.19, 0.77, 0.06, 1.0);

float y = mod(texcoord.t, 1.0 / (num - 1.0)) * (num - 1.0);
float dy = (y < 0.5) ? y : 1.0 - y;
fColor = (dy > wid) ? c_back : mix(c_beam, c_edge, dy / wid);

float x = mod(texcoord.s, 1.0 / (num - 1.0)) * (num - 1.0);
float dx = (x < 0.5) ? x : 1.0 - x;
if (dx <= wid) fColor = mix(c_beam, c_edge, dx / wid);

And for the third:

const float num = 3.5;
const float gap = 0.03;
const vec4 c_insd = vec4(0.05, 0.30, 0.57, 1.0);
const vec4 c_back = vec4(0.75, 0.73, 0.73, 1.0);

const float reg = 0.5 / num;
float rx = texcoord.s / reg,
      ry = texcoord.t / reg;
float x = fract(rx), 
      y = fract(ry);

if (x < gap || x > 1.0 - gap || y < gap || y > 1.0 - gap)
   fColor = c_back;
else
{
   if (mod(floor(rx) + floor(ry), 2.0) == 0.0)
      fColor = (y - x > 0.5 || x - y > 0.5) ? c_back : c_insd;
   else
      fColor = (y + x < 0.5 || x + y > 1.5) ? c_back : c_insd;
}