Month: January 2021

The above four images show is a sequence of animated shader stills from left to right and top to bottom.

For this week’s homework shader explorations I decided to integrate my first shader, a Piet Mondrian inspired shader (created when I was exploring rectangle placement and layering effects for the Book of Shaders’ “recreate a Piet Mondrian painting” exercise), as I felt the design would make for a cool tile effect. The original colours followed Mondrian’s primary colour scheme (similar to the last still, but the small rectangle was yellow), but I felt that it needed to be more dynamic so I decided to animate a colour shifting gradient using u_time and smoothstep.

I still felt like I needed to add more variety of shapes, as I took the effort to make functions based on all of the shape exercises, so I decided on adding a polar shape. I found experimenting with the different parameters of polar shapes extremely fun, therefore I created a polar shape function that allowed me to control everything from position to length and width of spokes. Although I could have gone for a more complicated shape, I decided against it because the tiling pattern was also complex. It was an awesome moment when I realized I was able to layer the tile pattern over the polar design and see the solar shapes through the gap made with one of the rectangles.

Overall, I had a lot of fun learning about shapes and creating my own functions for them.

// Author: Madelaine Fischer-Bernhut
// Title: Animated Piet Mondrian Pattern v2

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

#define PI 3.14159265358979323846


//rotation and tile functions from the Book of Shaders "Patterns"
vec2 rotate2D(vec2 st, float angle){
 st -= 0.5;
 st = mat2(cos(angle), -sin(angle),
 sin(angle), cos(angle))*st;
 st += 0.5;
 return st;
 
}

vec2 tile(vec2 st, float zoom){
 //scale up space
 st *= zoom;
 
 //wrap around 1.0
 return fract(st);
}

vec2 rotateTilePattern(vec2 st){
 
 //scale coordinate system by 2x2
 st *= 2.0;
 
 //give each cell and index number according to its position
 float i = 0.0;
 i += step(1.0, mod(st.x,2.0));
 i += step(1.0, mod(st.y,2.0))*2.0;
 
 //each cell between 0.0 -1.0
 st = fract(st);
 
 //rotate each cell according to index
 //use matrix to rotate the space

 if(i == 1.0){
 st = rotate2D(st, PI*-0.5);
 } else if (i == 2.0){
 st = rotate2D(st, PI*0.5);
 } else if (i == 3.0){
 st = rotate2D(st, PI*2.0);
 } else if (i== 0.0){
 st = rotate2D(st, PI);
 }
 
 return st;
 
}

float drawRect(vec2 st, vec2 size, vec2 pos){
 float result = 1.0;
 
 //invert size so the size variables will controle the size based on the white dimensions
 vec2 border = (1.0-size)/2.0;
 
 result = step(border.x + pos.x, st.x);
 result *= step(border.x - pos.x, 1.0-st.x);
 result *= step(border.y + pos.y, st.y);
 result *= step(border.y - pos.y, 1.0-st.y);
 
 return result;
}

float createPolShape(vec2 st, float size, float spokesNum, vec2 spokeSize, vec2 pos, float rot, float blur){
 float result = 1.0;
 
 //control the position of the shape
 pos -= st;
 
 //control the size of the shape
 float r = length(pos)*size;
 float a = atan(pos.y, pos.x);
 
 //control the number of "spokes" and their shape
 //rotate and animate the shape by adding or subtracting from the "a" in cos or sin
 float f = cos(a*spokesNum + rot)*spokeSize.y+spokeSize.x;
 f = abs(cos(a*spokesNum+rot)*sin(a*spokesNum+rot))*spokeSize.y+spokeSize.x;
 // f = smoothstep(-.5,1.0, cos(a*spokesNum+rot))*spokeSize.y+spokeSize.x;
 
 //changing f+value effects focus of shape (blurred)
 result = 1.0-smoothstep(f,f+blur,r);

 
 return result;
}

