Skip navigation


Prototyping our application meant create a balance between the satisfying results achieved programming with Processing and what we really get on the iPhone when we translated the Processing code into the iProcessing one.

At the beginning, the response on the iPhone was so much slower than the one we had on the simulator on the computer; that’s why we had to test several sketches in order to find the best solution that would give us the expected prototyping results.

We concentrated our efforts prototyping two part of the whole application: the navigation section and the read one, the main interaction of Pint of Words.

Navigation section
When we started coding, our idea was to use the accelerometer for the navigation within the menu: helped us the code to get the acceleration of the iPhone prepared for the IxD Studio by Alberto Moro. We set up our first sketch trying to integrate the code for the Accelerometer with the Oriented Objects code created by Gymnasium team with Nicholas Zambetti.

What basically the code does in this early sketch is to define, in the draw function, the x and y position get by mapping the x and y value with the accelerometer of the iPhone.


The aim of the navigation part of the code was to lets the user ‘navigate’ into the different menu in an easy and satisfying way but after testing the first strings of code, we realized that the fluidity of the navigation wasn’t the one prefigured. So we decided to left (just for the prototype) the idea of using the accelerometer and we started working on a navigation that uses a drag function.

After defining all the variables, we declared in the draw function all the possible screen menu that the function has to execute depending on the screenMode variables.


To switch from a menu to another on the homepage of the application, we used a mousePressed function ables to recognize the area selected by the mouse thanks to the get function: the get function “reads the color of any pixel of an image and get its value by specifying an x,y coordinate“.

The problem we had with the ‘buttons’ of all our menu was that they haven’t regular shapes: we used pint of beer, books, coins, etc, as metaphors for buttons; the difficulty consists in defining the active area. Using a layer (a jpg file hidden behind the background image) with highlighted the button shapes, filled with strong colors, Processing could recognize when the mouse was over a x color so it can translate an input into an output: if color = x (a certain value), show a y menu.


Both the drag and the accelerometer solution for the navigation are a meaning for a movement that means that all the objects in the screen have to move simultaneously maintaining their mutual positions. In order to achieve that purpose we defined some Class. “Class is a composite of data and methods (functions) which may be instantiated as objects”.


The menu tab manages all the functions called by the logic tab every time it has to execute a specific screenMode.

The function drawHomepage for example, runs once the screenMode is equal to viewHomepage. It basically checks for the position of the image used as background, it moves the image to the center if it hasn’t that position and then shows all the elements on the background, having a x and y position strictly defined by the mouse pressed position (they change according to the mouse pressed changing). The draw function also uses a for function that draws the icons for the menu selected, referring to the parameters declared in the Class section.


We need to mention also the movetocenter function that allowed us to relocate the homepage menu to the central position of the screen once it is selected from another menu in which the position assumed by the background isn’t the central one.


Read section
The foam is made by letters. To draw it we used a two-dimensional array where the first value represents the lines and the second each element of the line. For each element we loaded a character expressed as a numeric value.


The text that appears is loaded from an external file .txt. In the txt file the poem is put in a sort of grid: when the application takes the information from this file, first divides the text in single lines then it divides each line in every single letter. This allows to have single element that can be moved and placed separately.


Here we manage the movement of elements separately, the application draws each letter in a random place of the screen and, once it receives an input, it moves letters in their correct positions to create the real text. On smartphones the input is given by accelerometer, here is simulated with a simple mouse click.

text coming in

Downlodable application
To go deeply into the code, download the Pint of Words source code (PDF) or one of the ZIP file you are interested in and let it run on Processing. If you don’t have Processing you can download it from the website.

pdfPintOfWords_Navigation (49 Kb)
pdfPintOfWords_Beer (37 Kb)

zipPintOfWords_Navigation application.macosx (5,7 Mb)
zipPintOfWords_Navigation (5,7 Mb)
zipPintOfWords_Navigation application.linux (5,7 Mb)

zipPintOfWords_Beer application.macosx (602 Kb)
zipPintOfWords_Beer (573 Kb)
zipPintOfWords_Beer application.linux (569 Kb)

Processing sketches
processingPintOfWords_Navigation (13,6 Mb)
processingPintOfWords_Beer (270 Kb)

iProcessing sketches
iprocessing PintOfWords_Navigation iProcessing (5,4 Mb)
iprocessing PintOfWords_Beer iProcessing (119 Kb)

homeconceptdesignprototypeprocessadvertisinguser tests | code | credits |
teamwork critical reflectiondownloads |