08-09 Interaction Design Lab 1 Projects

Cinomadic > code > graphics

Underneath we declared all the required grapich variables. For the typography:
PFont futura12MediumWhite;
PFont futura16BoldWhite;
PFont futura12MediumBlack;

for the logo images and the main menu:
PImage logo;
PImage mainmenu_background;
PImage mainmenu_options;
PImage mainmenu_focusbar1;
PImage mainmenu_focusbar2;
PImage mainmenu_focusbar3;
PImage mainmenu_focusbar4;

for the images of the “EVENTS” section. Here we declared two arrays for the images, two arrays for the descpription of every shorfilm scrolled up or down, two array to store the information about the scheduling of each event scrolled to right and left, and one array of seven element to count the images of the events:
PImage events_background;
int[] events_images_counts = new int[7];
PImage[][] events_images = new PImage[7][4];
String[][] events_descriptions = new String[7][4];
String[][] events_schedules = new String[7][4];

this are for the “MY EVENTS” session:
PImage myevents_menu_background;
PImage myevents_menu_details;
PImage myevents_menu_focusbar;
PImage myevents_detail_background;
PImage myevents_detail_background1;
PImage myevents_detail_background2;
PImage myevents_detail_background3;
PImage myevents_search_saved;

for the “SEARCH EVENTS”:
PImage search_mappa;
PImage search_stella;
PImage search_popup;
PImage search_fumetto;

for the “TORCH”:
PImage openingBackground;
PImage openingAnimation[] = new PImage[5];
PImage infoArrowScrollUp;
PImage infoArrowScrollDown;
etc.

////////////////////////////////////////////////////////////////

In this part we loaded all the images and fonts. Because there are too much we did not load them directly into the void setup () but we created different voids to load different images used in them in different contexts.
This loads the fonts:
void loadFonts(){
futura12MediumBlack = loadFont(”FuturaBT-Medium-12.mvlw”, color(0));
futura12MediumWhite = loadFont(”FuturaBT-Medium-12.mvlw”, color(255));
futura16BoldWhite = loadFont(”FuturaBT-Bold-16.mvlw”, color(255));
}

this the main manu images:
void loadMainMenuImages(){
mainmenu_background = loadImage(”mainmenu_background.png”);
mainmenu_options = loadImage(”mainmenu_options.png”);
mainmenu_focusbar1 = loadImage(”mainmenu_focusbar1.png”);
mainmenu_focusbar2 = loadImage(”mainmenu_focusbar2.png”);
mainmenu_focusbar3 = loadImage(”mainmenu_focusbar3.png”);
mainmenu_focusbar4 = loadImage(”mainmenu_focusbar4.png”);
}

here the “MY EVENTS” images:
void loadMyEventsImages(){
myevents_menu_background = loadImage(”myevents_menu_background.png”);
myevents_menu_details = loadImage(”myevents_menu_details.png”);
myevents_menu_focusbar = loadImage(”myevents_menu_focusbar.png”);
myevents_detail_background = loadImage(”myevents_detail_background.png”);
myevents_detail_background1 = loadImage(”myevents_detail_background1.png”);
myevents_detail_background2 = loadImage(”myevents_detail_background2.png”);
myevents_detail_background3 = loadImage(”myevents_detail_background3.png”);
myevents_search_saved = loadImage (”myevents_search_saved.png”);
}

but in this block the “MY EVENTS” images are unloaded and deleted. It is interesting to notice the collectGarbage () function, which cacelled the unloaded images. The advantage it is that the code becomes lighter on the mobile phone and its memory is able to support it:
void unloadMyEventsImages(){
myevents_menu_background = null;
myevents_menu_details = null;
myevents_menu_focusbar = null;
myevents_detail_background = null;
myevents_detail_background1 = null;
myevents_detail_background2 = null;
myevents_detail_background3 = null;
myevents_search_saved = null;
collectGarbage();
}

with the same process we loaded, unloaded and cancelled the “EVENTS” images:

