› › ›

color switcher using controlp5 sliders

destrosjowldestrosjowl
edited March 2014 in Questions about Code

hi,

i am trying to implement use a slider group as a controller for many objects. i have the code working, the problem i am having is with retaining the previous value of the slider. in this demo, i am using the slider to control color settings for 3 objects, a circle, square and line. i have the code working, however, it doesn't always save the previous object's color information. i'd appreciate any suggestions.

thanks in advance.

the code is as follows:

import controlP5.*;

ControlP5 cp5;

int redSliderVal = 0;
int greenSliderVal = 0;
int blueSliderVal = 0;
int opacitySliderVal = 255;

int shape = 0;

int circleColorCntr = 1;
int squareColorCntr = 1;
int lineColorCntr = 1;

boolean circle;
boolean square;
boolean line;

int circleTruthArrayCntr = -1;
boolean [] circleTruthArray;

int squareTruthArrayCntr = -1;
boolean [] squareTruthArray;

int lineTruthArrayCntr = -1;
boolean [] lineTruthArray;

FloatList circleColor;
FloatList squareColor;
FloatList lineColor;

FloatList circleColorHolder;
FloatList squareColorHolder;
FloatList lineColorHolder;

void setup()
{
  size(600, 600);
  noStroke();

  circleColor = new FloatList();
  circleColorHolder = new FloatList();

  squareColor = new FloatList();
  squareColorHolder = new FloatList();

  lineColor = new FloatList();
  lineColorHolder = new FloatList();

  circleTruthArray = new boolean[2];
  squareTruthArray = new boolean[2];
  lineTruthArray = new boolean[2];

  cp5 = new ControlP5(this);

  //color settings
  cp5.addToggle("circle")
  .setPosition(width/4, height/2 + 30)
  .setSize(45, 20)
  .setValue(false)
  .setCaptionLabel("circle Color");

  cp5.addToggle("square")
  .setPosition(width/4 + 100, height/2 + 30)
  .setSize(45, 20)
  .setValue(false)
  .setCaptionLabel("square Color");

  cp5.addToggle("line")
  .setPosition(width/4 + 200, height/2 + 30)
  .setSize(45, 20)
  .setValue(false)
  .setCaptionLabel("line Color");

  //color controls
  cp5.addButton("colorR")
  .setValue(0)
  .setColorBackground(color(redSliderVal, 0, 0))
  .setPosition(width/3, height/2 + 80)
  .setCaptionLabel("")
  .setLock(true)
  .setSize(20, 20);

  cp5.addSlider("redSliderVal")
  .setPosition(width/3 + 50, height/2 + 80)
  .setValue(0)
  .setSize(100, 20)
  .setRange(0, 255)
  .setCaptionLabel("red");

  cp5.addButton("colorG")
  .setValue(0)
  .setColorBackground(color(0, greenSliderVal, 0))
  .setPosition(width/3, height/2 + 110)
  .setCaptionLabel("")
  .setLock(true)
  .setSize(20, 20);

  cp5.addSlider("greenSliderVal")
  .setPosition(width/3 + 50, height/2 + 110)
  .setValue(0)
  .setSize(100, 20)
  .setRange(0, 255)
  .setCaptionLabel("green");

  cp5.addButton("colorB")
  .setValue(0)
  .setColorBackground(color(0, 0, blueSliderVal))
  .setPosition(width/3, height/2 + 140)
  .setCaptionLabel("")
  .setLock(true)
  .setSize(20, 20);

  cp5.addSlider("blueSliderVal")
  .setPosition(width/3 + 50, height/2 + 140)
  .setValue(0)
  .setSize(100, 20)
  .setRange(0, 255)
  .setCaptionLabel("blue");

  cp5.addButton("colorA")
  .setValue(0)
  .setColorBackground(color(255, opacitySliderVal))
  .setPosition(width/3, height/2 + 170)
  .setCaptionLabel("")
  .setLock(true)
  .setSize(20, 20);

  cp5.addSlider("opacitySliderVal")
  .setPosition(width/3 + 50, height/2 + 170)
  .setSize(100, 20)
  .setValue(255)
  .setRange(0, 255)
  .setCaptionLabel("opacity");
}

