Our application was written with Processing. Our prototype is a simulation of how the application would look like in the mobile device. The main interactions have been laid out. Our initial idea was to program some of the prototype to work with some features of the IPhone such as the accelerometer, the compass and the vibration. We tried for some days to get the first part of the prototype on the phone in order to use these features but we were not successful. In fact in the code you can see that we included the vibration snippet for the phone but unfortunately we couldn’t implement it.
Main Program
Transparency
By clicking the buttons you may enter different pages and the pictures and animations appear, but in fact, the screens didn’t change, also the pictures are already there, it’s the tint() function which makes them invisible. The tint function can change the transparency and the color of a picture.
In the image above transparentInstruments is the alpha value, so the picture Instruments will be totally transparent.
In the image above the value 255 is used to control the color. (like the fill() function).
Thanks to function frameCount() function we can also control when the picture appears.
The picture shows automatically when the frame gets 260. The differences are obvious:
The Animation
Processing is not able to display the gif animation, so we have to load every frame of it.
Above we have an animation of a carrot with 12 frames. It will start at the first frame.
The function frameCarrot<=10 is set that way so the animation will stop at the last frame.
The Rotation
We used the pushMatrix() and the popMatrix() to rotate the images.
Buttons
It’s really simple, give out the position of the button, by using mouseX>=int&&mouseX<=int&&mousey>=int&&mouseY<=int
When you press the mouse arrowY increases so the arrow will drop to the bottom of the screen.
Map
We have created two simulations for the augmented reality. The following is simple and used for giving a representation of how the augmented reality would be accessed in the application. In this example the image moves according to the position of the mouse.
It looks like this:
Move your mouse to the left the image goes right. And mouse at right the image goes left.
Layers
Does Processing have a layers function like Photoshop? The answer is YES, let’s see this example:
The image above the left has the rabbit behind the spiral while the one next to it has the rabbit in front of it.
The Cursor
There’s a simple way to change the cursor. First load the image:
Remember to put the cursor image at the top layer. The point is to set the position of the image to mouseX and mouseY so that the finger will follow your mouse.
Then the application looks like this:
The cursor is still visible. The noCursor() function removes it:
No more cursor.
Something important
Too many animations and tint() function will make the application run really…really slowly.
Augmented Reality Simulator
We prototyped for the phone a simulation of how the augmented reality would look like. This was the only part only part of the code we were able to transfer to the IPhone. We weren’t able to code the rest of the program using IProcessing because our code was too heavy (due to the image loading part that was necessary for creating the animations). In fact this part of the application was not loaded to the phone using IProcessing but HTML and JQuery. Steffen Klaue did this part.
The simulator is simple and represents well what the augmented reality would look like. The first step in creating this part was taking a panoramic photograph. The image was stitched in Photoshop and loaded as one image in Processing. The size of the sketch was set at 480 x 320 pixels but our image was much bigger. The size worked as a mask so it gave the impression of movement when the sides scrolled.
The function that makes capable the movement of the image is the translate function. It moves an object from its original point to another. On Processing points start at the top left window.
We also used the functions pushMatrix and popMatrix for controlling the movement. These two functions should be placed together like in the image below.
At the beginning of the sketch there are a couple of variables that determine the movement of the image. Speed sets how fast the image scrolls and XPos and XPos1 the position of the image.
These variables are important later on when called. Depending on where the mouse is placed (on the mobile device the equivalent action would be pressing the bottom corners with the finger) the horizontal position of the image will move left or right. Moving the image requires giving the XPos1 function a negative value and when moving the image left XPos requires a positive value.
Click here to download the main prototype code in pdf.
Click here to download the augmented reality simulator.
The sketches can be downloaded in the download section.
Homepage | Concept | Design | Process | Code | Critical reflection | Credits | Downloads |