# How to make gradient color in controlP5
**URL:** https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539
**Category:** Libraries
**Created:** [November 16, 2019, 1:55pm UTC](https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539 "2019-11-16T13:55:16Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@yty](https://discourse.processing.org/u/yty)
#### Post date: [November 16, 2019, 1:55pm UTC](https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539/1 "2019-11-16T13:55:16Z")
Hello, I’m fairly new to processing therefore I have some issues with my program.
I have made a slider using the cp5 library in Processing. However, I have some issues when it comes to changing the color to a gradient color so the slider fades from a red to a blue color.
I have attached a picture of what I mean with gradient color. So when the slider is slided down the red color disappears and becomes blue and when slided up it become more and more red.
This is my code. I hope someone can help me.
```auto
import controlP5.*;
ControlP5 controlP5;
int from = color(255,0,0);
int to = color(0,120,200);
void setup() {
size(500,700);
//smooth();
controlP5 = new ControlP5(this);
//change the default font to Verdana;
PFont p = createFont("Verdana",20);
ControlFont font = new ControlFont(p);
//change the original colors
controlP5.setColorForeground(lerpColor(from, to, 0.5));
controlP5.setColorBackground(color(150,158,159));
controlP5.setFont(font);
controlP5.setColorActive(lerpColor(from, to, 0.5));
controlP5.addSlider("")
.setRange(0,30)
.setValue(20)
.setPosition(180,80)
.setSize(120,600)
.setColorValue(200)
.setColorLabel(200);
}
void draw() {
background(0); // background black
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 16, 2019, 2:36pm UTC](https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539/2 "2019-11-16T14:36:58Z")
sorry, i try but get errors,
nevertheless want show my version as a start
```auto
import controlP5.*;
ControlP5 controlP5;
Slider myslider;
int from = color(255, 0, 0);
int to = color(0, 120, 200);
float start=20;
void setup() {
size(500, 700);
controlP5 = new ControlP5(this);
PFont p = createFont("Verdana", 20); //change the default font to Verdana;
ControlFont font = new ControlFont(p);
myslider = controlP5.addSlider("sldr")
.setRange(0, 30)
.setValue(start)
.setPosition(180, 80)
.setSize(120, 600)
.setColorValue(200)
.setColorLabel(200)
.setColorBackground(color(150, 158, 159))
.setFont(font)
.setColorForeground(lerpColor(from, to, start/30.0))
.setColorActive(lerpColor(from, to, start/30.0));
}
void draw() {
background(0); // background black
}
void sldr(float val) { // ________________ called by slider at change
println("a slider event. "+val);
color col = lerpColor(from, to, val/30.0);
myslider.setColorForeground(col);
myslider.setColorActive(col);
}
```
---
### Author:  [@yty](https://discourse.processing.org/u/yty)
#### Post date: [November 16, 2019, 2:42pm UTC](https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539/3 "2019-11-16T14:42:10Z")
Thank you sm for trying!! 🙂
However, I don’t think that I was clear about what I meant by gradient??
I have attached a picture now as an example.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 16, 2019, 2:44pm UTC](https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539/4 "2019-11-16T14:44:41Z")
no idea how or if that could work, sorry you not like my version
anyhow, for any library there is a limit where you see
that it would have made more sense to
learn processing and create your own slider
instead try to learn a library ( where the documentation might be difficult to understand )
and still not get what you want.
well, still might test out the little bit newer lib G4P\_slider\_config ??
---
### Author:  [@yty](https://discourse.processing.org/u/yty)
#### Post date: [November 16, 2019, 2:48pm UTC](https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539/5 "2019-11-16T14:48:10Z")
Your version is so cool. I was just not being clear about what I wanted to do. My bad.
Thank you though!
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [November 22, 2019, 10:22pm UTC](https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539/6 "2019-11-22T22:22:50Z")
> [@yty](#):
>
> I have attached a picture now as an example.
You cannot instruct a slider to draw its own gradient. However, you can draw a gradient on top of a slider.
From [How to draw controlP5 controllers under other processing object? - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/comment/38113/#Comment_38113)
> cp5.setAutoDraw(false) in setup then call cp5.draw() wherever you want.
>
> It’s used in this example file: [http://www.sojamo.de/libraries/controlP5/examples/extra/ControlP5withPeasyCam/ControlP5withPeasyCam.pde](http://www.sojamo.de/libraries/controlP5/examples/extra/ControlP5withPeasyCam/ControlP5withPeasyCam.pde)
setAutoDraw reference:
- [controlP5 : : ControlP5 : : setAutoDraw ( )](http://sojamo.de/libraries/archive/controlP5-0-3-14/reference/controlp5_method_setautodraw.htm)
And, to draw your own linear gradient:
- [Simple Linear Gradient / Examples / Processing.org](https://processing.org/examples/lineargradient.html)
…so…
```auto
import controlP5.*;
ControlP5 controlP5;
int from = color(255, 0, 0);
int to = color(0, 120, 200);
void setup() {
size(500, 700);
controlP5 = new ControlP5(this);
//change the original colors
controlP5.setColorForeground(lerpColor(from, to, 0.5));
controlP5.setColorBackground(color(150, 158, 159));
controlP5.setColorActive(lerpColor(from, to, 0.5));
controlP5.addSlider("grad1")
.setRange(0, 30)
.setValue(20)
.setPosition(100, 80)
.setSize(120, 600)
.setColorValue(200)
.setColorLabel(200);
controlP5.addSlider("grad2")
.setRange(0, 30)
.setValue(20)
.setPosition(260, 80)
.setSize(120, 600)
.setColorValue(200)
.setColorLabel(200);
// draw controls manually so that you can draw on top of them
controlP5.setAutoDraw(false);
}
void draw() {
background(0); // background black
// slider 1: color dynamically, render normally with cp5
Controller c = controlP5.getController("grad1");
color g1 = lerpColor(to, from, c.getValue()/(c.getMax()-c.getMin()));
c.setColorActive(g1);
c.setColorForeground(g1);
// slider 2: render default with cp5.draw() then draw gradient on top
controlP5.draw();
Controller c2 = controlP5.getController("grad2");
slideGradient(c2);
}
void slideGradient(Controller c) {
float[] p = c.getPosition();
float amt = c.getValue()/(c.getMax()-c.getMin());
slideGradient(int(p[0]), int(p[1]), c.getWidth(), c.getHeight(), from, to, amt);
}
/**
* Given a geometry, gradient, and value (amt as a % from min-max)
* manually draw a gradient from the bottom of the box to current value,
* using only part of the full gradient range.
* See: https://processing.org/examples/lineargradient.html
*/
void slideGradient(int x, int y, float w, float h, color c1, color c2, float amt) {
int pos = int((y+h)-(h*amt));
for (int i = int(y+h); i >= pos; i--) {
float inter = map(i, y, y+h, 0, 1);
color c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x+w, i);
}
}
```
One changes color, as in @kll 's example, the other reveals a gradient (which is superimposed over the control).
---
### Author:  [@yty](https://discourse.processing.org/u/yty)
#### Post date: [November 23, 2019, 11:16am UTC](https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539/7 "2019-11-23T11:16:25Z")
Ahh okay. That make sense. Thank you.
---
### Author:  [@backstagerage](https://discourse.processing.org/u/backstagerage)
#### Post date: [August 23, 2022, 1:01am UTC](https://discourse.processing.org/t/how-to-make-gradient-color-in-controlp5/15539/8 "2022-08-23T01:01:06Z")
Yes, you can draw over the generated ControlP5 sliders and they will be “on top” while still being able to control then via mouse and scroll wheel. I drew my own custom looking slider thingys on top and they work well, ControlP5 just makes the logic very easy,
