As a mobile device application, Kyo, uses a text programming language to generate images, motion and interaction: Mobile Processing.
Dividing the code into different tabs was the first step through which Kyo was developed. Each of the four tabs, created for Kyo code, works on a specific task: animation, graphics, logic and key-pressed. The Animation tab manages the code that performs animation calculations. The Graphics tab provides visual feedback to the user while the Logic and KeyPressed tabs work on the code that captures and interprets user input.
Animation tab, based on the Mobile Processing code developed for us by Nicholas Zambetti, uses an easeOut animation function to perform the movement required.
Logic tab is the section about user’s input: it captures and interprets input, “calling” the graphic tab to “translate” them into visual form and motion. In order to have an easier and much clearer area of work, part of the code, that might belong to the logic tab, has been moved to another tab called KeyPressed. KeyPressed tab contains all the functions on the user’s input: “What happens if Nicholas presses that softkey on his mobile phone?”. KeyPressed manages that answer.
The main purpose of the Graphics tab is to load and unload all the images depending on what the logic tab functions are suggesting to.
The following code, for example, shows how the functions on the graphic tab let the user visualize the main menu screen:
Once the function has loaded all the images of the main menu screen [void loadMenu()], it draws them using the statement “if something happens then draw this”. The drawMenu function uses variables [int menu_selection_x, for example] declared on the top of the graphics tab, that, thanks to a mask, built as a window on the image, and the easeOut function lets the screen flip easily to another screen.
The amazing aspect of Kyo interface is, certainly, the origami animation. How to unfold an origami on a 2-dimensional little screen? Simply, we thought that “animation occurs when a series of images, each slightly different, are presented in quick succession” (C. Reas, B. Fry, Processing p.315). Declaring the images variables [PImage [ ] origami = new PImage [100]], the number of animation frames [int numFrames = 31] and the frame to display [int frame = 0] the program is able to load all the images that, on the next step (the draw one), will be presented sequentially in order to generate the animation.
If the frame value is less than the total frames one [frame<numFrames], the DrawOrigami function will start the animation. The animation is due to the “+1” value that the function adds, every time, to the frame that is drawing. Kyo needs, also, to slow down during the animation because it has to suggest the word (belong to a specific category) according with the unfolding of the origami. That’s why the code says “if frame value reaches the value of 7, for example, stop to add +1 to the frame value for a while [wait = 5] and draw the word [text(words_HOW[word_HOW], width/2, 250].
To let Kyo surprise the user, suggesting, every time, a different and unique experience, we use a statement that draw the word choosing, randomly, among a set of variable values [word_DO = random(words_DOTotal-1)].
The main problem with the Kyo code has been its “weight”: it has a lot of images used for the animations and that means a lot of memory necessary to manage all these elements. We suppose that, in a future hypothetical Venice, mobile phones will have more memory than they have today (!).
However, to let the application run on a phone with limited memory, we used an unloading function (the one shown below) that frees memory and collects unused elements. How? Calling the garbage collector, of course! But, remember: sometimes he might be on strike!
To play Kyo on your mobile device, download the jar file and install it. You need 320*240 px resolution and java compatible mobile phone.
To play on your computer, download the zip file, unzip it and let it run on MobileProcessing.
kyo application ( PDF | 193 KB) (JAR | 2 MB) (ZIP | 8,2 MB)
| concept | design | process | code | teamwork | critical reflection | downloads |