Skip to content

Instantly share code, notes, and snippets.

@nataliefreed nataliefreed/sliderExample.pde Secret
Last active Aug 29, 2015

What would you like to do?
How to use sliders from the ControlP5 library for Processing to dynamically change on-screen designs. + how to use background colors. + where to look up more ControlP5 features. See video tutorial at:
//ControlP5 Slider Example
//Natalie Freed for Art and Science of Computing Fall 2014
//Sept. 2014
//See video tutorial at:
//Uses slider parameters from Pompomatic 3000 v. 1.0, which can be found at
import controlP5.*;
ControlP5 cp5;
//this global variable is used to update the current box lid width
int boxLidWidth = 10;
void setup()
size(650, 750);
cp5 = new ControlP5(this);
void draw()
background(15, 160, 49);
//this line of code is the key to a dynamically updating
//box lid drawing. Each frame draws the box lid based on
//the most recent value of the boxLidWidth variable.
void drawBoxLid(int w)
rect(width/2, height/3, w, 50);
//This function is automatically called whenever the widthSlider slider is moved,
//and the value of the slider passed in.
//The name of the function must match the name of the slider.
void widthSlider(int val)
boxLidWidth = val;
void addSliders()
//add the outer diameter slider
.setPosition(100, height-200)
.setSize(400, 15)
.setRange(0, width)
.setLabel("Width of box lid in pixels")
.getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0).setFont(createFont("Arial", 12)).toUpperCase(false).setColor(0)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.