function setup() { 

  displayDebug = true;

  displayRgbSliders = true;

  cam={

    x: 0,

    z: 0,

    y: 0,

    xRot: 0,

    yRot: 0,

  };

  rMin = {val: 0};

  rMax = {val: 255};

  gMin = {val: 0};

  gMax = {val: 255};

  bMin = {val: 0};

  bMax = {val: 255};

  function initDebug(){

    debugColor = color(0,0,0);

    debugYMargin = 100;

    debugXMargin = 25;

    debugLineHeight = 15;

    debugRows = 3;

    debugColWidth = 80;

  }

  function initRgbSliders(){

    defaultStroke = 0;

    clickedStroke = 1;

    sliderHeight = 5;

    sliderWidth = 250;

    sliderRadius = 15;

    sliderGap = 18;

    sliderXMargin = 25;

    sliderYMargin = 25;

    greyOpac = 0.25;

  }

  initRgbSliders();

  initDebug();

  clickableObjs={

    cum: {a:1},

    rMin: {val: 0,

           x:sliderXMargin + sliderWidth/255*rMin.val, 

           y:sliderYMargin + sliderHeight/2, 

           w:sliderRadius, 

           h:sliderRadius, 

           type: "ellipse",

           c: [1,0,0]},

    rMax: {val: 255,

           x:sliderXMargin + sliderWidth/255*rMax.val, y:sliderYMargin + sliderHeight/2, w:sliderRadius, h:sliderRadius, type: "ellipse", c: [1,0,0]},

    gMin: {val: 0,

           x:sliderXMargin + sliderWidth/255*gMin.val, y:sliderYMargin + sliderHeight/2+sliderGap,  w:sliderRadius, h:sliderRadius, type: "ellipse", c: [0,1,0]},

    gMax: {val: 255,

           x:sliderXMargin + sliderWidth/255*gMax.val, y:sliderYMargin + sliderHeight/2+sliderGap, w:sliderRadius, h:sliderRadius, type: "ellipse", c: [0,1,0]},

    bMin: {val: 0,

           x:sliderXMargin + sliderWidth/255*bMin.val, y:sliderYMargin + sliderHeight/2+sliderGap*2,  w:sliderRadius, h:sliderRadius, type: "ellipse", c: [0,0,1]},

    bMax: {val: 255,

           x:sliderXMargin + sliderWidth/255*bMax.val, y:sliderYMargin + sliderHeight/2+sliderGap*2,  w:sliderRadius, h:sliderRadius, type: "ellipse", c: [0,0,1]}

  }

  clicked = clickableObjs.rMin;

  createCanvas(1280, 720);

  noLoop();

}

​

function getRow(n,rows){

  row = n % rows

  if (row == 0) {

    row = rows

  } 

  return row

}

function getCol(n,rows){

  return ceil(n/rows)-1;

}

function drawDebug(){

  fill(debugColor);

  var written = 1;

  for (const property in cam){

    row = getRow(written,debugRows)

    col = getCol(written,debugRows)

    text(` cam.${property} = ${cam[property]}`,debugXMargin + col*debugColWidth,debugYMargin +     debugLineHeight*row);

    written += 1;

    //console.log(`cam.${property} = ${cam[property]}`);

  }

}

