EPG

/* @pjs preload="1.jpg"; */

/* @pjs preload="2.jpg"; */

/* @pjs preload="3.jpg"; */

/* @pjs preload="4.jpg"; */

/* @pjs preload="5.jpg"; */

/* @pjs preload="6.jpg"; */

/* @pjs preload="7.jpg"; */

/* @pjs preload="8.jpg"; */

/* @pjs preload="9.jpg"; */

​

​

​

​

float curr = 0;

int next = 0;

float prev = 0;

float currFx = 0;

float stepShort = .01, stepLong = .11, step;

Boolean isMoving = false;//same as direction > 0

Boolean isLong = false;

Boolean isPressed = false;

int direction = -1;

UI ui;

​

void setup()

{

  size(700, 432, P3D);

  strokeWeight(2);

  stroke(0);

  noStroke();

  ui = new UI();

  //frameRate(5);

}

​

void draw()

{

  //println("------------------------");

  if (isMoving) {

    currFx += step;

    switch(direction) {

    case RIGHT:

    case UP:

      if (currFx >= next) {

        curr = next;

        if (isLong) {

          prev = curr;

          next ++;

        } else {

          isMoving = false;

          currFx = next;

          direction = -1;

        }

      }

      break;

    case LEFT:

    case DOWN:

      if (currFx <= next) {

        curr = next;

        if (isLong) {

          prev = curr;

          next --;

        } else {

          isMoving = false;

          currFx = next;

          direction = -1;

        }

      }

      break;

    }

  }

  ui.process(currFx, direction);

}

​

void keyPressed()

{

  switch(keyCode) {

  case RIGHT:

  case UP:

    if ((keyCode == RIGHT && direction != UP && direction != DOWN)

      || (keyCode == UP &&  direction!= RIGHT && direction != LEFT)) {

      direction = keyCode;

      if (isPressed && (direction == RIGHT||direction == UP)) {//was already moving

        isLong = true;

        step = stepLong;

      } else {

        prev = currFx;

        curr = currFx;

        next++;

        step = (next - curr) / 20;

      }

      isMoving = true;

      isPressed = true;

    }

    break;

  case LEFT:

  case DOWN:

    if ((keyCode == LEFT && direction != UP && direction != DOWN)

      || (keyCode == DOWN &&  direction!= RIGHT && direction != LEFT)) {

      direction = keyCode;

      if (isPressed && (direction == LEFT||direction == DOWN)) {//was already moving

        isLong = true;

        step = -stepLong;

      } else {

        prev = currFx;

        curr = currFx;

        next--;

        step = (next - curr) / 20;

      }

      isMoving = true;

      isPressed = true;

    }

    break;

  }

}

​

void keyReleased()

{

  isLong = false;

  isPressed = false;

}

​

class Model

{

  int sizem = 10;

  int current = 0;

  //  JSONObject json;

  MyData[] data;

  String[] names;

​

  Model()

  {

    /*

    //no JSON data available in JS

     json = loadJSONObject("data.json");

     JSONArray dataArray = json.getJSONArray("model");

     println(dataArray);

     sizem = dataArray.size();

     println("number of items: " + sizem);

     */

     data = new MyData[sizem];

    for (int i = 0; i < sizem; i++)

    {

      //      JSONObject iData = dataArray.getJSONObject(i); 

      //      String url = iData.getString("url");

      //      String title = iData.getString("title") + " #" + i;

      data[i] = new MyData(i, ""+i, (i+1) + ".jpg");

    }

    //println("Model initialized!");

  }

​

  float getModuloIdx(float IdxFx)

  {

    //isInt is here to make sure that a float input won't output an int

    //which would cause the index to actually get to the nextIdx value... :-(

    Boolean isInt = IdxFx == int(IdxFx);

    IdxFx += 1000 * sizem;

    return ((IdxFx % sizem) - (isInt ? 0 : .001));

  }

​

  MyData getData(int r)

  {

    current = (r + 1000 * sizem) % sizem;

    return data[current];

  }

​

  MyData getCurr()

  {

    return data[current];

  }

​

  MyData getNext()

  {

    current = (current + 1) % sizem;

    return data[current];

  }

​

  MyData getPrev()

