How to make Android apps using Processing (Tutorial)

  • androidman
  • Tagged , , ,
  • May 5, 2017
  • Wanna make an Android app using Processing? Let’s do it! So you may be wondering, what is Processing, and why are we using it to make Android apps? Processing is an open source programming language, and it’s very simplified and easy to pick up. Many artists use it like a programming sketchbook, and there are tons of cool libraries for it. You can also output your sketches to a lot of platforms – all the desktop OS’es, the web, and of course, Android.

    bildschirmfoto-1

    Even if you know how to code in Android, Processing can be a helpful rapid prototyping tool for multiple platforms. So to get started, we’re gonna download the Android SDK tools and then Processing. On your phone, you’ll need to turn on Developer options and USB debugging. To do that, go into ‘Settings’>’About phone’, then tap ‘Build number’ a bunch of times until you can see Developer Options. And then back from settings again, go into developer options and turn on USB debugging. Now, there is an issue with Processing for Android at the moment, but there’s a simple fix for it.

    Basically you need to replace the JDK files in Processing with JDK files on your computer. I’m using jdk1.7.0_45. You may need to download older versions of JDK if you run into problems. I’m gonna show you how to fix it on OS X. The steps should be similar on Windows as well. So on Mac, find the Processing Application, then right click on to ‘Show Package Contents’, and from there it’s Contents >PlugIns > the JDK folder > then Contents again.

    On PC, these folders should be in Program Files, under Processing. And then to find the JDK files on your computer, you go into Library >Java>JavaVirutalMachines >JDK folder >Contents. And between the two folders you just opened, you can see that the files are similar. You’ll just want to copy over the ones on your computer into your Processing Application folder. And that’s the fix. And for the Android SDK, you’ll want to unzip the file you just downloaded. Go into it, you’ll see Tools. Go into that folder, then there’s ‘android’. Launch that. It will open something on the terminal.

    It will take one second to open the SDK Manager. Once you have that opened, download the necessary tools and Android 2.API 10. Processing uses Android 2.3.3, which means that any Android device running 2.and above will be able to run your Processing Sketch. So now that you have everything set up, we’re just going to draw some circles on the screen to get started. The structure of Processing programming should be pretty easy to grasp. it starts with void setup() { }, then void draw() { }. ‘Setup’ runs once at the beginning, so that’s where you initialize things. ‘Draw’ runs every frame, 30 times per second in this case, so that’s where you call things that need to be drawn every frame.

    image-processing-projects-i4

    To draw these circles, under setup, type in size(600, 400); In draw, type in ellipse(random(0, width), random(0, height), 100, 100); And then click RUN on the upper left corner. If you’re seeing what I’m seeing, that means it’s working. ‘Size’ defines the size of your window, and the ellipse function, there are basically four things. The x-position, the y-position, the width of the ellipse, and the height of the ellipse. So what we’re telling it to do right now is to randomize the x-position from 0 to the width of the screen, randomize y-position from 0 to the height of the screen, and then 100 for width and height of the circle.

    And now, we’re gonna put this on Android. To do that, we’ll want to change one thing. To make the app run fullscreen on your phone, change the numbers in ‘size’ to displayWidth, and displayHeight. To get started on this part, you also need to plug your phone in with USB debugging enabled. Then, go to the upper right corner, select Android, and then click run. Then you’ll have to wait a moment, but eventually the sketch will be running on your phone. And there you go, your first Android app. So from there, you can go into Processing references and see what types of strokes and shapes you can draw and other methods you can use for drawing whatever you want to draw.
    For demonstration purposes, I made two versions of Pong – 2D and 3D. I’ll put the links to the code in the description area, and the code will be commented so you can a better idea what’s going on while you are going through it. The 2D version of Pong is pretty straightforward. You have a ball that reacts to different things and you can control the player with your finger. There’s a really simple AI for the enemy. And then I wrote a 3D version of Pong that uses the Android Ketai library for Processing, to get the accelerometer data for camera control.

    Leave a Reply

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