/* -------------------- set up --------------------- */

int gridcount=48;
int grid=int(pow(gridcount,2));
int pixelsize= 2;
int gridsize=gridcount*pixelsize;
int margin = 20;
int select = 1;
int inputSelect = 0;
int planeX = margin*4+gridsize*2;

float selectedHEW, selectedLUM, selectedSAT;
float pixelHew, pixelLum, pixelSat;   

int[] xpos = new int[grid];
int[] ypos = new int[grid];
char[] hexes  = new char[16];


Button HueButton, SatButton, LumButton;
HSlider HueSlider, SatSlider;
VSlider LumSlider;
Cursor colorCursor;

void setup() {
  size(500,290);
  noSmooth();
  
  
  
  int selectThis = 1;  
  // define and create buttons: inputSelect, xpos, ypos, size, selection value
  int buttonsx = margin*3+gridsize*2;
  int buttonssize = int(gridcount*(2/3.0));

  HueButton = new Button(selectThis,margin+gridsize+buttonssize*2,margin*1+int(gridsize*1.75),buttonssize,buttonssize,1);
  selectThis ++;
  SatButton = new Button(selectThis,margin+gridsize-buttonssize*3,margin*1+int(gridsize*1.75),buttonssize,buttonssize,2);
  selectThis ++;
  LumButton = new Button(selectThis,int(margin*1.5)+gridsize*2,margin*1+gridsize-buttonssize/2,buttonssize,buttonssize,3);
  selectThis ++;

  // define and create horizontal sliders: inputSelect, xpos, ypos, length, width,  value, 
  int slidersx = margin;
  int slidersLength = gridsize*2;
  int slidersWidth = margin/2;
  
  HueSlider = new HSlider(selectThis, slidersx, margin*2+gridsize*2, slidersLength, slidersWidth, random(.6)+.2 );
  selectThis ++;
  SatSlider = new HSlider(selectThis, slidersx, margin*3+gridsize*2, slidersLength, slidersWidth, random(.4)+.5 );  
  selectThis ++;

  // define and create horizontal sliders: inputSelect, xpos, ypos, length, width,  value,
  
  LumSlider = new VSlider(selectThis, margin*4+gridsize*2-10, margin, slidersWidth, slidersLength, random(.5)+.25 );
  selectThis ++;

  // define and create cursor for square: inputSelect, xpos, ypos, x-width, y-height
  
  colorCursor = new Cursor(selectThis, planeX+margin, margin, gridsize*2, gridsize*2);
 
  PFont fontA = loadFont("Verdana-12.vlw");
  textFont(fontA); 
 
  hexes[0] = '0';  hexes[1] = '1';  hexes[2] = '2';  hexes[3] = '3';  hexes[4] = '4';
  hexes[5] = '5';  hexes[6] = '6';  hexes[7] = '7';  hexes[8] = '8';  hexes[9] = '9';  
  hexes[10] = 'A';  hexes[11] = 'B';  hexes[12] = 'C';
  hexes[13] = 'D';  hexes[14] = 'E';  hexes[15] = 'F'; 

}

/* -------------------- draw --------------------- */

