Instagram TUI - Processing Application

gistfile1.pde

/*
Physical Computing Mid Term Project.
Craig Pickard and Minju Vivian Kim
ITP 2014
Physical Interface for Interacting with your Instagram Account.
*/


import http.requests.*;      //import http request library to get instagram photo
import processing.serial.*;  //import serial library
Serial myPort;               //declare a serial port
 
int previouseLeft=0;  
int previouseRight=0; 
 
int buttonValue;
int previousButtonValue;
boolean receivingData = false;
int sensorvalue=0;
 
//create a boolean variable to establish whether or not the arduino
//has attempted to communicate
boolean firstContact = false;
 
String usertoken = "243036695.399933e.d49b4ab95acd4b94b5f7cc9adfbfdadb";  //Get token from instagram
int maxcount = 30;  //set maximum number of images to pull from instagram
int imagesize = 200;  //set image size of instagram photo
int imagemargine = 5; //set margine size among photos
 
//MOUSE POSITION WHEN MOUSED PRESSED
float px=0.0;
float py=0.0;
 
//MOUSE POSITION WHEN MOUSED RELEASED & DISTANCE & PRESSED CHECK & PAGE CHECK
float rx=0.0;
float ry=0.0;
float dx=0.0;  //distance between px and rx
boolean pressed = false;  //make sure if the mouse if pressed or not
 
//INPUT CHECK
int mousecheck;  //get tile number
 
//Heart
PImage heart;  //save heart image
float time = 0.0; //use noise function to change size of heart
float inc = 0.2;  //change time value continually
float heartSize = 0; //save size of heart

 
//INSTAGRAM DATA SAVE ARRAY
ArrayList<Instainfo> instas; //make array list to save information of instagram photos
Instainfo[][] instaArray;  //use 2D array pointer to make easy to set and remember the locaiton of each photo
int cols=9; //set the number of columns
int rows=3; //set the number of rows

boolean img_swipeflag = false; //check if we should display image in grid mode or full image mode
int grid_swipeflag = 0;  //check which columns should be displayed



//IMAGE DISPLAY VALUE
boolean imflag = false;  //check if a image is fully displayed
int displaynext; //check which photo should be fully displayed
float imgacc=0;  //use this to change size of the image when they are fully displayed 
float gridacc = -200;  //use this to change z value of grid list
boolean next = false;  //set true when the next photo is called in full image mode
 
 
public void setup() 
{
  //set size by image and margine size
  size(3*imagesize + 4*imagemargine, 3*imagesize + 4*imagemargine, P3D);
  smooth();
  
  /* 
  String portName = "/dev/tty.usbmodem1411"; //create string to assign port
  myPort = new Serial(this, portName, 9600); //initialise serial port
  myPort.bufferUntil('\n'); //read incoming bytes to buffer until linefeed is received
  */
  

  //Instainfo Class Set
  instas = new ArrayList<Instainfo>();
  instaArray = new Instainfo[cols][rows];
  
  //IMAGE GET
  getImage();  //get image from instagram
  setImage();  //set heart image
  
}
void draw() {
 
  background(255);
  
  //Check if tile is pressed
  //tilePressed();  //to set mousecheck value
    
    if(imflag == true) {  //Display image fully when this flag is true
      if(getSelected(mousecheck) != null) {  //Check if insta class is empty or not (Error Prevention)
        if(img_swipeflag == false) {  //If user press the tile
          displaynext = getSelected(mousecheck).count;  //check which photo should be displayed 
          next = false; //set this to false to display image from their location
          appearSelected(displaynext); //display photos
        } else { //If user already has been in full image mode
          next = true; //set this to true to display image from center
          appearSelected(displaynext);  //display photos
        }
      }
    } else {
        for(int i=0; i<cols; i++) {
        for(int j=0; j<rows; j++) {
          if(instaArray[i][j] != null) {
            img_swipeflag = false; //re-initialization
            instaArray[i][j].move(grid_swipeflag); //set location if each image
            instaArray[i][j].displayUp(gridacc); //display grid
          }
        }
      }
    }

  gridacc = gridacc + 5; //adjust z value of grid
  gridacc = constrain(gridacc,-200,0); //limit it from -200 to 0
  
}
 
 
 

