6,211
edits
Changes
→p5js Code
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
background-image: url('stripe.png');
}
</style>
</pre>
<br>
== p5js Code ==
Add this to your p5js code into setup
<pre>
// go 16:9portrait
if (windowWidth < windowHeight) {
// if portrait=mobil then use the full display height
<pre>
function windowResized() {
// go 16:9portrait
if (windowWidth < windowHeight) {
// if portrait=mobil then use the full display height
