Week 3 Shader

noisy-shader-img

I built this shader by adding on to the circle shapes I produced for week 2. It is hard to photograph because it animates with time (image is of one of it’s less flattering frames). The main changes were changing the colors of the circles to a gradient shared across all of them rather than coloring each independently, and incorporating the shifting noise into the code, as it can’t be added to vec3 shapes and colors using the mix() function.


// Author: Dawn Murphy
// Title: Noisy Shader

#ifdef GL_ES
precision mediump float;
#endif

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

//generate 2D random
float random (in vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))
* abs(sin(u_time)));
}

// 2D Noise based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);

// Four corners in 2D of a tile
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));

// Smooth Interpolation

// Cubic Hermine Curve. Same as SmoothStep()
vec2 u = f*f*(3.0-2.0*f);
// u = smoothstep(0.,1.,f);

// Mix 4 coorners percentages
return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}

//Generate circles
//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.0),
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.0),
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.0),
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.0),
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.0),
dot(dist,dist)*10.0);
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
vec2 pos = vec2(st*(u_resolution/10.0));
vec3 pct = vec3(st.x);

// Use the noise function
float n = noise(pos);

//prepare gradient colors
vec3 pink = vec3(0.995,0.370,0.604);
vec3 blue = vec3(0.091,0.399,1.000);
vec3 gradcolor = mix(pink, blue, st.y);

//visualize the circles
vec3 colorF = vec3(circleF(st,0.9));
vec3 colorS = vec3(circleS(st,0.9));
colorS -= gradcolor; //turns the first circle pink by subtracting all the green
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(colorS,gradcolor,colorT);
color = mix(color,gradcolor,colorF);
color = mix(color,gradcolor,colorFo);
color = mix(color,gradcolor,colorFi);

gl_FragColor = vec4( color, n); //draws
}

Week 2 Shaders

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.

pattern-shader


// 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.

shape-shader


// 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
}

Week 1 Shader

For the first week, I mostly experimented with tweaking and combining various examples from the course and the Book of Shaders, so I could begin to learn by example how different functions and values interacted. I decided to work in the editor on the Book of Shaders, which does not have the most in-depth error warnings, so there was a lot of struggle getting certain combinations to work, but it was exciting when they came together.
I created this shader:

// Author: Dawn Murphy
// Title: Week 1 Animated Shader

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

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

float plot(vec2 st, float pct){
  return  mix( pct-0.02, pct, st.y) -
          smoothstep( pct, pct+0.05, st.y);
}

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

    // Smooth interpolation between 0.1 and 0.9
    float y = smoothstep(u_mouse.x / u_resolution.x,u_mouse.y / u_resolution.y,st.x);

    vec3 color = vec3(0.0);
    color = vec3((mod(u_time,3.5)),(sin(u_time)),(cos(u_time)));

    float pct = plot(st,y);
    color =(1.0-pct)*color+pct*vec3(0.0);

    gl_FragColor = vec4(color,0.95);
}

as a means of exploring how various functions interacted with each other. This was partially based on the smoothstep() example from chapter 5 of the book, with some of my personal love of bright colors and interactive functionality added. I chose to leave black (0.0) as a non-changing color so I could see more clearly how the animations worked.

It’s hard to photograph the shader due to the animations, but in action it looks like this.

 

done-shader-1done-shader-2done-shader-3doneshader-4