Processing.js Slider Class
A simple slider class written for Processing.js applications.
Code
/*
** Processing Slider Class Demo
** © 2011 Joseph Gray - http://grauwald.com
** License: http://creativecommons.org/licenses/by-nc-sa/3.0/
*/
Slider slider1 = new Slider(20, 20, 360, 20, "Slide Me");
float r; // circle radius
void setup() {
size(400, 400);
smooth();
background(255);
slider1.value = .5;
}
void draw() {
// background
fill(255, 16);
strokeWeight(1);
stroke(196);
rect(1,1,width-2,height-2);
// render circle first
fill(64);
ellipseMode(CENTER);
ellipse(width*.5, height*.5, r, r);
// slider.update() renders slider and
// returns float in the 0 to 1 range
float value = slider1.update();
r = value*width;
}
// slider class
class Slider {
float x, y, w, h, cx;
float m = 10;
String label;
float value;
Slider(float _x, float _y, float _w, float _h, String _label) {
x = _x;
y = _y;
w = _w;
h = _h;
label = _label;
value = .5;
}
float update() {
if (mouseX >= x && mouseX <= x+w && mouseY >= y-m && mouseY <= y+h+m ) {
if(mousePressed) {
value = (mouseX-x)/w;
}
}
render();
return(value);
}
void render() {
strokeWeight(1);
// slider area
stroke(196);
fill(64);
rect(x, y, w, h);
// cursor
cx = value*w;
stroke(128);
fill(255);
rect(x+cx, y, 3, h);
// label
fill(196);
text(label, x+5, y+15);
}
}