//Getting images from Instagram
//Refer to example of http.request library
void getImage() {
  
  //set information
  GetRequest get = new GetRequest("https://api.instagram.com/v1/users/self/feed.json?access_token="+usertoken+"&count="+maxcount);
 
  //send request
  get.send(); // program will wait untill the request is completed
 
 
  JSONObject response = parseJSONObject(get.getContent()); //get information in Json format
  JSONArray boxes = response.getJSONArray("data");  //save all the information to arraylist
  
  for (int i=0; i<boxes.size (); i++) {  //check all array to get only needed information
 
    JSONObject box = boxes.getJSONObject(i);  //get box refer to the index
    println("Box 1: " + box);
    String id = box.getString("id");  //find "id" and save the information to id
    println("Media_ID:" + id);
    boolean liked = box.getBoolean("user_has_liked");  //find "user_has_liked" in box and save the information to liked
    JSONObject user = box.getJSONObject("user");  //find "user" in box and save all the information to user object
    String username = user.getString("full_name");   //find "full_name" in user object and save the information to username
    //println("User:" + username);
    JSONObject images = box.getJSONObject("images");  //find "images" in box object and save the information to images object
    JSONObject stimages = images.getJSONObject("standard_resolution"); //find "standard_resolution" in images object and save the information to stimages object
    //println("Image URL" + stimages.getString("url"));
    PImage userphoto = loadImage(stimages.getString("url"), "png"); //find "url" in stimages obejct and load it the userphoto
 
 
    instas.add(new Instainfo(i, id, liked, username, userphoto, imagesize, imagemargine)); //add all the information to the instainfo array list
  }
  
  int leng =0;  //check array list size
  
  //set 2D instas array to point each object in array list
  for(int i=0; i<cols; i++) {  //set position of each element
    for(int j=0; j<rows; j++) {  //set position of each element
      
         if (leng < instas.size()) {
          instaArray[i][j] = instas.get(leng);  //get object from instas array list and make 2D to point it
          instaArray[i][j].location.set(new PVector((imagesize/2+imagemargine)+i*(imagesize+imagemargine),(imagesize/2+imagemargine)+j*(imagesize+imagemargine))); //set position of each tile
          instaArray[i][j].standard.set(instaArray[i][j].location); //use this as a standard position. This value shall not be changed
          instaArray[i][j].img.set(instaArray[i][j].location);  //Use this when image is displayed in full image mode. 
          leng++;
        }
    }
  }    
}

//load heart image
void setImage() {
  heart = loadImage("heart.png");
}

//Display image as a full screen
void appearSelected(int count) { //Get count to display specific image
  
  Instainfo insta = instas.get(count);   //get object
  
  imgacc = lerp(imgacc,width-(imagemargine*2),0.1);  //images will be getting bigger
 
  imageMode(CENTER);  //set image display mode
  tint(255);  //set image color mode
  if(next != true) {  //first enterance to full image mode
     insta.img.x = lerp(insta.img.x, width/2, 0.1);  //image will be getting close to the center
     insta.img.y = lerp(insta.img.y, height/2, 0.1);  //image will be getting close to the center
     image(insta.image, insta.img.x, insta.img.y, imgacc, imgacc);  //image  size will be getting close to the screen size
  } else{
     image(insta.image, width/2, height/2, imgacc, imgacc); //1.image will be displayed from center 2.image size will be getting close to the screen size 
  }
 
 
 
  //For heart
  heartSize = noise(time)*width/9;  //set size of heart with noise function
  time += inc;   //to change the size of the heart, increase the time value continually
 
  if (insta.liked == false) {  //if the flag is false
    tint(255, 170);  //display gray heart
    image(heart, width/12*11, height/12*11, heartSize, heartSize);  //check the heart size
  } else {  //if the flag is true
    tint(255, 51, 51, 170);  //display read heart
    image(heart, width/12*11, height/12*11, heartSize*1.5, heartSize*1.5);  //make the heart bigger
  }  

}

//Check which image should be called when user press the tile
//Mousecheck has specific area matching with image on the screen

