Bouncing Ball
(A simple example for developing
a phone app with Processing)
Andreas Freise
2012
Android
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.
