int gridcount=48;
int grid=int(pow(gridcount,2));
int pixelsize= 2;
int fixer=gridcount*pixelsize;
int margin = 20;
int select = 1;
int inputSelect = 0;

float temp1;
float temp2;
float hew;
float lum;
float sat;
int movement;

int[] xpos = new int[grid];
int[] ypos = new int[grid];

Button LSbutton, LHbutton, HSbutton;
HSlider HueSlider, SatSlider;
VSlider LumSlider;


void setup() {
  size(530,300);
  noSmooth();
  
  
  
  int selectThis = 1;  
  // define and create buttons: inputSelect, xpos, ypos, size, selection value
  int buttonsx = margin*3+fixer*2;
  int buttonssize = 20;

  LSbutton = new Button(selectThis,buttonsx-30,margin*2+fixer*2,buttonssize,1);
  selectThis ++;
  LHbutton = new Button(selectThis,buttonsx-30,margin*4+fixer*2,buttonssize,2);
  selectThis ++;
  HSbutton = new Button(selectThis,buttonsx,fixer*2,buttonssize,3);
  selectThis ++;

  // define and create horizontal sliders: xpos, ypos, length, width,  value, inputSelect,
  int slidersx = 20;
  int slidersLength = gridcount*pixelsize*2;
  int slidersWidth = 10;
  
  HueSlider = new HSlider(selectThis, slidersx, margin*2+fixer*2, slidersLength, slidersWidth, random(1) );
  selectThis ++;
  SatSlider = new HSlider(selectThis, slidersx, margin*4+fixer*2, slidersLength, slidersWidth, random(1) );  
  selectThis ++;

  // define and create horizontal sliders: xpos, ypos, length, width,  value, inputSelect
  
  LumSlider = new VSlider(selectThis, margin*2+fixer*2, margin, slidersLength, slidersWidth, random(1) );
  selectThis ++;
  
}






void draw () {


  background(220); 

  LSbutton.display();
  LHbutton.display();
  HSbutton.display();

  HueSlider.display();
  SatSlider.display();

  LumSlider.display();





  translate(margin,fixer/2+margin);
  
  // background guide lines
  
  fill(210);
  stroke(128,128);
  
  int cx0 = fixer*0;
  int cx1 = fixer*1;
  int cx2 = fixer*2;
  int cy0 = int(fixer*(-1/2.0));
  int cy1 = fixer*0;
  int cy2 = int(fixer*0.5);
  int cy3 = fixer*1;
  int cy4 = int(fixer*1.5);
  
  
  beginShape();
    vertex(cx0, cy1);
    vertex(cx1, cy0);
    vertex(cx2, cy1);
    vertex(cx2, cy3);
    vertex(cx1, cy4);
    vertex(cx0, cy3);
    vertex(cx0, cy1);
  endShape();
  
  line(cx1, cy0, cx1, cy2);
  line(cx2, cy3, cx1, cy2);
  line(cx0, cy3, cx1, cy2);  
  
  for(int i=0; i < grid ; i++) {


    float xaxis= float(i%gridcount) / gridcount;
    float yaxis= float(i/gridcount) / gridcount;         
    
    
    if ( select == 1 ) {
      
      hew=HueSlider.value;
      sat=xaxis;
      lum=1-yaxis;    
      movement = int(hew*gridcount*pixelsize);

      xpos[i] = (i%gridcount)*pixelsize+movement;
      ypos[i] = (i/gridcount)*(pixelsize)+(i%gridcount)*(pixelsize/2)-movement/2;        
    } 
      else if ( select == 2 ) {
      hew=xaxis;
      sat=SatSlider.value;
      lum=1-yaxis;
      movement = int(sat*gridcount*pixelsize);
      xpos[i] = (i%gridcount)*pixelsize+movement;
      ypos[i] = (i/gridcount)*(pixelsize)-(i%gridcount)*(pixelsize/2)+movement/2;
    } 
      else if ( select == 3 ) {  
      hew=yaxis;
      sat=xaxis;
      lum=1-LumSlider.value;
      movement = int(lum*gridcount*pixelsize);
      xpos[i] = (i%gridcount)*pixelsize-(i/gridcount)*(pixelsize)+fixer;
      ypos[i] = (i/gridcount)*(pixelsize/2)+(i%gridcount)*(pixelsize/2)-movement+fixer/2;

    }
    
    if (lum < .5 ) {
      temp2=lum*(1+sat);
    } else {
      temp2=(lum+sat)-(lum*sat);
    }

    temp1=2*lum-temp2;
    
    float Rtemp3 = hueToRGB(hew+1.0/3.0, temp1, temp2);
    float Gtemp3 = hueToRGB(hew+0.0/3.0, temp1, temp2);
    float Btemp3 = hueToRGB(hew-1.0/3.0, temp1, temp2);

    fill( Rtemp3*256, Gtemp3*256, Btemp3*256);

    rectMode(CORNER);
    noStroke();
    rect(xpos[i],ypos[i],pixelsize,pixelsize);
    
    
    rect((i%gridcount)*pixelsize*2+margin*5+fixer*2,(i/gridcount)*(pixelsize)*2-fixer/2,pixelsize*2,pixelsize*2);
    
    
  }  

  //other guidelines
  stroke(128,128);
  
  line(cx0, cy1, cx1, cy2);
  line(cx2, cy1, cx1, cy2);
  line(cx1, cy4, cx1, cy2); 


}

