Step-by-step tutorial

The following tutorial will guide you into building your first NextText sketch. The final result will be the following applet.

The first thing we need to do is set up the basic structure of the sketch. This means adding the setup() and draw() functions, but also importing the NextText library. This is done by selecting Sketch/Import Library/nexttext in the Processing menu. We will also set up the window size and set the background to black.
See Applet 1.

	import net.nexttext.behaviour.dform.*;
    import net.nexttext.behaviour.*;
    import net.nexttext.behaviour.control.*;
    import net.nexttext.behaviour.physics.*;
    import net.nexttext.renderer.*;
    import net.nexttext.*;
    import net.nexttext.property.*;
    import net.nexttext.behaviour.standard.*;
    import net.nexttext.input.*;

    void setup() {
      size(700, 240);
      smooth();
    }

    void draw() {
      background(0);
    }

Next, we will instantiate the Book and tell it to update itself in the draw loop.
See Applet 2.

    import net.nexttext.behaviour.dform.*;
    import net.nexttext.behaviour.*;
    import net.nexttext.behaviour.control.*;
    import net.nexttext.behaviour.physics.*;
    import net.nexttext.renderer.*;
    import net.nexttext.*;
    import net.nexttext.property.*;
    import net.nexttext.behaviour.standard.*;
    import net.nexttext.input.*;

    // global attributes
    Book book;

    void setup() {
      size(700, 240);
      smooth();

      // create the Book
      book = new Book(this);
    }

    void draw() {
      background(0);
      book.stepAndDraw();
    }

We then load and set the font and build the TextObjects for the word “NextText”. The createFont() function will look in the list of font installed on your system to find the specified font, here “Arial”. It is also possible to create the font from a .ttf file placed in the sketch folder, in that case, you should specific the whole filename (e.g. “fontname.ttf”).
See Applet 3.

    import net.nexttext.behaviour.dform.*;
    import net.nexttext.behaviour.*;
    import net.nexttext.behaviour.control.*;
    import net.nexttext.behaviour.physics.*;
    import net.nexttext.renderer.*;
    import net.nexttext.*;
    import net.nexttext.property.*;
    import net.nexttext.behaviour.standard.*;
    import net.nexttext.input.*;

    // global attributes
    Book book;
    PFont font;

    void setup() {
      size(700, 240);
      smooth();

      // create the Book
      book = new Book(this);

      // load and set the font
      font = createFont("Arial", 48);
      textFont(font);
      textAlign(CENTER);
      fill(255);
      stroke(96);
      strokeWeight(5);

      // build the text
      book.addText("NextText", width/2, height/2);
    }

    void draw() {
      background(0);
      book.stepAndDraw();
    }

We now create the follow mouse Behaviour. We will do this by setting the mouse as the target of a MoveTo. We will wrap the MoveTo in a Repeat so that the TextObjects keep moving and follow the mouse continuously.
See Applet 4.

    import net.nexttext.behaviour.dform.*;
    import net.nexttext.behaviour.*;
    import net.nexttext.behaviour.control.*;
    import net.nexttext.behaviour.physics.*;
    import net.nexttext.renderer.*;
    import net.nexttext.*;
    import net.nexttext.property.*;
    import net.nexttext.behaviour.standard.*;
    import net.nexttext.input.*;

    // global attributes
    Book book;
    PFont font;

    void setup() {
      size(700, 240);
      smooth();

      // create the Book
      book = new Book(this);

      // load and set the font
      font = createFont("Arial", 48);
      textFont(font);
      textAlign(CENTER);
      fill(255);
      stroke(96);
      strokeWeight(5);

      // create the follow mouse Behaviour
      AbstractAction follow = new Repeat(new MoveTo(Book.mouse, 1), 0);
      Behaviour followBehaviour = follow.makeBehaviour();
      book.addGlyphBehaviour(followBehaviour);

      // build the text
      book.addText("NextText", width/2, height/2);
    }

    void draw() {
      background(0);
      book.stepAndDraw();
    }

