Skip to content

Instantly share code, notes, and snippets.

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

Embed
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: https://vimeo.com/106860129
//ControlP5 Slider Example
//Natalie Freed for Art and Science of Computing Fall 2014
//Sept. 2014
//See video tutorial at: https://vimeo.com/106860129
//Uses slider parameters from Pompomatic 3000 v. 1.0, which can be found at
//https://gist.github.com/nataliefreed/7a4169138895e00d1a68
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);
rectMode(CENTER);
noFill();
stroke(255);
addSliders();
}
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.
drawBoxLid(boxLidWidth);
}
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
cp5.addSlider("widthSlider")
.setBroadcast(false)
.setPosition(100, height-200)
.setSize(400, 15)
.setRange(0, width)
.setValue(boxLidWidth)
.setLabel("Width of box lid in pixels")
.setSliderMode(Slider.FLEXIBLE)
.setBroadcast(true)
.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.