Instainfo getSelected(int mousecheck){
  
  Instainfo insta;
 
  if(mousecheck == 0) {
    for(int i=0; i<cols; i++) {
      for(int j=0; j<rows; j++) {
        if(instaArray[i][j].location.x > 0 && instaArray[i][j].location.x < width/3 && instaArray[i][j].location.y < height/3){
          insta = instaArray[i][j];
          return insta;
        }
      }
    }
  } else if(mousecheck == 1) {
       for(int i=0; i<cols; i++) {
        for(int j=0; j<rows; j++) {
          if(instaArray[i][j].location.x > width/3 && instaArray[i][j].location.x < width/3*2 && instaArray[i][j].location.y < height/3){
            insta = instaArray[i][j];
            return insta;
          }
        }
      }
  } else if(mousecheck == 2){
       for(int i=0; i<cols; i++) {
        for(int j=0; j<rows; j++) {
          if(instaArray[i][j].location.x > width/3*2 && instaArray[i][j].location.x < width && instaArray[i][j].location.y < height/3){
            insta = instaArray[i][j];
            return insta;
          }
        }
      }    
  } else if(mousecheck == 3){
       for(int i=0; i<cols; i++) {
        for(int j=0; j<rows; j++) {
          if(instaArray[i][j].location.x > 0 && instaArray[i][j].location.x < width/3 && instaArray[i][j].location.y > height/3 && instaArray[i][j].location.y < height/3*2){
            insta = instaArray[i][j];
            return insta;
          }
        }
      }    
  } else if(mousecheck == 4){
       for(int i=0; i<cols; i++) {
        for(int j=0; j<rows; j++) {
          if(instaArray[i][j].location.x > width/3 && instaArray[i][j].location.x < width/3*2 && instaArray[i][j].location.y > height/3 && instaArray[i][j].location.y < height/3*2){
            insta = instaArray[i][j];
            return insta;
          }
        }
      }       
  } else if(mousecheck == 5){
       for(int i=0; i<cols; i++) {
        for(int j=0; j<rows; j++) {
          if(instaArray[i][j].location.x > width/3*2 && instaArray[i][j].location.x < width && instaArray[i][j].location.y > height/3 && instaArray[i][j].location.y < height/3*2){
            insta = instaArray[i][j];
            return insta;
          }
        }
      }      
  } else if(mousecheck == 6){
       for(int i=0; i<cols; i++) {
        for(int j=0; j<rows; j++) {
          if(instaArray[i][j].location.x > 0 && instaArray[i][j].location.x < width/3 && instaArray[i][j].location.y > height/3 && instaArray[i][j].location.y > height/3*2 && instaArray[i][j].location.y < height){
            insta = instaArray[i][j];
            return insta;
          }
        }
      }      
  } else if(mousecheck == 7){
       for(int i=0; i<cols; i++) {
        for(int j=0; j<rows; j++) {
          if(instaArray[i][j].location.x > width/3 && instaArray[i][j].location.x < width/3*2 && instaArray[i][j].location.y > height/3*2 && instaArray[i][j].location.y < height){
            insta = instaArray[i][j];
            return insta;
          }
        }
      }      
  } else if(mousecheck == 8){
       for(int i=0; i<cols; i++) {
        for(int j=0; j<rows; j++) {
          if(instaArray[i][j].location.x > width/3*2 && instaArray[i][j].location.x < width && instaArray[i][j].location.y > height/3*2 && instaArray[i][j].location.y < height){
            insta = instaArray[i][j];
            return insta;
          }
        }
      }      
  } 
    
  
  return null;
}

//Like interaction
void keyPressed() {
 
  if (imflag == true) { //this should work only in full image mode
      Instainfo insta = getSelected(mousecheck); //get the object
      insta.liked = true; //set the like status to true

      //Use instagram API to make server side change
      PostRequest post = new PostRequest("https://api.instagram.com/v1/media/" +insta.id + "/likes?access_token="+usertoken); //set information
      post.send(); //send information
  }
}
 

 

 //move grid to left to see right side of the grid or next photo.
void seeRight() {
  
  if (imflag == true) { //if the screen is in full image mode
    if(displaynext < instas.size()-1) { //if there are more photos to display
      displaynext++;  //increase this number to display next photo in array list
      img_swipeflag = true; //set this true to notice user already has been in full image mode
      imgacc = 0; //Re initialize photos size
    } else {  //if there is no photo to display
      endEffect();   //display end effect
      //println("no images");
    }

  } else { //if the screen is in grid mode
    grid_swipeflag++; //increase this number to display next grid
    if(grid_swipeflag == 7) { //beyond the last gird
      endEffect(); //display end effect
    }
    grid_swipeflag = constrain(grid_swipeflag,0,6); //constrain flag to 0 ~ 6 to prevent null point error
  }

}
void seeLeft() {
    
  if (imflag == true) {  //if the screen is in full image mode
    if(displaynext >= 1) {  //if there are more photos to display
      displaynext--;  //decrease this number to display previous photo in array list
      img_swipeflag = true;  //set this true to notice user already has been in full image mode
      imgacc = 0; //Re initialize photo size
    } else {  //if there is no photo to display
      endEffect();  //display end effect
      //println("no images");
    }

  } else {  //if the screen is in grid mode
    grid_swipeflag--;  //decrease this number to display previous grid
    if(grid_swipeflag == -1) {  //beyond the first grid
      endEffect();  //display end effect
    }
    grid_swipeflag = constrain(grid_swipeflag,0,6); //constrain flag to 0 ~ 6 to prevent null point error
  }
}

