Colour

Greyscale Picker Helper

This is the same as the Color picker – it only has one value in the fill() and stroke() commands – 0 – black – 255 = white


/* Nice and simple Greyscale picker */

slideBar[] controls;
PFont maTypo;
 
void setup(){
  size(500,420);
  // creating a type using arial
  maTypo=createFont("arial",10, false);
  textFont(maTypo,10);
  // instancing of the three slidebars
  controls=new slideBar[1];
  controls[0] = new slideBar(10,30,300,26,0,255);
  
}
 
void draw(){
  
  background(0);
  fill(controls[0].val);
  rect(10,100,480,300);
  
  for(int a=0;a<controls.length;a++){
    controls[a].dessine();
  }
  
  text("Use Slider to Select Greyscale", 350, 30);
  
  String text;
  
  text = str(int(controls[0].val)  ) ;
  text("fill(" + text + ");", 350, 60);
  text("stroke(" + text + ");", 350, 80);
}
 
void mouseReleased(){
  for(int a=0;a<controls.length;a++){
    controls[a].lache();
  }
}

// quick and dirty slidebar
// instance as :
// new slideBar(x,y,width,height,minimum value, maximum value);
// the output will be stuck in (mySlidebar).val

class slideBar{
  int x,y,h,l;
  float mi,  ma, val,pos,tot;
  boolean caught;
  slideBar(int _x, int _y, int _l, int _h, float _mi, float _ma){
    x=_x; 
    y=_y;
    h=_h;
    l=_l;
    mi=_mi;
    ma=_ma;
    val=0;
    tot= (ma-mi)/l; 
    caught=false;
    pos=0;
  }
  void dessine(){
    if(mousePressed ){
      if(mouseX>x && mouseX<x+l && mouseY>y && mouseY<y+h){
        caught=true;
      } 
      if(caught){
        pos=constrain(mouseX, x, x+l);
        val =  (pos-x)*tot  ; 
        // tell the others to drop
        for(int a=0;a<controls.length;a++){
          if (controls[a] != this){
            controls[a].caught=false;
          }
        }
      }
    }
    fill(255);
    rect(x,y,l,h);
    line(pos,y,pos,y+h);
    int vvv = int(val);
    //fill(255-controls[0].val,255-controls[1].val,255-controls[2].val);
    
    fill(255);
    text(vvv, x+l+10, y+10);
  } 
  void lache(){
    caught=false;
  }
} 

Colour Picker Helper

Use this sketch to be able to select a colour and see what the fill and stroke command should look like


/* Nice and simple Colour picker */

slideBar[] controls;
PFont maTypo;

void setup(){
  size(500,420);
  // creating a type using arial
  maTypo=createFont("arial",10, false);
  textFont(maTypo,10);
  // instancing of the three slidebars
  controls=new slideBar[3];
  controls[0] = new slideBar(10,10,300,16,0,255);
  controls[1] = new slideBar(10,30,300,16,0,255);
  controls[2] = new slideBar(10,50,300,16,0,255);
}

void draw(){

  background(0);
  fill(controls[0].val,controls[1].val,controls[2].val);
  rect(10,100,480,300);

  for(int a=0;a<controls.length;a++){
    controls[a].dessine();
  }

  text("Use Sliders to Select Colours", 350, 30);

  String text;

  text = str(int(controls[0].val)) + "," + str(int(controls[1].val)) + "," + str(int(controls[2].val)) ;
  text("fill(" + text + ");", 350, 60);
  text("stroke(" + text + ");", 350, 80);
}

void mouseReleased(){
  for(int a=0;a<controls.length;a++){     controls[a].lache();   } } class slideBar{   int x,y,h,l;   float mi,  ma, val,pos,tot;   boolean caught;   slideBar(int _x, int _y, int _l, int _h, float _mi, float _ma){     x=_x;      y=_y;     h=_h;     l=_l;     mi=_mi;     ma=_ma;     val=0;     tot= (ma-mi)/l;      caught=false;     pos=0;   }   void dessine(){     if(mousePressed ){       if(mouseX>x && mouseX<x+l && mouseY>y && mouseY<y+h){
        caught=true;
      }
      if(caught){
        pos=constrain(mouseX, x, x+l);
        val =  (pos-x)*tot  ;
        // tell the others to drop
        for(int a=0;a<controls.length;a++){
          if (controls[a] != this){
            controls[a].caught=false;
          }
        }
      }
    }
    fill(255);
    rect(x,y,l,h);
    line(pos,y,pos,y+h);
    int vvv = int(val);
    //fill(255-controls[0].val,255-controls[1].val,255-controls[2].val);

    fill(255);
    text(vvv, x+l+10, y+10);
  }
  void lache(){
    caught=false;
  }
}