The last example had a problem. If the glyphs ever reach the mouse, they all overlap each other and stay that way even if they start moving again. The text becomes unreadable. This is because since all glyphs move in the same direction at the same speed, once they are at the same position, they will stay on top of one another. In order to fix this, we will give them a gradually increasing speed. This will result in them always staying behind one another when they are moving.
See Applet 5.

    import net.nexttext.behaviour.dform.*;
    import net.nexttext.behaviour.*;
    import net.nexttext.behaviour.control.*;
    import net.nexttext.behaviour.physics.*;
    import net.nexttext.renderer.*;
    import net.nexttext.*;
    import net.nexttext.property.*;
    import net.nexttext.behaviour.standard.*;
    import net.nexttext.input.*;

    // global attributes
    Book book;
    PFont font;
    String word = "NextText";

    void setup() {
      size(700, 240);
      smooth();

      // create the Book
      book = new Book(this);

      // load and set the font
      font = createFont("Arial", 48);
      textFont(font);
      textAlign(CENTER);
      fill(255);
      stroke(96);
      strokeWeight(5);

      // create the follow mouse Behaviour
      AbstractAction follow;
      Behaviour followBehaviour;
      for (int i=0; i < word.length(); i++) {
        // instantiate and add the Behaviour
        follow = new Repeat(new MoveTo(Book.mouse, i+1), 0);
        followBehaviour = follow.makeBehaviour();
        book.addGlyphBehaviour(followBehaviour);

        // build the text
        book.addText(word.substring(i, i+1), width/2, height/2);

        // remove the Behaviour so that it it not applied to the rest of the Book
        book.removeGlyphBehaviour(followBehaviour);
      }
    }

    void draw() {
      background(0);
      book.stepAndDraw();
    }

That’s pretty good but there is something else we can fix. When the mouse moves off the applet, the glyphs keep following and eventually fly out of the canvas. We can use a StayInWindow to solve this which makes the glyphs stick to the edges of the applet.
See Applet 6.

    import net.nexttext.behaviour.dform.*;
    import net.nexttext.behaviour.*;
    import net.nexttext.behaviour.control.*;
    import net.nexttext.behaviour.physics.*;
    import net.nexttext.renderer.*;
    import net.nexttext.*;
    import net.nexttext.property.*;
    import net.nexttext.behaviour.standard.*;
    import net.nexttext.input.*;

    // global attributes
    Book book;
    PFont font;
    String word = "NextText";

    void setup() {
      size(700, 240);
      smooth();

      // create the Book
      book = new Book(this);

      // load and set the font
      font = createFont("Arial", 48);
      textFont(font);
      textAlign(CENTER);
      fill(255);
      stroke(96);
      strokeWeight(5);

      // create and add the stay in window Behaviour
      AbstractAction stayInWindow = new StayInWindow(this);
      Behaviour stayInWindowBehaviour = stayInWindow.makeBehaviour();
      book.addGlyphBehaviour(stayInWindowBehaviour);

      // create the follow mouse Behaviour
      AbstractAction follow;
      Behaviour followBehaviour;
      for (int i=0; i < word.length(); i++) {
        // instantiate and add the Behaviour
        follow = new Repeat(new MoveTo(Book.mouse, i+1), 0);
        followBehaviour = follow.makeBehaviour();
        book.addGlyphBehaviour(followBehaviour);

        // build the text
        book.addText(word.substring(i, i+1), width/2, height/2);

        // remove the Behaviour so that it it not applied to the rest of the Book
        book.removeGlyphBehaviour(followBehaviour);
      }
    }

    void draw() {
      background(0);
      book.stepAndDraw();
    }