void draw () {


  background(230); 

  HueButton.display();
  SatButton.display();
  LumButton.display();

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

  LumSlider.display();

  colorCursor.update();

  if ( select == 1) {
    selectedHEW = HueSlider.value;
    selectedSAT = colorCursor.cursorXval;
    selectedLUM = 1 - colorCursor.cursorYval;
    SatSlider.value = selectedSAT;
    LumSlider.value = 1 - selectedLUM;    
  } else if ( select == 2) {
    selectedHEW = colorCursor.cursorXval;
    selectedSAT = SatSlider.value;
    selectedLUM = 1 - colorCursor.cursorYval;
    HueSlider.value = selectedHEW;
    LumSlider.value = 1 - selectedLUM;        
  } else if ( select == 3) {
    selectedHEW = 1 - colorCursor.cursorYval;
    selectedSAT = colorCursor.cursorXval;
    selectedLUM = 1 - LumSlider.value;
    HueSlider.value = selectedHEW;    
    SatSlider.value = selectedSAT;    
  }

  translate(margin,gridsize/2+margin);
  
  // background guide lines and hexagon shape
  
  fill(210);
  stroke(164);
  
  float x, y, z;

  x=1; y=0; z=0;
    float centerPointX = XZtoX(x,z) ;
    float centerPointY = XYZtoY(x,y,z);


  beginShape();
    x=0; y=0; z=0; vertex( XZtoX(x,z) , XYZtoY(x,y,z) );
    x=0; y=0; z=1; vertex( XZtoX(x,z) , XYZtoY(x,y,z) );
    x=1; y=0; z=1; vertex( XZtoX(x,z) , XYZtoY(x,y,z) );
    x=1; y=1; z=1; vertex( XZtoX(x,z) , XYZtoY(x,y,z) );
    x=1; y=1; z=0; vertex( XZtoX(x,z) , XYZtoY(x,y,z) );
    x=0; y=1; z=0; vertex( XZtoX(x,z) , XYZtoY(x,y,z) );
    x=0; y=0; z=0; vertex( XZtoX(x,z) , XYZtoY(x,y,z) );
  endShape();
  

  x=0; y=1; z=0;  line(XZtoX(x,z) , XYZtoY(x,y,z), centerPointX, centerPointY);
  x=0; y=0; z=1;  line(XZtoX(x,z) , XYZtoY(x,y,z), centerPointX, centerPointY);
  x=1; y=1; z=1;  line(XZtoX(x,z) , XYZtoY(x,y,z), centerPointX, centerPointY);  


  // white selection lines UNDER color plane    
  selectedLine(0, 1-selectedLUM, selectedHEW);
  selectedLine(selectedSAT, 1-selectedLUM, 1);  
  selectedLine(selectedSAT, 1-0, selectedHEW);  
  
  for(int i=0; i < grid ; i++) {

    float xaxis= float(i%gridcount) / gridcount;
    float yaxis= float(i/gridcount) / gridcount;         
    
    if ( select == 1 ) {
      pixelHew= selectedHEW;
      pixelSat=xaxis;
      pixelLum=1-yaxis;    
    } 
      else if ( select == 2 ) {
      pixelHew=xaxis;
      pixelSat=selectedSAT;
      pixelLum=1-yaxis;
    } 
      else if ( select == 3 ) {  
      pixelHew=1.00001-yaxis;
      pixelSat=xaxis;
      pixelLum=selectedLUM;
    }

    xpos[i] = int(  XZtoX( pixelHew, pixelSat) );
    ypos[i] = XYZtoYint( pixelSat, 1.000001 - pixelLum, pixelHew );
    

    //color Plane render
    color pixelColor = HSLtoRGB(pixelHew,pixelSat,pixelLum);
    fill( pixelColor );
    rectMode(CORNER);
    noStroke();
    rect(xpos[i],ypos[i],pixelsize,pixelsize);

    //color square render
    rect( xaxis*gridsize*2+planeX,
          yaxis*gridsize*2-gridsize/2,
          pixelsize*2,
          pixelsize*2);

  }  



  translate(-margin,-(gridsize/2+margin));

  colorCursor.display();

  translate(margin,gridsize/2+margin);


  // white selection lines over color plane
    
  selectedLine(1, 1-selectedLUM, selectedHEW);
  selectedLine(selectedSAT, 1-selectedLUM, 0);  
  selectedLine(selectedSAT, 1-1, selectedHEW);  
  
  if ( select == 1) {
    selectedLine(0, 1-selectedLUM, selectedHEW);
    selectedLine(selectedSAT, 1-0, selectedHEW);  
  } else if ( select == 2) {
    selectedLine(selectedSAT, 1-selectedLUM, 1);  
    selectedLine(selectedSAT, 1-0, selectedHEW);  
  } else if ( select == 3) {
    selectedLine(0, 1-selectedLUM, selectedHEW);
    selectedLine(selectedSAT, 1-selectedLUM, 1);  

  }


  strokeWeight(1);

  //other guidelines for cube
  stroke(164);
  
  x=1; y=0; z=1;  line(XZtoX(x,z) , XYZtoY(x,y,z), centerPointX, centerPointY);
  x=1; y=1; z=0;  line(XZtoX(x,z) , XYZtoY(x,y,z), centerPointX, centerPointY);
  x=0; y=0; z=0;  line(XZtoX(x,z) , XYZtoY(x,y,z), centerPointX, centerPointY);  


  //display actual selected Color!!!
  color selectedColor = HSLtoRGB(selectedHEW,selectedSAT,selectedLUM);

  fill(selectedColor);
  
  stroke(0);
  rect(planeX,margin*1+gridsize*1.5,40,40);
 

  // Use fill() to change the value or color of the text
  fill(0);
  text("HSL: "+ int(selectedHEW*360) + "¡, "
              + int(selectedSAT*100) + "%, "
              + int(selectedLUM*100) + "%"
             , planeX+margin*3, margin*1+gridsize*1.5+10);
  text("RGB: "+ int(red(selectedColor)) + ", "
              + int(green(selectedColor)) + ", "
              + int(blue(selectedColor)) 
             , planeX+margin*3, margin*1+gridsize*1.5+24);
  text("Hex: " + hexes[int(red(selectedColor))/16] + hexes[int(red(selectedColor))%16]
               + hexes[int(green(selectedColor))/16] + hexes[int(green(selectedColor))%16]
               + hexes[int(blue(selectedColor))/16] + hexes[int(blue(selectedColor))%16]
            , planeX+margin*3, margin*1+gridsize*1.5+38);

  
}



