Difference between revisions of "P5js-desktop-and-mobile"
From Digipool-Wiki
Line 1: | Line 1: | ||
+ | |||
+ | == Background Pattern == | ||
Download the [[Media:Stripe.png|Stripe.png]] or design your own background tile. | 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 13: | Line 19: | ||
</pre> | </pre> | ||
+ | <br> | ||
+ | |||
+ | == p5js Code == | ||
Add this to your p5js code into setup | Add this to your p5js code into setup |
Revision as of 19:50, 19 April 2020
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); } }