Processing & Android: Mobile App Development Made (Very) Easy

Those of you who have read this blog before will know that I do most of my work using Processing, an open-source programming language that was specifically created for artists and designers. It’s easy enough that you can learn the basics a day or two, but powerful enough to use for any number of applications, ranging from interactive installations to architecture to generative visual systems, and beyond. I’ve used it to visualize huge sets of data, to design a 1000 square-metre playground, and to create hundreds of small digital ‘sketches’. Over the last few months, Processing has gained yet another appealing attribute – you can now use it to quickly and easily create apps for mobile devices that use the Android operating system.

Creating apps for Android with processing is ridiculously easy. How easy? Let’s get a from-scratch Android app working on a device in 25 minutes (15 of those minutes will be spent installing software).

** You don’t need to have an Android device to do this tutorial, since we can see the app that we’ll build in a software emulator. But it’s much cooler if it’s on a device.

** Before you start on this tutorial, I’d recommend that you make sure you have a recent version of Java installed. Mac users can run Software Update – Windows folks should go here and download the latest Java version.

Step One: Install the Android SDK

I promise. This isn’t going to be one of those tutorials that is full of three-letter acronyms that you don’t understand. But before we get started building our app in Processing, we need to download some software that will allow us to author Android applications (Processing manages all of the tricky bits of this, and will eventually download and install the SDK for you as well – for now we have to do a tiny bit of manual labour). This bundle of software is called a ‘Software Development Kit’ and is fairly easy to get and install.

First, go to the URL below, and download the appropriate SDK for your operating system:

http://developer.android.com/sdk

This download should un-zip to a folder called something like ‘android-sdk-mac_x86′. Move that folder to a safe location on your machine , and then open the ‘tools’ directory inside of it. Double-click on the file named ‘android’ – on a Mac this will fire up Terminal and in turn will open the Android SDK and AVD manager, which looks something like this:

We’re going to use the manager to install the Android packages that we need to build our apps. Click on the left menu option ‘Available Packages’ and check the box that appears in the centre window. The manager will check with the Android repository and then list all of the packages and tools that are available for download:

We can install all of the packages – that way we know we’ll get everything we need. Click ‘Install Selected’. In the next window, click ‘Accept All’, and then ‘Install’. That’s it! We now have the Android SDK files that we need to work with Processing Android. Now we need to download the latest and greatest version of Processing.

Step Two: Get an Android-enabled Version of Processing

Existing Processing users (unless they’re a Processing fan(boy/girl)), will probably still have the same version of Processing that they installed when they first learned how to use the software. This will be a good chance, then, for all of you laggers-behind to get with the program. For those of you who don’t have Processing yet, here’s your chance to get in on the fun.

Now normally, as a sane person, I’d ask you to download the rock-solid, tested, official release from the main Processing.org downloads page. But we want to play with some new features here, so we’ll download the freshest, most exciting, and hopefully functional version of Processing from this secret-squirrel Processing Android Wiki Page:

http://wiki.processing.org/w/Android

Download and install whatever the latest version is for your operating system (at the time of writing, the version number was 0190). Once it’s installed, open up Processing, and let’s get Android-ing!

Step Three: Make an Android App

Before we do anything even somewhat complicated, let’s take the time to learn how Processing Android works. Let’s start with a really simple sketch, which draws a white square in the middle of an orange field:

void setup() {
   size(480,800);

   smooth();
   noStroke();
   fill(255);
   rectMode(CENTER);     //This sets all rectangles to draw from the center point
};

