P5JS look like an mobil app



To make p5*js look like an app, there are three issues.
 * 1) How do I recognize a mobile device?
 * 2) How do I activate the full-screen view?
 * 3) How do I simulate the phone on the desktop computer?

This tutorial shows P5JS Sketches on a mobile device in full screen portrait mode and on the desktop computer in landscape mode the canves is displayed inside a mobile phone frame. Because the deviceOrientation command does not work reliable to detect a mobile devices, this tutorial will look at the height and width ratio.

Applications in landscape mode must reverse these conditions.

Phone Frame
Place this PNG file in your folder - [[Media:Phone.png|LINK]]

HTML File
Use this code for Index.html

   body { padding: 0; margin: 0; display: flex;

/* This centers our sketch horizontally. */	 justify-content: center;

/* This centers our sketch vertically. */	 align-items: center;

background-image:url(phone.png); background-repeat:no-repeat; background-position:50% 50%; background-size: auto 100%; }  

Sketch
function windowResized { // keep a 16:9 portrait format if(windowWidth<windowHeight){ resizeCanvas(windowWidth,windowHeight); } else { resizeCanvas( (windowHeight/1.3)*0.5625, windowHeight/1.38); } }

function setup { // keep a 16:9 portrait format if(windowWidth<windowHeight){ createCanvas(windowWidth,windowHeight); } else { createCanvas( (windowHeight/1.3)*0.5625, windowHeight/1.38); } }

Workflow and further tutorials
Making your sketches work on mobile devices