void draw()
{
  background(0);
  rectMode(CENTER);
  noFill();
  stroke(255);

  switch(shape)
  {
    case 1:
      drawCircle();
      break;
    case 2:
      drawSquare();
      break;
    case 3:
      drawLine();
      break;
  }
} 

void drawCircle()
{
  if(circleColorCntr == 1)
  { 
    circleColor.set(0, redSliderVal);
    circleColor.set(1, greenSliderVal);
    circleColor.set(2, blueSliderVal);
    circleColor.set(3, opacitySliderVal);

    fill(circleColor.get(0), circleColor.get(1), circleColor.get(2), circleColor.get(3));
  }
  else if(circleColorCntr % 2 == 0)
  {
    circleColorHolder.set(0, circleColor.get(0));
    circleColorHolder.set(1, circleColor.get(1));
    circleColorHolder.set(2, circleColor.get(2));
    circleColorHolder.set(3, circleColor.get(3));

    cp5.getController("redSliderVal").setValue((int)circleColorHolder.get(0));
    cp5.getController("greenSliderVal").setValue((int)circleColorHolder.get(1));
    cp5.getController("blueSliderVal").setValue((int)circleColorHolder.get(2));
    cp5.getController("opacitySliderVal").setValue((int)circleColorHolder.get(3));

    fill((int)circleColorHolder.get(0), (int)circleColorHolder.get(1), (int)circleColorHolder.get(2), (int)circleColorHolder.get(3)); 

    circleColorCntr = 1;
  }
  ellipse(width/4, height/4, 80, 80);
}

void drawSquare()
{  
  if(squareColorCntr == 1)
  { 
    squareColor.set(0, redSliderVal);
    squareColor.set(1, greenSliderVal);
    squareColor.set(2, blueSliderVal);
    squareColor.set(3, opacitySliderVal);

    fill(squareColor.get(0), squareColor.get(1), squareColor.get(2), squareColor.get(3));
  }
  else if(squareColorCntr % 2 == 0)
  {
    squareColorHolder.set(0, squareColor.get(0));
    squareColorHolder.set(1, squareColor.get(1));
    squareColorHolder.set(2, squareColor.get(2));
    squareColorHolder.set(3, squareColor.get(3));

    cp5.getController("redSliderVal").setValue((int)squareColorHolder.get(0));
    cp5.getController("greenSliderVal").setValue((int)squareColorHolder.get(1));
    cp5.getController("blueSliderVal").setValue((int)squareColorHolder.get(2));
    cp5.getController("opacitySliderVal").setValue((int)squareColorHolder.get(3));

    fill((int)squareColorHolder.get(0), (int)squareColorHolder.get(1), (int)squareColorHolder.get(2), (int)squareColorHolder.get(3)); 

    squareColorCntr = 1;
  }
  rect(width/2, height/4, 80, 80);
}

void drawLine()
{
   if(lineColorCntr == 1)
  { 
    lineColor.set(0, redSliderVal);
    lineColor.set(1, greenSliderVal);
    lineColor.set(2, blueSliderVal);
    lineColor.set(3, opacitySliderVal);

    stroke(lineColor.get(0), lineColor.get(1), lineColor.get(2), lineColor.get(3));
  }
  else if(lineColorCntr % 2 == 0)
  {
    lineColorHolder.set(0, lineColor.get(0));
    lineColorHolder.set(1, lineColor.get(1));
    lineColorHolder.set(2, lineColor.get(2));
    lineColorHolder.set(3, lineColor.get(3));

    cp5.getController("redSliderVal").setValue((int)lineColorHolder.get(0));
    cp5.getController("greenSliderVal").setValue((int)lineColorHolder.get(1));
    cp5.getController("blueSliderVal").setValue((int)lineColorHolder.get(2));
    cp5.getController("opacitySliderVal").setValue((int)lineColorHolder.get(3));

    stroke((int)lineColorHolder.get(0), (int)lineColorHolder.get(1), (int)lineColorHolder.get(2), (int)lineColorHolder.get(3)); 

    lineColorCntr = 1;
  }
  strokeWeight(5);
  line((width * 3)/4, height/4 + 40, (width * 3)/4, height/4 - 40);
  strokeWeight(1);
}

