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