Author: Emily Flood

For this first shader I took inspiration from the webcam displacement example and instead used two images together. I took a picture of a wolf’s head and a picture of water from the internet and added the sin() function to create a murky, watery effect. I used millis() in x position for the set.Uniform statement (myShader.setUniform(“uDisplacement”, map(millis()/50, 0, width, 0, 5));) to produce a u_time effect like in GLSL. In a way, the water image is being animated to displace the wolf image.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 uMousePosition;
uniform vec2 uResolution;

uniform sampler2D uTexture0; //wolf
uniform sampler2D uTexture1; //water
uniform float uTime;
uniform float uDisplacement;

varying vec2 vTexCoord;

//takes rbg of a pixel and calculates luminosity
float rgb_to_luma( vec3 color ){
return 0.2126*color.r + 0.7152*color.g + 0.0722*color.b;
}

float map (float value, float min1, float max1, float min2, float max2){

return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}


void main() {

vec4 color = vec4(0.0, 1.0, 1.0, 0.0);

vec2 offset = vec2(0.0, 0.0);

offset = texture2D(uTexture0, vec2(vTexCoord.x, 1.0-vTexCoord.y)).gb;
offset *= 1.0;

//colours to luminosity
float c = rgb_to_luma(texture2D(uTexture0, vec2(vTexCoord.x, 1.0-vTexCoord.y)).rgb);

offset = vec2(c, c) + uDisplacement;

vec2 uv = vec2(vTexCoord.x, 1.0-vTexCoord.y) + offset;
//vec2 uv = vec2(uTime(vTexCoord.x), 1.0-vTexCoord.y) + offset;
//using sin() to distort the image
color = texture2D(uTexture1, sin(uv) * 0.5);

gl_FragColor = vec4(color);
}

For this excersize I took my grid from last week and implemented the noise effect. I also added a distorted circle to the grid that warps and moves. I thought the grid effect  looked interesting with its psychedelic colour scheme.

// Author: Emily Flood
// Title: Noise 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;
}

float drawRectangle(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.-st.x);
result *= step( border.y, st.y);
result *= step( border.y, 1.-st.y);

return result;
}

vec3 permute(vec3 x) {return mod(((x*34.0)+1.0)*x, 289.0);}

float snoise(vec2 v){
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v+ dot(v, C.yy));
vec2 x0 = v - i + dot(i, C.xx);
vec2 il;
il = (x0.x > x0.y) ? vec2(1.0,0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= il;
i = mod(i, 289.0);
vec3 p = permute( permute(i.y + vec3(0.0, il.y, 1.0))
+ i.x + vec3(0.0, il.x, 1.0));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
dot(x12.zw,x12.zw)), 0.0);
m = m*m;
m = m*m;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}

float random (vec2 st){
return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
}

float map (float value, float min1, float max1, float min2, float max2){

return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}


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,0.952);
st.x += sin(st.y *2. + u_time) * 0.1;
st.y -= cos(st.x *2. + 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,0.048);

//applying colour
color.r = snoise( st * 3. + vec2(100., -u_time*0.5)) * 0.5 + 0.5;
color.g = snoise( st * 3. + vec2(200., -u_time*0.4)) * 0.5 + 0.5;
color.b = snoise( st * 3. + vec2(300., -u_time*0.4)) * 0.5 + 0.5;

color.r = snoise( st * 2. + vec2(400., u_time)) * 0.5 + 0.5;
color.g = snoise( st * 2. + vec2(500., u_time)) * 0.5 + 0.5;
color.b = snoise( st * 2. + vec2(600., u_time)) * 0.5 + 0.5;


vec2 index = floor( st);

float cs = (snoise(st + vec2(0, u_time*0.2))*0.5 + 0.5) * 0.3 + 0.1;

float circ = drawCircle( st, vec2(0.5), cs);

vec3 circColor;
circColor.r = random( index + vec2(10.));
circColor.g = random( index + vec2(20.));
circColor.b = random( index + vec2(30.));

color = mix ( color, circColor, circ);

float cs2 = (snoise(st + vec2(0, u_time*0.2))*0.5 + 0.5) * 0.3 + 0.1;

float circ2 = drawCircle( st, vec2(0.5), cs2);

vec3 circColor2;
circColor2.r = random( index + vec2(10.));
circColor2.g = random( index + vec2(20.));
circColor2.b = random( index + vec2(30.));

color = mix ( color, circColor, circ);



float rectSize = random(index);


gl_FragColor = vec4(color,1.0);
}

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);
}

This was my first time ever making shaders so I spent a lot of time just figuring out how they worked. I practiced a bit with the HSB shaders as I thought they produced some interesting effects, and I found that when you apply the floor() function to an HSB shader it completely separates the colours in the slider and creates a very stark, high-contrast image. I played around with the variables and ended up getting some really interesting results.

// Function from Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc
vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.432+vec3(0.954,4.000,3.306),
6.0)-3.0)-0.184,
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;

vec3 color = vec3(0.0);

vec2 toCenter = vec2(0.5)-st;
float angle = atan(toCenter.y,toCenter.x);
float radius = length(toCenter)*2.0;

color = floor(hsb2rgb(vec3((angle/TWO_PI)+0.5,radius,1.0)));

gl_FragColor = vec4(color,1.0);
}

// Function from Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc
vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.784+vec3(3.312,4.000,2.396),
6.0)-3.0)-0.184,
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;

vec3 color = vec3(0.0);

vec2 toCenter = vec2(0.5)-st;
float angle = atan(toCenter.y,toCenter.x);
float radius = length(toCenter)*2.0;

color = floor(hsb2rgb(vec3((angle/TWO_PI)+0.5,radius,1.0)));

gl_FragColor = vec4(color,1.0);
}

// Function from Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc
vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*7.488+vec3(4.000,2.976,0.012),
5.200)-3.016)-0.744,
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;

vec3 color = vec3(0.436,0.660,0.313);

vec2 toCenter = vec2(0.170,0.150)-st;
float angle = atan(toCenter.y,toCenter.x);
float radius = length(toCenter)*2.0;

color = floor(hsb2rgb(vec3((angle/TWO_PI)+0.5,radius,1.0)));

gl_FragColor = vec4(color,1.0);
}