Skip navigation

… Code

We chose to design this application so that it wouldn’t be made up by many different screens, but by a single very large background which contained all the areas of interaction with the user (ie. all the screens).

This decision was made to create a simple animation, that adds a touch of mystery and tension to the interaction: it consists in the movement caused by the background which shifts from one screen to the next, like a videogame.

The user moves within these areas thanks to a cursor shaped like a viewfinder, and when he finds a ‘clickable area’, the viewfinder changes color as if it had just identified a target.

Our app was programmed in Mobile Processing and then translated into Processing, so that the simulation would work even on a computer.

First of all, we created a double array in which we memorized the X,Y values, and then assigned to each portion of the background which corresponded to a screen, a numerical value, to allow shifting from one screen to the following one.

Afterwards, to allow reverse navigation (ie. back), we created an array and an index, to memorize the user’s path.

This portion of the code traces the types of movement we’ve used to move from one area of our background to the other (from one screen to the next).

Navigation Commands

The portion of the code called ‘draw mirino’ enables the viewfinder.We declared certain ‘clickable’ areas, in which the program visualizes the viewfinder in yellow, and other non-clickable areas in which it’s blue.

The viewfinder is controlled by the joystick of the mobile device; to control its movement we created four boolean variables.

The main difference between the code in Mobile Processing and the one in Processing regards the navigation commands: keyPressed (how actions are defined as a consequence triggered by the use of physical keys on the mobile device) in Mobile Processing, is mousePressed in Processing; and the portion of the code regarding the joystick is deleted.

Processing folder: here.

Processing code in pdf: here.

Mobile Processing Jar
(To download the prototype you’ll need a mobile device with a 320 x 240 resolution, java compatible): here.

Mobile Processing code in pdf: here.

| homepage | concept | design | process | code | teamwork | critical reflection | | credits | downloads | 80×80 pixel icon |