Workflows

p5 Setup Workflow

1. Add sketch.js and in index.html
2. In sketch.js setup() add: var canvas = createCanvas(width, height); canvas.parent('p5Container');
3. Add p5.min.js or p5.js in folder and link in index.html
4. In index.html head add: <style> padding: 0; margin: 0; </style>
5. In index.html body add:

Google Drive Hosting Workflow

Steps from Processing Mobile, with some additional steps and minor changes to host a whole folder instead of a single file:

1. In index.html: comment out the meta tag with "Content-Security-Policy"
2. For any hrefs remove the protocol. Ex: src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.js" *Note that it's not specified with http://
3. Go to Google Drive.
4. Click on the New button on the left.
5. Click on Folder Upload from the dropdown menu and choose the file you saved in Step 4 of Making the HTML file.
6. Wait for the upload to complete, then click on the Share link at the bottom right of the screen.
7. Click Advanced in the bottom right corner of the sharing box.
8. Click Change....
9. Choose On - Public on the web and click Save.
10. Before closing the sharing box, copy the document ID from the URL in the field below "Link to share". To do this, copy the entire link and paste it into the address bar, then copy the string of uppercase and lowercase letters and numbers between slashes in the URL. For example: "https://drive.google.com/folderview?id=0B-b-G54p4msufmNqcEZ1YTlfVjZvd0phdFgyeEFpaUZWU2pNWnNSSlRMamdnV2dVN2ZYeUU&usp=sharing". You can now access your sketch at www.googledrive.com/host/[doc id] where [doc id] is the document ID you copied in Step 10.
11. Shortening the URL (Optional) Go to bitly.com Paste the URL from Step 10 of Hosting the HTML file. Copy and share the shortened URL with your friends!

Mobile Browser Server Workflow

1. Set up server with connect
2. Run server on desktop
3. Find desktop IP address
4. Connect phone to same WiFi network
5. In the phone browser go to desktop IP address:8080

p5 IDE and Localtunnel

Let's draw a simple p5 sketch onto your mobile browser with the p5 IDE and LocalTunnel

1. Create a new project in the p5 IDE and save if as p5Sketch
2. In the index.html file, add this: <meta name="viewport" content="width=device-width, initial-scale=1" />
3. In the sketch.js file, add this:
4. Hit run. Note the port number it's running on.
5. Open terminal and direct to the p5Sketch directory, and run lt --port <port number>
6. Open the generated url in your mobile browser

Local webserver and Localtunnel

Localtunnel allows you to manually setup a sharing tunnel to a local webserver, so that you can share and test your code on any device.

1. Setup a local webserver. Here are some simple tutorials.

2. Download and setup Localtunnel. Tutorial is on the Localtunnel site.

Cordova Workflow

1. Create new Cordova project ...