p5 and Seriously.js Video Size Issue

dsinger7

I'm working on a project inspired by Daniel Shiffman's p5/Seriously.js tutorial. Seriously.js allows for real-time video compositing on the web, and the tutorial shows how one can apply Seriously effects to videos drawn to a p5 canvas:

When I run Daniel's code verbatim (https://github.com/shiffman/Video-Lesson-Materials/tree/master/code_p5.js/10.7_p5.js_seriously), I've been having an issue where the createCapture video drawn to the p5 canvas inexplicably "shrinks" upon running the program. It looks like this:

I'm using a monitor as a second display for my Macbook Pro — when running the program locally via MAMP the video shrinks when my Chrome window (where the page opens) is located on my laptop display. However, when I drag the Chrome window onto my second display and refresh the page the video size is correct (see below). The shrinking occurs when using the p5 editor regardless of which display the browser window is located on.

Any thoughts from the community on why this is happening would be greatly appreciated. Thanks for your help!

shiffman

Can you check and make sure you have the most recent p5.js? Are you on a retina or high density display? This may be the issue. You can try adding pixelDensity(1) to turn off retina stuff.

dsinger7

That worked! Must've been the retina display. Thanks again for the quick response!