Capture starts with wrong dimensions + get() on demand pauses it

[ffd8]

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Dom
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: 1.0.0
• Web browser and version: Chrome 81.0.4044.129
• Operating System: MacOS 10.13.6
• Steps to reproduce this:

Two issues found, with example sketch here:

1st – when loading a createCapture and using imageMode(CENTER), the image is displayed from the x, y point upwards to the left.... sort of the opposite of CORNER. Must have to do with it not knowing the actual image dimensions and never getting an update once known?

2nd – if using get() on the capture outside of the draw, it freezes/pauses the capture. Seems this was an issue in the past within the draw from issue #3753 – no longer a problem in the draw and doing so, solves the whole problem.. just an issue if only called within something like mousePressed() – which is useful if only wanting to take a snapshot of the capture on demand.

[lmccart]

Hm I'm not able to reproduce either of these, the sketch works correctly for me using the same p version, in chrome on mac. Can others reproduce?

[ffd8]

Whoops - should have saved it with two lines commented out to show the issue.
Try loading this example again – on my MacOS + Chrome, the capture is surprisingly loaded from the lower-right, upward.. rather than expected center-out (with imageMode(CENTER) active). After pressing the mouse once, the get() ends up fixing the dimensions issue.. while also pausing the capture (updates on each proceeding mousePress)

[micuat]

1st point - it seems capture.size is causing a problem. If you comment out, the image is perhaps bigger than 320x240, it should be centered to the mouse position. I tried using constraints argument to initialize with the desired resolution but it didn't scale as expected :(
https://editor.p5js.org/micuat/sketches/iYWopm-Qf

[micuat]

the second point - capture is actually a p5.MediaElement whose get is written here

p5.js/src/dom/dom.js

Lines 3068 to 3071 in 3893225

	p5.MediaElement.prototype.get = function() {
	this._ensureCanvas();
	return p5.Renderer2D.prototype.get.apply(this, arguments);
	};

which first calls _ensureCanvas that creates a this.canvas. This gets problematic when Render2D.prototype.image is called, because it prefers canvas over elt

p5.js/src/core/p5.Renderer2D.js

Lines 150 to 152 in b3a9059

	if (!cnv) {
	cnv = img.canvas || img.elt;
	}

I guess that's why you see a frozen image. Here it outputs canvas before and after get is called
https://editor.p5js.org/micuat/sketches/iYWopm-Qf

[Prateek93a]

@lmccart @micuat If nobody is working on this right now, shall I take it up?

[micuat]

wow. I revisited this issue now and it looks like really weird edge cases.

@Prateek93a yes please but do you know what the steps are? The first problem (dimensions) is perhaps rather easy, and the second one seems more tricky not to break other things (or maybe I'm wrong)

[Prateek93a]

@micuat Yes the second issue is a little tricky to solve, I do have a solution but that is creating issue in other part of the code. So I will come up another approach to fix it. Thanks for the help!