Processing ControlP5 example 1: user interface

Update 2017: I’ve published this first in 2010. However ControlP5 changed a lot. I’ve updated the examples to the recent 2.2.6 version. Also check the Github readme page of the library for some more straightforward examples.

For more styling options see my example 2 post.

ControlP5 is a GUI and controller library made by Andreas Schlegel. You can use it to easy add a GUI (Graphics User Interface) to your program. You can add ControlP5 from the library manager or download it at Github. After downloading und unpacking you can copy the library in the ‘libraries’ subfolder of the Processing sketches folder.

The library comes with a lot of examples, but it lacks a bit an overview how to use different elements together. In this article and example an overview of some basic GUI elements and how you can handle their events.

Download the zip-file ( with all the examples ) :

controlP5 basic interface elements
Bang : A bang controller triggers an event when pressed.
Button : A button executes after release.
Toggle : A toggle can have two states, true and false. Where true has the value 1 and false is 0.
Slider : A slider is either used horizontally or vertically. When the width is bigger, you get a horizontal slider. When the height is bigger, you get a vertical slider.
Knob : A round turning dial knob. Counts from 0-360 degrees.
NumberBox : Box that displays a number. You can change the value by click and hold in the box and drag the mouse up and down.

variables and setup

// ControlP5 Example 1 : Basic UI elements
import controlP5.*; // import controlP5 library
ControlP5 controlP5; // controlP5 object

// array to store 7 colors that can be changed by the different 
// user interface elements
color [] colors = new color[7]; 

