Moving ProcessingJS Sketchs to Windows Phone

Download this episode

Download Video

Description

One of the most fun things about ProcessingJS for Windows is that it isn't just for Windows. Because Windows and Windows Phone run the same browser (Internet Explorer 10), Processing sketches that we write in the ProcessingJS for Windows app also work in Windows Phone.

In this tutorial, we're going to walk though how we can take the sketch we wrote in ProcessingJS for Windows and look at it on our Windows Phone 8 device.

Our first step is to format the sketch to be the appropriate size for our phone. For most WP8 devices this will mean making our sketch 480x800 to fill the screen of our phone.

void setup(){
   width = 480;
   height = 800;
}

If you're following along in the ProcessingJS for Windows app, you can just select the "create a new phone sketch" item and your new sketch will be created with the right settings.

Generic Episode Image 

From here we can build and test our sketch until we're satisfied that it is working appropriately. Once we have our sketch working, we can then export it. We do this by accessing the app bar (swipe up from the bottom of the screen or right click) and we can see the export option.

Generic Episode Image

Our sketch will export as a *.pde file, which is the default file-type for a Processing sketch. What I usually do at this point is send it to myself in an email and then open that email on my Windows Phone. Make sure you have the ProcessingJS Reader for Windows Phone installed and then open your Processing attachment. It will auto-load in your Windows Phone ProcessingJS reader and you can test it on your phone.

Generic Episode Image

In addition to just looking at the sketch, you can extract the code from any of the sketches by tapping "share". This will give you the option to share the sketch code in text format. You can also share the entire sketch by tapping "NFC share" (for NFC enabled phones) and tapping your phone to another phone that has the ProcessingJS reader installed.

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      Omar El Hageen

      Hi Matthias, thanks for this very useful tutorial, I've been using processing for almost a year now on Nokia/Symbian phones, great product. Being unlucky I've bought the Nokia 900 with windows phone 7.5 then upgraded to 7.8, good phone but OS is totally ignored by Microsoft, again I am disappointed that the ProcessingJS Reader is only for Windows phone 8. Appreciate if you could help or suggest a solution for winphone 7.8.
      Thanks a lot and best regards,
      Omar El Hageen

    • User profile image
      Omar Bautista

      It'd be great some version for winphone 7.8.

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.