The programming of Robo prototype was made in Processing. Before starting, the team analyzed the application flowchart and identified three main parts to develop: the preparatory path for setting the user’s identity; the animated interaction; other functions like the possibility to recognize other users in the robo, to watch their profile and the place where the robos swap happens. Each member of the group worked up one of these sections, that were later combined in a single sketch.
The whole code was organized in two tabs: Graphics and Logic. Whereas a third tab, named ROBO was used just for recognize the project with a small description.
Graphics
The graphics tab loads and unloads all the images and graphic variables that are visible on the screen, following the functions’ instruction.
The screenshot below shows an example referred to the step in which the user can write the name: the function void loadName() load the image (composed by the question, the line and the arrows) that was previously declared at the beginning of the graphics tab; the function void drawName() draws this image and a conditional control to draw a winking cursor.
The Robo animations are controlled by more functions. For example the first, named void interactionFirst(), consists in a series of conditions depending on position variables (rob7X, rob27X), and size variables (imageSize). When conditions are true, the animation starts.
The number of the colored squares that represents the Robo was very high. For that reason it was useful to declare an array before writing every relative functions, and call one or more array’s image when it was necessary.
Logic
In this tab it was developed the whole architecture of the applications.
First of all it contains the declaration of all the application pages.
Then the function void setup(), that set for example the screen size and variables. While in the function void draw() conditional controls define which of the graphic functions has to call and in which page (if screen mode is ANIMATION_A then load drawAnimation).
Finally in logic tab were written informations about the necessary kind of input to interact with the application. In this case it was referred to the mouse click, so it was used the function void mousePressed(). Then two conditions define that if a certain page is visible and if mouse is clicked in a particular area of the screen, then another certain page will be shown.
If you are interested in code solutions, click on the link below to download the PDF.
If you want to run the prototype, get the Processing file clicking on the link below and download the ZIP.
| home | concept | design | process | code | critical reflection | | credits | downloads |