void endEffect() {
  
  fill(255,50); //display white rect to notice there is no content to display
  rect(0,0,width,height);
  delay(100);  //set delay
  
}

/*
Instagram information save 
*/
class Instainfo {
  
  int count;  //index in array list
  String id;  //identification number
  boolean liked;  //flag of liked
  String username;  //save user name for just in case
  PImage image;  //load image
  int size;  //set size of each photo
  int margine;  //set margine
  
  PVector location;  //set current position. this will be changed my move function
  PVector standard;  //set standard position. this shall not be changed.
  PVector img;  //set position to display in full image mode. this will be starting point of each image location.
  
  Instainfo(){  //initialization
  }
  
  Instainfo(int count_, String id_, boolean liked_, String username_, PImage image_, int size_, int margine_){ //initialization
    
    count = count_;
    id = id_;
    liked = liked_;
    username = username_;
    image = image_;
    size = size_;
    margine = margine_;
    
    location = new PVector(0,0);  //memory allocation for PVector
    standard = new PVector(0,0);  //memory allocation for PVector
    img = new PVector(0,0);  //memory allocation for PVector
  }
  
  void move(int flag) {  //get grid flag
    
    if(location.x > standard.x - flag*(size + margine)){  //change location by grid flag
      location.x = lerp(location.x, standard.x - flag*(size + margine) , 0.1);  //go to left to display right side of the screen
    } else if(location.x < standard.x - flag*(size+margine)) {  //change location by grid flag
      location.x = lerp(location.x, standard.x - flag*(size + margine) , 0.1);  //go to right to display left side of the screen
    }
    
    img.set(location);  //Re initialization of img position
  }
  
  void displayUp(float z) {  //get z value
    
    pushMatrix();  //call this to use translate
    translate(width/2, height/2, z);  //translate to give 3D effect
    
    noStroke();  //set no stroke for each image
    imageMode(CENTER);  //set image mode
    tint(255);  //set image color mode
    image(image, location.x-width/2, location.y-height/2, size, size);  //display all image refer to their information 
    popMatrix();  //call this to end translate
  }
}

/*This is for the prototyping*/

void mouseClicked() {
 
  inputCheck(); //to set mousecheck
  //println("mouse check:"+mousecheck);
 
  if (imflag == true) {  //if user already has been in full image mode
    gridacc = -200;  //Re initialize the Z value of the grid
    imgacc = 0;  //Re initialize the size of image
    println("disappear");  //Important debugging message
    imflag = false;  //set flag to false, grid will be displayed in draw function
  } else {  //if user is in grid mode
    println("appear");  //Important debugging message
    imflag = true;  //set flag to true, full image will be displayed in draw function
  }
}
 
//To check dx value
void mousePressed() {
 
  if (pressed==false) {  //make sure mouse is pressed. (double check)
    println("mouse pressed");
    px = mouseX;
    pressed = true;  //make sure mouse is pressed. (double check)
  }
}

 //To check dx value
void mouseReleased() {
 
  if (pressed==true) {  //make sure mouse is pressed. (double check)
 
    rx = mouseX;
    dx = px-rx;
    println("mouse released, dx:" + dx);
 
    if (dx > 200) {
      seeRight();  //call this function to see right side of the screen
    } else if (dx < -200) {
      seeLeft();  //call this function to see left side of the screen
    }
    pressed = false;  //make sure mouse is released. (double check)
  }
} 
 
 
//To match input info with Arduino
//Set mousecheck value refer to mouseX,Y
void inputCheck() {
  
  println("mouseX:"+mouseX + "mouseY:" + mouseY);
  
  if(mouseX < width/3 ) {
    if(mouseY<height/3 ){
      mousecheck = 0;
    } else if(mouseY>height/3 && mouseY<height/3*2) {
      mousecheck = 3;
    } else {
      mousecheck = 6;
    }
  } else if(mouseX > width/3 && mouseX < width/3*2) {
        if(mouseY < height/3 ){
      mousecheck = 1;
    } else if(mouseY > height/3 && mouseY < height/3*2) {
      mousecheck = 4;
    } else {
      mousecheck = 7;
    }
  } else {
            if(mouseY < height/3 ){
      mousecheck = 2;
    } else if(mouseY > height/3 && mouseY < height/3*2) {
      mousecheck = 5;
    } else {
      mousecheck = 8;
    }
  }    
}


