num0 可以用来 控制的函数
num 是用来显示长度的 用了map得到mun0 其他只写了5个 需要多的自己添加 在第一排加元素就好了
bx ：条的长度 by：条的宽度
x0 ，y0 ：起点位置
disy 两条之间的间隔
选择框和修改可用的方形间隔10 在code里面 没有建变量
c1 长条的背景色
c2可动长条的颜色
c3 鼠标位于上方时候的颜色
c4 // cus = c4, c4 = color(132,130,131), 删掉 我忘了删了
c5 最亮丽的颜色 不可用的时候

好人都是发车重来都不犹豫
String str[] = {"acc0","acc1","damp","loc0","loc1"};
int ds = str.length ;
boolean gray[] = new boolean [ds];
boolean inline[] = new boolean [ds];
boolean inlineY[] = new boolean [ds];
float num [] = new float [ds];
float num0[] = new float [ds];
color up1[] = new color [ds];
color bot[] = new color [ds];
int bx = 100,by = 12;
int x0 = 50,y0 = 10;
int disy = 20;
String str[] = {"acc0","acc1","damp","loc0","loc1"};
int ds = str.length ;
boolean gray[] = new boolean [ds];
boolean inline[] = new boolean [ds];
boolean inlineY[] = new boolean [ds];
float num [] = new float [ds];
float num0[] = new float [ds];
color up1[] = new color [ds];
color bot[] = new color [ds];
int bx = 100,by = 12;
int x0 = 50,y0 = 10;
int disy = 20;
int protect_lock = 0;
color c1 = color(0,105,140),
c2 = color(0,54,82),
c3 = color(255),
c4 = color(132,130,131),
c5 = color(128,0,128);
color cback = c1,
cnum = c2,
cgay = c3,
cus = c4,
cs = c5;
void setup(){
smooth();
size(800,500);
for (int i = 0;i<ds;i++){
gray[i] = false ;
up1 [i] = c2;
bot [i] = c2;
num [i] = random(0,100) ;
num0[i] = num [i] ;
}
}
void draw(){
drag();
background(127);
for(int i =0 ; i < str.length ; i++){
contrler(str[i],x0,y0+i*disy,gray[i],num[i],num0[i],i,up1[i]);
}
protect_lock -=1 ;
}
void contrler( String st1, int x,int y , boolean gra , float num , float num0 ,int who , color co) {
if (gra == false){
stroke(0);
fill (cback);
rect (x,y,bx,by);
fill (co);
noStroke();
rect (x+1,y+1,num,by-1);
stroke(0);
fill (bot[who]);
rect (x+bx+10,y,by,by);
textAlign(LEFT);
fill (255);
text (st1,x-40,y+10);
text (num0,x+10,y+10);
mouse_act(x,y,who);
}else{
stroke(0);
fill (c5);
rect (x,y,100,by);
stroke(125);
fill (125);
rect (x+120,y,by,by);
textAlign(LEFT);
text ("0.000",x-40,y+10);
stroke(0);
fill (bot[who]);
rect (x+bx+10,y,by,by);
fill (255);
text (st1,x-40,y+10);
mouse_act(x,y,who);
}
}
void mouse_act(int x, int y, int who){ //cau where the mouse is
if (mouseX>=x & mouseX<=x+bx){
if (mouseY>=y & mouseY<=y+by){
up1[who] = c5;
inline[who] = true ;
inlineY[who] = true ;
}else{
up1[who] = c2;
inline[who] = false ;
inlineY[who] = false;
}
inlineY[who] = false;
}else{
up1[who] = c2;
inline[who] = false ;
}
if (mouseX>=x+bx+10 & mouseX<=x+bx+10+by){
if (mouseY>=y & mouseY<=y+by){
if( mousePressed == true){
locked(who);
protect_lock = 25 ;
}
}
}
}
void locked(int who){
if (protect_lock <=0 ){
if (bot[who] == c2){
bot[who] = c5;
gray[who] = true ;
}else{
bot[who] = c2;
gray[who] = false;
}
}
}
void drag(){
if (mousePressed == true){
for (int i = 0 ; i<ds ; i++){
if (inline[i]){
num[i] = mouseX-x0;
num0[i] = map (mouseX-x0,0,bx,0,100);
}
}
}
}
int protect_lock = 0;
color c1 = color(0,105,140),
c2 = color(0,54,82),
c3 = color(255),
c4 = color(132,130,131),
c5 = color(128,0,128);
color cback = c1,
cnum = c2,
cgay = c3,
cus = c4,
cs = c5;
void setup(){
smooth();
size(800,500);
for (int i = 0;i<ds;i++){
gray[i] = false ;
up1 [i] = c2;
bot [i] = c2;
num [i] = random(0,100) ;
num0[i] = num [i] ;
}
}
void draw(){
drag();
background(127);
for(int i =0 ; i < str.length ; i++){
contrler(str[i],x0,y0+i*disy,gray[i],num[i],num0[i],i,up1[i]);
}
protect_lock -=1 ;
}
void contrler( String st1, int x,int y , boolean gra , float num , float num0 ,int who , color co) {
if (gra == false){
stroke(0);
fill (cback);
rect (x,y,bx,by);
fill (co);
noStroke();
rect (x+1,y+1,num,by-1);
stroke(0);
fill (bot[who]);
rect (x+bx+10,y,by,by);
textAlign(LEFT);
fill (255);
text (st1,x-40,y+10);
text (num0,x+10,y+10);
mouse_act(x,y,who);
}else{
stroke(0);
fill (c5);
rect (x,y,100,by);
stroke(125);
fill (125);
rect (x+120,y,by,by);
textAlign(LEFT);
text ("0.000",x-40,y+10);
stroke(0);
fill (bot[who]);
rect (x+bx+10,y,by,by);
fill (255);
text (st1,x-40,y+10);
mouse_act(x,y,who);
}
}
void mouse_act(int x, int y, int who){ //cau where the mouse is
if (mouseX>=x & mouseX<=x+bx){
if (mouseY>=y & mouseY<=y+by){
up1[who] = c5;
inline[who] = true ;
inlineY[who] = true ;
}else{
up1[who] = c2;
inline[who] = false ;
inlineY[who] = false;
}
inlineY[who] = false;
}else{
up1[who] = c2;
inline[who] = false ;
}
if (mouseX>=x+bx+10 & mouseX<=x+bx+10+by){
if (mouseY>=y & mouseY<=y+by){
if( mousePressed == true){
locked(who);
protect_lock = 25 ;
}
}
}
}
void locked(int who){
if (protect_lock <=0 ){
if (bot[who] == c2){
bot[who] = c5;
gray[who] = true ;
}else{
bot[who] = c2;
gray[who] = false;
}
}
}
void drag(){
if (mousePressed == true){
for (int i = 0 ; i<ds ; i++){
if (inline[i]){
num[i] = mouseX-x0;
num0[i] = map (mouseX-x0,0,bx,0,100);
}
}
}
}

可以用case 但是开始没有考虑那个方块
所以就用if 了
当然 控制条有插件 只是自己写出来练练手而已
有兴趣的用case 改一改吧 也可以拿出来分享下