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

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

```

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

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
// References: code copied from HSB example: https://thebookofshaders.com/06/

#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

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.

```&nbsp;

// Author: Sonya Sheina

#ifdef GL_ES
precision mediump float;
#endif

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

// Function from Iñigo Quiles

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

gl_FragColor = vec4(color,1.0);
}

```

```
// Function from Iñigo Quiles
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);

gl_FragColor = vec4(color,1.0);
}

```

```
// Function from Iñigo Quiles
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);

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

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

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

## Assignment 1

For the first Assignment I mostly reviewed and tried out what was shown in the coding tutorial.

I created a gradient that combines 4 colours and did that through multiple uses of the mix function.

After understanding the basics I got a lot more experimental, especially in animating the shader. I layered various functions on top of each other. The resulting animation can’t really be seen here but I took a screenshot of it.

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

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.

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

## Posting Code

I wanted to demonstrate how you can add lines of code to your blog posts (as unformatted text) using a  plugin called syntax highlighter. This will help you distinguish your reflections on your code from the code itself. It’s also much easier to read!

Begin your code block with [programming-language] and end your code block with [/programming-language] (note the “/” before the name of the language). For javascript, use “js” in the square brackets. If you’re sharing GLSL code, the plugin doesn’t recognize GLSL, so use “c” instead.

```//this is javascript code
print("hello world");
```
```// create a color
vec4 myColor = vec4(1.0, 0.5, 1.0, 1.0);

// mix two colors
vec4 mixResult = mix( vec4(1.0, 0.0, 0.0, 1.0), vec4(1.0, 1.0, 1.0, 1.0), 0.5);
```

You can use the preview function of WordPress to test it out on your own posts before publishing.