Dérive offers the opportunity to explore a city in unconventional ways, approaching the technology in a way that people don’t use to. For example, our service would use the GPS location technologies to get out from a common, touristic or fast track across Venice, making it possible to reach only emotional points of interest often in unpredictable ways.
Our prototype is built in a way that easily organize the many screens needed for the complex navigation. The first thing we did is to divide our code in five main sections: “Graphics”, “Animations”, “Objects”, “Logic” and “Key Commands”.
void draw()
{
if(screenMode == SCREEN_MENU){
drawMenu();
}
Then, in the logical section, after setting up all the needed variables we defined the main screens, which are mostly accessible from the main menu. For all the particular functions on every screen, we choose to create subscreens with the “switch cases” method in the graphical section, to keep also track of the main logical part of the software in which we are going to operate.
case 1: // select landmark 1
drawEmptyBg();
drawLmFocus();
softCode = 5;
drawLowBar();
println(pathMode);
break;case 2: // select landmark 2
drawEmptyBg();
drawLmFocus2();
softCode = 5;
drawLowBar();
println(pathMode);
break
A debug printing is always a smart resource in emergency cases..
To keep simple and readable theese subscreens, we decided to create a set of function to draw the various parts of the interface and the core elements.
void drawLowBar()
{
image(softBg, 0, height - 150);
image(tools, 0, 40 * (softCode - 1), width, 40, 0, height - 40);
}
We would like also to let the users put their attention to the environment around and avoid them to be always looking at the phone. So we decided to display graphics and informations in a non impactive way, being almost wrapped by a soft fog. Also, the “easeOut” code provided by Nicholas Zambetti was very helpful to animate most decisional screens and the main menu.
int easeOut(int currentOriginal, int targetOriginal, int speed)
{
// make values large for math
int current = currentOriginal * 1000; // make current value large for math (e.g. 2 becomes 2000)
int target = targetOriginal * 1000; // make target value large for math (e.g. 33 becomes 33000)// do math to calculate our next value
int change = target - current; // find out how much change there is (e.g. 33000 - 2000 = 31000)
int changeLittle = change / speed; // make the change a little change (e.g. 31000 / 4 = 7750)
int next = current + changeLittle; // change the current value a little (e.g. 2000 + 7750 = 9750)// make next value small for screen
next = next / 1000;// if our little change was so little that we didn’t move…
if(next == currentOriginal){
next = targetOriginal; // our next step is our target
}return next; // return our next value (e.g. 9750 / 1000 = 9, remember that we started with 2)
}
The information “millis” is very usefull to calculate intervals between functions or graphics, such as the splash screen or the baloon helpers.
m = millis();
if (timeSet == false){
time = m + 2000;
timeSet = true;
}
if(m > time){
m = 0;
time = 0;
timeSet = false;
screenMode = SCREEN_MENU;
}
We also arrange a set of objects, most of them elliptical shapes, using class declarations to simplify the recursive use of the ellipse command.
Finally we tried to use the microphone input to generate a different way to impress a feedback to visited places, through the Fast Fournier Transform technique, but seems that the actual sound libraries for Mobile Processing are not yet advanced enough to support it.
derive_029a source code (PDF | 64 KB)
Dérive | Inspiration | Scenario | Location, users and stakeholders | How to use it | Prototype | Code and technology | Graphics | Downloads | Credits |