How to make gradient color in controlP5

[yty]

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.

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 
}

[kll]

sorry, i try but get errors,
nevertheless want show my version as a start

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);
}

[yty]

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.

[kll]

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 ??

[yty]

Your version is so cool. I was just not being clear about what I wanted to do. My bad.
Thank you though!

[jeremydouglass]

@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

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

setAutoDraw reference:

• controlP5 : : ControlP5 : : setAutoDraw ( )

And, to draw your own linear gradient:

• Simple Linear Gradient / Examples / Processing.org

…so…

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).

[yty]

Ahh okay. That make sense. Thank you.

[backstagerage]

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,