void draw() {
   background(#FF9900);
   rect(width/2, height/2, 150, 150);
};

If we press the run button (or hit Apple-R), Processing compiles our sketch to run as a temporary Java applet, which we see running in a separate window (go ahead and try this). This is the basic Processing behaviour. I have a few other options for compiling my little sketch. I could select ‘Sketch > Present’ from the menubar to present the sketch in fullscreen, I could select ‘File > Export’ to compile my sketch as a Java applet to display in the browser, or I could select ‘File > Export Application’ to produce a stand-alone file to launch like a ‘real’ application. These three basic options for compiling (run, present, export) have slightly different functions in Android Mode.

Wait. What? Android Mode? Here we discover the genius of our new, super Processing – we can build sketches the same way that we are normally used to, then switch into Android Mode to preview and publish our droidified sketches. Let’s do that with our simple rectangle sketch.

From the shiny new ‘Android’ menubar heading, select Android mode. Let’s first see what the sketch looks like in the emulator, by pressing the run button:

* The first time you try this you might get an error message telling you that the Android SDK hasn’t been installed. Press ‘yes’ and locate the Android SDK folder that you downloaded in Step One. Then run the sketch again.

** Be patient! The emulator can take a while to get started. You might have to run the sketch again one the desktop appears in the emulator.

Exciting, right? Right?

OK. Maybe not. It’s just a white square. But… let’s make it a white square on an Android Device!!

Step Four: Running the App on a Device

Very Important: To get the app running on your device, you’ll first have to make sure that USB debugging is turned on. You can do this from the Settings>Applications>development menu on your device. If you’re on Windows, you might have to do some other setup, too.

Connect your Android device, and then select ‘Sketch>Present’ from the menubar (or, press Shit-Apple-R).

Yahoo!

Now that we know that everything is working, let’s add a little bit of interactivity. We’ll make the box rotate as we slide our finger left to right, and make the background color change as we move our finger up and down. We’ll also add a little ball-and-stick indicator to show where the ‘mouse’ is:

/*

World's simplest Android App!
blprnt@blprnt.com
Sept 25, 2010

*/

//Build a container to hold the current rotation of the box
float boxRotation = 0;

void setup() {
  //Set the size of the screen (this is not really necessary in Android mode, but we'll do it anyway)
  size(480,800);
  //Turn on smoothing to make everything pretty.
  smooth();
  //Set the fill and stroke colour for the box and circle
  fill(255);
  stroke(255);
  //Tell the rectangles to draw from the center point (the default is the TL corner)
  rectMode(CENTER);

};

void draw() {
  //Set the background colour, which gets more red as we move our finger down the screen.
  background(mouseY * (255.0/800), 100, 0);
  //Chane our box rotation depending on how our finger has moved right-to-left
  boxRotation += (float) (pmouseX - mouseX)/100;

  //Draw the ball-and-stick
  line(width/2, height/2, mouseX, mouseY);
  ellipse(mouseX, mouseY, 40, 40);

  //Draw the box
  pushMatrix();
    translate(width/2, height/2);
    rotate(boxRotation);
    rect(0,0, 150, 150);
  popMatrix();
};

Again, we can use Present (Shift-Apple-R) to run the sketch on our device:

At this point, the world is our proverbial oyster. Those of you who have already worked with Processing are probably already loading your archived sketches onto your phone. If you don’t know much about Processing, you can learn a lot from the Processing website, from the excellent books that are available, and from doing some exploring on your own.

I am very (very) excited about Processing for Android. It enables students, artists, activists – everyone – to make and distribute their own mobile-based software. While we’ve kept things pretty simple in this tutorial, later in the week, I’ll be showing you some nifty Android-specific Processing features, and exploring how to integrate sketches with the device hardware (camera, accelerometer, etc.). We’ll also look at how to package up Processing sketches for distribution.

Stay tuned!

Some helpful tips when you’re working with Processing & Android:

- I know I’ve said this before, but be patient. Canceling a process (ie. the emulator load or a device compile) can cause problems. If you do this inadvertently, you’re best off restarting Processing.

- RTFW – make sure to check out the Processing Android Wiki, where you’ll find some troubleshooting advice, and some tips on how to get your sketches working properly on your device.

48 thoughts on “Processing & Android: Mobile App Development Made (Very) Easy”

  1. Works great on HTC Desire 2.2 and OpenSUSE Linux 11.3
    Two notes:
    1. In addition to enabling USB debugging, one has to go through step 3 in http://developer.android.com/guide/developing/dev… and reconnect the device.
    2. When the program is run on the device and you close it with the "back" button, everything is ok. But, when you close it with the "home" button and start again, it shows black screen. In other words, it doesn't handle resuming from background.

    Many thanks for the great article, waiting for the next one :)

    1. Thanks, Hristo!I've updated the tutorial to address your first note. Ad for the second, this issue is only for the 'preview' mode that we're working with so far. Next tutorial will get us to publishing 'real' apps.

  2. Thanks for this, I can't wait for the next instalments. I've been playing with Processing for android, but had to give up because of a bug that meant compiler errors were not reported with line numbers, so it was really difficult to debug problems with the code. I never was able to bring the compass into my sketch either. I put it down and have been waiting for a slightly more robust build, it looks like that day may finally have arrived! Hurrah!

    Is it possible in the current state of android processing to go all the way to the android market with a home made sketch?

  3. I can't get the emulator to load. I wouldn't bother you here, but I've searched the wiki and no one else seems to have this issue. I've posted on the forums, but no one's responded. Any help would be tremendously appreciated.

  4. This tutorial is really well done and for this I thank you very much!

    Everything went smoothly until I tried to compile in Android mode were I got a mistake and emulator showed only android on a black screen.Any help would be appreciated and since I don’t wanna bother you any further, if you have time to help me please email me at jordan2_delta at hotmail dot com.

    Thanks again for this great and clear tuto.

    BadWolf

    1. Hi,

      When the emulator first boots up you will see a black screen with ANDROID in white letters. If you wait, the emulator will eventually get to the 'unlock' screen. Slide the unlock tab and you should see your sketch running.

      The emulator is REALLY slow and takes a LONG time to start up. Be patient.

      -J

  5. Hi –

    I got this working on one computer but I'm having trouble repeating it on a second.

    I'm having trouble getting the Android SDK to install. After I select all the available packages I click install and the program closes quickly, and in the terminal windows I get a java.lang.NullPointerException error followed by a whole lot of erros. This is on a bran new MacBook Pro running osx 10.6.4.

    Any thoughts?

    Thanks very much!

  6. So awesome! Thank you. This was my first Processing moment, and my first time making anything for my Droid. EPIC!

  7. Thank you very much. great post it was. I hope it will b enjoy-full article for all android developers. This tutorial is really well done and for this once again I thank you very much!

  8. Thank you for this article..I was inspired and thought why not an App using processing.js as backend and also wanted to manage the scripts with an inbuilt editor. So I quickly put together an app called MyProcessing that does this exactly. You can download the version 1.0 from Android Market.
    Here's the link to the project: http://code.google.com/p/my-processing/

    Whit this app, you do not need to keep installing the android app for every script you want to run. Its a single app to manage all your processing scripts. Feel free to provide your comments. Would love to hear feedback.

  9. Great tutorial! Now, how do we package the files (or turn it into an app) so that we don't have to have our phone plugged into our computer to access it?

    1. If you export to Android Project it stays on your phone after you have unplugged it – you cant share with anyone but itll be on your phone to ue away from plugged in.

  10. It's not working for me at all. Neither in the emulator nor on the actual device. And I have to delete the virtual device every time I'm running my code. I can't leave the emulator opened and restart the code. It gives me an error.

  11. How do you put shortcut Icon for each processing to the device so that I can run this without connecting on computer. This way I can run it on anywhere… let me know thank you.

  12. Hi there…i got problem..need your help..pls..when i click 'run in emulator'.the error come out "error from inside thandroid tools, check the console".. i dont know what to do..please help me..

  13. Very cool. Thanks!

    If you want to do the same thing on iPhones or iPads check out an app called Pr0c0d1n6. Nice IDE for Processing.js that lets you code and run directly on your device.

    You can also take your Processing PDE files and easily turn them into widgets which you can then drag into iBooks Author to produce interactive iBooks. This is a great way of embedding Processing analytics in a multimedia context.

  14. Do you know if an android application designed with processing can be run in the background of a device once the user exits the program or the device goes to sleep mode?

  15. I am using processing 2.0 to create android apps but I don't have an android device.I have installed sdk successfully and also the emulator provided as the last option of the sdk but still when I run it I see the processing waiting for a device.Please someone help soon!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>