void loadEventsImages(){
events_background = loadImage(”events_background.png”);
events_images[0][0] = loadImage(”events_image00.png”);
events_images[1][0] = loadImage(”events_image10.png”);
etc.

to unloaded the images stored in the two arrays we used two “for” loops:
void unloadEventsImages(){
events_background = null;
int i = 0;
int j = 0;
for(i = 0; i < 7; i++){
for(j = 0; j < events_images_counts[i]; j++){
events_images[i][j] = null;
}
}
collectGarbage();
}

The follwing blocks are controlled by a boolean variable which tests if the “EVENTS” and “MY EVENTS” images are loaded and execudes the return.
This the boolean variable:
boolean eventsLoadedImages = false;

this is the block dedicate to the loading:
void loadAllEventsImages(){
if(true == eventsLoadedImages){
return;
}
loadEventsImages();
loadMyEventsImages();
eventsLoadedImages = true;
}

and this to the unloading:
void unloadAllEventsImages(){
if(false == eventsLoadedImages){
return;
}
unloadEventsImages();
unloadMyEventsImages();
eventsLoadedImages = false;
}

The same test runs for the “TORCH MODE” images:
boolean torchLoadedImages = false;
void loadTorchImages(){
if(true == torchLoadedImages){
return;
}
openingBackground = loadImage(”openingBackground.png”);
openingAnimation[0] = loadImage(”openingAnimation0.png”);
openingAnimation[1] = loadImage(”openingAnimation1.png”);
openingAnimation[2] = loadImage(”openingAnimation2.png”);
etc.

void unloadTorchImages(){
if(false == torchLoadedImages){
return;
}
openingBackground = null;
openingAnimation[0] = null;
openingAnimation[1] = null;
openingAnimation[2] = null;
etc.

This is the block dedicated to load the “SEARCH EVENTS” images:
void loadSearchImages(){
search_mappa = loadImage (”search_mappa.png”);
search_stella = loadImage (”search_stella.png”);
search_popup = loadImage (”search_popup.png”);
search_fumetto = loadImage (”search_fumetto.png”);
}

Here is declared the main variable to load all the images which are called into the void setup ():
void loadImages(){
logo = loadImage(”logo.png”);
loadMainMenuImages();
loadSearchImages();
}

////////////////////////////////////////////////////////////////

Undeneath are declared the variable for “SEARCH EVENTS”:
int menuFocusYPosition = 51;
int ellipseX = 125;
int ellipseY = 200;
etc.

the function to draw the logo:
void drawSectionLogo (){
image (logo, 0,0);
}

to draw the main manu. The function starts to draw always the background. Different focusbar are drawn depending where the focus is:
void drawSectionMainmenu(){
image(mainmenu_background, 0, 0);
if(mainmenuFocus == MAINMENU_EVENTS){
image(mainmenu_focusbar1, 0, menuFocusYPosition);
etc.

Here the function to draw the “EVENTS”. It always draws firts the background:
void drawSectionEvents(){
image(events_background, 0, 0);

here it draws the event descriptions:
image(events_images[eventsMode][eventsModeMovie], 54, 57);
it changes the font:
textFont(futura12MediumBlack);

The movie images:
text(events_descriptions[eventsMode][eventsModeMovie], 131, 186);

Here we first changed the font and than we drawn the events schedules:
textFont(futura12MediumWhite);
text(events_schedules[eventsMode][0], 25, 186);
text(events_schedules[eventsMode][1], 25, 212);
text(events_schedules[eventsMode][2], 25, 238);
text(events_schedules[eventsMode][3], 25, 264);

The same to draw a progerssive number on each event page:
textFont(futura16BoldWhite);
String eventNumber = “” + (eventsMode + 1);
text(eventNumber, 115, 43);

/////////////////////////////////////////////////////////////////////////////////////////////

In a function we collected the sub functions to draw different parts of the “SEARCH EVENTS”. It is called directly into the void draw ():
void drawSectionSearch(){
if(searchMode == SCREEN_POPUP){
drawMappa();
drawPopup();
}
else if(searchMode == SCREEN_MAPPA){
updateLightPosition();
drawMappa();
}
else if (searchMode ==SCREEN_FUMETTO){
drawFumetto();
}
}

This is a sub function called into the previews drawSectionSearch(). It darws the map as background and calls three other one which are defined underneath:
void drawMappa (){
image (search_mappa,0,0);
drawFascio();
drawStella();
drawFumetto();
}

Each of the next two functions draws a popup window and a star which indicates the user’s position on the map:
void drawPopup (){
image (search_popup,0,0);
}

void drawStella (){
image (search_stella,stellaX,stellaY);
}

By moving the joystick up, down, right anf left it is possible discover the events on the map. In our simulation there is just only one event shown just to give the idea of a kind of navigation. In this function we setted the colour light position:
void drawFascio(){
fill (50,255,255);
if( ellipseX < 0 && ellipseX > 180 && ellipseY < 100&& ellipseY >340){
fill(50, 255, 255);
}

if( ellipseX > 80 && ellipseY < 100){
fill(50, 255, 255);
}
else if( ellipseX > 100 && ellipseX < 150 && ellipseY < 150&& ellipseY > 115 &&50 < calculateDistance (fumetto1x, fumetto2y, ellipseX, ellipseY)){
fill(255,0,0);
}
else if (distance > 30){
fill(50, 50, 255);
}
noStroke();
drawTriangle();
drawTriangle2();
drawEllipse();
}

This are a sub function called into the last one:
void drawEllipse (){
ellipse(ellipseX, ellipseY,10,10);
}

void drawTriangle(){
triangle(128,220,a,b,a1,b);
}

void drawTriangle2(){
triangle(128,220,c,d1,c,d2);
}

When a event is founded the light bacomes red but also appears a popup which indicates the number of the discovered events. This function has controlls if the user finded the right position and through a boolean variable it draws or not the popup window:
boolean showingFumetto = false;
void drawFumetto(){
if(ellipseX > 110 && ellipseX < 150 && ellipseY < 140 && ellipseY > 120 && 50 < calculateDistance(fumetto1x, fumetto2y, ellipseX, ellipseY) ){
showingFumetto = true;
image (search_fumetto,0,0);
}
}

Here the code makes the light move if the user is navigating:
void updateLightPosition(){
int speed = 2;
if(keyIsPressed){
//move the light(ellipse and triangle and triangle2)
switch (keyCode) {
case UP:
ellipseY = max(25, ellipseY - speed);
b = max(25, b -speed);
d1 = max(20, d1 -speed);
d2 = max(30, d2 -speed);
break;
etc.

/////////////////////////////////////////////////////////////////////////////////////////////

This block is dedicated to the third section “MY EVENTS”. It is called directly into the void draw ().
This section is divided in two levels: “MYEVENTS_MENU”, where it is possible choose the saved events and “MYEVENTS_DETAILS” where are stored all the saved events. We created a function (in the logic part) called “myeventsMode” which permitts us to shift from a level to the other.
The first part draws the manu list and the focusbar, depending on where the user is focusing:
void drawSectionMyevents(){
if(myeventsMode == MYEVENTS_MENU){
image(myevents_menu_background, 0, 0);

if(myeventsmenuFocus == MYEVENTS_MENU_EVENT0){
image(myevents_menu_focusbar, 0, 4);
}
else if(myeventsmenuFocus == MYEVENTS_MENU_EVENT1){
image(myevents_menu_focusbar, 0, 34);
}
else if(myeventsmenuFocus == MYEVENTS_MENU_EVENT2){
image(myevents_menu_focusbar, 0, 64);
}
else if(myeventsmenuFocus == MYEVENTS_MENU_EVENT3){
image(myevents_menu_focusbar, 0, 94);
}
image(myevents_menu_details, 24, 41);
}

The second one permitts to go from the manu list, choose an event and see its page:
else if(myeventsMode == MYEVENTS_DETAIL){
if(myeventsdetailMode == MYEVENTS_DETAIL_EVENT0){
image(myevents_detail_background, 0, 0);
}
else if(myeventsdetailMode == MYEVENTS_DETAIL_EVENT1){
image (myevents_detail_background1,0,0);
}
else if(myeventsdetailMode == MYEVENTS_DETAIL_EVENT2){
image (myevents_detail_background2, 0, 0);
}
else if(myeventsdetailMode == MYEVENTS_DETAIL_EVENT3){
image (myevents_detail_background3, 0, 0);
}
}
}

/////////////////////////////////////////////////////////////////////////////////////////////

This part is dedicated to the last section “TORCH MODE”. It is divided into three moments. This code relates a screen for each of this moments:
void drawSectionTorch(){
if(torchMode == TORCH_OPENING){
drawOpening();
}
else if(torchMode == TORCH_INFO){
drawInfo();
}
else if(torchMode == TORCH_MAP){
drawMap();
}
}

Here is the opening animation. A boolean variable check if th user is entering in this section. If it is true this code draw an animation and the valocity is controlled by the integer variable drawOpeningAnimationClock:

boolean drawOpeningAnimationDirection = true;
int drawOpeningAnimationClock = 0;
void drawOpening(){
image(openingBackground, 0, 0);
image(openingAnimation[drawOpeningAnimationClock], 0, 0);
if(drawOpeningAnimationDirection){
drawOpeningAnimationClock++;
if(drawOpeningAnimationClock > 3){
drawOpeningAnimationDirection = false;
}
}
else{
drawOpeningAnimationClock–;
if(drawOpeningAnimationClock < 1){
drawOpeningAnimationDirection = true;
}
}
}

Here are the comands to draw the info screen and scroll it:
int drawInfoTextPosition = 4;
void drawInfo(){
int bottomScrollPosition = 240 - 470 - 5;
if(torchKeyIsPressed){
if(keyCode == UP){
drawInfoTextPosition += 10;
}
else if(keyCode == DOWN){
drawInfoTextPosition -= 10;
}
drawInfoTextPosition = constrain(drawInfoTextPosition, bottomScrollPosition, 4);
}
image(infoTextScroll, 0, drawInfoTextPosition);
image(infoMask, 0, 0);
if(drawInfoTextPosition < 4){
image(infoArrowScrollUp, 33, 64);
}
if(drawInfoTextPosition != bottomScrollPosition){
image(infoArrowScrollDown, 33, 290);
}
}

The void drawMap () draws the five stage the simulation of the interaction:
boolean mapArrowsEnabled = false;
int mapYouX = 110;
int mapYouY = 164;

void drawMap(){
if(torchMapMode == TORCH_MAP_STAGE0){
image(mapBackground0, 0, 0);
image(mapUsers0, 0, 0);
if(mapArrowsEnabled){
image(mapHighlightArrows0, 0, 0);
}
}

This the last screen of the simulation. After the small animation the user arrived to the projection site. In this stage appears a confetti fall. This is the related code:
boolean finished = false;
void drawMapConfetti(){
if(finished){
return;
}
finished = true;
int i;
for(i = 0; i < 100; ++i){
image(mapConfetti0, mapConfettiPositions0[i][0], mapConfettiPositions0[i][1]);
mapConfettiPositions0[i][1] += random(5, 15);
if(mapConfettiPositions0[i][1] < height){
finished = false;
}
}
for(i = 0; i < 6; ++i){
image(mapConfetti1, mapConfettiPositions1[i][0], mapConfettiPositions1[i][1]);
mapConfettiPositions1[i][1] += random(5, 15);
if(mapConfettiPositions1[i][1] < height){
finished = false;
}
}
}

The last part is dedicated to the movement of the user animation:
int animateTo(int current, int target, int speed)
{
int next = current;
if(target < next){
next = next - speed;
next = max(next, target);
etc.