void line(boolean theFlag)
{
  if(theFlag == true) 
  {
    shape = 3;
    line = true;

    circle = false;
    cp5.getController("circle").setValue(0);

    square = false;
    cp5.getController("square").setValue(0);
  }
  else line = false;

  lineTruthArray[0] = lineTruthArray[1];
  lineTruthArray[1] = theFlag;

  lineTruthArrayCntr ++;
  println("lineTruthArrayCntr: " + lineTruthArrayCntr);

  if(lineTruthArrayCntr > 1) 
  {
    if((lineTruthArray[0] == true) & (lineTruthArray[1] == false))
    {
      lineColorCntr ++;

      if(lineColorCntr >= 3) 
      { 
        lineColorCntr = 1;
      }
    }   
    lineTruthArrayCntr = 0;
  }

  println(lineTruthArray);
  println("lineColorCntr: " + lineColorCntr);
}

void circle(boolean theFlag)
{ 
  if(theFlag == true) 
  {
    shape = 1;
    circle = true;

    line = false;
    cp5.getController("line").setValue(0);

    square = false;
    cp5.getController("square").setValue(0);
  }
  else circle = false;

  circleTruthArray[0] = circleTruthArray[1];
  circleTruthArray[1] = theFlag;

  circleTruthArrayCntr ++;
  println("circleTruthArrayCntr: " + circleTruthArrayCntr);

  if(circleTruthArrayCntr > 1) 
  {
    if((circleTruthArray[0] == true) & (circleTruthArray[1] == false))
    {
      circleColorCntr ++;

      if(circleColorCntr >= 3) 
      { 
        circleColorCntr = 1;
      }
    }   
    circleTruthArrayCntr = 0;
  }

  println(circleTruthArray);
  println("circleColorCntr: " + circleColorCntr);
}

void square(boolean theFlag)
{
  if(theFlag == true) 
  {
    shape = 2;
    square = true;

    circle = false;
    cp5.getController("circle").setValue(0);

    line = false;
    cp5.getController("line").setValue(0);
  }
  else square = false;

  squareTruthArray[0] = squareTruthArray[1];
  squareTruthArray[1] = theFlag;

  squareTruthArrayCntr ++;
  println("squareTruthArrayCntr: " + squareTruthArrayCntr);

  if(squareTruthArrayCntr > 1) 
  {
    if((squareTruthArray[0] == true) & (squareTruthArray[1] == false))
    {
      squareColorCntr ++;

      if(squareColorCntr >= 3) 
      { 
        squareColorCntr = 1;
      }
    }   
    squareTruthArrayCntr = 0;
  }

  println(squareTruthArray);
  println("squareColorCntr: " + squareColorCntr);
}

void controlEvent(ControlEvent theControlEvent)
{
  if(theControlEvent.isFrom("redSliderVal"))
  {
      cp5.getController("colorR").setColorBackground(color(redSliderVal, 0, 0));
  }

  if(theControlEvent.isFrom("greenSliderVal"))
  {
      cp5.getController("colorG").setColorBackground(color(0, greenSliderVal, 0));
  }

  if(theControlEvent.isFrom("blueSliderVal"))
  {
      cp5.getController("colorB").setColorBackground(color(0, 0, blueSliderVal));
  }

  if(theControlEvent.isFrom("opacitySliderVal"))
  {
      cp5.getController("colorA").setColorBackground(color(255, opacitySliderVal));
  }
}
Tagged:

Best Answer

