# Gradient Color Control

**URL:** <https://discourse.processing.org/t/gradient-color-control/7449>\
**Category:** Coding Questions\
**Created:** [January 12, 2019, 8:55pm UTC](https://discourse.processing.org/t/gradient-color-control/7449 "2019-01-12T20:55:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![uforange](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/uforange/32/3209_2.png) [@uforange](https://discourse.processing.org/u/uforange)\
**Post date:** [January 12, 2019, 8:55pm UTC](https://discourse.processing.org/t/gradient-color-control/7449/1 "2019-01-12T20:55:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 13, 2019, 1:24pm UTC](https://discourse.processing.org/t/gradient-color-control/7449/2 "2019-01-13T13:24:56Z")

</div>

hi, i try on 2 computer and see nothing.

-a- but with

```auto
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](https://processing.org/reference/lerpColor_.html)

-b- i made it just easy for me using

```auto
// 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??

---

<div class="post-metadata">

**Author:** ![uforange](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/uforange/32/3209_2.png) [@uforange](https://discourse.processing.org/u/uforange)\
**Post date:** [January 13, 2019, 5:07pm UTC](https://discourse.processing.org/t/gradient-color-control/7449/3 "2019-01-13T17:07:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 13, 2019, 5:23pm UTC](https://discourse.processing.org/t/gradient-color-control/7449/4 "2019-01-13T17:23:51Z")

</div>

try to see what you are calculating

```auto
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

```auto
// 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