void main() {
 //st are texture coordinates, s is along the horizontal axis and t along the vertical axis (surface)
 vec2 st = gl_FragCoord.xy/u_resolution.xy;
 st.x *= u_resolution.x/u_resolution.y;

 float outline = 0.05;
 
 //for testing: centre of polar shape position is based on mouse
 vec2 pos = u_mouse/u_resolution;
 pos = vec2(0.5);
 
 vec3 color = vec3(0.0);
 
 //polar shape will appear underneath Piet Mondrian pattern
 color = vec3(createPolShape(st, 2.15, 10.0, vec2(0.350,0.860), pos, u_time*2.0, -0.260));

 //divide space by value
 st = tile(st, 1.0);
 
 //first rotate entire space by 90 deg
 st += rotate2D(st,PI*0.5);
 
 //then rotate title patterns based on index/location
 st = rotateTilePattern(st);

 //create bordered rectangles
 
 //white rectangles
 //adding the initial rectangle layer instead of multiplying results in the Piet Mondrian Pattern being masked by the polar shape
 // color += vec3(drawRect(st, vec2(0.360,0.590) - vec2(outline), vec2(-0.320,0.210)));
 
 //multiplying a rectangle layer in with the other two added results in that rectangle becoming "transparent"
 color *= vec3(drawRect(st, vec2(0.360,0.590) - vec2(outline), vec2(-0.320,0.210)));
 color += vec3(drawRect(st, vec2(0.480,0.585) - vec2(outline), vec2(0.259,-0.067)));
 color += vec3(drawRect(st, vec2(1.0,0.165) - vec2(outline), vec2(0.000,-0.417)));
 
 //coloured rectangles (with animated gradient overlay effect using smoothstep to control placement, and offsetting those colour gradients by overlaying sin & cos time animations)
 color.r += drawRect(st, vec2(0.540,0.300) - vec2(outline), vec2(0.105,0.350)) * smoothstep(sin(u_time*0.4)*0.9,1.1,st.x) ;
 color.g += drawRect(st, vec2(0.540,0.300) - vec2(outline), vec2(0.105,0.350)) * smoothstep(cos(u_time*0.4)*0.9,1.1,st.x) ;
 color.r += drawRect(st, vec2(0.150,0.3) - vec2(outline), vec2(0.425,0.35))* smoothstep(cos(u_time*0.4)*0.9,1.5, st.y);
 color.g += drawRect(st, vec2(0.150,0.3) - vec2(outline), vec2(0.425,0.35))* smoothstep(sin(u_time*0.4)*0.9,1.5, st.y);
 color.b += drawRect(st, vec2(0.540,0.300) - vec2(outline), vec2(-0.230,-0.210)) * smoothstep(sin(u_time*0.4)*0.95,1.2, 1.0-st.x);
 color.g += drawRect(st, vec2(0.540,0.300) - vec2(outline), vec2(-0.230,-0.210)) * smoothstep(cos(u_time*0.4)*0.95,1.2, 1.0-st.x);


 gl_FragColor = vec4(color,1.0);
}

Note: someone please tell me how to embed the code in these posts because it seems I am the only one who can’t figure it out, and here I am pastebin-ing like a chump. Thanks in advance!

Code: https://pastebin.com/iu7Q6nai

This was an exercise in getting accustomed to using shapes to create images. These are layered circles – including the curves, which are made using background-coloured circles to cover other circles. I found the book of shaders editor’s built in number and colour adjustment tools made it pretty easy to arrange the shapes. In terms of tweaking the circle to take on slightly different curves, I’m still figuring that out.

Code: https://pastebin.com/ndrG1uTa

This is a simple pattern made using a grid. I struggled to figure out how to get access to use the pixel position within the larger canvas, rather than within the grid cell itself. (I still haven’t figured it out). I understand manually designating which row and column combinations to render which set of instructions, but I wonder how to introduce a bit more randomness.

I spent some time playing around with the border function. I ended up with this gradient that slowly moves towards the bottom left of the screen. The colors mix in weird way with this one so I decided to leave it as is.

// Author:Mark Herod
// Title: Shape/Pattern

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float drawRect (vec2 st, vec2 size){
float result = 1.0;

vec2 border = (1.0-size)/2.;

result = step(border.x, st.x);
result *= step(border.x, 1.0-st.x);
result *= step(border.y, st.y);
result *= step(border.y, 1.0-st.y);

return result;
}

