# ControlP5 slider inactive because of translate function
**URL:** https://discourse.processing.org/t/controlp5-slider-inactive-because-of-translate-function/44999
**Category:** Libraries
**Created:** [August 27, 2024, 5:54am UTC](https://discourse.processing.org/t/controlp5-slider-inactive-because-of-translate-function/44999 "2024-08-27T05:54:41Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@willemr](https://discourse.processing.org/u/willemr)
#### Post date: [August 27, 2024, 5:54am UTC](https://discourse.processing.org/t/controlp5-slider-inactive-because-of-translate-function/44999/1 "2024-08-27T05:54:41Z")
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:
```auto
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
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 27, 2024, 6:45am UTC](https://discourse.processing.org/t/controlp5-slider-inactive-because-of-translate-function/44999/2 "2024-08-27T06:45:04Z")
Try this:
```auto
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:
- [push() / Reference / Processing.org](https://processing.org/reference/push_.html) \< Also see related references.
- [GitHub - sojamo/controlp5: A gui library for processing.org](https://github.com/sojamo/controlp5) \< See examples here
`:)`
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [August 27, 2024, 6:45am UTC](https://discourse.processing.org/t/controlp5-slider-inactive-because-of-translate-function/44999/3 "2024-08-27T06:45:24Z")
Hi @willemr,
Try this …
```auto
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
---
### Author:  [@willemr](https://discourse.processing.org/u/willemr)
#### Post date: [August 27, 2024, 8:30am UTC](https://discourse.processing.org/t/controlp5-slider-inactive-because-of-translate-function/44999/4 "2024-08-27T08:30:28Z")
How elegant! Perfect, that works. Thanks so much!
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [August 27, 2024, 12:42pm UTC](https://discourse.processing.org/t/controlp5-slider-inactive-because-of-translate-function/44999/5 "2024-08-27T12:42:32Z")
[**push()**](https://processing.org/reference/push_.html) = [**pushMatrix()**](https://processing.org/reference/pushMatrix_.html) + [**pushStyle()**](https://processing.org/reference/pushStyle_.html).
So, if we don’t need the [**pushStyle()**](https://processing.org/reference/pushStyle_.html) part, use [**pushMatrix()**](https://processing.org/reference/pushMatrix_.html) in place of [**push()**](https://processing.org/reference/push_.html).