We can still make this better. Instead of having the letters just stick to the edges, it would be more interesting if they moved back towards the center of the applet. We can use a ChaosPull, which pulls the TextObjects and deforms them erratically. We will use an OnMouseOverApplet condition to determine which Actions to perform: follow the mouse when it is over the applet, or chaos pull to the middle when the mouse is off the applet.
See Applet 7.

    import net.nexttext.behaviour.dform.*;
    import net.nexttext.behaviour.*;
    import net.nexttext.behaviour.control.*;
    import net.nexttext.behaviour.physics.*;
    import net.nexttext.renderer.*;
    import net.nexttext.*;
    import net.nexttext.property.*;
    import net.nexttext.behaviour.standard.*;
    import net.nexttext.input.*;

    // global attributes
    Book book;
    PFont font;
    String word = "NextText";

    void setup() {
      size(700, 240);
      smooth();

      // create the Book
      book = new Book(this);

      // load and set the font
      font = createFont("Arial", 48);
      textFont(font);
      textAlign(CENTER);
      fill(255);
      stroke(96);
      strokeWeight(5);

      // create and add the stay in window Behaviour
      AbstractAction stayInWindow = new StayInWindow(this);
      Behaviour stayInWindowBehaviour = stayInWindow.makeBehaviour();
      book.addGlyphBehaviour(stayInWindowBehaviour);

      // create the chaos pull Action
      AbstractAction chaosPull = new ChaosPull(new Vector3(350, 120));

      // create the follow mouse Behaviour
      AbstractAction follow;
      AbstractAction followOrPullBack;
      Behaviour followOrPullBackBehaviour;
      for (int i=0; i < word.length(); i++) {
        // instantiate the follow mouse Action
        follow = new Repeat(new MoveTo(Book.mouse, i+1), 0);

        // instantiate and add the follow mouse or chaos pull to center Behaviour
        followOrPullBack = new OnMouseOverApplet(this, follow, chaosPull);
        followOrPullBackBehaviour = followOrPullBack.makeBehaviour();
        book.addGlyphBehaviour(followOrPullBackBehaviour);

        // build the text
        book.addText(word.substring(i, i+1), width/2, height/2); 

        // remove the Behaviour so that it it not applied to the rest of the Book
        book.removeGlyphBehaviour(followOrPullBackBehaviour);
      }
    }

    void draw() {
      background(0);
      book.stepAndDraw();
    }

That’s a nice effect, but after playing with the applet a little, we cannot read the text anymore since the ChaosPull deforms it. We can use a Reform whenever the glyphs follow the mouse so that the text becomes readable again. To combine both Actions together, we will put them in a Multiplexer.
See Applet 8.

    import net.nexttext.behaviour.dform.*;
    import net.nexttext.behaviour.*;
    import net.nexttext.behaviour.control.*;
    import net.nexttext.behaviour.physics.*;
    import net.nexttext.renderer.*;
    import net.nexttext.*;
    import net.nexttext.property.*;
    import net.nexttext.behaviour.standard.*;
    import net.nexttext.input.*;

    // global attributes
    Book book;
    PFont font;
    String word = "NextText";

    void setup() {
      size(700, 240);
      smooth();

      // create the Book
      book = new Book(this);

      // load and set the font
      font = createFont("Arial", 48);
      textFont(font);
      textAlign(CENTER);
      fill(255);
      stroke(96);
      strokeWeight(5);

      // create and add the stay in window Behaviour
      AbstractAction stayInWindow = new StayInWindow(this);
      Behaviour stayInWindowBehaviour = stayInWindow.makeBehaviour();
      book.addGlyphBehaviour(stayInWindowBehaviour);

      // create the chaos pull Action
      AbstractAction chaosPull = new ChaosPull(new Vector3(350, 120));

      // create the reform Action
      AbstractAction reform = new Reform();

      // create the follow mouse Behaviour
      AbstractAction follow;
      Multiplexer followAndReform;
      AbstractAction followOrPullBack;
      Behaviour followOrPullBackBehaviour;
      for (int i=0; i < word.length(); i++) {
        // instantiate the follow mouse Action
        follow = new Repeat(new MoveTo(Book.mouse, i+1), 0);

        // instantiate and set the follow mouse and reform Multiplexer
        followAndReform = new Multiplexer();
        followAndReform.add(follow);
        followAndReform.add(reform);

        // instantiate and add the follow mouse or chaos pull to center Behaviour
        followOrPullBack = new OnMouseOverApplet(this, followAndReform, chaosPull);
        followOrPullBackBehaviour = followOrPullBack.makeBehaviour();
        book.addGlyphBehaviour(followOrPullBackBehaviour);

        // build the text
        book.addText(word.substring(i, i+1), width/2, height/2); 

        // remove the Behaviour so that it it not applied to the rest of the Book
        book.removeGlyphBehaviour(followOrPullBackBehaviour);
      }
    }

    void draw() {
      background(0);
      book.stepAndDraw();
    }