search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.39k stars 1.34k forks source link

Auto-stretching behavior on Mobile Preview Screen #1485

Open ghalestrilo opened 4 years ago

ghalestrilo commented 4 years ago

Nature of issue?

Feature enhancement details:

Following discussion from #1472 , we have to decide on a sizing behavior for the sketch rendering canvas in mobile mode. Should it auto-stretch (cover), fit within screen dimensions (contain) or overflow?

@catarak suggested we initialize the sketch with full-screen dimensions, and let the user change at own will, but we don't know how confusing that may be to users

catarak commented 4 years ago

Even though it's ugly, I think the least confusing thing to do is to have the canvas overflow. When a user is working on a sketch, I think they will want to know what it actually looks like on different devices.

I think it would be rad, if possible, to change the default sketch.js if a user creates a new sketch on mobile. I looked at the Processing iOS app and by default, on a p5.js the size of the canvas is widthWidth, windowHeight. I imagine there would be some JS that detects the size of the screen and adjusts the default sketch.js accordingly.