Phonegap + Processing.js

This summer we are creating a game (that we can’t really talk about till release).  The game is being built with Processing.js.  One of the key issues is to be able to target multiple platforms (web, handhelds etc.) and in particular iOS.  Initially we had thought about creating the game as simply a web page that you can play via the browser on whatever platform.  However, due to the fact that you will likely lose screen real estate for the menu/navigation this would not be a great idea.  We would also have issues when the device is turned as there isn’t a way to lock the browser in one mode (portrait or landscape).

After consulting with my colleague David Humphrey, we decided to give Phonegap a try.  For those of you not familiar with phonegap, it is an open source framework that runs webapplications (html, css, javascript) natively on different phone platforms.  This afternoon I gave it a go.  The application was pretty easy to use.  After you install it you can create a phonegap project and it provides the framework for you.  The project comes with an html file that I modified in the following manner

to the <head> portion

<script type=”text/javascript” src=”processing.js”></script>

and put

<canvas data-processing-sources=”mypde.pde” width=”1024″ height=”768″></canvas>

into the <body> section.

I then placed the .pde file into the same folder with the index.html file and added all the other images. After that, I just built it in xcode.

There was only one problem I had and that was the fact that the build was set by default to iphone build so I ended up with this tiny little frame showing only 1/4 of my sketch.  I had not done much development with iOS so it took me a while to find the place to change the setting.  But after looking around I found it in the project setting -> build tab -> Targeted Device Family

changed it from iphone to ipad and it worked beautifully.  I have yet to test on actual hardware so I’m not sure how bad the performance hit will be when the app is deployed.


4 responses to “Phonegap + Processing.js

  1. Remind me to show you how to pre-compile your processing.js into JS, and package with processing.js using closure to minify. That way you don’t have to include and parse the raw pde every time.

  2. Hi,

    Thank you so much for this post, exactly what I was looking for. I just have one question, what do you use to read user input. My sketch has a mousePressed() function but, the iphone simulator doesn’t seem to register that. Any idea why that might be or if it’s even possible?



    • I think we use just mouseRelease() in our code. Are you using the most recent release of Processing.js? If not I would get that first as I think a number of fixes were added over the summer. If you are using the most recent release but the touch interpretation of the mouse event you want doesn’t work, you may wish to file the bug back with processing.js ( I’m sure they would want to know if something doesn’t work.

    • Well one reason could be that phonegap is using an iOS webview object in order to project the html/js code that you write. It could be that the communication fails between Webview / pjs while trying to transfer the signal of touched and activating the mousePressed function. One workaround could be to load jquery mobile because it has an own function optimized for touches. You could then reroute the mobile function to processing and activate the mousePressed function.

      Just a thought, could work though.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s