PROJECTS
P5.js
GOING FURTHER
WITH SHADERS
RESOURCESShaders are notorious for being difficult to create; even
experienced programmers can find them awkward to work
with. Building your knowledge of how they work from the ground
up will help you if you want to start using them to get creative
results in your projects. Here are some useful resources...Pixel Shaders
http://pixelshaders.com/sample/
The Pixel Shaders website is a great example of introducing
basic concepts and then applying them. There is a very simple
interactive code panel that prompts you to change the code to the
supplied example. All changes that you make are updated live so
you can immediately see when you achieve the desired look.Book of Shaders
https://thebookofshaders.com/
Taking the concepts of the previous website a stage further is the
Book of Shaders, which as the name suggests is like an interactive
online text book that enables you to try lots of code experiments
and goes in more depth than the Pixel Shaders site. There’s also a
gallery of shaders that is very helpful.GLSL Sandbox
http://glslsandbox.com/
Sometimes you just want to be blown away by what really clever
people can do; if that’s the case you should head to GLSL Sandbox.
This is a live coding environment where you can browse other
users’ experiments and even change some of the numbers. You
can also cut and paste the code into your own projects.The draw function is going to be called every frame,
so here the camera is added to the layers array.
This means that it will take 90 frames to fill the
buffer. The shader will get three feeds, delayed
by 30 frames each so the RGB split will have an
interesting delay.function draw() {
layers[index1].image(cam, 0, 0, width, hRatio);
shaderLayer.shader(camShader);
camShader.setUniform(‘tex0’, layers[index1]);
camShader.setUniform(‘tex1’, layers[index2]);
camShader.setUniform(‘tex2’, layers[index3]);
shaderLayer.rect(0, 0, width, height);Because it takes 90 frames to fill the buffer and
the user has to click to enable the webcam to be
used, the code here displays a rotating disc image.
However, after 120 frames the shader will be
displayed on the screen.if (!displayOn) {
background(0);
translate(width / 2, height / 3);
imageMode(CENTER);
counter++;
rotate(PI / 180 * (counter / 0.9));
image(img, 0, 0);
if (counter >= 120) displayOn = true;
} else {
imageMode(CORNER);
image(shaderLayer, 0, 0, width, height);
}When it comes to ending the draw function, the
index for each layer of the camera is updated and if it
reaches the end of the layers, it will be reset to zero.index1 = (index1 + 1) % layers.length;
index2 = (index2 + 1) % layers.length;“Each tex ture is placed
into a vector 4 variable to
display the RGBA values.
Then each channel is
dgghg#wr#wkh#Ľqdo#
display of colOut to see
wkh#UJE#vsolw#ryhu#wlphĤ