Week 5 Homework

precision mediump float;
uniform vec2 uResolution;
uniform vec2 uMousePosition;
// lets grab texcoords just for fun
varying vec2 vTexCoord;

// our texture coming from p5
uniform sampler2D tex0;
uniform sampler2D tex1;

void main() {

vec2 uv = vTexCoord;
// the texture is loaded upside down and backwards by default so lets flip it
uv = 1.0 - uv;

// to pixelate an image we need to alter our uvs so that instead of being a smooth gradient it steps from one color to the next
// in order to do this we will use the floor function
// floor will round a float down to the nearest int, so 4.98 would become 4.0, and -37.2 would become -37.0
// first the uv's are multipled times a tiles variable
float tiles = (uMousePosition.x/3.0+5.0);
uv = uv * tiles;

// second the uvs are rounded down to the nearest int
uv = (floor(uv));

// lastly we divide by tiles again so that uvs is between 0.0 - 1.0
uv = uv / tiles;

// often times in glsl you will see programmers combining many operation onto one line.
// the previous three steps could have also been written as uv = floor( uv * tiles ) / tiles

// get the webcam as a vec4 using texture2D and plug in our distored uv's
vec4 color0 = texture2D(tex0, uv);
vec4 color1 = texture2D(tex1, uv);

float blend = clamp(uMousePosition.y / uResolution.x, 0., 1.0);

// use blend to cross-fade with mix()
vec4 color = mix( color1, color0, blend);

gl_FragColor = vec4(color);

// if you'd like a debug view of what the uv's look like try running this line
// gl_FragColor = vec4(uv.x, uv.y, 0.0, 1.0);

I took a look at Adam Ferriss’ pixel sketch and merged it with the texture blend example from class. I added interaction using mouse X and mouse Y so that when the mouse is moved horizontally the image output becomes pixelated and when the mouse is moved vertically the camera output and image are blended. Figuring out these interactions took quite a while because I’ve never looked at GLSL with P5 but I was glad to get this little sketch functioning!



Leave a Reply