Answers

  • destrosjowldestrosjowl

    this problem is fixed. deleted condition if(SHAPETruthArrayCntr > 1).

  • calsigncalsign
    Answer ✓

    For future reference - I believe that ControlP5 includes a ColorPicker controller, which would probably have made your code much simpler.

  • destrosjowldestrosjowl

    hi calsign, i know it has one, but i purposely chose not to use it.

  • destrosjowldestrosjowl
    edited March 2014

    this is the fixed code if anyone cares...

     import controlP5.*;

ControlP5 cp5;

int redSliderVal = 0;
int greenSliderVal = 0;
int blueSliderVal = 0;
int opacitySliderVal = 255;

int shape = 0;

int circleColorCntr = 1;
int squareColorCntr = 1;
int lineColorCntr = 1;

boolean circle;
boolean square;
boolean line;

int circleTruthArrayCntr = -1;
boolean [] circleTruthArray;

int squareTruthArrayCntr = -1;
boolean [] squareTruthArray;

int lineTruthArrayCntr = -1;
boolean [] lineTruthArray;

FloatList circleColor;
FloatList squareColor;
FloatList lineColor;

FloatList circleColorHolder;
FloatList squareColorHolder;
FloatList lineColorHolder;

void setup()
{
  size(600, 600);
  noStroke();

  circleColor = new FloatList();
  circleColorHolder = new FloatList();

  squareColor = new FloatList();
  squareColorHolder = new FloatList();

  lineColor = new FloatList();
  lineColorHolder = new FloatList();

  circleTruthArray = new boolean[2];
  squareTruthArray = new boolean[2];
  lineTruthArray = new boolean[2];

  cp5 = new ControlP5(this);

  //color settings
  cp5.addToggle("circle")
  .setPosition(width/4, height/2 + 30)
  .setSize(45, 20)
  .setValue(false)
  .setCaptionLabel("circle Color");

  cp5.addToggle("square")
  .setPosition(width/4 + 100, height/2 + 30)
  .setSize(45, 20)
  .setValue(false)
  .setCaptionLabel("square Color");

  cp5.addToggle("line")
  .setPosition(width/4 + 200, height/2 + 30)
  .setSize(45, 20)
  .setValue(false)
  .setCaptionLabel("line Color");

  //color controls
  cp5.addButton("colorR")
  .setValue(0)
  .setColorBackground(color(redSliderVal, 0, 0))
  .setPosition(width/3, height/2 + 80)
  .setCaptionLabel("")
  .setLock(true)
  .setSize(20, 20);

  cp5.addSlider("redSliderVal")
  .setPosition(width/3 + 50, height/2 + 80)
  .setValue(0)
  .setSize(100, 20)
  .setRange(0, 255)
  .setCaptionLabel("red");

  cp5.addButton("colorG")
  .setValue(0)
  .setColorBackground(color(0, greenSliderVal, 0))
  .setPosition(width/3, height/2 + 110)
  .setCaptionLabel("")
  .setLock(true)
  .setSize(20, 20);

  cp5.addSlider("greenSliderVal")
  .setPosition(width/3 + 50, height/2 + 110)
  .setValue(0)
  .setSize(100, 20)
  .setRange(0, 255)
  .setCaptionLabel("green");

  cp5.addButton("colorB")
  .setValue(0)
  .setColorBackground(color(0, 0, blueSliderVal))
  .setPosition(width/3, height/2 + 140)
  .setCaptionLabel("")
  .setLock(true)
  .setSize(20, 20);

  cp5.addSlider("blueSliderVal")
  .setPosition(width/3 + 50, height/2 + 140)
  .setValue(0)
  .setSize(100, 20)
  .setRange(0, 255)
  .setCaptionLabel("blue");

  cp5.addButton("colorA")
  .setValue(0)
  .setColorBackground(color(255, opacitySliderVal))
  .setPosition(width/3, height/2 + 170)
  .setCaptionLabel("")
  .setLock(true)
  .setSize(20, 20);

  cp5.addSlider("opacitySliderVal")
  .setPosition(width/3 + 50, height/2 + 170)
  .setSize(100, 20)
  .setValue(255)
  .setRange(0, 255)
  .setCaptionLabel("opacity");
}

