Week 5

For the week 5 homework I worked with Ryan Boyd. Having difficulty porting my shader, after hours of reviewing and checking near every word in comparison to working examples of mine and Ryan’s. Offering it up to Ryan’s perspective he quickly noticed that in my alphabetical subconscious tendency I had written (‘shader.frag’, shader.vert’). Which by reversing their order he got my ported shader working.

portshader-wallways

https://editor.p5js.org/prefab/sketches/pAX3HdbxV

Another shader worked on was the displacement shader. Using an image of newspaper collage and animating it to scroll like our social and news feeds, I displaced the image texture referencing the color and replacing it with an image sourcing the colors of a COVID cell under the microscope. The texture displacement was animated to resemble the flashing lights of an alarm illuminating the scrolling news feed.

in reference to the amount of COVID related art pieces I named the shader:

1540 new pieces of COIVD art were recorded today

https://editor.p5js.org/prefab/sketches/B1zZxXDUe

1540-new-pieces-of-coivd-art-were-recorded-today

Week 3 Shader

wallway002

wallway002-2

Iterating on this shader several times, it seemed fit to share the source of iteration. This is a grid set to be zoomed on this position, with alternating animations for red, blue and green using ‘u_time’ and and then altering the canvas with noise.

The code combine several functions and experimentation from other classes and shader sessions. I found this form of shaders fun and intriguing, it has brought together some of the learning.


// Author:joshua linton
// Title: wallway_02

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

float drawRectangle(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;
}
//from Week 3 Shader Session Noise
//
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
float snoise(vec2 v){
const vec4 C = vec4(0.2113224865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))
+ i.x + vec3(0.0, i1.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.y * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}

vec2 createGrid( in vec2 st, in vec2 grid, out vec2 indices) {

st *= grid;
indices = floor(st);
st = fract(st);

return st;
}

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

return result;
}

void main() {

vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec3 color = vec3(u_time);



st *= 0.19;


vec2 indices;

st = createGrid( st, vec2 (20., 8.), indices);

//st.y += cos( st.x + u_time / cos(-st.y * 2.4) /1280.0) /.24;
st.x += snoise(st + vec2(0, u_time*0.04))*5.;
st.y += snoise(st + vec2(0, u_time*.64))*0.00002;
//st.x += cos( st.y + u_time * sin(st.x)) /5.;



//from Week 2 Shader Session Patterns
if( mod(indices.x, 5.) == 0.0 && mod(indices.y, 2.) == 0.){

st = createGrid(st, vec2(5.0), indices);

color = vec3(0.006,1.000,0.607);

float b = drawRectangle(st, vec2(0.5), vec2(0.5));

color = mix( color, vec3(0.2, 0.3, 0.9), b);

} else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 0.0){

color = vec3(0.605,0.942,1.000);

} else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 1.0){

st - createGrid(st, vec2(2.0), indices);

color = vec3(0.000,0.800,0.716);

float d = drawRectangle(st, vec2(0.5), vec2(0.5));

color = mix( color, vec3(0.051,1.000,0.541), d);

} else {

color = vec3(1.000,0.910,0.018);
}



//from a previous sketch playing around shapes and borders
float border = .1 + (tan( st.y * 4. + u_time * .64) *4. + 5.) * 0.1;
float borderAgain = + (cos( -st.y * 0.2 + u_time / 5.) *10. + 0.1) * 0.1;
float borderLast = .12 + (tan( st.y * 0.5 + u_time * .064) *4. + 5.) * .4;


vec2 size = vec2(0.590,0.790);


color.r = drawRectangle( st, size );
color.r -= drawRectangle( st, size - vec2(border));
color.b = drawRectangle( st, vec2(0.290,0.270) + vec2(borderLast));
//color.b -= drawRectangle( st, size);
color.g = drawRectangle( st, vec2(0.9,0.9) - vec2(borderLast));
color.g -= drawRectangle( st, size + borderAgain);

//color.g = drawRectangle( st, vec2(.7,.7));
color.b = drawRectangle( st, vec2(1.9,.32));

gl_FragColor = vec4(color,0.9);

}

Week 2 Shader

breakingpatterns

This is a result of experimentation. I just multiplied the canvas by 12, a line that was formed and commented out following along to class. Adding zeroes to 12 till it was 1.2 million, with no particular reason, just liked the result at 1200000.

My approach is usually pushing/decimating a quality, attribute, variable to see what happens and is saved based on interesting results.

I was trying to make a pattern design that I liked, satisfied with a result I went on to push some numbers to see what some lines of code actually do. Pushed the pattern to the point that it seemed to render blank and return to a result along the way that I liked.

I made a shapes shader but ended up animating it and although very pleased with the tweaked and experimented results it doesn’t open the same as it was made, though sometimes it does?

Throughout this lesson I grasped a lot more understanding of coding shaders. Review and iterations are likely approaches to further learning.


// Author: Joshua Linton
// Title: Breaking Patterns
// Reference: code is derived from following along to Shader Session: 2D Patterns, asynchronous lecture,
// from DIGF3011 - OCADU - Prof. J. Rotsztain

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

vec2 createGrid( in vec2 st, in vec2 grid, out vec2 indices) {
 
 st *= grid;
 
 indices = floor(st);
 
 st = fract(st);
 
 return st;
}

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

void main() {
 vec2 st = gl_FragCoord.xy/u_resolution.xy;
 st.x *= u_resolution.x/u_resolution.y;
 
 st *= 1200000.;
 //It is through this line that I have transformed a 64 by 24 grid with internal grids into this result.
 //Multiplying the canvas by 1.2 million.
 //This is quite typical, my immediate experimentation is always to begin adding zeroes to any number in formula.
 
 
 vec2 indices;
 
 st = createGrid( st, vec2(64., 24.), indices);
 
 vec3 color = vec3(0.);
 
 
 if( mod(indices.x, 2.) == 0.0 && mod(indices.y, 2.) == 0.){
 
 st = createGrid(st, vec2(5.0), indices);
 
 color = vec3(0.006,1.000,0.607);
 
 float b = drawRectangle(st, vec2(0.5), vec2(0.5));
 
 color = mix( color, vec3(0.2, 0.3, 0.9), b);
 
 } else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 0.0){
 
 color = vec3(0.605,0.942,1.000);
 
 } else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 1.0){
 
 st - createGrid(st, vec2(2.0), indices);
 
 color = vec3(0.000,0.800,0.716);
 
 float d = drawRectangle(st, vec2(0.5), vec2(0.5));
 
 color = mix( color, vec3(0.051,1.000,0.541), d);
 
 } else {
 
 color = vec3(1.000,0.910,0.018);
 }

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