Category: Week1

// Author: Francisco Samayoa
// Title: Week 1 - Experiment 1

#ifdef GL_ES
precision mediump float;
#endif

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

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

vec3 colorA = vec3(0.930,0.373,0.248);
vec3 colorB = vec3(0.960,0.651,0.138);
vec3 colorC = vec3(0.940,0.244,0.235);
vec3 colorD = vec3(1.000,0.514,0.190);
vec3 mixAB = mix(colorA, colorB, smoothstep(0.25, 0.75, st.y));
vec3 mixCD = mix(colorC, colorD, smoothstep(0.25, 0.75, st.y));
vec3 gradient = mix(mixAB, mixCD, smoothstep(0.25, 0.75, st.x));

//gradient = vec3(st.x,st.y,abs(sin(u_time)));

gl_FragColor = vec4(gradient, 1.0);
}

// Author: Francisco Samayoa
// Title: Week 1 - Experiment 2

#ifdef GL_ES
precision mediump float;
#endif

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

#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() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec3 hsb;
hsb.r = st.x; // animate hue with time
hsb.g = 1.; // saturation
hsb.b = 1.; // brightness

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

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

vec3 color1 = hsb2rgb( vec3(sin(u_time) *+ d * -4., 4., 1.));
vec3 color2 = color1 * hsb2rgb( vec3(cos(u_time)* st.x * 1., st.y, 1.));
vec3 color3 = color2 * ( vec3(sin(u_time)* st.x * -1., st.y, 1.));

gl_FragColor = vec4(color3,1.0);
}

// Author: Francisco Samayoa
// Title: Week 1 - Experiment 3

#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 = vec3(1., 1., 1.);
vec3 hsb2 = vec3(-1., 1., 1.);

vec2 origin = vec2(sin(u_time), cos(u_resolution));
float d = distance(st/2.0, origin)*0.5;
d = d + pow(st.x, st.y);
hsb.r = d;

vec2 origin2 = vec2(cos(u_time)+1., sin(u_time)-1.);
float d2 = distance(st/3.384, origin)*2.;
d2 = d2 + pow(st.y, st.x);
hsb.r = d2;
//color = vec3(st.x,st.y,abs(sin(u_time)));

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

For week 1’s homework, I experimented with shaping functions as well as u_time to create a neat moving gradient effect.

I was pretty interested in using the sin function in conjunction with u_time to create a repeating pattern of colours. I first began by generating a moving pattern using the sin function, and editing the numbers to see what effects I could achieve.

After some experimentation, I took the shader one step further by not only changing the G value over time with sin, but also the B value. This created 2 patterns that moved out of sync with each other. Funnily enough this reminded me of looking out the window of a train, and seeing how scenery closer to you would speed by faster than scenery farther away.

#ifdef GL_ES
precision mediump float;
#endif

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

#define TWO_PI 6.283185307

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

float amt = st.x;
float amt2 = st.x;

amt = sin( u_time * 2. + st.x * TWO_PI * 1.7 ) * 0.5 + 0.620;
amt2 = sin( u_time * 15. + st.x * TWO_PI * 1.5 ) * 0.700 + 0.6;

// combine amt together
vec3 color = vec3( 0.9, amt, amt2);

gl_FragColor = vec4(color,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);
 
}

 

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

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.

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

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

Using the mix function in an HSB space, I animate through the color wheel using u_time.

Originally, I made a circular and smooth transition through all the hues, which was brightest in the center.

By adding the exp() and sin() shaping functions, the animation becomes psychedelic and more complex over time.

I struggled most with the fact that I can’t yet predict what the code will do. I’m coming from a place where I can write code and know what it will do before running it… GLSL is like a black box to me right now. Hoping to get a better grasp on it over the next week.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
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.+vec3(0.,4.,2.),6.)-3.)-1.,0.,1.);
rgb=rgb*rgb*(3.-2.*rgb);
returnc.z*mix(vec3(1.),rgb,c.y);
}
void main(){
vec2 st=gl_FragCoord.xy/u_resolution;
vec3 color=vec3(0.);
vec2 toCenter=vec2(.5)-st*exp(sin(u_time*st.x));
float angle=max(toCenter.y,toCenter.x);
float radius=length(toCenter)*0.5;
color=hsb2rgb(vec3((angle/6.)+u_time*0.15,radius,1.));
gl_FragColor=vec4(color,1.);
}