void draw()
{
  background(0);
  rectMode(CENTER);
  noFill();
  stroke(255);

  drawCircle();
  drawSquare();
  drawLine();

//  println("shape: " + shape);
} 

void drawCircle()
{
  pushMatrix();
  if(shape == 1)
  {
    if(circleColorCntr == 1)
    { 
        circleColor.set(0, redSliderVal);
        circleColor.set(1, greenSliderVal);
        circleColor.set(2, blueSliderVal);
        circleColor.set(3, opacitySliderVal);

        fill(circleColor.get(0), circleColor.get(1), circleColor.get(2), circleColor.get(3));
    }
    else if(circleColorCntr == 2)
    {
        circleColorHolder.set(0, circleColor.get(0));
        circleColorHolder.set(1, circleColor.get(1));
        circleColorHolder.set(2, circleColor.get(2));
        circleColorHolder.set(3, circleColor.get(3));

        cp5.getController("redSliderVal").setValue((int)circleColorHolder.get(0));
        cp5.getController("greenSliderVal").setValue((int)circleColorHolder.get(1));
        cp5.getController("blueSliderVal").setValue((int)circleColorHolder.get(2));
        cp5.getController("opacitySliderVal").setValue((int)circleColorHolder.get(3));

        fill((int)circleColorHolder.get(0), (int)circleColorHolder.get(1), (int)circleColorHolder.get(2), (int)circleColorHolder.get(3)); 

        circleColorCntr = 1;
    }

  }
  else if(shape != 1)
  {
    fill((int)circleColor.get(0), (int)circleColor.get(1), (int)circleColor.get(2), (int)circleColor.get(3));
  }
  ellipse(width/4, height/4, 80, 80);
  popMatrix();
}

void drawSquare()
{  
  pushMatrix();
  if(shape == 2)
  {
    if(squareColorCntr == 1)
    { 
      squareColor.set(0, redSliderVal);
      squareColor.set(1, greenSliderVal);
      squareColor.set(2, blueSliderVal);
      squareColor.set(3, opacitySliderVal);

      fill(squareColor.get(0), squareColor.get(1), squareColor.get(2), squareColor.get(3));
    }
    else if(squareColorCntr == 2)
    {
      squareColorHolder.set(0, squareColor.get(0));
      squareColorHolder.set(1, squareColor.get(1));
      squareColorHolder.set(2, squareColor.get(2));
      squareColorHolder.set(3, squareColor.get(3));

      cp5.getController("redSliderVal").setValue((int)squareColorHolder.get(0));
      cp5.getController("greenSliderVal").setValue((int)squareColorHolder.get(1));
      cp5.getController("blueSliderVal").setValue((int)squareColorHolder.get(2));
      cp5.getController("opacitySliderVal").setValue((int)squareColorHolder.get(3));

      fill((int)squareColorHolder.get(0), (int)squareColorHolder.get(1), (int)squareColorHolder.get(2), (int)squareColorHolder.get(3)); 

      squareColorCntr = 1;
    }  
  }
  else if(shape != 2)
  {
    fill((int)squareColor.get(0), (int)squareColor.get(1), (int)squareColor.get(2), (int)squareColor.get(3)); 
  }
  rect(width/2, height/4, 80, 80);
  popMatrix();
}

void drawLine()
{
  pushMatrix();
  if(shape == 3)
  {
    if(lineColorCntr == 1)
    { 
      lineColor.set(0, redSliderVal);
      lineColor.set(1, greenSliderVal);
      lineColor.set(2, blueSliderVal);
      lineColor.set(3, opacitySliderVal);

      stroke(lineColor.get(0), lineColor.get(1), lineColor.get(2), lineColor.get(3));
    }
    else if(lineColorCntr == 2)
    {
      lineColorHolder.set(0, lineColor.get(0));
      lineColorHolder.set(1, lineColor.get(1));
      lineColorHolder.set(2, lineColor.get(2));
      lineColorHolder.set(3, lineColor.get(3));

      cp5.getController("redSliderVal").setValue((int)lineColorHolder.get(0));
      cp5.getController("greenSliderVal").setValue((int)lineColorHolder.get(1));
      cp5.getController("blueSliderVal").setValue((int)lineColorHolder.get(2));
      cp5.getController("opacitySliderVal").setValue((int)lineColorHolder.get(3));

      stroke((int)lineColorHolder.get(0), (int)lineColorHolder.get(1), (int)lineColorHolder.get(2), (int)lineColorHolder.get(3)); 

      lineColorCntr = 1;
    }
  }
  if(shape != 3)
  {
    stroke((int)lineColor.get(0), (int)lineColor.get(1), (int)lineColor.get(2), (int)lineColor.get(3));
  }
  strokeWeight(5);
  line((width * 3)/4, height/4 + 40, (width * 3)/4, height/4 - 40);
  strokeWeight(1);
  popMatrix();
}

