P5.js
To p A further tint is added
to the image so that it
starts to have the same
colouring as the interface
elements used in the design
Above The vignette effect
enables the HTML elements
that make up the interface
to really stand out in
contrast to the video feedindex3 = (index3 + 1) % layers.length;
}
It’s also a good idea to add a window resize
function, though obviously it will take 90 frames
before this takes effect due to the nature of the
buffer delay.
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
hRatio = (windowWidth / cam.width) * cam.height;
}
Save the ‘sketch.js’ file now and move over to
the file ‘effect.frag’. This is known as a fragment
shader. There is also a vertex shader that has been
created, which just sends the texture co-ordinates
to the fragment shader as the vTexCoord variable.
These lines are variables, with the uniforms being
the three camera texture layers that are passed in
from the JS.
precision mediump float;
varying vec2 vTexCoord;
uniform sampler2D tex0;
uniform sampler2D tex1;
uniform sampler2D tex2;
Now the main function will take the texture
co-ordinates and then flip the camera to be a
mirror. Each texture is placed into a vector 4
variable because this displays the RGBA values.
Then each channel is added to the final display of
colOut. The gl_FragColor is always the final screen
output. Save this and test it on a server to see the
RGB split over time.
void main() {
vec2 uv = vTexCoord;
uv.y = 1.0 - uv.y;
vec4 cam = texture2D(tex0, uv);
vec4 cam2 = texture2D(tex1, uv);
vec4 cam3 = texture2D(tex2, uv);
vec4 colOut = vec4(cam.r, cam2.g, cam3.b, 1.0);
gl_FragColor = colOut;
}
Let’s take this further. Next comment out the
gl_FragColor line from the previous code with two
forward slashes and replace it with the following
code instead. The c variable is the colour that will
be applied as R, G, B and A values from 0 to 1. The
camera image is multiplied to this and then it’s sent
to the new output of gl_FragColor. Save this and the
webcam will now have a slight blue tint to the image.
vec4 c = vec4(0.5, 0.7, 1.0, 1.0);
vec4 colorized = (colOut * c);
gl_FragColor = colorized;Finally, comment out the last gl_FragColor line
again and replace it with the code below. This will
introduce a vignette effect, which you can control
by changing the darkness and offset values to
adjust how dark it is and how much it extends onto
the camera image.float darkness = 1.0;
float offset = 1.8;
vec2 vuv = ( uv - vec2( 0.5 ) ) * vec2( offset );
gl_FragColor = vec4( mix( colorized.rgb, vec3( 1.0 -
darkness ), dot( vuv, vuv ) ), colorized.a );Save and you should find that the whole effect is
working now, with a delayed RGB channel split, a
tint and a vignette applied.