Magellan_Processing_Code_Commented

// **************************************** // ********* MAGELLAN APPLICATION ******** // **************************************** // by // Antonio Altomare // Roberto Picerno // // // // // //

IUAV 2009/2010 Interaction Design_Lab 1 taught by Gillian Crampton Smith Philip Tabor

// thanks to Nick Zambetti and Luca De Rosso

// *** GRAPHICS CODE *** // images variables PImage veniceMap; PImage start; PImage overview; PImage timeline; PImage board; // zoom variables int mapTargetZoom = 1; float mapTargetX = 0; float mapTargetY = 0; float mapZoom = 1; float mapX = 0; float mapY = 0; // images position variables float timelineY = 320; float overviewY = 320; // load all images void loadGraphics(){ veniceMap = loadImage (“home1.jpg”); overview = loadImage (“overview.png”); timeline = loadImage (“timeline1.png”); board = loadImage (“board.png”); } //////////// HOME //////////// // funcion to draw home void drawHome(){ mapX += (mapTargetX - mapX) * 0.2; mapY += (mapTargetY - mapY) * 0.2; mapZoom += (mapTargetZoom - mapZoom) * 0.2; image (veniceMap, mapX, mapY, 480 * pow(mapZoom, 2), 320 * pow(mapZoom,2)); } // function to adapt the map, centering the screen to the clicked point boolean clickedButton(float x, float y, float radius){ float distX = map(x, 0, 480, 0, 480 * pow(mapTargetZoom, 2)); float distY = map(y, 0, 320, 0, 320 * pow(mapTargetZoom, 2)); float distMouseX = myMouseX - mapTargetX; float distMouseY = myMouseY - mapTargetY;

if(dist(distX, distY, distMouseX, distMouseY) < radius){ return true; } return false; } // function to resize coordinates X and Y relative to zoom levels float getMapCoordinateY(int y){ return map(y, 0, veniceMap.height, mapY, mapY + (veniceMap.height * pow(mapTargetZoom, 2))); } // function to zoom in void zoomMapIn(){ if(mapTargetZoom > 2){ return; } float distX = myMouseX - mapTargetX; float distY = myMouseY - mapTargetY; distX = map(distX, 0, veniceMap.width * pow(mapTargetZoom, 2), 0, veniceMap.width * pow(mapTargetZoom + 1, 2)); distY = map(distY, 0, veniceMap.height * pow(mapTargetZoom, 2), 0, veniceMap.height * pow(mapTargetZoom + 1, 2)); mapTargetZoom = mapTargetZoom + 1; mapTargetX = myMouseX - distX; mapTargetY = myMouseY - distY; } // function to zoom out void zoomMapOut(){ if(mapTargetZoom < 2){ return; } float distX = myMouseX - mapTargetX; float distY = myMouseY - mapTargetY; distX = map(distX, 0, veniceMap.width * pow(mapTargetZoom, 2), 0, veniceMap.width * pow(mapTargetZoom - 1, 2)); distY = map(distY, 0, veniceMap.height * pow(mapTargetZoom, 2), 0, veniceMap.height * pow(mapTargetZoom - 1, 2)); mapTargetZoom = mapTargetZoom - 1; if(mapTargetZoom == 1){ mapTargetX = 0; mapTargetY = 0; } else{ mapTargetX = myMouseX - distX; mapTargetY = myMouseY - distY; } }

//////////// TIMELINE //////////// // timeline image switch and position variables boolean timelineDragging = false; float timelineX ; float timelineTargetY = 320; float timelineTargetX = 1441; float a=0; // funcion to draw the timeline void drawTimeline(){ // funcion to activate the timeline scrolling scrollingTimeline(); timelineY += (timelineTargetY - timelineY) * 0.1; image (timeline,timelineX,timelineY); } // function to scroll the timeline. It has two buttons. void scrollingTimeline(){ if(timelineDragging){ if (mousePressed){ a = mouseX; // button on the right if (a>450&&a<480&&(timelineX>-950)){ timelineX -= (timelineTargetX - timelineX)*0.01 ; } // button on the left else if (a>0 &&a<30&&(timelineX<-12)) { timelineX += (timelineTargetX - timelineX)*0.01 ; } } } } // function to exit timeline void exitTimeline(){ state = STATE_HOME; timelineTargetY = 320; } // function for timeline entering void enterTimeline(){ state = STATE_TIMELINE; timelineX = 0; timelineY = 320; timelineTargetY = 0;

} //////////// OVERVIEW //////////// // overview starting position float overviewTargetY=320; // function to exit overview void exitOverview(){ state = STATE_HOME; overviewTargetY = 320; } // function for overview entering void enterOverview(){ state = STATE_OVERVIEW; overviewY = 320; overviewTargetY = 0; } // function to draw overview void drawOverview(){ overviewY += (overviewTargetY - overviewY) * 0.1; image (overview,0,overviewY); } //////////// BOARD //////////// void drawBoard(){ image (board,0,0); }

// *** LOGIC CODE *** int int int int

STATE_HOME = 0; STATE_OVERVIEW = 1; STATE_TIMELINE = 2; state = STATE_HOME;

void setup() { size (480,320); // (activate it for portrait rotation) // size (320,480); frameRate(20); smooth(); loadGraphics(); } void mousePressed(){ if(state == STATE_HOME){ // this button shows you the timeline: here you can see next collaboration available if(true == clickedButton(79,155,20) || clickedButton(87,142,20)|| clickedButton(93,133,20)&&(mouseButton == LEFT)) { enterTimeline(); } else if(true == clickedButton(116,255,20)){ // this button shows you the overview: details about the project boat enterOverview(); } else if(mouseButton == LEFT){ // left click for zoom in zoomMapIn(); } else if (mouseButton == RIGHT) { // right click for zoom out zoomMapOut(); } } else if (state == STATE_TIMELINE) { if (mouseButton == LEFT) { timelineDragging = true; } else if (mouseButton == RIGHT) { // right button to exit timeline exitTimeline(); } }

else if (state == STATE_OVERVIEW) { if (mouseButton == RIGHT) { // right button to exit overview exitOverview(); } } } void mouseReleased(){ timelineDragging = false; } void draw () { background(10, 12, 25); // (activate it for portrait rotation) //rotatePortrait(); drawHome(); drawTimeline(); drawOverview(); drawBoard(); }

// *** PORTRAIT ROTATION *** /* this tab allows rotation of the whole application keeping the relative coordinates working */ boolean portraitMode = false; void rotatePortrait(){ portraitMode = true; translate(320/2, 0); rotate(radians(90)); translate(0, -160); } float myMouseX; float myMouseY; void mapMouse(){ if(portraitMode){ myMouseX = mouseY; myMouseY = map(mouseX, 320, 0, 0, 320); } else{ myMouseX = mouseX; myMouseY = mouseY; } } void mouseMoved(){ mapMouse(); }