Difference between revisions of "P5js-desktop-and-mobile"
From Digipool-Wiki
(→p5js Code) |
|||
(9 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. (This compromise is necessary because unfortunately the p5js full screen command does not work on iOS devices.) | ||
+ | <br> | ||
+ | |||
+ | == Background Pattern == | ||
+ | |||
+ | Download the [[Media:Stripe.png|Stripe.png]] or design your own background tile. | ||
+ | |||
+ | <br> | ||
+ | |||
+ | == Html Code == | ||
Add this to your Html header | Add this to your Html header | ||
Line 9: | Line 19: | ||
background-image: url('stripe.png'); | background-image: url('stripe.png'); | ||
} | } | ||
+ | </style> | ||
</pre> | </pre> | ||
+ | <br> | ||
− | Add this to your p5js code | + | == p5js Code == |
+ | |||
+ | 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 23: | Line 37: | ||
} | } | ||
</pre> | </pre> | ||
+ | |||
+ | |||
+ | And add this function to your p5js code | ||
+ | <pre> | ||
+ | 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); | ||
+ | } | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | <br> |
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); } }