function drawRgbSliders(){

  strokeWeight(clickedStroke)

  stroke(clicked.val*clicked.c[0],clicked.val*clicked.c[1],clicked.val*clicked.c[2])

  fill(255)

  ellipse(clicked.x,clicked.y,clicked.w+10,clicked.h+10);

  strokeWeight(defaultStroke)

  rMin = clickableObjs.rMin

  rMax = clickableObjs.rMax

  gMin = clickableObjs.gMin

  gMax = clickableObjs.gMax

  bMin = clickableObjs.bMin

  bMax = clickableObjs.bMax

  //RED

  for (i=0;i<sliderWidth;i++){

    opac = 255;

    if (i/sliderWidth < rMin.val/255 || i/sliderWidth > rMax.val/255){

      opac = 255*greyOpac;

    }

    fill(255*i/sliderWidth,0,0,opac)

    rect(sliderXMargin+i, sliderYMargin, 1, sliderHeight);

  }

  fill(rMin.val,0,0)

  ellipse(sliderXMargin + sliderWidth/255*rMin.val,sliderYMargin + sliderHeight/2,sliderRadius);

  fill(rMax.val,0,0)

  ellipse(sliderXMargin + sliderWidth/255*rMax.val,sliderYMargin + sliderHeight/2,sliderRadius);

  //GREEN

  for (i=0;i<sliderWidth;i++){

    opac = 255;

    if (i/sliderWidth < gMin.val/255 || i/sliderWidth > gMax.val/255){

      opac = 255*greyOpac;

    }

    fill(0,255*i/sliderWidth,0,opac)

    rect(sliderXMargin+i, sliderYMargin+sliderGap, 1, sliderHeight);

  }

  fill(0,gMin.val,0)

  ellipse(sliderXMargin + sliderWidth/255*gMin.val,sliderYMargin + sliderHeight/2+sliderGap,sliderRadius);

  fill(0,gMax.val,0)

  ellipse(sliderXMargin + sliderWidth/255*gMax.val,sliderYMargin + sliderHeight/2+sliderGap,sliderRadius);

  //BLUE

  for (i=0;i<sliderWidth;i++){

    opac = 255

    if (i/sliderWidth < bMin.val/255 || i/sliderWidth > bMax.val/255){

      opac = 255*greyOpac;

    }

    fill(0,0,255*i/sliderWidth,opac)

    rect(sliderXMargin+i, sliderYMargin+sliderGap*2, 1, sliderHeight);

  }

  fill(0,0,bMin.val)

  ellipse(sliderXMargin + sliderWidth/255*bMin.val,sliderYMargin + sliderHeight/2+sliderGap*2,sliderRadius);

  fill(0,0,bMax.val)

  ellipse(sliderXMargin + sliderWidth/255*bMax.val,sliderYMargin + sliderHeight/2+sliderGap*2,sliderRadius)

  }

function drawClick(){

  for (var obje in clickableObjs){

  console.log(obje)

    for (var property in clickableObjs[obje]){

      console.log(`clickableObjs.${obje}.${property} = ${clickableObjs[obje][property]}`);

    }

  }

}

let value = 0;

​

function updateClickables(){

  clickableObjs.rMin.x=sliderXMargin + sliderWidth/255*rMin.val;

  clickableObjs.rMax.x=sliderXMargin + sliderWidth/255*rMax.val;

  clickableObjs.gMin.x=sliderXMargin + sliderWidth/255*gMin.val;

  clickableObjs.gMax.x=sliderXMargin + sliderWidth/255*gMax.val;

  clickableObjs.bMin.x=sliderXMargin + sliderWidth/255*bMin.val;

  clickableObjs.bMax.x=sliderXMargin + sliderWidth/255*bMax.val;

}

function draw() {

  background(255)

  strokeWeight(0)

  fill(value);

  rect(250, 250, 50, 50);

  if (displayDebug) drawDebug();

  if (displayRgbSliders) drawRgbSliders();

​

}

​

function keyPressed() {

  switch(keyCode){

      case(LEFT_ARROW):

        clicked.val-=10;

      break;

      case(RIGHT_ARROW):

        clicked.val+=10;

      break;

  }

  if (value >255){

    value=0;

  }

  if (value < 0){

    value = 255;

  }

  updateClickables()

  redraw();

}

​

function mousePressed(){

  console.log(mouseX,mouseY)

  for (var key in clickableObjs){

    obj = clickableObjs[key];

    //console.log(obj)

    if (obj.type == "ellipse"){

        if (mouseX >= obj.x-obj.w/2 && mouseX <= obj.x+obj.w/2 && mouseY >= obj.y-obj.h/2 && mouseY <= obj.y+obj.h/2){

          clicked = obj;

          console.log(`clickableObjs.${key}` + " clicked")

          break;

        }

    }

  }

  redraw();

}