float hueToRGB (float temp3, float temp1, float temp2) {
  float thiscolor;
  if (temp3 < 0) {
    temp3 = temp3 + 1.0;
  } else if (temp3 > 1) {
    temp3 = temp3 - 1.0;
  }

  if ( 6.0 * temp3 < 1 ) {
    thiscolor = temp1 + ( temp2 - temp1 ) * 6.0 * temp3;
  } else if (2.0*temp3 < 1)  {
    thiscolor=temp2;
  } else if (3.0*temp3 < 2) {
    thiscolor = temp1 + ( temp2-temp1 ) * ( (2.0/3.0) - temp3 ) * 6.0;
  } else {
    thiscolor = temp1;
  }

  return thiscolor;

}


void mouseReleased() {
  inputSelect = 0;  
}




class Button {
  int selectThis, xpos, ypos, bsize, value, selected;
  Button (int st, int x, int y, int s, int v) {
    selectThis = st;
    xpos = x;
    ypos = y;
    bsize = s;
    value = v;
  }

  boolean hover() {
    return mouseX >= xpos && mouseX <= xpos+bsize && 
           mouseY >= ypos && mouseY <= ypos+bsize ;
  }

  boolean pressed () {
    if (hover() && mousePressed && inputSelect == 0 ) {
      return true;    
    } else {
      return false;
    }
    
  }


  void display () {  
    if (hover() && mousePressed && inputSelect == 0 ) {
      inputSelect = selectThis;
      select = value;
    }
    
    
    if ( select == value )  { 
      fill(250);
    } else {
      if ( hover() && inputSelect == 0 ) { fill(150); } else {fill(100); }
    }
    stroke(0);
    rectMode(CORNER);
    rect(xpos,ypos,bsize,bsize);
  }



}


class HSlider{
  int selectThis, xpos, ypos, slength, swidth;
  float value, valuePos;
  boolean hover;

   HSlider (int st, int x, int y, int l, int w, float v) {
    selectThis = st;
    xpos = x;
    ypos = y;
    slength = l;
    swidth = w;
    value = v;
  }

  boolean hover() {
    return mouseX >= xpos && mouseX <= xpos+slength && 
           mouseY >= ypos && mouseY <= ypos+swidth ;
  }

  void display () {  

    if ( hover() && mousePressed && inputSelect == 0) {
      inputSelect = selectThis;
    }
    
  
    if ( inputSelect == selectThis ) {
      value = max( 0, min( 1, (mouseX-xpos)/float(slength) ) );
    } 
    
    if ( ( hover() && inputSelect == 0)  || inputSelect == selectThis ) {  
      stroke(0);
    } else {  
      stroke(64); 
    }

    valuePos = (value)*slength+xpos;
    
    noFill();
    rectMode(CORNER);
    rect(xpos,ypos,slength,swidth);
    
    line(valuePos,ypos-3,valuePos,ypos+swidth+3);
    
  }


  float value() {return value;}

}







class VSlider{
  int selectThis, xpos, ypos, slength, swidth;
  float value, valuePos;
  boolean pressed, hover, clicked;

   VSlider (int st, int x, int y, int l, int w, float v) {
    selectThis = st;
    xpos = x;
    ypos = y;
    slength = l;
    swidth = w;
    value = v;
  }

  boolean hover() {
    return mouseX >= xpos && mouseX <= xpos+swidth && 
           mouseY >= ypos && mouseY <= ypos+slength ;
  }


  void display () {  

    if ( hover() && mousePressed && inputSelect == 0) {
      inputSelect = selectThis;
    }
    
  
    if ( inputSelect == selectThis ) {
      value = max( 0, min( 1, (mouseY-ypos)/float(slength) ) );
    } 


    
    if ( ( hover() && inputSelect == 0)  || inputSelect == selectThis ) { 
      stroke(0);
    } else {  
      stroke(64); 
    }

    valuePos = (value)*slength+ypos;
    
    noFill();
    rectMode(CORNER);
    rect(xpos,ypos,swidth,slength);
    
    line(xpos-3,valuePos,xpos+swidth+3,valuePos);
    
  }


  float value() {return value;}

}