void line(boolean theFlag)
{
  if(theFlag == true) 
  {
    shape = 3;
    line = true;

    circle = false;
    cp5.getController("circle").setValue(0);

    square = false;
    cp5.getController("square").setValue(0);
  }
  else line = false;

  lineTruthArray[0] = lineTruthArray[1];
  lineTruthArray[1] = theFlag;

  lineTruthArrayCntr ++;
  println("lineTruthArrayCntr: " + lineTruthArrayCntr);


  if((lineTruthArray[0] == true) & (lineTruthArray[1] == false))
  {
    lineColorCntr ++;

    if(lineColorCntr >= 3) 
    { 
      lineColorCntr = 1;
    }
  }   
  lineTruthArrayCntr = 0;

  println(lineTruthArray);
  println("lineColorCntr: " + lineColorCntr);
}

void circle(boolean theFlag)
{ 
  if(theFlag == true) 
  {
    shape = 1;
    circle = true;

    line = false;
    cp5.getController("line").setValue(0);

    square = false;
    cp5.getController("square").setValue(0);
  }
  else circle = false;

  circleTruthArray[0] = circleTruthArray[1];
  circleTruthArray[1] = theFlag;

  circleTruthArrayCntr ++;
  println("circleTruthArrayCntr: " + circleTruthArrayCntr);

  if((circleTruthArray[0] == true) & (circleTruthArray[1] == false))
  {
    circleColorCntr ++;

    if(circleColorCntr >= 3) 
    { 
      circleColorCntr = 1;
    }
  }   
  circleTruthArrayCntr = 0;

  println(circleTruthArray);
  println("circleColorCntr: " + circleColorCntr);
}

void square(boolean theFlag)
{
  if(theFlag == true) 
  {
    shape = 2;
    square = true;

    circle = false;
    cp5.getController("circle").setValue(0);

    line = false;
    cp5.getController("line").setValue(0);
  }
  else square = false;

  squareTruthArray[0] = squareTruthArray[1];
  squareTruthArray[1] = theFlag;

  squareTruthArrayCntr ++;
  println("squareTruthArrayCntr: " + squareTruthArrayCntr);

  if((squareTruthArray[0] == true) & (squareTruthArray[1] == false))
  {
    squareColorCntr ++;

    if(squareColorCntr >= 3) 
    { 
      squareColorCntr = 1;
    }
  }   
  squareTruthArrayCntr = 0;

  println(squareTruthArray);
  println("squareColorCntr: " + squareColorCntr);
}

void controlEvent(ControlEvent theControlEvent)
{
  if(theControlEvent.isFrom("redSliderVal"))
  {
      cp5.getController("colorR").setColorBackground(color(redSliderVal, 0, 0));
  }

  if(theControlEvent.isFrom("greenSliderVal"))
  {
      cp5.getController("colorG").setColorBackground(color(0, greenSliderVal, 0));
  }

  if(theControlEvent.isFrom("blueSliderVal"))
  {
      cp5.getController("colorB").setColorBackground(color(0, 0, blueSliderVal));
  }

  if(theControlEvent.isFrom("opacitySliderVal"))
  {
      cp5.getController("colorA").setColorBackground(color(255, opacitySliderVal));
  }
}
Sign In or Register to comment.