float drawCircle(vec2 st, float size){
float result = distance(st, vec2(0.5));
result = 1.072-step(size,result);

return result;
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec3 color = vec3(0.);

float border = 0.178 + (cos(st.x * 98.008 + u_time * 2.112) *0.732 *0.5);

//applies border and movement to each shape.
// also give shader the squarish shape
border /= + (cos(st.y * 99. + u_time * 1.792) *2.444 *1.284);

vec2 size = vec2 (0.5,0.5);

//draws squares
color.g = drawRect( st, size );
color.g = (asin(drawRect( st, size - vec2(border))));

//draws circle.
color.r = drawCircle(st, border);
color.b += drawCircle(st,border/st.y);

gl_FragColor = vec4(color,1.0);
}

This was just an experimentation of shapes and seeing how things worked together. I used the square as more of a light source to shine in from the right.

// Author: Mark Herod
// Title: Faded Shapes

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float drawCircle(vec2 st, vec2 pos, float size){
 
float result = distance(st,pos);
result = 1.0-step(size,result);
return result;
	}

float drawRect (vec2 st, vec2 size){
    float result = 1.0;
   
    vec2 border = (1.0-size)/2.;
    
    result =(border.x, st.x);
    
    
    return result;
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;

    vec3 color = vec3(0.042,0.575,0.396);
    //color = vec3(st.x,st.y,abs(sin(u_time)));
    
    float c1 = drawCircle(st, vec2(0.320,0.470),0.4);
    float c2 = drawCircle(st, vec2(0.360,0.270),0.560);
    float c3 = drawCircle(st, vec2(0.320,0.470),4.);
    
    float r1 = drawRect( st, vec2(2.0, 0.2) );
    
    color = mix(color, vec3(0.0,1.1,3.0),c1*0.5 );
    color = mix(color, vec3(2.499,3.000,0.306),c2*0.5 );
    color = mix(color, vec3(0.209,0.405,0.036),c3*0.5 );
    color = mix(color, vec3(3.000,1.086,2.930),r1/1.8);
    

    gl_FragColor = vec4(color,1.0);
}

I feel like I had even more trial and error this week than I did previously, as I actually had a very hard time trying to learn how to combine shapes and colors, so I was very pleased when I figured it out.

Because of that, I ended up working on the pattern shader first. It ended up being more of an aesthetic exploration where I played with rotating tiles and optical illusions, using some of the functions from the Book of Shaders and tweaking with the numerical values. Initially, I wanted to play with changing colors on each tile rather than rotating but as I was having trouble finding out how to add colors, I decided to focus on the other aspects.

// Author: Dawn Murphy
// Title: Shape Pattern Shader

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265358979323846

uniform vec2 u_resolution;
uniform float u_time;

vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}

vec2 rotateTilePattern(vec2 _st){

// Scale the coordinate system to 2x2
_st *= 3.0;

//number each cell
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |

float index = 0.0;
index += step(1., mod(_st.x,2.0));
index += step(1., mod(_st.y,2.0))*2.0;

// Make each cell between 0.0 - 1.0
_st = fract(_st);

// Rotate each cell according to the index
if(index == 1.0){
// Rotate cell 1 by 45 degrees
_st = rotate2D(_st,PI*0.75);
} else if(index == 2.0){
// Rotate cell 2 by 145 degrees
_st = rotate2D(_st,PI*-0.75);
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
_st = rotate2D(_st,PI);
}
return _st;
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
vec3 color = vec3(0.0);
float d = 0.0;

//Make 4 tiles
st *= 2.0; // Scale up the space by 3
st = fract(st); // Wrap around 1.0
st = rotateTilePattern(st);

// Remap the space to -1. to 1.
st = st *2.-1.;


// Make the distance field
d = length( abs(st)-1.0);

// Visualize the distance field
gl_FragColor = vec4(vec3(fract(d*5.0)),1.0);


}

For the shape and color-based shader, I did a lot more digging, examining examples from the book, and (of course) trial and error until I was able to find a way to functionally combine shapes with colors using mix(). For the result, I worked on making shapes in different colors and positions and with layering them in a pleasing way.

