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

From Digipool-Wiki
Jump to: navigation, search
(p5js Code)
 
(7 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>
 +
 +
== p5js Code ==
  
 
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 25: Line 39:
  
  
and add this function to your p5js code
+
And add this function to your p5js code
 
<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 19: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);
  }
}