// GUI, so you can't click and drag on to other GUI elements

void mouseReleased() {
  inputSelect = 0;  
}

/* -------------------- GUI --------------------- */

class GUIelement {
  int selectThis, xpos, ypos, xwidth, yheight;
  GUIelement (int st, int x, int y, int xw, int yh ) {
    selectThis = st;
    xpos = x;
    ypos = y;
    xwidth = xw;
    yheight = yh;
  }

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

  boolean pressed() {
    return hover() && mousePressed && inputSelect == 0 ;
  }

  void inputUpdate() {
    if ( pressed () ) {
      inputSelect = selectThis;
    }
  }

}

/* -------------------- Buttons --------------------- */


class Button extends GUIelement {
  int value;
  Button (int st, int x, int y, int xw, int yh, int v ) {
    super(st, x, y, xw, yh);
    value = v;
  }

  void display () {  

    
    if ( hover() && mousePressed && inputSelect == 0 ) {
      select = value;
    }
    

    super.inputUpdate();

    
    if ( select == value )  { 
      fill(250);
    } else {
      if ( hover() && inputSelect == 0 ) { 
        fill(150); 
      } else {
        fill(100); 
      }
    }
    
    stroke(0);
    rectMode(CORNER);
    rect(xpos,ypos,xwidth,yheight);
  }


}


/* -------------------- cursor --------------------- */

class Cursor extends GUIelement {
  float cursorX, cursorY, cursorXval, cursorYval;

  Cursor (int st, int x, int y, int xw, int yh ) {
    super(st, x, y, xw, yh);
  }
  

  void update() {

    super.inputUpdate();

    
    if ( inputSelect == selectThis ) {
      cursorXval = max( 0, min( 1, float(mouseX-xpos)/xwidth ));
      cursorYval = max( 0, min( 1, float(mouseY-ypos)/yheight ));    
    }  else if (select == 1) {
      cursorXval = SatSlider.value;
      cursorYval = LumSlider.value;  
    } else if  (select == 2) {
      cursorXval = HueSlider.value;
      cursorYval = LumSlider.value;  
    } else if  (select == 3) {
      cursorXval = SatSlider.value;
      cursorYval = 1 - HueSlider.value;  
    }

  }

  void display() {

  
  stroke(128);
  if (hover()) {stroke(64);}
  rectMode(CORNER);
  noFill();
  rect(xpos-1,ypos-1,xwidth+1,yheight+1);

  cursorX = cursorXval*xwidth+xpos;
  cursorY = cursorYval*yheight+ypos;

  // render the cross over the color square
  stroke(0);
  strokeWeight(3);
  line(cursorX-10, cursorY, cursorX+10, cursorY);
  line(cursorX, cursorY-10, cursorX, cursorY+10);
  stroke(255);
  strokeWeight(1);
  line(cursorX-10, cursorY, cursorX+10, cursorY);
  line(cursorX, cursorY-10, cursorX, cursorY+10);
  
  }
  
  
  
}  