//  THIS SHOULD BE ACTIVATED BEFORE CONNECT WITH ARDUIO
/*
void tilePressed(){
  
  if (receivingData==true){  //make suer data is received
    if(imflag == true) {  //if user already has been in full image mode
      gridacc = -200;  //Re initialize the Z value of the grid
      println("disappear" + "gridacc:" + gridacc);  //Important debugging message
      imgacc = 0;  //Re initialize the size of image
      imflag = false;  //set flag to false > grid will be displayed in draw function
      
    } else {  //if user is in grid mode
      println("appear"); //Important debugging message
      imflag = true;  //set flag to true, full image will be displayed in draw function
      inputCheck();  //set the mousecheck value
      
    }
  }  
}

void serialEvent(Serial myPort) {
  //read the serial buffer
  String incomingData = myPort.readStringUntil('\n');
 
 
  if (incomingData != null) {
 
    incomingData = trim(incomingData); //this removes whitespace from the incoming string
 
 
    //if no data has been received from Arduino, continue to listen for it
    if (firstContact == false) {
      if (incomingData.equals("begin")) {
        myPort.clear(); //clear the serail buffer
        firstContact = true; //confirm that data has been received
        myPort.write('A'); // request more information
      }
    } else { //if first contact has previously been established
 
// split the string at the commas
// and convert the sections into integers:
int sensors[] = int (split (incomingData, ',') );
 

if (sensors[0] != 0){  //new value is arrived
  receivingData = true;  //set this to true so that tilepressed can work
  println("!!!!!!!!!!!!!ReceivingData: True!!!!!!!!!!!!");
  
  // sensorvalue = sensors[0];
    if(imflag == false) {  //only when user is in grid mode, button value need to be changed
      buttonValue = sensors[0];
      }
    } else { //if sensors[0] == 0
        receivingData = false;
    }
  


   if (sensors[1] != 0){  //new value is arrived
      if(previouseLeft != sensors[1]) {  //same value arrived twotimes.. to check that this code is added
        seeRight();
        previouseLeft = sensors[1];  //to check if the arrived value is the first one or secnd one.
        delay(1000);
        } 
        else {  //when second value is arrived, re initialized the previousLeft to 0
          previouseLeft = 0;
        }
    }
  
   if (sensors[2] != 0){  //new value is arrived
      if(previouseRight != sensors[2]) {  //same value arrived twotimes.. to check that this code is added
        seeLeft();
        previouseRight = sensors[2];  //to check if the arrived value is the first one or secnd one.
        delay(1000);
       } else {  //when second value is arrived, re initialized the previousLeft to 0
        previouseRight = 0;
      }
    }
  

 

 
      // print out the values you got:
      //println("Flag:"+receivingData);
      for (int sensorNum = 0; sensorNum < sensors.length; sensorNum++) {
      println("Sensor:" + sensorNum + " " + sensors[sensorNum] + "\t");
      }

       myPort.write('A');
//
 
      }
    }
      //println();
}

void inputCheck() {
 
  println("mouseX:"+mouseX + "mouseY:" + mouseY);
 
 
  if (buttonValue == 1){
      mousecheck = 0;
    } else if (buttonValue == 4) {
      mousecheck = 3;
    } else if (buttonValue== 7){
      mousecheck = 6;
    } else if (buttonValue== 2) {
      mousecheck = 1;
    } else if (buttonValue == 5) {
      mousecheck = 4;
    } else if (buttonValue == 8) {
      mousecheck = 7;
    } else if (buttonValue == 3 ) {
      mousecheck = 2;
    } else if (buttonValue == 6) {
      mousecheck = 5;
    } else if (buttonValue == 9){
      mousecheck = 8;
    }
  }
*/