How to flip image?

mileshiroo

Hello,

I am trying to mirror the feed from a webcam stream object made by createCapture(). Is there a way to flip an image along the y axis? I tried both scale(-1,1), and image(capture,0,0,-width,height) to no avail.

Thanks, Miles

TfGuy44

Instead of:

image(capture,0,0);

Do:

pushMatrix();
translate(capture.width,0);
scale(-1,1); // You had it right!
image(capture,0,0);
popMatrix();

mileshiroo

Thanks! Strangely, this only works half of the time. As in, I refresh the page, and roughly 1/2 times the capture feed will be mirrored correctly. This is my code, and I'm testing it on Firefox:

var capture; 

function setup() {
    createCanvas(displayWidth,displayHeight);
    capture = createCapture(VIDEO);
    capture.size(displayWidth,displayHeight);
}

function draw() {
    push(); 
    translate(capture.width,0); 
    scale(-1.0,1.0); 
    image(capture,0,0); 
    pop();
    image(capture,0,0,width/2,height/2); 
}

TfGuy44

I have no idea what lines 10, 14, and 15 are doing in there.

mileshiroo

Oh my mistake, I should have explained that.

In the cases when the mirroring doesn't work (roughly 1/2 times I run the code), images drawn outside of push() pop() seem to be mirrored correctly. I drew capture outside of push() pop() to demonstrate that.

As far as I know, p5.js doesn't support pushMatrix() and popMatrix(), only push and pop.

The bug (?) should still occur without line 15.