createCapture flipped property in WEBGL fixed

[MuktiMishra]

Resolves #7300
(createCapture flipped property in WEBGL)

Changes:

• Applied a horizontal flip to the webcam video feed to display the video as a mirror image, ensuring actions (like raising the right hand) are shown on the correct side.
• Used scale(-1, 1) to flip the video horizontally.
• Adjusted the video’s x-coordinate to -width in image(video, -width, 0) to correctly position the flipped video.

These changes ensure that the webcam feed behaves like a mirror, with correct left-right orientation when interacting with it.

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already. And be sure to add yourself to the list of contributors on the readme page!

[perminder-17]

hmm...You may need to make some adjustments to the actual code. For instance, when you write the same code in sketch.js:

let video;

function setup() {
  createCanvas(640, 480, WEBGL);
  video = createCapture(VIDEO, { flipped: true });
  video.hide();
}

function draw() {
  translate(-width / 2, -height / 2);
  image(video, 0, 0);
}

The aim is to keep the code unchanged, but ensure the output is as expected. To achieve this, it might be necessary to modify the codebase.

I have a strong feeling the createCapture function may not be handling the flipping correctly in WEBGL, so it’s worth investigating. Please feel free to reach out if I could help you with any other way for this issue! You don't need to update the sketch.js but probably the function used in sketch.js is needed to be changed so that with the same code above we could achieve the output.

Here's the createCapture function which could be worth looking at:

p5.js/src/dom/dom.js

Line 2401 in 7d393ec

p5.prototype.createCapture = function(...args) {

[Akhilbisht798]

Yes, If i am not wrong it will be how webgl is applying texture for video we need to handle that for flipped videos.

[davepagurek]

I suspect the issue might be happening here:

p5.js/src/webgl/p5.Texture.js

Lines 122 to 129 in 7d393ec

	} else if (
	this.isSrcMediaElement ||
	this.isSrcP5Graphics ||
	this.isSrcP5Renderer ||
	this.isSrcHTMLElement
	) {
	// if param is a video HTML element
	textureData = this.src.elt;

So createCapture creates a media element, with the raw video. We are internally creating a canvas element as well, and we draw the raw video mirrored onto that when flipped is true. However, it looks like for all media elements, WebGL is reading texture data not from that canvas, but always from the original element, which will never be flipped.

So maybe to handle the case where we have a canvas, we can set textureData = this.src.canvas || this.src.elt, so it first tries to use the internal canvas if it exists, and otherwise falls back to the raw element? I'm not 100% sure that this is the cause, but this would be the thing I would test first.

[Akhilbisht798]

@davepagurek This is working great.

[Akhilbisht798]

Hey on further check this is not flipping.

[davepagurek]

It looks like in addition to it not using the correct texture source, it also isn't calling _ensureCanvas, which is what makes the flipped canvas (if you console.log(this.src.canvas), it was previously always undefined.) I tried adding an extra if statement that calls _ensureCanvas if the element has it: https://editor.p5js.org/davepagurek/sketches/QHc9pfqzn