Bouncing Ball

(A simple example for developing a phone app with Processing)

Andreas Freise



BouncingBall is an Android app. A little ball bounces around the screen of your phone. You can flick the ball with your finger or by shaking your phone.

The purpose of this app is to provide a very simple example for developing a mobile app with Processing. Processing version 1 provided the easy generation of desktop applications for Linux, Mac and Windows. Version 2 of Processing offered, in addition, export functions for Android devices as well as for Javascript apps (via Processing.js). This makes Processing an ideal tool for writing simple apps that can run stand-alone, on mobile devices or in a browser window. Update: since the release of Processing 3, this app is not maintained any longer; it might work or not with the latest Processing.

If you have Javascript enabled you see a Javascript version of the app running below. This version of the program has been exported using Processing's Javascript mode. Grab and throw the little ball with the mouse and watch it's bounce around (that's all what this demo app does). The source code of the online version is available here: BouncingBall.pde.

When developing an app for multiple devices with Processing, the main code of an app can remain mostly unchanged, but of course the interface related aspects (input and output) have to be adapted and each device has its own bugs and features. For example, the touch interface of a phone offers different possibilities than the mouse and keyboard input of a PC. This example app demonstrates how to make and export code to Android as well as Javascript.

Regarding the export to Android, you can find a simple description on how to use Processing with Android on the Processing Wiki, and a good step-by-step guide for exporting your app is provided by AK Eric. I added some of my own learning experience in the code (see below) and in a post in the processing forum.

This program has been developed with Processing 2.05a and has been tested on a Google Nexus 1 and the Sony Tablet S.

Javascript on iPad

The Javascript code running above can also be optimised for a fullscreen display on an iPhone or iPad. To try this, click on the image below, make a bookmark and add the bookmark to your home screen. When started the next time it should run in fullscreen mode and be cashed for offline use.

To achieve this I simply followed this useful Howto for making iPad/iPhone apps with Javascript by Matthew Might. The main Javascript code is the same with a few tweaks in the setup function to handle the orientation change. In addition a Manifest file is required for offline caching and an index.php file with specific meta-tags for Apple.