Mobile Workshop

###Workflow

1. Edit your code with the p5 editor. See combined mobile/touch example for testing on laptop and mobile.
2. To preview on mobile device (using Chrome):

• In p5 settings, choose "run in browser".
• Right click on window opened, and choose "inspect element".
• Click "Emulation" and choose the model. Make sure "Emulate screen resolution" is checked.
• You may need to hit command+r or the reload button to refresh the sketch for the new size.
• (Helpful) if you are editing the same file, rather than hitting the p5 play button over and over and opening new tabs, you can just go to the current tab showing the sketch and reload (command+r or refresh button). This way you won't need to go through the process of setting up the emulator again and again.

3. When you're ready to test on your device, upload to FTP and just open the link on your mobile device.

###Useful links

• Class examples: https://github.com/ITPNYU/ICM-2015/tree/master/10_mobile
• download all examples
• p5 mobile workflows by Jia
• Using the viewport meta tag to control layout on mobile browsers
• Hammer.js

Mobile inspiration

• JODI, ZYX - http://zyx-app.com/
• Rise alarm clock - http://rise.simplebots.co/
• Nice weather app - http://alexiscreuzot.com/apps/nice-weather-2/
• Amit Pitaru, Sonic Wire - https://vimeo.com/10514562
• Perceptor, Perloo - https://vimeo.com/85246513
• Erica Gorochow, Specimen - http://playspecimen.com/
• Janet Cardiff - walks - http://www.cardiffmiller.com/artworks/walks/, http://www.biennaleofsydney.com.au/19bos/events/forking-paths/

Make a mobile experience (90 minutes)

• an interactive artwork
• a game
• a multimedia experience
• a useful app (clock, weather, ?)
• a tour
• ??

###Show and tell (20 minutes)