// Author: Dawn Murphy
// Title: Multicolored Shape Shader

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

//define first circle
float circleF(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.8);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

//define second circle
float circleS(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.5);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

//define third circle
float circleT(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.2);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

//define fourth circle
float circleFo(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.2,0.8);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

//define fifth circle
float circleFi(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.80,0.200);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);

vec3 pct = vec3(st.x);

//visualize the circles
vec3 colorF = vec3(circleF(st,0.9));
colorF -= vec3(0.096,0.690,0.338); //turns the first circle pink by subtracting all the green
vec3 colorS = vec3(circleS(st,0.9));
vec3 colorT = vec3(circleT(st,0.9));
vec3 colorFo = vec3(circleFo(st,0.9));
vec3 colorFi = vec3(circleFi(st,0.9));

//combine time
color = mix(colorF,vec3(0.066,0.273,1.000),colorT); //adds the third circle and colors it blue
color = mix(color,vec3(0.592,0.129,0.730),colorS); //adds the second circle and colors it purple
color = mix(color,vec3(0.995,0.280,0.695),colorFo); //adds the fourth circle and colors it pink
color = mix(color,vec3(0.066,0.273,1.000),colorFi); //adds the fifth circle and colors it blue
gl_FragColor = vec4( color, 1.0 ); //draws
}

I enjoyed experimenting with colours for this week’s homework. I was able to get some interesting results by just repeating shapes and adding exponential functions to them. I only implemented slight animation for this image so it has a subtle, hypnotic feel to it.

// Author: Emily Flood
// Title: Wavy circles

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float drawRect(vec2 st, vec2 size){
float result = 1.0;

vec2 border = (1.0-size)/2.;


result = step(border.x,st.x);
result *= step(border.x,1.0-st.x);
result *= step(border.y,st.y);
result *= step(border.y,1.-st.y);

return result;
}

float drawCircle(vec2 st, vec2 pos, float size){
float result = distance(st, pos);
result = 1.0-step(size,result);
return result;
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

//animating the shapes slightly
st.x += sin(st.y *20. + u_time) * -0.0;
st.y += cos(st.x *1. + u_time) * -0.01;

vec3 color = vec3(0.);

//delcaring border for rectangle
float border = 0.01;

//drawing all the circles
float c1 = drawCircle(st, vec2(0.210,0.180),0.4);
float c1b = drawCircle(st, vec2(0.320,0.400),0.512);
float c2 = drawCircle(st, vec2(0.740,0.400),0.4);
float c2b = drawCircle(st, vec2(0.380,0.250),1.088);
float c3 = drawCircle(st, vec2(0.200,0.990),0.472);
float c4 = drawCircle(st, vec2(0.040,0.540),0.240);
float c5 = drawCircle(st, vec2(0.870,0.880),0.288);
float c6 = drawCircle(st, vec2(0.840,0.270),0.152);
float c7 = drawCircle(st, vec2(0.840,0.020),0.320);

//drawing all the rectangles
float r1 = drawRect(st, vec2(0.740,0.720));
float r2 = drawRect(st, vec2(0.550,0.550));
float r3 = drawRect(st, vec2(0.430,0.440));

//implementing colours into the rectangles
color = mix(color, vec3(0.418,0.396,0.440),r1*1.);
color = mix(color, vec3(0.048,0.865,0.791),r2*0.992);
color = mix(color, vec3(0.000,1.000,0.536),r3*1.516);

//implementing colours into the circles
color = mix(color, cos(vec3(0.776,0.609,1.000)),c1*1.572);
color -= mix(color, cos(vec3(0.776,0.609,1.000)),c1b*2.364);
color = mix(color, vec3(0.895,1.000,0.674),c2*0.716);
color = mix(color, sin(vec3(0.890,0.665,1.000)),c2b*1.364);
color = mix(color, vec3(0.946,1.000,0.578),c3*2.268);
color = mix(color, vec3(0.270,1.000,0.981),c4*0.732);
color = mix(color, cos(vec3(1.000,0.389,0.711)),c5*1.876);
color = mix(color, vec3(1.000,0.389,0.711),c6*1.364);
color = mix(color, cos(vec3(0.270,1.000,0.981)),c7*0.652);


/*
color.r = drawRectangle(st, vec2 (0.9,0.9) );
color.g = drawRectangle(st, vec2(0.8,0.8));
color.b = drawRectangle(st, vec2(1.,1.));
*/

gl_FragColor = vec4(color,1.0);
}

