Processing ControlP5 library example 1 : user interface

ControlP5 is a GUI and controller library for Processing. You can easy add controllers to your program. You can download the ControlP5 library at the site of Andreas Schlegel. 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. See the sketch in action at openprocessing.org.
Download the zip-file ( with all the examples ) : controlP5-examples.zip

controlP5 basic interface elements

Element Description
Bang : A bang controller triggers an event when pressed.
parameters : name, x, y, width, height
[cci_processing]controlP5.addBang(“bang1″,10,10,20,20);[/cci_processing]
Button : A button executes after release.
parameters : name, value (float), x, y, width, height
[cci_processing] controlP5.addButton(“button1″,1,70,10,60,20);[/cci_processing]
Toggle : 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
[cci_processing]controlP5.addToggle(“toggle1″,false,170,10,20,20);[/cci_processing]
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.
parameters : name, minimum, maximum, default value (float), x, y, width, height [cci_processing]controlP5.addSlider(“slider2″,0,255,128,70,80,100,10);[/cci_processing]
Knob : A round turning dial knob. Counts from 0-360 degrees.
parameters :name, minimum, maximum, default value (float, x, y, diameter
[cci_processing]controlP5.addKnob(“knob1″,0,360,0,70,120,50);[/cci_processing]
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.
parameters : name, default value (float), x, y, width, height
[cci_processing]controlP5.addNumberbox(“numberbox1″,50,170,120,60,14);[/cci_processing]

variables and setup

The draw() loop

In the draw loop you don’t have to do anything with the controlP5 elements, since you’ve added them already in the setup() function. In the draw-loop the rectangles are draw, with the color value from the colors[] array. The values in the colors[] array are modified by the controller events.

controlEvent

The function controlEvent is an event listener for all the user elements. In this case we only want to listen to controller events ( [cci_processing]if(theEvent.isController()) [/cci_processing] ). By getting the name ( [cci_processing]theEvent.controller().name()) [/cci_processing] ) and the value ( [cci_processing]theEvent.controller().value()) [/cci_processing] ) 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 ).