Difference between revisions of "P5js-desktop-and-mobile"
From Digipool-Wiki
(→p5js Code) |
|||
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | The basic idea of the compromise is to design the p5js app for a 16: 9 portrait format. This saves you the work of having to develop an adaptive design. The remaining area on the desktop computer is filled with a background pattern. The full display height is used on the mobile phone, so you can easily see the app full screen if you push the URL bar up a bit. ( | + | The basic idea of the compromise is to design the p5js app for a 16: 9 portrait format. This saves you the work of having to develop an adaptive design. The remaining area on the desktop computer is filled with a background pattern. The full display height is used on the mobile phone, so you can easily see the app full screen if you push the URL bar up a bit. (This compromise is necessary because unfortunately the p5js full screen command does not work on iOS devices.) |
<br> | <br> | ||
Line 19: | Line 19: | ||
background-image: url('stripe.png'); | background-image: url('stripe.png'); | ||
} | } | ||
+ | </style> | ||
</pre> | </pre> | ||
Line 27: | Line 28: | ||
Add this to your p5js code into setup | Add this to your p5js code into setup | ||
<pre> | <pre> | ||
− | // go 16:9 | + | // go 16:9 portrait |
if (windowWidth < windowHeight) { | if (windowWidth < windowHeight) { | ||
// if portrait=mobil then use the full display height | // if portrait=mobil then use the full display height | ||
Line 41: | Line 42: | ||
<pre> | <pre> | ||
function windowResized() { | function windowResized() { | ||
− | // go 16:9 | + | // go 16:9 portrait |
if (windowWidth < windowHeight) { | if (windowWidth < windowHeight) { | ||
// if portrait=mobil then use the full display height | // if portrait=mobil then use the full display height |
Latest revision as of 20:29, 19 April 2020
The basic idea of the compromise is to design the p5js app for a 16: 9 portrait format. This saves you the work of having to develop an adaptive design. The remaining area on the desktop computer is filled with a background pattern. The full display height is used on the mobile phone, so you can easily see the app full screen if you push the URL bar up a bit. (This compromise is necessary because unfortunately the p5js full screen command does not work on iOS devices.)
Background Pattern
Download the Stripe.png or design your own background tile.
Html Code
Add this to your Html header
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"> <style> body { background-image: url('stripe.png'); } </style>
p5js Code
Add this to your p5js code into setup
// go 16:9 portrait if (windowWidth < windowHeight) { // if portrait=mobil then use the full display height createCanvas(displayHeight * 0.5625, displayHeight); } else { // if landscape=dektop then use the full window height createCanvas(windowHeight * 0.5625, windowHeight); }
And add this function to your p5js code
function windowResized() { // go 16:9 portrait if (windowWidth < windowHeight) { // if portrait=mobil then use the full display height resizeCanvas(displayHeight * 0.5625, displayHeight); } else { // if landscape=dektop then use the full window height resizeCanvas(windowHeight * 0.5625, windowHeight); } }