During the first video Jeremy creates a “fiery box” by animating the waves with this:

st.x += sin(st.y *20. + u_time) * -0.108;
st.y += cos(st.x *20. + u_time) * -0.540;

So I used this code to create some interesting wavy animations. I also experimented with adding several shapes with the mix() function.

// Author: Emily Flood
// Title: Fluorescent waves

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

//drawCircle function
float drawCircle(vec2 st, vec2 pos, float size){

float result = distance(st,pos);
result = 1.0-step(size,result);
return result;
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec3 color = vec3(0.);

//animating the waves
st.x += sin(st.y *20. + u_time) * -0.108;
st.y += cos(st.x *20. + u_time) * -0.540;

//declaring size variable
vec2 size = vec2(0.1,0.1);

//drawing circles
float c1 = drawCircle(st, vec2(0.100,0.620),0.4);
float c2 = drawCircle(st, vec2(0.400,0.620),0.4);
float c3 = drawCircle(st, vec2(0.700,0.620),0.4);
float c4 = drawCircle(st, vec2(1.0,0.620),0.4);

//adding colour
color = mix(color, vec3(0.0, 0.0, 1.0),c1*0.908);
color = mix(color, vec3(1.000,0.332,0.198),c2*0.5);
color = mix(color, vec3(1.000,0.036,0.888),c3*0.612);
color = mix(color, vec3(1.000,0.948,0.112),c4*0.652);

gl_FragColor = vec4(color,1.0);
}

I realized that I enjoy working with fluorescent colours. I made this vibrant grid pattern with a couple of different tiling methods, including a tile() function as well as using the mod() function to repeat this effect, causing an interesting inconsistency in the grid.

// Author: Emily Flood
// Title: Vibrant grid
/* Code used from "Patterns" from The Book of Shaders
 > @patriciogv ( patriciogonzalezvivo.com ) - 2015
*/

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

#define PI 3.14159265358979323846

//function to tile the image
vec2 tile(vec2 _st, float _zoom){
 _st *= _zoom;
 return fract(_st);
}

//function to draw a rectangle
float drawRect(vec2 st, vec2 pos, vec2 size){
 float result = 1.0;
 
 vec2 border = (1.0-size)/2.;
 
 st = st - pos + vec2(0.5);
 
 result = step(border.x,st.x);
 result *= step(border.x,1.0-st.x);
 result *= step(border.y,st.y);
 result *= step(border.y,1.-st.y);
 
 return result;
}

//function to draw a circle
float drawCircle(vec2 st, vec2 pos, float size){

 float result = distance(st,pos);
 result = 1.0-step(size,result);
 return result;
}


void main() {
 vec2 st = gl_FragCoord.xy/u_resolution.xy;
 vec3 color = vec3(0.);
 
 //tiling the image and animating it
 st *= 5.;
 st = mod(st,1.3);
 st = tile(st,1.184);
 st.x += sin(st.y *17. + u_time) * 0.1;
 st.y -= cos(st.x *17. + u_time) * 0.1;
 float size = 0.416;
 
 //drawing out the rectangle and circle
 float r1 = drawRect(st, vec2(0.5), vec2(0.5));
 
 float c1 = drawCircle(st, vec2(0.5), size);
 
 color = vec3(st,1.072);
 
 //applying colour
 color = mix(color, vec3(0.709,0.548,0.870),r1*0.3);
 color = mix(color, vec3(0.975,0.423,0.000),c1*0.3);

 gl_FragColor = vec4(color,1.0);
}

Shader #1

