Difference between revisions of "P5js-desktop-and-mobile"

From Digipool-Wiki
Jump to: navigation, search
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. (Unfortunately, the full screen command does not work on iOS devices.)
+
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>

Revision as of 19:01, 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');
    }


p5js Code

Add this to your p5js code into setup

  // go 16:9
  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
  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);
  }
}