xxxxxxxxxx
64
let video;
let bw;
let bwSrc = `
precision highp float;
uniform sampler2D tex0;
varying vec2 vTexCoord;
void main() {
// Get the original color for this pixel
vec4 color = texture2D(tex0, vTexCoord);
// Make it black and white by replacing all channels with blue
// color.r = color.b;
color.g = 230.0;
// Set the new color
gl_FragColor = color;
}
`;
let warpSrc = `
precision highp float;
uniform sampler2D tex0;
varying vec2 vTexCoord;
void main() {
// Offset the input coordinate
vec2 warpedCoord = vTexCoord;
warpedCoord.x += 0.05 * sin(vTexCoord.y * 10.0);
warpedCoord.y += 0.05 * sin(vTexCoord.x * 10.0);
// Set the new color by looking up the warped coordinate
gl_FragColor = texture2D(tex0, warpedCoord);
}
`;
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
video = createVideo(
'https://upload.wikimedia.org/wikipedia/commons/d/d2/DiagonalCrosswalkYongeDundas.webm'
);
video.volume(0);
video.hide();
video.loop();
bw = createFilterShader(bwSrc);
warp = createFilterShader(warpSrc);
describe('A video of a city crosswalk in black and white');
}
function draw() {
background(255);
push();
imageMode(CENTER);
image(video, 0, 0, windowWidth, windowHeight, 0, 0, video.width, video.height, COVER);
pop();
filter(bw);
filter(warp);
}