Week 2 Shader Pattern

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.

patterntest

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

faded

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

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
}

Shader practices week 2

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.

wavy-circles


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

fluorescent-wavesv-waves


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

vibrant-grid

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

Week 2 Homework

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.

download-7


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

download-4

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

Week 1 Homework

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.

download-5

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

download-6


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

Week 1 Shader

corner_1

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

Week 1

screenshot-2021-01-23-034540screenshot-2021-01-23-035621

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

Shader Week 1

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.

img1 img2

 

&nbsp;

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


 

Shader Practices

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.

shader1


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

shader2


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

shader3


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

Shader Explorations 1

For my shader explorations, I had a lot of fun blending and animating together different iterations of the HSB colour spectrum as shown in the example from class and in The Book of Shaders. I spent a lot of time experimenting and creating my shaders partially through trial and error as I get used to the new language. I still have a lot to learn about how shaders work, most of my shader results, especially my first shader below, was as Bob Ross says “A Happy Little Accident”. Still, I was able to reverse engineer some of the variables, in order to create a better understanding of what exactly I was doing.  Even, so this resulted in quite a few unneeded and unused lines of code every now and then, so I learned a lot about how my shaders worked just through the process of cleaning up code as well.

HSB HSV Bricks Blend Shader
// Author: Madelaine Fischer-Bernhut
// Title: HSB HSV Colour Bricks Blend V8

#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;
 st.x *= u_resolution.x/u_resolution.y;
 
 vec3 color1 = hsb2rgb( vec3(sin(u_time)*0.1+st.y*0.9, 10.0, 2.588));
 vec3 color2 = color1*1.5 - hsb2rgb( vec3(cos(u_time)*-0.15+st.x*0.7, st.x, 1.8)) * color1;

 gl_FragColor = vec4(color2,1.0);
}
download-17download-11download-24
// Author: Madelaine Fischer-Bernhut 
// Title: HSB HSV Rainbow Wave Blend V6 
#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

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;
 st.x *= u_resolution.x/u_resolution.y;
 
 float y = smoothstep(-st.x,(u_mouse.x/u_resolution.x)*3.0,st.x);

 vec3 color = vec3(y);

 vec3 color2 = hsb2rgb( vec3(exp(sin(u_time*0.4+st.y*0.7)), st.y, 1.0)) + color;
 vec3 color3 = color2*1.1- hsb2rgb( vec3(abs(u_time*0.4+st.y*1.0), st.x, 1.0));

 gl_FragColor = vec4(color3,1.0);
}