Adding controls in Processing with ControlP5

ControlP5 is a library written for the Processing programming environment. It allows different controllers, like buttons and sliders, to be added on top of a Processing sketch.

Separate windows

First, let’s create a sketch with two windows, one for the main sketch and one for the controls.

Inside the Sketch folder, create two .pde files, Sketch.pde and Controls.pde.

In Controls.pde the Controls class extends PApplet. The size of the window is defined in the settings() function rather than the setup() function.

Controls.pde

public class Controls extends PApplet {
  void settings() {
    size(320, 240);
  }
  
  void setup() {
	}
  void draw() {
    background(100);
  }
  
}

Sketch.pde calls PApplet.runSketch() to run the controls sketch.

Sketch.pde

Controls controls;
void setup(){  
  size(640,480);
  
  String[] args = {"Controls window"};
  controls = new Controls();
  PApplet.runSketch(args, controls);  
}
void draw(){
  background(100);
}

The result so far is this.

Two separate windows, one for the main sketch and the other for controls

Adding controls

I will create a sketch with one shape on the screen at a time. I want to create a radio button so that the shape type can be selected. I also want to create a slider that will allow the user to set the amount of translation to apply to the shape.

In Controls.pde, ControlP5 is used to add a slider and a radio button.

ControlP5 needs to be added first before it can be imported.

Sketch > Import Library > Add Library

Search for ControlP5 in the Contribution Manager and install

Afterwards, go to Sketch > Import Library > ControlP5 to import the library.

Controls.pde

import controlP5.*;
public class Controls extends PApplet {
  ControlP5 cp5;
  
  //store the amount of translation selected by the user
  float translationX = 0;
  
  //store the selected shape choice
  int shape = 1;
  void settings() {
    size(320, 240);
  }
  
  void setup() {
    cp5 = new ControlP5(this);
    
    //create a group for the slider and radio button
    Group g1 = cp5.addGroup("g1")
                .setPosition(25,25)
                .setBackgroundHeight(175)
                .setWidth(275)
                .setBackgroundColor(color(255,50))
                .setLabel("Choices")
                ;      
    
    //create the slider
    cp5.addSlider("translationX") 
      .setPosition(25, 25)
      .setRange(-100, 100) //the range is from -100 to 100
      .setGroup(g1)
      .setLabel("X Translation")
      ;
     
    //create the radio button
    cp5.addRadioButton("shapeRadioButton")
	.setPosition(25,100)
	.setSize(40,20)
	.setGroup(g1)
	.setSpacingColumn(50)
	//add two choices
	.addItem("Rectangle",1)
	.addItem("Circle",2)
	//make Rectangle the initial choice
	.activate("Rectangle")
	;
             
  }
  void draw() {
    background(100);
  }
  
// the function shapeRadioButton will receive changes from 
// the controller with the name shapeRadioButton
  void shapeRadioButton(int a) {
    shape = a;
  }
  
}

Changing the sketch based on user choices

Now, the values from the controls can be used to change the outcome.

If the user selects item 1, then a rectangle should be drawn. Else if the user selects item 2, then a circle should be drawn.

The shape should be translated in the x direction based on the value of the slider.

Below, I use two of the ways of drawing a shape in Processing. One way is to use PShape. The other way is to use 2D primitives like circle().

Sketch.pde

Controls controls;
PShape rectangle;
void setup(){  
  size(640,480);
  
  //by default rectangles are drawn based on the position of their    
  //upper left corners but I want it to be based on their centers
  rectMode(CENTER); 
  //create a rectangle that is by default in the center of the                                         //screen and has width and height of 100
  rectangle = createShape(RECT, width/2, height/2, 100, 100);
  rectangle.setFill(color(200, 50, 50)); //fill with a reddish color
  rectangle.setStroke(false);  //no stroke
  
  
  String[] args = {"Controls window"};
  controls = new Controls();
  PApplet.runSketch(args, controls);  
}
void draw(){
  background(100);
  
  //translate based on the slider value
  translate(controls.translationX, 0);
  
  //draw a different shape based on user's selection
  switch(controls.shape) {
    case 1:
      shape(rectangle);
      break;
    case 2:
      //this has default stroke and fill since they are not set
      circle(width/2, height/2, 100);
      break;
  }  
}

The final result looks like this. The slider moves the shape horizontally across the screen. The radio button allows the shape type to be selected.

Selecting rectangle on radio button and setting the slider for translation to 100

Selecting circle on radio button and setting the slider for translation to -100

Feel free to reach out to me for a chat or if you have any questions/comments/suggestions :)