PROJECTS
P5.js
P5.JS
The page design for all this has already been
created, so the focus of the tutorial will be on
adding the JavaScript and shader code.
To get started open the ‘start’ folder from the
project files in your code editor, then open the
‘sketch.js’ file for editing. First off, some variables
need to be declared. The first line of variables all
refer to the shader and camera. The second and
third line refer to the buffer of images that will
eventually be stored to give the delay effect. The
final line will create variables that enable the buffer
to be filled before displaying the feed.let img, camShader, cam, shaderLayer, hRatio;
let numLayers = 90, layers = [];
let index1 = 0, index2 = numLayers / 3, index3 = numLayers
/ 3 * 2;
let displayOn = false, counter = 0;CREATE AN RGB SPLIT
CHANNEL EFFECT
Pdun#Vkxl·herwwrp#shows youhow to use shaders to manipulate the
RGB channels of a webcam feed
With WebGL available in our browsers, we get
access to a special effect commonly used in
video games: shaders. They are extremely powerful
because shaders are always offloaded to the GPU
and provide advanced filter effects – the kind you
might find in After Effects – that can be applied in
real time to the display.
In this tutorial, we’re going to show you how to
use the p5.js library in order to access a webcam
feed and display it on the screen. The webcam will
be passed into a shader and then manipulated.
A buffer of frames will be stored so that the RGB
channel can be split and delayed, which will mean
that each individual channel is staggered. With this
done, the shader can then be further manipulated
to add a slight colour tint to the image, in addition
to a soft-edged vignette so that the edges fade out
to black.View source
files here!
All the files you need for
this tutorial can be found at
https://netm.ag/2ZdikKbABOUT THE AUTHOR
MARK
SHUFFLEBOTTOM
w: webspaceinvader.com
t: @webspaceinvader
job: Professor interaction
design
areas of expertise:
HTML, CSS, JavaScript