For this shader I began with the Truchet Tile code from The Book of Shaders. Through rotating different tiles and experimentation I was able to create an arrow shape. I immediately knew that I wanted the arrows to move in the direction they are pointing and it didn’t take too long to figure out how to achieve this. I also played around with creating an outline around the entire canvas. I was hoping to outline the arrows but I got stumped and couldn’t figure out how to do it. It’s not the prettiest shader but I found that making the arrow shape and then making them move was a good coding exercise.

// Author Max Shapovalov
//Title: Arrows
//Modified work of @patriciogv ( patriciogonzalezvivo.com ) - 2015

#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265358979323846
uniform vec2 u_resolution;
uniform float u_time;

float circle(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.5);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist));
}
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}

vec2 tile (vec2 _st, float _zoom) {
_st.x += step(1., mod(_st.y,2.0)) * 2.;
_st *= _zoom;

return fract(_st);
}

vec2 rotateTilePattern(vec2 _st){

// Scale the coordinate system by 2x2
_st *=2.0;

// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(_st.x,2.0));
index += step(1., mod(_st.y,2.0))*2.0;

// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |

// Make each cell between 0.0 - 1.0
_st = fract(_st);

// Rotate each cell according to the index
if(index == 1.0){
// Rotate cell 1 by 90 degrees
_st = rotate2D(_st,PI*0.25);
} else if(index == 2.0){
// Rotate cell 2 by -90 degrees
_st = rotate2D(_st,PI*-1.);
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
_st = rotate2D(_st,PI*+0.75);
}

return _st*2.;
}
vec2 brickTile(vec2 _st, float _zoom){
_st *= _zoom;

// Here is where the offset is happening
_st.x += step(1., mod(_st.y+0.5,3.)) * 0.5;

return fract(_st);
}
void main(void){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 pattern = vec3(0.0);
vec3 pattern2 = vec3(0.0);
vec3 blue=vec3(0.003,0.575,1.000);
vec2 bl = step(vec2(0.05),st); // bottom-left
vec2 tr = step(vec2(0.05),1.-st); // top-right
vec3 outline = vec3(bl.x * bl.y * tr.x * tr.y);

blue = mix(blue,vec3(outline.x,1.0,1.0),.6);
st = tile(vec2(-st.y+(fract(u_time/5.0)),-st.x),1.0);
st = brickTile(st,3.0);
st = rotateTilePattern(st);
pattern = vec3(circle(st-st.x,(0.5-st.y)));
outline = vec3(circle(st,(0.5-st.y)));

blue = mix(blue,vec3(outline.x,1.0,1.0),.1);

pattern=mix(pattern,blue,.9);
pattern=smoothstep(vec3(pattern),vec3(.2),vec3(.5));
gl_FragColor = vec4(pattern,1.);

}

Shader #2

In this shader I played around with creating circles and squares overtop of one another and then using the step function to get a silhouette. I found that the order of functions and can drastically change how the shader looks. Lastly I divided the canvas in four quadrants and made them spin.

// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
//title: crosses
#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265358979323846

uniform vec2 u_resolution;
uniform float u_time;

vec2 rotate2D (vec2 _st, float _angle) {
 _st -= 0.5;
 _st = mat2(cos(_angle),-sin(_angle),
 sin(_angle),cos(_angle)) * _st;
 _st += 0.5;
 return _st;
}

