Difference between revisions of "P5JS look like an mobil app"
From Digipool-Wiki
Line 3: | Line 3: | ||
== Phone Frame == | == Phone Frame == | ||
+ | [[File:Phone.png|300px|right]] | ||
− | [[ | + | Place this PNG file in your folder - [[Media:Phone.png|LINK]] |
<br> | <br> | ||
Line 64: | Line 65: | ||
function setup() { | function setup() { | ||
− | |||
− | |||
// keep a 16:9 portrait format | // keep a 16:9 portrait format | ||
if(windowWidth<windowHeight){ | if(windowWidth<windowHeight){ |
Revision as of 23:41, 28 November 2017
Phone Frame
Place this PNG file in your folder - LINK
HTML File
Use this code for Index.html
<html> <head> <meta charset="UTF-8"> <script language="javascript" type="text/javascript" src="libraries/p5.js"></script> <!-- uncomment lines below to include extra p5 libraries --> <!--<script language="javascript" src="libraries/p5.dom.js"></script>--> <!--<script language="javascript" src="libraries/p5.sound.js"></script>--> <script language="javascript" type="text/javascript" src="sketch.js"></script> <!-- this line removes any default padding and style. you might only need one of these values set. --> <style> 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%; } </style> <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"> </head> <body> </body> </html>
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); } }