Processing (P5) Guides

This page will feature a list of programming guides for using the language Processing (processing.org). I’ll show you how to do some of the tricks I’ve learned from working with it. Note that not all of these are difficult to do, but they’re useful if you’ve never used these tricks or have been wondering if there was a way to do something. Also, the short word for “Processing” is “P5”.

Style Pushing (Simple)

This trick is used when you are performing rendering from different objects/tabs in P5. This avoids two problems: 1) Having to reset style tags such as strokeWeight, stroke (colour), fill (colour), etc. to their original states. 2) Forgetting to reset those states and then having random rendering issues such as all lines turning blue when you expected them to be black.

To use this trick, just wrap these tags around all of your style rendering code:

pushStyle();

..

popStyle();

Object Picking  in 2D and 3D (Involved)

This trick is used when you have a complicated P5 sketch and you want to be able to select items using the mouse. The simple/naive way of doing this is to just use rectangles to represent your items and detect if the mouse coordinates are within them. This is only fine if your sketch is only 2D and will not be scrolling past the initial view. This technique is one approach to allow object selection. Note that I did learn this trick from someplace else so my code example will be similar to wherever I learned it from. I will try to link to that source once I track it down.

Create a screen buffer

First we must create a selection buffer which we will use to represent the positions of your scene objects. This is required since your objects may be complicated; for example, you don’t want all of the GUI widget to be clickable, just the header frame.

// width/height are sketch-width variables
// Use P3D if you are using a 3D sketch
PGraphics buffer = createGraphics( width, height, P2D );

Use objects with identifiers

To differentiate between each scene object, we need to assign them an ID. For this example we will only be drawing one or two objects, but in your program you will need to factor this into your design. One way to do this is create a class for all scene objects which has an “id” variable.

We will use this ColorIndex class for assigning identifiers to the selection buffer. I will explain this later so just humour me right now. Also, this class was directly taken from another source since it worked so well.

public static class ColourIndex
{
    static int getId( color value ){
      return -(value + 2);
    }

    static int getColor( int value ){
      return -(value + 2);
    }
}// class ColourIndex

Mouse click event

For this example, we will just detect the selection on a mouse click. You could implement something similar for mouse dragged events or double click events.

void mousePressed( ){
  int selectedId = bufferSelection();

  if( selectedId > 0){
  // Do something meaningful
  }
}

Selection Buffer Drawing

Now we will create our “bufferSelection” function which will draw our scene objects to the buffer.

int bufferSelection( ){
  buffer.beginDraw();    // Need this to actually draw
  buffer.background(ColourIndex.getColor(-1));      // Need this to ensure that the background isn't selectable

  // Perform translations and scaling if you require it on the buffer object
  buffer.noStroke();  // Don't want outlines
  buffer.fill( ColourIndex.getColor( 1 ) );    // Assign an ID tag of 1 for this object
  buffer.rect( 0, 0, 50, 50 );    // This is just a sample rectangle
  buffer.endDraw();  // Need this

  // Finally, we want to return the id of the scene object under the mouse
  return ColourIndex.getId( buffer.get( mouseX, mouseY ) );
}

Timer Object

This code will let you do animation in Processing very easily. I wrote this a long time ago so I can’t really think of where I figured out how it works. Anyway, to use it you instantiate the Timer object with the tick rate. Then in your draw function you call the “tick” function. If it returns true, you do something interesting.

public class Timer {
    boolean alive = true;
    int rate = 100;
    float lastTime;

    Timer(){
       this( 100 ); 
    }
    Timer( int rate ){
        this.rate = rate;
    }
    void setEnabled( boolean alive ){
        this.alive = alive;
    }
    void setRate( int rate ){
        this.rate = rate;
    }
    boolean tick(){
        if( !alive ) return false;
        float time = millis();
        if( time - lastTime > rate ){
            lastTime = time;
            return true;
        }
        return false;
    }
}// class Timer

2D-in3D Sprite Billboards (Very Involved)

<Under Construction>