vec2 tile (vec2 _st, float _zoom) {
 _st *= _zoom;
 return fract(_st);
}
vec2 brickTile(vec2 _st, float _zoom){
 _st *= _zoom;

 // Here is where the offset is happening
 
 _st.x += step(1., mod(_st.y,2.0)) ;
 
 return fract(_st);
}
vec2 rotateTilePattern(vec2 _st){

 // Scale the coordinate system by 2x2
 _st *= 2.0;

 // Give each cell an index number
 // according to its position
 float index = 0.0;
 index += step(1., mod(_st.x,2.0));
 index += step(1., mod(_st.y,2.0))*2.0;

 // |
 // 2 | 3
 // |
 //--------------
 // |
 // 0 | 1
 // |

 // Make each cell between 0.0 - 1.0
 _st = fract(_st);

 // Rotate each cell according to the index
 if(index == 1.0){
 // Rotate cell 1 by 90 degrees
 _st = rotate2D(_st,PI*1.);
 } else if(index == 2.0){
 // Rotate cell 2 by -90 degrees
 _st = rotate2D(_st,PI*-0.0);
 } else if(index == 3.0){
 // Rotate cell 3 by 180 degrees
 _st = rotate2D(_st,PI*-.5);
 }
 else{
 _st = rotate2D(_st,PI*.5);
}

 return _st;
}
float circle(in vec2 _st, in float _radius){
 vec2 dist = _st-vec2(0.5);
 return 1.-smoothstep(_radius-(_radius*0.01),
 _radius+(_radius*0.01),
 dot(dist,dist)*4.0);
}
void main (void) {
 vec2 st = gl_FragCoord.xy/u_resolution.xy;
 st = tile(st,1.0);
 st = rotate2D(st,-PI*abs(sin(u_time*.01)));
 st = rotateTilePattern(st*1.);
 st = rotate2D(st,PI*u_time*.011);
 st = tile(st,1.5);
 st = brickTile(st,2.0);
 st = rotateTilePattern(st);
 vec3 color = vec3(step(st.x,st.y));
 vec3 color2 = vec3(circle(st,0.5));
 vec3 color3 = step(color,color2);
 vec3 color4=mix(vec3(color),vec3(color2),color3);
 


 
 st = tile(st,2.0);
 
 
 gl_FragColor = vec4(color4,1.0);
 
}

I think my first post was removed so this is a repost!

My first experiment was very simple. I used u_time to create a rising animation between turquoise and blue.

// Author:
// Title:blue&green rise

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float multiplier = 0.8;
void main() {
 
 vec2 st= gl_FragCoord.xy/u_resolution.xy;
 vec3 blue=vec3(0.012,0.739,1.000);
 vec3 green=vec3(0.454,1.000,0.741);
 vec3 color= mix(blue, green, st.x);
 color=mix(blue,green,smoothstep(abs(sin(u_time*multiplier)),1.0, st.y));
 gl_FragColor = vec4(color,1.0);
 
}

My second experiment was playing around with HSB values and I played around with u_time once again to create an animation that scrolls through different hues in the red channel. I found that copying and pasting variables in different spots was a good way to understand how the code works.

<img class="alignnone size-medium wp-image-126" src="http://blog.ocad.ca/wordpress/digf3011-fw2021-01/files/2021/01/download-6-300x300.png" alt="download-6" width="300" height="300" />

// Authour: Max Shapovalov
// Title: HSB Code
// Source: Jeremy Rotsztain

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float multiplier =0.1;
float x=0.1;
#define PI 3.1415926535

// Function from Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc

vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
6.0)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(1.0), rgb, c.y);
}

void main() {

// get the xy coordinate & normalize to [0, 1] range
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

// set a fill color with hsb
// store as vec3
vec3 hsb;
hsb.r = 1.0; // animate hue with time
hsb.g = -st.x+st.y; // saturation
hsb.b = u_resolution.y/1000.0; // brightness

if( true ){

// color wash
// same calculation as above with slight x-offset
hsb.r = u_time*0.160 + st.x*0.304;
}

if( false ){

// distanced based hue
float d = distance( st, vec2(0.50,0.500))*1.489;
hsb.r = d;

// animate hue over time
hsb.r = sin(u_time*PI*0.2+d);
}

// use custom function to translate hsv to rgb color space
vec3 color = hsb2rgb(hsb);

gl_FragColor = vec4(color, 1.0);
}

I learned some of the basics of shaders, while little of it has been memorized. It will take repetition and study for me to begin to get a clearer understanding.

I found it challenging to come up with an unborrowed equation, as any mathematical uniqueness was attributed to omitting or changing a piece of someone else’s math and code.

I find this exciting due to its potential, with interest in u_time. I look forward to integrating this into other work and understanding their potential uses better.

 

// Author: Joshua Linton
// Title: shadeHSB - corner - shader_000002
// References: code copied from HSB example: https://thebookofshaders.com/06/
// integers and floating points adjusted and tweaked to produce shader

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

vec3 rgb2hsb( in vec3 c){
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz),
vec4(c.gb, K.xy),
step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r),
vec4(c.r, p.yzx),
step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)),
d / (q.x + e),
q.x);
}

