 ## DAN GORELICK

Developer | Technologist | Engineer

### Literally everything is a Vector

Lecture at SFPC by Patricio Gonzalez Vivo, author of The Book of Shaders.

The main example we are looking at from here. The code for this is here:

``````#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;

st += vec2(.0);
vec3 color = vec3(1.);
color = vec3(st.x,st.y,0.0);

gl_FragColor = vec4(color,1.0);
}
``````

The main input here is gl_FragCoord, it is a vec3 that has the value of each pixel (0 to width-1)

The main output is `gl_FragColor`, a vec4 which has RED, BLUE, GREEN, and ALPHA.

We are creating a vec2 using the gl_FragCoord.xy. We normalize it with this:

``````vec2 st = gl_FragCoord.xy/u_resolution.xy;
``````

We then create a gradient with the RED, and GREEN values by doing so:

``````color = vec3(st.x,st.y,0.0);
``````

The last value of the BLUE is set to 0.0, and the ALPHA is set to be 1.0.

### Working with sine / cosine

To produce some very “organic” results, we can start using sin and cosine. Playing around with sin and cosine

The code for the piece above:

``````
#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float line(float x, float c, float w) {
return step(c,x)-step(c+w,x);
}

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

vec3 color = vec3(0.);
color += abs(sin(PI/-pos.y*PI));
color.b += abs(cos(PI/-sin(u_time)*PI));

color.r += abs(sin(pos.x));
color.g -= 0.4;

color -= 0.5;

gl_FragColor.rgb = color;
gl_FragColor.a = 1.0;
}
``````

The key piece of code which creates the effect is `sin(PI/-pos.y*PI)`.

### Main takeaway

GLSL is definitely not very intuitive. In fact, I would say it is the least–intuitive programming I’ve done in a while. Nonetheless, I feel motivated to start messing around with the language more. Shaders seem to be pretty cool after all.

fin