  {

    current = (current - 1 + sizem) % sizem;

    return data[current];

  }

​

  int getCurrIdx()

  {

    return current;

  }

  int getNextIdx()

  {

    return (current + 1) % sizem;

  }

  int getPrevIdx()

  {

    return (current - 1 + sizem) % sizem;

  }

}

​

class MyData

{

  color c = color(random(255), random(255), random(255));

  String text, url;

  PImage img;

  int imgW = 1, imgH = 1;

​

  MyData(int i, String t, String u)

  {

    text = t;

    url = u;

    img = loadImage(url);//"1.jpg");

    if (img != null) {

      imgW = img.width;

      imgH = img.height;

      //println(i + ": " + imgW);

    } else {

      println("image: " + url + " cannot be loaded");

    }

  }

​

  String toString() {

    return "url: " + url;

  }

}

​

class UI

{

  Model model = new Model();

  MyData c1 = model.getCurr(), c2;//start and destination data

  float ztr = 0;

  int w = 500, h = 330;

  int textSizeJS = 40;

  boolean moving = false;

  boolean longKey = false;

​

  void process(float idFx, int dir)

  {

    int previousIndex, currentIndex;

    float c = model.getModuloIdx(idFx); 

    idFx = c;

​

    ztr = (dir == LEFT || dir == RIGHT) ? w/2 : h/2;

​

    if (dir == LEFT || dir == DOWN) {

      currentIndex = floor(idFx);

      previousIndex = currentIndex + 1;

    } else if (dir == RIGHT || dir == UP) {

      currentIndex = ceil(idFx);

      previousIndex = currentIndex - 1;

    } else if (dir < 0) {

      //println("end of animation");

      previousIndex = currentIndex = int(idFx);

    } else {

      println("unexpected case"); 

      previousIndex = currentIndex = 0;

    }

​

    c1 = model.getData(previousIndex);

    c2 = model.getData(currentIndex);   

​

    //println("c1: " + c1 + "  c2: " + c2); 

    //println("currFx: " + idFx + "  focused index: " + currentIndex + "  prev index: " + previousIndex);

    display(dir);

  }

​

  void display(int dir)

  {

    background(60);

    translate(width/2, height/2);

​

    float c = model.getModuloIdx(currFx); 

    float rot = abs(c % 1);

    rot = (dir == RIGHT || dir == UP) ? rot : 1 - rot;

​

    pushMatrix();

    translate(0, 0, -ztr); 

    applyRotation(dir, rot, 0);

    translate(0, 0, ztr); 

    displayFace(c1, 1);

    popMatrix();

​

    if (dir > 0) {

      translate(0, 0, -ztr); 

      applyRotation(dir, rot, PI/2);

      translate(0, 0, ztr); 

      displayFace(c2, 2);

    }

  }

​

  void displayFace(MyData data, int n)

  {

//    fill(data.c);

//    println(data);

    noFill();

    beginShape();

    texture(data.img);

    vertex(-w/2, -h/2, 0, 0);

    //vertex(w/2, -h/2, data.imgW, 0);

    //vertex(w/2, h/2, data.imgW, data.imgH);

    //vertex(-w/2, h/2, 0, data.imgH);

    vertex(w/2, -h/2, 500, 0);

    vertex(w/2, h/2, 500, 332);

    vertex(-w/2, h/2, 0, 332);

    endShape(CLOSE);

​

    translate(10, -15, 20);

    textSize(textSizeJS);

    fill(50, 80);

    text(data.text, -w/2+textSizeJS/4, h/2-textSizeJS/4, 1);

    fill(250, 180);

    text(data.text, -w/2+textSizeJS/4+2, h/2-textSizeJS/4-2, 1.5);

    //text("" + n, -w/2+textSizeJS/4+2, h/2-textSizeJS/4-2, 1.5);

  }

​

  void applyRotation(int dir, float theta, float start)

  {

    switch(dir) {

    case LEFT:

      rotateY(theta * PI / 2 - start);

      break; 

    case RIGHT:

      rotateY(-theta * PI / 2 + start);

      break; 

    case UP:

      rotateX(-theta * PI / 2 + start);

      break; 

    case DOWN:

      rotateX(theta * PI / 2 - start);

      break;

    }

  }

}

​

​

​