vec3 hsb2rgb( in vec3 c){
vec3 rgb = clamp(abs(mod(c.x*2.080+vec3(3.0,5.0,5.0),
6.0)-5.016),
0.0,
1.400 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix(vec3(1.0), rgb, c.y);
}

void main(){
vec2 st = gl_FragCoord.xy/u_resolution;
vec3 color = vec3(1.0);

color = hsb2rgb(vec3(st.x,1.0,st.y));
gl_FragColor = vec4(color,1.496);
}

Working through the shader examples to really understand how the different functions were composed to create the (seemingly simple) gradients and lines was probably the hardest and more essential part of the process for me. It was difficult for me to wrap my head around mathematical operations on images/colours, particularly in vector form, when I am so used to only thinking about numbers and scalar operations.

From there, I just did a bunch of stepwise experimentation, combining the example functions and using them to mix additional colours one at a time. For the last mix, I did some converting to polar coordinate to create a circular form.

I was so pleasantly surprised about the amount of variation in the end result with the smallest adjustments in time and shaping functions. Since the layering of colours can produce many different hues, and using time dependent gradients will make it so that there are many different intersections of colours, the movement and feeling can change so drastically. It really makes these shaders (which are landed upon with experimentation) feel unique and ephemeral.

link to frag code (I don’t know why this link embed isn’t working): https://pastebin.com/62iqQdjE

For my shader, I mostly wanted to focus on playing around with the colors and shapes I could make. As someone with very little experience programming shaders beyond node based 3D, I had a lot to learn about the subject. I mostly looked at mixing and combining different colors, as well as creating looping animation.  I also wanted to look into creating noise (or visuals that look like noise rather). What I struggled with the most was getting more control over the colors themselves, as I did my exercise in HSB and was working with 0.0 to 1.0 for my hue. What I would like to do in the future is remap the values to a certain range and only work with a portion of the color spectrum. I am sure this is very easy, and will come to me the second I finish this post — but as I am used to having simple remap values nodes software like Blender, I felt a little stumped. Overall, I think I gained a good understanding of the very basics of shaders, and I am exited to apply this to more controlled projects.

 

 

// Author: Sonya Sheina
// Title: Customer Shaderr Test

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// Function from Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc

vec3 hsb2rgb( in vec3 c ){
 vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
 6.0)-3.0)-1.0,
 0.0,
 1.0 );
 rgb = rgb*rgb*(3.0-2.0*rgb);
 return c.z * mix( vec3(1.0), rgb, c.y);
}

void main() {

vec2 st = gl_FragCoord.xy/u_resolution.xy;

vec3 hsb;
 hsb.r = 1.; 
 hsb.g = 1.; // saturation
 hsb.b = 1.; // brightness
 
 vec3 hsb2 = vec3(1., 1., 1.0);
 vec3 hsb3 = vec3(1., 1., 1.0);
 
 float td = 0.5;
 
 vec2 origin = vec2(cos(u_time*td), sin(u_time*td)-0.5); 
 float d = distance(st/2.0, origin)*4.104;
 d = d + pow(st.x, st.y);
 d = pow(d, 1.5);
 d = abs(d-0.5);
 hsb.r = d;
 
 
 vec2 origin2 = vec2(sin(u_time*td)+0.5, cos(u_time*td)-0.5); 
 float d2 = distance(st/2.0, origin2)*3.776;
 d2 = d2 + pow(st.x, -st.y);
 hsb2.r = d2;
 
 vec2 origin3 = vec2((u_time*td)+0.5, -sin(u_time*td)-0.5); 
 float d3 = distance(st/2.0, origin3)*2.120;
 d3 = d3 + pow(st.y, st.x);
 hsb3.r = d3;


 vec4 color = vec4(hsb2rgb(hsb), 1.0);
 vec4 color2 = vec4(hsb2rgb(hsb2), 1.0);
 vec4 color3 = vec4(hsb2rgb(hsb3), 1.0);
 gl_FragColor = mix(color, mix(color2, color3, origin.y), origin.y);
 
}