Hello!
I am in a desperate need of simple app that can be used as a camera color filter, e.g. shows only red values while rest is 0. I have been doing this with shaders. The effect itself works but the problem is that this cam is very tiny and probably has some huge margins around it? I literally cannot find a reason for it.
I need the cam to cover the screen width.
Second problem is that the cam is rotated. Any tilt, rotate, doesn’t help. I checked on a phone and other PC, same effect.
Any help please ?
let theShader;
let cam;
let currentFilter = 0;
let inverse = 1;
function preload(){
theShader = loadShader('assets/webcam.vert', 'assets/webcam.frag');
}
function setup() {
cam = createCapture(VIDEO, () => {
cam.size(innerWidth, innerWidth / (cam.width / cam.height));
cam.hide();
});
createCanvas(innerWidth, innerWidth / (cam.width / cam.height), WEBGL);
noStroke();
let buttonContainer = createDiv();
buttonContainer.style('text-align', 'center');
createButtonInContainer(buttonContainer, 'Original', () => {
currentFilter = 0;
});
createButtonInContainer(buttonContainer, 'Red Filter', () => {
currentFilter = 1;
});
createButtonInContainer(buttonContainer, 'Green Filter', () => {
currentFilter = 2;
});
createButtonInContainer(buttonContainer, 'Blue Filter', () => {
currentFilter = 3;
});
createButtonInContainer(buttonContainer, 'Inverse', () => {
inverse *= -1;
});
}
function createButtonInContainer(container, label, callback) {
let button = createButton(label);
button.mousePressed(callback);
button.parent(container);
}
function createButtonInContainer(container, label, callback) {
let button = createButton(label);
button.mousePressed(callback);
button.parent(container);
}
function draw() {
shader(theShader);
theShader.setUniform('tex0', cam);
theShader.setUniform('inverse',inverse);
switch(currentFilter) {
case 0: // Original
theShader.setUniform('filterType', 0);
break;
case 1: // Red Filter
theShader.setUniform('filterType', 1);
break;
case 2: // Green Filter
theShader.setUniform('filterType', 2);
break;
case 3: // Blue Filter
theShader.setUniform('filterType', 3);
break;
}
rect(0,0,width,height);
}
FRAG and VERT needed?