Skip navigation


Whispering Reeds was coded with Processing and exported to iPhone and iPod through Xcode using the iProcessing library.

Coding in Processing is like a competition with ourselves, and against Processing itself. Once you started you can’t stop. You hate it and you love it but in the end become great friends.

Here we summarize  the parts of our code that we think are the most interesting and useful for future projects. Please copy and use it for your needs.

We needed some modifications to make the application work on a smartphone using the iProcessing library. We will underline those changes.

1. Levels

The application contains 6 main screens. We made a variable called “level” and assigned each level a number of this variable:

int level=0;
int login_level=1;
int see_level=2;
int augmented_level=3;
int map_level=4;
int plant_level=5;
int born_reed=6;

Then we called each level into the “void draw” function:

if (level==login_level) {
//everything that happens in this level//

And assigned each button a level to call if pressed:

void mousePressed() {
if (map_button==true && mouseX<100 && mouseY>420) {
if (see_button==true && mouseX<220 && mouseY>420 && mouseX>100) {
if (plant_button==true && mouseX>220 && mouseY>420) {

Note that in order to export our application on a device with a touchscreen we needed
to change “mousePressed” in “touch1started”.

2. Animations

We tried to keep the animations as light and simple as possible. They are a sequence of png images, loaded one after the other. The files are named with a letter and a number, for instance:

When the animation needs to start, a function is called loading all the frames in a quick sequence:

if (born_reed_frame<=30) {
birthing_reed= loadImage ((“b”+ born_reed_frame)+”.png”);
image (birthing_reed, 85, 120);
if(frameCount%2==0) {

As you can see, the animation frames go from 1 to 30, so when “born_reed_frame” equals 30, the animation stops. To speed up or slow down the animation we used the “frameCount” variable. This is particulary important when exporting the application to the real device because the processors’ different clockrates change the animation a lot. It is better to load all the images at the beginning of the application, under “void setup”: this too makes the program faster on the device.

3. Buttons

Our application has only three buttons: “map”, “see” and “plant”. But the availability of the different buttons depends on the level we are in, so for instance we have both “map” and “plant” buttons in the navigation screen, but only the “see” button in map mode.

So instead of making a different image with different buttons for every screen, we made a single png image for each button and load it only if needed, assigning a boolean variable to the buttons and making it true or false when a new screen appears.

if (see_button==true) {
image (see_symbol,0,10);
if (level==map_level) {

4. Fading

The mood of our application is light and dreamlike, so we wanted to make the transitions between screens a little more smooth. To create a sort of fading we first made a variable called “fade” and then, at every change of screen, made the images appear gradually with the “tint” parameter:

if (level==login_level) {
tint(weather, fade);
image (login,0,0);

We assigned different switchable colors to the variable “weather”: this allows us to change the tint of the whole application with one single command.
Unfortunately this fading system doesn’t work on the device because modifying every pixel of the images takes too much time and power for the processor. So instead of changing the images’ tints, we drew lots of rectangles with decreasing opacity. This works better:

if (level==login_level) {
image (login,0,0);
if(fade > 0) {
fill(255, fade);
rect(0,0, 320, 480);

Of course before every new level we need to reset the “fade” variable:

if (level==0) {
if (mouseX>30 &&mouseX<130 && mouseY>420 && mouseY<470) {

You can download the whole code of Whispering Reeds .

Happy coding!

ConceptProcessDesignCodeTeamworkCritical ReflectionsCredits | Downloads