Difference between revisions of "P5JS look like an mobil app"
From Digipool-Wiki
(Created page with " Use this code for '''Index.html''' <pre> <html> <head> <meta charset="UTF-8"> <script language="javascript" type="text/javascript" src="libraries/p5.js"></script> <!-...") |
|||
Line 1: | Line 1: | ||
+ | |||
+ | |||
+ | == Phone Frame == | ||
+ | |||
+ | |||
+ | [[File:Phone.png|left|300px]] | ||
+ | |||
+ | <br> | ||
+ | |||
+ | == HTML File == | ||
Use this code for '''Index.html''' | Use this code for '''Index.html''' | ||
Line 37: | Line 47: | ||
</pre> | </pre> | ||
+ | |||
+ | <br> | ||
+ | |||
+ | == Sketch == | ||
+ | |||
+ | <pre> | ||
+ | |||
+ | 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() { | ||
+ | frameRate(5); | ||
+ | |||
+ | // keep a 16:9 portrait format | ||
+ | if(windowWidth<windowHeight){ | ||
+ | createCanvas(windowWidth,windowHeight); | ||
+ | } else { | ||
+ | createCanvas( (windowHeight/1.3)*0.5625, windowHeight/1.38); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </pre> | ||
+ | |||
+ | <br> |
Revision as of 23:39, 28 November 2017
Phone Frame
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() { frameRate(5); // keep a 16:9 portrait format if(windowWidth<windowHeight){ createCanvas(windowWidth,windowHeight); } else { createCanvas( (windowHeight/1.3)*0.5625, windowHeight/1.38); } }