Animation on Tabs

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 ?

Answers

  • 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?

  • 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)

  • edited March 2017

    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 ?

  • thanks @jeremydouglass i will check those links.

  • Answer ✓
    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
    //
    
Sign In or Register to comment.