Processing ControlP5 example 2: Style and setValue

In this follow up article (Processing ControlP5 example 1) an example on how to style (font, color) the ControlP5 interface elements and how to set their values, so you can use them also to monitor variables.

Updated code in 2017 to work with the version 2.2.6 of ControlP5.

In this example you’ll see how to style the GUI that you’ve made with the ControlP5 library (see first article : Processing ControlP5 example 1: user interface for the basics.)

controlP5 styling interface elements

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

This example is pretty straight forward. You give some style the controlP5 object with the ‘ControlFont’ and ‘setColor….’ methods.

In the controlEvent function we use the values of some control elements to control the value of others. The setValue method is useful when you want to monitor variables in a visual way.

  • Slider1 controls Slider2.
  • Bang1 sets Toggle1 to 1 (on/true).
  • Button1 sets Toggle1 to 0 (off/false).
  • Numberbox1 controls Knob1.

Buy Me a Coffee at ko-fi.comWas this article useful to you? Buy me a coffee!

4 thoughts on “Processing ControlP5 example 2: Style and setValue”

  1. ¿Can you add image in background for one listBox.?

    Now I have this: setBackgroundColor(color(100,0,0));

    But I want a image and not a background color.

    Sorry for my bad english.Thanks

  2. Hi, how do i make differents sizes of fonts for my buttoms? I set only size but i can’t do it for other buttoms in the same scketch. All buttoms are the same size that the first buttom. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

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