Week 10 Homework

I was entirely unfamiliar with the unity shader editor, so I mostly focused on figuring out the workflow, and following the tutorial. I based my project on the holographic demo, and made some changes – such as animated noise and different animation. I ended up figuring out a lot of how the shader graph worked, as well as how to use post processing effects.

 

monke

Week 8 Shader

For my Shader,  I used Suzanne, and displaced it using a camera feed along normals. I had a separate shader controlling the color. I was not sure why my model “broke apart”, however I ended up finding out it had to do with the smoothing groups of my export from blender. I reexported my model and got the first result – the more or less together mesh torn at UV cuts. I do prefer the look of my other mesh however, so I have included both. monke3 monke4

monke monke2

 

https://editor.p5js.org/sonya.sheina/sketches/W_G4pD7N2

 

Week 5

For this assignment – and my favorite shader of the 3 — I did a combination of two of the homework prompts – I hope that’s okay. I believe implemented what I have learned in week 5 pretty effectively – however I can redo the shader as I have a framework ready.

I started with the second prompt – ‘Create a shader that uses a color palette from a still image. In Photoshop, organize the colors in a grid and access them using a texture coordinate (uv). I created a simple grid of 6 colors. ‘gridpalette

I then created a ‘colorpicker’ that would select one of the 6 colors based on a sent float. My intention is that this could be randomized with a random number generator, deliberately picked or land on a value within  a range.

This gave me an idea I wanted to pursue a little more. Rather than creating a composition of shapes – which could be easily done,  I wanted to use these 6 colors to alter an image. I wanted to be able to  ‘reassign’ the colors, similarly to the colorama effect in Adobe After Effects. I ended up using the webcam footage as my ‘base’ and created the effect.

week5-2 week5-3

This was probably my favorite assignment as I felt like I am fully understanding all the concepts in creating these shaders. I also find the grid to be easier to work with as well. For this one,  I had a deliberate result in mind, which lead to a way more focused workflow. I’ve approached the previous homework projects in a more experimental way, where I had a vague goal but a lot of it was experimenting and trying out values. This assignment had forced me to truly think about what all my code was doing, and how I could implement exactly what I wanted.


#ifdef GL_ES
precision mediump float;
#endif

// most of these are the same as the Book of Shaders uniforms
// (but without underscores!)
// reminder: uniforms are sent from the program that runs the shaders
// could be p5.js, processing, openFrameworks, Unity, etc.

uniform float uTime;
uniform vec2 uMouse;
uniform vec2 uResolution;
uniform sampler2D uTexture0;
uniform sampler2D uTexture1; // webcam (you)

varying vec2 vTexCoord;

float circle(in vec2 _st, in float _radius, in float loc){
vec2 dist = _st-vec2(loc);
return 1.-smoothstep(_radius-(_radius*0.01),
_radius+(_radius*0.01),
dot(dist,dist)*4.0);
}

float rgb_to_luma( vec3 color ){
return 0.2126*color.r + 0.7152*color.g + 0.0722*color.b;
}

float drawRect(vec2 st, vec2 pos, vec2 size ){

float result = 1.0;
vec2 border = (1.0-size)/2.0;
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;
}

float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}
float map(float value, float min1, float max1, float min2, float max2) {
return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}
vec3 colorpicker (vec2 uv, float num) {

vec4 colorT = texture2D(uTexture0, uv);
vec3 colorret = vec3(0.0, 0.0, 0.0);
vec2 coord = vec2(0., 0.);

//Seperate Palette Colors
if (num < 0.2) //top left
{
coord.x = 0.0;
coord.y = 0.0;
colorT = texture2D(uTexture0, coord);
colorret = colorT.xyz;
}
else if (num < 0.4) //top middle
{
coord.x = 0.5;
coord.y = 0.0;
colorT = texture2D(uTexture0, coord);
colorret = colorT.xyz;
}
else if (num < 0.6) //top right
{
coord.x = 0.9;
coord.y = 0.0;
colorT = texture2D(uTexture0, coord);
colorret = colorT.xyz;
}
else if (num < 0.8) //bottom left
{
coord.x = 0.0;
coord.y = 0.6;
colorT = texture2D(uTexture0, coord);
colorret = colorT.xyz;
}
else //bottom middle
{
coord.x = 0.5;
coord.y = 0.6;
colorT = texture2D(uTexture0, coord);
colorret = colorT.xyz;
}

return colorret;
}

void main() {

// calculate the normalized mouse position
vec2 mouseXY = uMouse/uResolution;

// this is our st/uv
vec2 uv = vec2(vTexCoord.x, 1.0-vTexCoord.y);

// calculate aspect ratio
// this is important for non square windows
// multiply uv.x and mouse.x by the aspect ratio
// to make the values 'even'
float aspect = uResolution.x/uResolution.y;
uv.x *= uResolution.x/uResolution.y;
mouseXY.x *= uResolution.x/uResolution.y;


vec3 color = vec3(0., 0., 0.);
color = (texture2D(uTexture1, fract(uv))).xyz;
vec4 colorT = texture2D(uTexture0, uv);
vec3 color1 = colorT.xyz;
// color = mix(color, colorpicker(uv, fract(uTime)), circle(uv,0.1, 0.5) );
//color += vec3(circle(vexCoord,0.1, 0.5));
// color = mix(color, vec3(0.908,0.342,0.870), drawRect(uv, //vec2(0.2, 0.2) * sin(uTime)+1.0, vec2(0.3, 0.3)));

float ch =rgb_to_luma(color );
ch = map(ch, 0.0, 0.8, -0.2, 1.0);
color = mix(color, colorpicker(uv, ch), 0.72);
//color = colorpicker(uv, fract(uTime));

vec4 colorAlpha = vec4(color, 1.);
//vec4 color2 = texture2D(uTexture0,uv);

// send the colors to the GPU
gl_FragColor = vec4(colorAlpha);
}

