ControlP5 slider inactive because of translate function

Processing Libraries
1

Hey everyone,

New (again) to Processing. Trying to write a simple “interactive gradient” drawing program in which a couple of sliders (using the ControlP5 library) control some variables of the wave function and the colors. But I’m stuck, because the sliders become inactive when I execute my draw() piece of code. It turns out that the translate function is the one that ruins it. I think the mouseX and mouseY coordinates change and that the library doesn’t account on this shift, resulting in inactive sliders. I’d like to know if there are simple workarounds so I can keep using the translate function that centers the 0,0 point. Thanks so much.

Here’s the code:


import controlP5.*;

ControlP5 cp5;
int myColor = color(0, 0, 0);

float sliderValue = 0.5;
float sliderValue2 = 0.8;
int sliderValue3 = 30; 
float sliderValue4 = 0.5;
float sliderValue5 = 0.5;

void setup() {
  size(900, 900);
  noStroke();
  cp5 = new ControlP5(this);

  // add a horizontal sliders, the value of this slider will be linked
  // to variable 'sliderValue'

cp5.addSlider("sliderValue")
    .setPosition(0, 50)
    .setRange(0, 255)
    .setValueLabel("Add some")
    .setCaptionLabel("Pepper!")
    ;


  cp5.addSlider("sliderValue2")
    .setPosition(200, 100)
    .setRange(0, 255)
    .setValueLabel("Add some")
    .setCaptionLabel("Salt!")
    ;

//size van de shapes
  cp5.addSlider("sliderValue3")
    .setPosition(200, 150)
    .setRange(0, 100)
    .setValueLabel("Add some")
    .setCaptionLabel("Boldness!")
    ;


  cp5.addSlider("sliderValue4")
    .setPosition(200, 200)
    .setRange(0, 1)
    .setValueLabel("Add some")
    .setCaptionLabel("sinus!")
    ;


  cp5.addSlider("sliderValue5")
    .setPosition(200, 250)
    .setRange(0, 1)
    .setValueLabel("Add some")
    .setCaptionLabel("cosinus!")
    ;
}


void draw() {
  

    
translate(width/2, height/2);
  //magnitude
  float mag = 20;
//size shapes
  float s = sliderValue3;
  
  for(int i = 0; i < 100; i++) {
    float sin = map(sin(radians(frameCount*sliderValue4+i)), -1, 1, -mag, mag);
        float cos = map(cos(radians(frameCount*sliderValue5+i)), -1, 1, -mag, mag);
ellipse(sin, cos, s, s);

  }

//here i'll add some code that changes the color depending on the sliders
  
}
2

Try this:

  push();    
  translate(width/2, height/2);
  //magnitude
  float mag = 20;
  //size shapes
  float s = sliderValue3;
  
  for(int i = 0; i < 100; i++) 
    {
    float sin = map(sin(radians(frameCount*sliderValue4+i)), -1, 1, -mag, mag);
    float cos = map(cos(radians(frameCount*sliderValue5+i)), -1, 1, -mag, mag);
    ellipse(sin, cos, s, s);
    } 
  pop();

Reference:

:)

1 Like
3

Hi @willemr,

Try this …

void setup() {
// Your init code
// cp5 = new ControlP5(this);
// ...
  cp5.setAutoDraw(false);
}

void draw() {
// ...
  pushMatrix();
  // translate...
  // your code
  popMatrix();
  // On the very end call
  cp5.draw();
}

Hope that helps …

Cheers
— mnse

4 Likes
4

How elegant! Perfect, that works. Thanks so much!

5

push() = pushMatrix() + pushStyle().

So, if we don’t need the pushStyle() part, use pushMatrix() in place of push().

4 Likes