Gradient Color Control

Processing Coding Questions
1

Hello,

For a gradient example of Illustrator or Photoshop, we can easily change the center point of two colors. I am trying to make a similar thing in Processing.

What I’ve tried in my code is:

  1. When mouseX is 0, the first color(c1) is dominant, like amt= 0.
  2. When mouseX is at “width/2”, lerpColor(the first color, the second color, 0.5);
  3. When mouseX is equal to “width” the second color(c2) is dominant, like amt =1.
    OR it would be great if the center point of the gradient is following mouseX.

My code seems like it is working, but it is not perfect. and I feeling like there must be a right way to do this. I appreciate if you could help me.

Here’s my code:

int X_AXIS = 1;
color c1, c2;

//gradient
PGraphics gradientBG;

void setup(){
size(512, 512, P2D);
gradientBG = createGraphics(width, height);

c1 = color(204, 102, 0);
c2 = color(0, 102, 153);
}

void draw(){
setGradient(gradientBG, 0, 0, width, height, c1, c2, X_AXIS);
image(gradientBG, 0, 0);
}

//starting x, starting y
void setGradient(PGraphics pg1, int x, int y, float w, float h, color c1, color c2, int axis){
pg1.beginDraw();
pg1.noFill();
if(axis == X_AXIS){
for(int i = x; i <=x+w; i++){

float amt = map(i, x, x+w, 0, 1);
color c = lerpColor(c1, c2, amt/map(mouseX*2, 0, 512, 0, 1));

pg1.stroke(c);
pg1.line(i, y, i, y+h);

}
}
pg1.endDraw();
}

2

hi, i try on 2 computer and see nothing.

-a- but with

void draw() {
  setGradient(gradientBG, 0, 0, width, height, c1, c2, X_AXIS);
  background(gradientBG);
}

i see what you are up to,
and with check on
https://processing.org/reference/lerpColor_.html

-b- i made it just easy for me using

//      float amt = map(i, x, x+w, 0, 1);
//      color c = lerpColor(c1, c2, amt/map(mouseX*2, 0, 512, 0, 1));
      color c = lerpColor(c1, c2,map(mouseX, 0, width, 0, 1));

but yes it looks different ( i would say more smooth )
so can you elaborate what kind of effect you want to generate with your math??

3

Thank you Kll. Sorry I forgot to add “image()”, so now this code will be visible.

If you open my code, you will see a transition between two colors.
What I tried is just to control the center point of the transition by using “mouseX”.

I feel like a problem with my code is

  1. when mouseX is going to “0”, c2(the second color) is following mouseX but black pixels shows up at the first column with “mouseX =0”.
  2. when mouse is going to “width”, c1(the first color) seems to follow mouseX but the screen is not entirely covered by “the color c1”.

Please let me know if you don’t get this. Thank you so much.

4

try to see what you are calculating

float amt = map(i, x, x+w, 0, 1);
float amt2 = amt/map(mouseX*2, 0, 512, 0, 1);
println("amt2 "+amt2);
color c = lerpColor(c1, c2, amt2 );

on the left side i see values far above 1

here a test to plot the transfer function

// https://discourse.processing.org/t/gradient-color-control/7449
// color_transfer_function
color bg, c1, c2;
PGraphics gradientBG;  //gradient
float amp,pos,ang = 0,null_one = 0,zoom =30;

void setup() {
  size(200, 200);
  stroke(0, 0, 200);
  gradientBG = createGraphics(width, height);
  c1 = color(204, 102, 0);
  c2 = color(0, 102, 153);
  transfer_function();                             // init
}

void draw() {
  background(gradientBG);
  transfer_function();                             // calc null_one cosinus transient and draw graph and bg image
}

void transfer_function() {  
  gradientBG.beginDraw();
  gradientBG.noFill();
  for (int x = 0; x< width; x++ ) {
    amp = map(mouseY,0,height,0.01,1);
    pos = map(mouseX+x*amp,0,width,0,1);
    ang = PI*pos;
    constrain(ang,0,PI);
    null_one = ( 1+ cos(ang) )/2;
    line( x, height/2, x, height/2-zoom*null_one);
    bg = lerpColor(c1, c2, null_one );
    gradientBG.stroke(bg);
    gradientBG.line(x,0, x, height);
  }
  gradientBG.endDraw();
}

possibly can use the idea