https://editor.p5js.org/sonya.sheina/sketches/LImEq8b3I

 

Week 3 Shader

My shader was pretty simple – I focused on playing with noise in both shape and colour. I really liked the bit of the demo where we applied the noise to the size of the circle, therefore creating a  blob, so I wanted to do that. I also used noise to warp my canvas and tiles for my pattern, which I thought created an interesting effect. I was going for an ‘oil’ spill aesthetic, where elements would move independently to create one cohesive image, but could still be seen in the result.

scr1 scr2


// Author:
// Title:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
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 drawCircle(vec2 st, vec2 pos, float size){
float result = 1.0;
result = distance(st, pos);
result = 1.0- step(size, result);

return result;
}
float drawRectangle(vec2 st, vec2 pos, vec2 size ){

float result = 1.0;
vec2 border = (1.0-size)/2.0;
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;
}
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }

float snoise(vec2 v){
const vec4 C = vec4(0.211324865405187, 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.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
vec3 noiseGradient( vec2 st, float offset, vec2 frequency, float t){

// like random(), simplex noise takes a vec2 argument and returns a float
// because it is deterministic, we need to offset to get different
// values for r, g & b
// we add an additional offset in case we want to call the function mutliple times
// so we continue to generate unique numbers
// isn't modularity great?
// also, we add time to 'animate' the noise

vec3 color;
color.r = snoise( st * frequency + vec2(offset, t)) * 0.5 + 0.5;
color.g = snoise( st * frequency + vec2(200.+offset, t)) * 0.5 + 0.5;
color.b = snoise( st * frequency + vec2(300.+offset, t)) * 0.5 + 0.5;

return color;
}
float map(float value, float min1, float max1, float min2, float max2) {
return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}

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

vec2 indices = floor(st);
float cs = (snoise(st*4. + vec2(u_time*0.01) )*0.540+0.868)*0.744+sin(u_time)*0.3;
st = createGrid(st, vec2(cs*20.), indices);
vec3 bgColor = noiseGradient(st, -0.280, vec2(0.540,0.780), u_time * 0.2);

vec3 color = bgColor;
//color.r = mod(indices.x, 2.);
//color.rgb += mod(indices.y, 2.);

if (mod(indices.x, 2.) == 0. && mod(indices.y, 2.) == 0.){
//lowerleft
float cs = (snoise(st + vec2(u_time*0.01) )*0.5+0.5)*0.744+0.1;
//color = vec3(1.000,0.786,0.038);
float c = drawCircle(st, vec2(cs*5., cs*10.), cs);
color = mix(color, vec3(0.870,0.201,0.076), c);
float c2 = drawCircle(st, vec2(0.5)*cos(u_time)+0.5, cs);
color = mix(color, vec3(0.040,0.342,0.870), c2);
}
else if (mod(indices.x, 2.) == 0.)
{
//color = vec3(1.000,0.786,0.038);
float cs = (snoise(st + vec2(u_time*0.01) )*0.492+0.5)*0.4+0.1;
float c = drawCircle(st, vec2(1)*fract(u_time)*2., cs);
color = mix(color, vec3(0.087,0.711,0.870), c);
float c2 = drawCircle(st, vec2(0.5)*sin(u_time)+0.5, cs);
color = mix(color, vec3(0.130,0.579,0.870), c2);


}
else if (mod(indices.x, 2.) != 0. && mod(indices.y, 2.) == 0.)
{
//upper left
// color = vec3(1.000,0.786,0.038);

float cs = (snoise(st + vec2(u_time*0.01) )*0.5+0.5)*0.4+0.1;
float c = drawCircle(st, vec2(1)*fract(u_time)*2., cs);
color = mix(color, vec3(0.087,0.711,0.870), c);
float c2 = drawCircle(st, vec2(0.5)*sin(u_time)+0.5, cs);
color = mix(color, vec3(0.018,0.160,0.870), c2);
}
else
{
// color = vec3(1.000,0.786,0.038);
float cs = (snoise(st + vec2(u_time*0.01) )*0.5+0.5)*0.4+0.1;


float c = drawCircle(st, vec2(1)*fract(u_time+0.5)*0.3, cs);

color = mix(color, vec3(0.087,0.711,0.870), c);
float c2 = drawCircle(st, vec2(0.5)*cos(u_time)+0.5, cs);
color = mix(color, vec3(0.111,0.534,0.870), c2);

//upper right
//color = vec3(0.675,0.664,0.411);
}
gl_FragColor = vec4(color,1.0);
}

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