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

From Digipool-Wiki
Jump to: navigation, search
Line 25: Line 25:
  
  
and add this function to your p5js code
+
And add this function to your p5js code
 
<pre>
 
<pre>
 
function windowResized() {
 
function windowResized() {

Revision as of 18:45, 19 April 2020


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');
    }


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);
  }
}