Creating a Next Page button

edited December 2015 in How To...

hi,Is there anyway to create a multi paged application in an application with a next page button where the user can click and move to the next page.Sort of like the hyperlink of web pages..Please help



  • edited October 2013

    AFAIK, such GUIs can be made in any programming language! ;))
    You just need to set a variable apart to keep track which page is currently active.
    And of course, take diff. decisions based on it! :P

    As for starts, take a look at this post below for something similar to what you want:

    And here to test it online:$UbIWYZEDR/latest

  • @GoToLoop ....i don't quite get it ,this example in the link is about text boxes.I am not a really experienced programmer so i don't see the correlation.....Plus you said i should set a variable which will track active page.In processing , what is the active page ,there is one setup() and one draw().how do i make duplicates of these.Please be patient with me i know it might sound a bit stupid :) ....please could you just show me a snippet which has at least two pages where a user can click to the next...please.

  • edited October 2013

    ...could you just show me a snippet which has at least two pages where a user can click to the next...

    I've got none! b-(

    ... what is the active page...

    There's only 1. Although we can also make off-canvas w/ PGraphics. But you won't need such scheme.

    But what makes a "page" diff. from each other is the content you display.
    So for each value of "page", you draw a diff. GUI and check for diff. buttons and textboxes! [..]

  • @GoToLoop@calsin is there a method like clearScreen() to clean every thing from the screen and start the drawings for the next page?.I tried using background inside mousePressed() for specific coordinates of mouseX and mouseY to sort of create the Next Page button but it doesn't work

  • Function background() is the common procedure to clear whole canvas! /:)
    You just need to render the screen w/ a GUI corresponding to a "page" sorta variable! [-(

  • @GotoLoop I am sorry, i don't quite get the second sentence. I tried something like this but it does not work

    //i expect something like to wipe everything off and draw just a square on "mousePressed()"

    void mousePressed() { if(((mouseX>20)&&(mouseX<60)) &&((mouseY>30)&&(mouseY<90))) { background(255); rect(20,20,60,60); }

  • edited January 2020 Answer ✓

    I've had no choice but implement a model to show ya! :(|)

    You can check it online below:

    Any doubts about the code, don't fret to ask here! ^:)^

     * Multi Page Buttons (v1.7)
     * by GoToLoop (2013/Oct)
    static final int MAX = 2, GAP = 50, DIM = 120, RAD = DIM >> 1;
    int page, cx, cy;
    Button back, next;
    void setup() {
      size(600, 400);
      textAlign(CENTER, CENTER);
      cx = width  >> 1;
      cy = height >> 1;
      back = new Button("BACK", GAP, height - Button.H - GAP);
      next = new Button("NEXT", width - Button.W - GAP, height - Button.H - GAP);
    void draw() {
      text("Page #" + page, cx, cy);
      if (page > 0)    back.display();
      if (page < MAX)  next.display();
      method("page" + page); // Works on Java Mode only!
      //pageSelector();        // Workaround for PJS. But works on Java Mode as well!
    void mousePressed() {
      if      (page > 0   && back.isHovering)  --page;
      else if (page < MAX && next.isHovering)  ++page;
    void mouseMoved() {
    void page0() {
      ellipse(cx, GAP*2, DIM, DIM);
    void page1() {
      rect(cx - RAD, GAP*2 - RAD, DIM, DIM);
    void page2() {
      triangle(cx, GAP*2 - RAD, cx - RAD, GAP*2 + RAD, cx + RAD, GAP*2 + RAD);
    void pageSelector() { // Replaces method("") for PJS
      switch(page) {
      case 0: 
      case 1: 
      case 2: 
    class Button {
      static final int W = 60, H = 40, TXTSZ = 020;
      static final color BTNC = #00A0A0, HOVC = #00FFFF, TXTC = 0;
      final String label;
      final int x, y, xW, yH;
      boolean isHovering;
      Button(String txt, int xx, int yy) {
        label = txt;
        x = xx;
        y = yy;
        xW = xx + W;
        yH = yy + H;
      void display() {
        fill(isHovering? HOVC : BTNC);
        rect(x, y, W, H);
        text(label, x + W/2, y + H/2);
      boolean isInside() {
        return isHovering = mouseX > x & mouseX < xW & mouseY > y & mouseY < yH;
  • @GoToLoop I finally get it...thanks a lot for your patience ,really thanks :)!

  • edited August 2014

    what does this mean?

    final static int MAX = 2, GAP = 50, DIM = 120, RAD = DIM >> 1;
     method("page" + page); // Java only!
      //pageSelector();        // For JS!

    i dont understand what the case is for: :<

    void pageSelector() {
      switch(page) {
      case 0:
      case 1:
      case 2:

    ** can you also let me understand how did you make the class?**

    sorry im really noob at this.. and im making a maze game for our project... the concept is like The MAZE game in

  • I let GoToLoop to explain why he uses >> 1...
    Otherwise, it just creates a number of constants, numeric values with explicit (more or less) names.

    case: see the Reference page on the switch statement.

  • edited August 2014

    Hello @hanakimchi! Here comes the 1st part: :D

    static final int MAX = 2, GAP = 50, DIM = 120, RAD = DIM >> 1;

    Those are constant fields, representing values that are set once & can't be changed later.
    In Java convention, they gotta be fully capitalized!
    And if composed by more than 1 word, separated by underlines like this: MAX_INT, TWO_PI, etc.

    The >> 1 is the same as an integer / 2:
    Highest performance & gr8 at enforcing an integer division in JS Mode!

  • edited August 2014

    method("page" + page); // Java only!

    It's an undocumented Processing function which allows invoking a method as a String name!
    It uses a "hackish" thing called reflection. There's also thread("") which does the same;
    but asynchronously executes it by instantiating another Thread on-the-fly!

    pageSelector(); // For JS!

    Since JS Mode doesn't implement neither method("") nor thread(""),
    I had to emulate the Java Mode's behavior via switch/case in a separate function:

    Actually, JS can emulate method("") via its "hackish" eval(""), call(), etc. functions:

    However I decided not to in order to keep it more in line w/ Java Mode!

  • edited August 2014

    Can you also let me understand how did you make the class?

    You gotta be more specific in which part within Button class you don't understand well! 8-X

  • For GoToLoop

    Can you talk more about method( ); ? I'm not sure to have understood and I can't find anything on the subject...

  • edited December 2015

    Hey @GameParticles! In P3, they've finally decided to turn thread() an official API:

    Though method() is still "hidden" from public, its usage is the same as thread()'s, but it's synchronous instead. It doesn't create a separate Thread in order to invoke the method's name specified by the passed String parameter. :-B

Sign In or Register to comment.