net - UK (2020-03)

P5.js

In the fragment shader, colour values are required as values

of zero to one. Most of us have been around the RGB model

of zero to 255 enough to be able to guess the values but our

software gives us those values easily enough through the various

colour pickers!

Converting a colour value over does involve a bit of maths.

Changing the value into a percentage will definitely help but even

then it’s only part of the way there as the decimal place has to

be moved. Start by heading on over to https://www.calculator.net/

percent-calculator.html – an online percent calculator. Selecting

a colour in something like Photoshop gives us easy access to

those RGB values. If the colour selected has a red value of 92, in

the online calculator you can add in the value where it asks ‘92

is what % of 255’, then hit calculate. This in turn leaves you with

the result of 36.07843%. Now all that needs to happen is for the

decimal place to be moved two places to the right so that the value

is ‘0.3607’ and now lies between zero and one. Of course smart

readers will realise that this very value can also be achieved by

simply dividing 92 by 255, again giving 0.3607, but it’s always good

to make sure using the long way!

GETTING THE

RIGHT COLOUR

IN-DEPTH

There are various ways to convert RGB values into a scale of zero to one for the

fragment shader

To p Here the webcam image is fed into the shader as three different time-delayed textures.
They are put together in the shader to get a delayed RGB split

The preload function loads up the shader files and a
disc, which will spin while the buffer is filled.

function preload() {
camShader = loadShader(‘effect.vert’, ‘effect.frag’);
img = loadImage(‘img/disc.png’);
}

Next the setup deals with how the screen should look
as the project starts. The canvas element is set to fill
the whole screen display. The ability to draw a stroke
on elements is turned off and the pixelDensity is set to
1 so that a high-definition screen uses the same ratio
as CSS. The camera is set up and then sized to fit the
display – since the camera will originally show as
a video element in HTML, the display is turned off.
A shader layer is created that will display the final
result and then a for loop adds in an empty graphics
element for the 90 frames that will be stored.

function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
pixelDensity(1);
cam = createCapture(VIDEO);
cam.size(640, 480);
hRatio = (windowWidth / cam.width) * cam.height;
cam.size(width, hRatio);
cam.hide();
shaderLayer = createGraphics(windowWidth,
windowHeight, WEBGL);
for (let i = 0; i < numLayers; i++) {
let l = createGraphics(windowWidth, windowHeight);
layers.push(l);
}
background(0);
}

“Shaders are powerful

ehfdxvh#wkh|#duh#rl·rdghg#wr#

the GPU and provide

dgydqfhg#Ľowhu#hļhfwvĤ