How to flip image?

Comments

• TfGuy44

  February 2015

  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

  February 2015

  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

  February 2015

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

  February 2015 edited February 2015

  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.