Animation on Tabs

James_Anderson

Is there a way that we can use some animation on tabs only when we run a sketch. like if we make multiple tabs and only want animation on tabs . Is there anyone who have any idea on this ?

Chrisir

do you mean the tabs where your code is in, the different files of your sketch in the pde?

it is hard to understand what you mean.

Which tabs?

jeremydouglass

Do you mean web browser tabs? (use p5.js)

Do you mean displaying animated sketch output in a tab of the PDE editor instead of in a separate sketch window? (not possible)

Do you mean creating a sketch window that has graphical user interface "tab" buttons in it, and you can switch between them to see animations, or not? (See GUI libraries)

James_Anderson

yes @jeremydouglass that's exactly what i mean " Do you mean creating a sketch window that has graphical user interface "tab" buttons in it, and you can switch between them to see animations, or not? (See GUI libraries)" . is this possible with processing 2.2.1 ?

jeremydouglass

Check out GUI libraries.

• https://processing.org/reference/libraries/#gui

I believe that ControlP5 has a "tab" control:

• http://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5tab/ControlP5tab.pde
• http://www.sojamo.de/libraries/controlP5/#

I'm not sure, but G4P might also support tabs:

• http://www.lagers.org.uk/g4p/

James_Anderson

thanks @jeremydouglass i will check those links.

Chrisir

PImage textBox;

PFont font;

Button[] buttons;

int currentNPC=0; 

// ----------------------------------------------

void setup() {

  size(320, 288);
  smooth();
  textLeading(20);

  buttons = new Button[3];
  int index = 0;
  String[] names = {"N 1", "N 2", "N 3"};
  int unit = 60;

  for (int x = 0; x < 3; x++) {
    buttons[index++] = new Button(x*unit+6, 3, unit, 
      color(255, 0, 0), color(0, 255, 0), 
      x, 
      names[x]);
  }
}

void draw() {
  background(255);

  fill(255, 0, 0); 
  rect(0, 3+18, width, 3); 

  for (Button but : buttons) {
    but.update();
    but.display();
  }

  switch(currentNPC) {
  case 0:
    ellipse(52, 33, 16, 16);
    break;

  case 1:
    ellipse(133, 33, 6, 6);
    break;

  case 2:
    ellipse(33, 133, 6, 6);
    break;
  }
}

// ---------------------------------------------------------

void mousePressed() {
  for (Button but : buttons) {
    but.press();
    if (but.pressed) {
      // println(but.index);
      currentNPC=but.index;
      break; // Other buttons won't be pressed, just stop
    }
  }
}

void mouseReleased() {
  for (Button but : buttons) {
    but.release();
  }
}

//__________________________________________________//

class Button {

  int x, y; // The x- and y-coordinates
  int size; // Dimension (width and height)

  color baseGray; // Default gray value
  color pressGray; // Value when selected

  boolean over = false; // True when the mouse is over
  boolean pressed = false; // True when the mouse is over and pressed
  int index;
  String text; 

  // constructor 
  Button(int xp, int yp, 
    int s, 
    color b, 
    color p, 
    int index_, 
    String text_) {

    x = xp;
    y = yp;

    size = s;

    baseGray = b;
    //  overGray = o;
    pressGray = p;

    index=index_;

    text=text_;
  } // constructor 

  // Updates the over field every frame
  void update() {
    if ((mouseX >= x) && (mouseX <= x + size) &&
      (mouseY >= y) && (mouseY <= y + size)) {
      over = true;
    } else {
      over = false;
    }
  }

  boolean press() {
    if (over) {
      pressed = true;

      return true;
    } else {
      return false;
    }
  }

  void release() {
    pressed = false; // Set to false when the mouse is released
  }

  void display() {
    if (index==currentNPC) {
      fill(pressGray);
    } else {
      fill(baseGray);
    }
    stroke(255);
    rect(x, y, size, 18, 
      18, 18, 0, 0);
    fill (0); 
    text(text, x+5, y+14);
  }
}//class
//

James_Anderson

@Chrisir : thank you