How do I flip video in canvas horizontally in p5js?

banana

Here is my code:

var video;

function setup() {
  createCanvas(320, 240); //canvas
  background(51);
  
  video = createCapture(VIDEO); //camera / video
  video.size(320, 240);
  video.hide(); //hides video 
}

function draw() { //canvas
  image(video, 0, 0, width, height); //video on canvas, position, dimensions
}

jeremydouglass

@banana -- the easiest way to reverse any image (in Processing or p5.js) is to use scale(-1,1) to flip the x-axis of drawing, then call image().

Here is a sketch that draws the video feed twice -- once normally on the left, once flipped on the right. Notice that the image() line is exactly the same, but translate() and scale() have changed the direction and orientation of drawing to (0,0) the second time.

var video;

function setup() {
  createCanvas(640, 240); //canvas
  background(51);

  video = createCapture(VIDEO); //camera / video
  video.size(320, 240);
  video.hide(); //hides video 
}

function draw() { //canvas
  image(video, 0, 0, width/2, height); //video on canvas, position, dimensions
  translate(width,0); // move to far corner
  scale(-1.0,1.0);    // flip x-axis backwards
  image(video, 0, 0, width/2, height); //video on canvas, position, dimensions
}

For reference, see scale():

• https://p5js.org/reference/#/p5/scale

banana

Thanks. I will try your code.