/* -------------------- slider --------------------- */

class HSlider extends GUIelement {
  float value, valuePos;
  HSlider (int st, int x, int y, int xw, int yh, float v ) {
    super(st, x, y, xw, yh);
    value = v;
  }

  void display () {  

    super.inputUpdate();
  
    // hue or sat gradient with in sliders
    
    if ( selectThis == 4 ) {
      for (int i=0; i < xwidth/2 ; i++ ) {
        
        fill( HSLtoRGB( float(i*2)/xwidth, selectedSAT, selectedLUM ) );
        noStroke();
        rectMode(CORNER);
        rect(i*2+xpos,ypos,2,yheight);
            
      }
    } else if ( selectThis == 5 ) {
      for (int i=0; i < xwidth/2 ; i++ ) {
        
        fill( HSLtoRGB( selectedHEW, float(i*2)/xwidth, selectedLUM ) );
        noStroke();
        rectMode(CORNER);
        rect(i*2+xpos,ypos,2,yheight);
            
      }
    }
  
    
    if ( inputSelect == selectThis ) {
      value = max( 0, min( 1, (mouseX-xpos)/float(xwidth) ) );
    } 
    
    if ( ( hover() && inputSelect == 0)  || inputSelect == selectThis ) {  
      stroke(0);
    } else {  
      stroke(64); 
    }

    valuePos = (value)*xwidth+xpos;

    strokeWeight(1);    
    noFill();
    rectMode(CORNER);
    rect(xpos,ypos,xwidth,yheight);

    strokeWeight(3);    
    line(valuePos,ypos-3,valuePos,ypos+yheight+3);

    strokeWeight(1);
    stroke(255);

    line(valuePos,ypos-3,valuePos,ypos+yheight+3);
    
  }



}




class VSlider extends GUIelement {
  float value, valuePos;
  VSlider (int st, int x, int y, int xw, int yh, float v ) {
    super(st, x, y, xw, yh);
    value = v;
  }

  void display () {  

    super.inputUpdate();
    

    if ( selectThis == 6 ) {
      for (int i=0; i < yheight/2 ; i++ ) {
        
        color hueGrad = HSLtoRGB(  selectedHEW, selectedSAT, 1 - float(i*2)/yheight );
        
        fill(hueGrad);
        noStroke();
        rectMode(CORNER);
        rect(xpos,i*2+ypos,xwidth,2);
            
      }
    }

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


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

    valuePos = (value)*yheight+ypos;
    
    noFill();
    rectMode(CORNER);
    rect(xpos,ypos,xwidth,yheight);
    
    
    strokeWeight(3);
    line(xpos-3,valuePos,xpos+xwidth+3,valuePos);

    strokeWeight(1);
    stroke(255);
    line(xpos-3,valuePos,xpos+xwidth+3,valuePos);
    
  }



}



/* -------------------- Color Functions --------------------- */


color HSLtoRGB(float hew, float sat, float lum) {
    float temp1, temp2, Rtemp3, Gtemp3, Btemp3;

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

    temp1=2*lum-temp2;

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

    return color (Rtemp3*256, Gtemp3*256, Btemp3*256);
}


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

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

  return RGBvalue;

}


/* -------------------- position functions --------------------- */

float XZtoX (float x, float z) {
  return x*gridsize+z*gridsize;

}

float XYZtoY (float x, float y, float z) {
//  return  (z*gridsize/-2.0) + (x*gridsize/2.0) + y*gridsize;
  return(y+(x-z)/2)*gridsize;

}

int XYZtoYint(float x, float y, float z) {
    return   int(y*gridsize) +  int(x*gridsize/2)  -  int(z*gridsize/2) ;

}


/* -------------------- draw lines --------------------- */

void selectedLine(float x, float y, float z) {
  float selectedPointX = XZtoX(selectedSAT,selectedHEW) ;
  float selectedPointY = XYZtoY(selectedSAT,1-selectedLUM,selectedHEW );

  stroke(255);
  strokeWeight(1);
  line(selectedPointX,selectedPointY, XZtoX(x,z) , XYZtoY(x,y,z) );

}