void setup() {
 controlP5 = new ControlP5(this);
 // description : a bang controller triggers an event when pressed. 
 // parameters : name, x, y, width, height
 // description : a button executes after release
 // parameters : name, value (float), x, y, width, height
 // description : a toggle can have two states, true and false
 // where true has the value 1 and false is 0.
 // parameters : name, default value (boolean), x, y, width, height
 // description : a slider is either used horizontally or vertically.
 // width is bigger, you get a horizontal slider
 // height is bigger, you get a vertical slider. 
 // parameters : name, minimum, maximum, default value (float), x, y, width, height
 // description : round turning dial knob
 // parameters : name, minimum, maximum, default value (float, x, y, diameter
 // description : box that displays a number. You can change the value by 
 // click and hold in the box and drag the mouse up and down.
 // parameters : name, default value (float), x, y, width, height
void draw() { 
 background(0); // background black
 // draw 7 squares and use as a fill color the colors from the colors array
 for(int i=0;i<7;i++) { // loop through colors array
 fill(colors[i]); // use color to fill
 rect(10+(i*45),210,40,40); // draw rectangle


The function controlEvent is an event listener for all the user elements. In this case we only want to listen to controller events ( if(theEvent.isController()) ). By getting the name ( theEvent.getController().getName())) and the value (theEvent.getController().getValue()) ) of the event we can program some logic (if/else) and change some variables in Processing (in this case the values in the color[] array).

void controlEvent(ControlEvent theEvent) {
 /* events triggered by controllers are automatically forwarded to 
 the controlEvent method. by checking the name of a controller one can 
 distinguish which of the controllers has been changed.
 /* check if the event is from a controller otherwise you'll get an error
 when clicking other interface elements like Radiobutton that don't support
 the controller() methods
 if(theEvent.isController()) { 
 print("control event from : "+theEvent.getController().getName());
 println(", value : "+theEvent.getController().getValue());
 if(theEvent.getController().getName()=="bang1") {
 colors[0] = colors[0] + color(40,40,0);
 if(colors[0]>255) colors[0] = color(40,40,0); 
 if(theEvent.getController().getName()=="button1") {
 colors[1] = colors[1] + color(40,0,40);
 if(colors[1]>255) colors[1] = color(40,0,40);
 if(theEvent.getController().getName()=="toggle1") {
 if(theEvent.getController().getValue()==1) colors[2] = color(0,255,255);
 else colors[2] = color(0,0,0);
 if(theEvent.getController().getName()=="slider1") {
 colors[3] = color(theEvent.getController().getValue(),0,0);
 if(theEvent.getController().getName()=="slider2") {
 colors[4] = color(0,theEvent.getController().getValue(),0);
 if(theEvent.getController().getName()=="knob1") {
 colors[5] = color(0,0,theEvent.getController().getValue());
 if(theEvent.getController().getName()=="numberbox1") {
 colors[6] = color(theEvent.getController().getValue());

19 thoughts on “Processing ControlP5 example 1: user interface”

  1. Hey..

    I am stuck in my project and have some doubt regarding controlp5 library to develop GUI.

    I have put three temperature sensor in my three different rooms and what I want is to create a simple GUI where I can view status of all three rooms wirelessly at my remote PC.

    This processing program will be running at my remote PC.All d wireless connection is done.I have kept three different buttons as “ROOM1”, “ROOM2” and “ROOM3”.. What I want is when I click on “Room1” It sholud display me a box with temperature reading. Just I dnt know how to fire an event through button that it shows me some text field or label showing me reading.

    Rest all issues of having data at port is already done.

    pls help..:)


  2. Well do something in here:

    if(theEvent.controller().name()==”bang1″) {
    // do something here. Change a label or something.
    println(“my temperature”);

  3. About string comparaison in the controlEvent function. I noticed that you use ==. Even if it seems to work, I thought it should be better to use .equals(), as suggested in the reference file. It is reported that the equality only check if both strings “are stored in the same memory location”.

  4. I put two textfield in my sketch, but I need it to be setted to noloop, but because that, the control dont work, how I can solve this?

    thank you!

  5. You shouldn’t use noLoop(). You have to find a way to not update or change your contents in the draw loop. But since I don’t know your code I can’t give you specific advise right now. Maybe you can link your code (pastbin or something) so I see what your problem is.

  6. thank you, I try to dont use noloop, but how I need to be in a loop, and because its controls is to get the information for a user, so I only will drw what I need after the user pass these information, and so it will solve my problem.

  7. another question.
    if you figure out, I use a class, have a way to pass a bang to draw it inside of my class?


  8. Im can use tab or enter to navigate beween controlers?
    And How I can set another mouse cursor?

    thank you.

  9. Im Solved that, my friend, its so simple, I put my loop to draw my object in another function out of the draw() function.
    it ok now.

  10. its dont is necessary in this moment, boot the question is still open.

  11. Hi Kasper

    i am using this library and i am having problem returning the value of knob to the draw() function. Each time user turns the knob a value is there when i try to print that value in within the speed function. but i am unable to pass it to the draw(). Pls help

    import controlP5.*;

    int speedData;

    int knobeventdata;

    Knob myKnobB;

    ControlP5 cp5;

    void setup()



    cp5 = new ControlP5(this);

    myKnobB = cp5.addKnob(“SPEED”)









    .setColorBackground(color(0, 160, 100))





    void draw()


    speedData=SPEED( knobeventdata);



    void keyPressed()






    case 0:

    println(“speed is zero”);


    case 127:

    println(“speed is 127”);


    case 255:

    println(“speed is 255”);





    int SPEED(int valKnob) {


    return valKnob;


  12. How can I change size of text (e.g. position of slider) and orientation of app?

  13. Kasper,

    Great library! Thanks for sharing. I was wondering if you had plans to expand it perhaps with a text box, and or dialog box? Also is there a way to change the colors? Sorry if these questions have obvious answers I am very new to Processing.


  14. Hi Casper how would I create a button to load a primitive shape and another button to save any changes made to the shape on a canvas using controlp5

  15. Thank you for the great articles.

    is it possible to create and allocate sliders with arrays, so that I could add say 35 sliders with index values.

    like to do this:

    for x = 0 to 34

    Sorry for this syntax but I cannot think how to write it.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.