Hi there!

I have found an interesting way to create gradients with lines in a tutorial.

``````size (900, 900);
background (255);
colorMode(HSB,360,100,100);
for (int i = 0; i < 300; i++) {
stroke(i,100,100);
line(0, i, 1000, i);

}
``````

Now, I would like to make a gradient from yellow(60) to blue(180). I have tried to make another loop from 60 to 180 and use it like hue, but It does not work.

``````size (900, 900);
background (255);
colorMode(HSB,360,100,100);
for (int i = 0; i < 300; i++) {
for(int g = 60; g < 180; g++) {
stroke(g,100,100);
line(0, i, 1000, i);
}
}
``````

Could you please tell me how to make a number from 60 to 180 to make this gradient? Thanks!

1 Like

Hi

Play with this

``````void setup () {
size (600,600);
colorMode(HSB);
}
void draw(){
for(int i= 500; i >0; i=i -2) {
fill((i/5) + (mouseX/3), 225,255);
rect(i,1,i,height);
}
}
``````
1 Like

check out lerpColor()

it should help a lot.

1 Like

Maybe what you are looking for is to use the function `map()`.

Because see, you are trying to iterate two ranges: a vertical position, maybe with a variable `y`, and at the same time a hue. Both ranges have different starting and ending points.

With map you could map the vertical position that goes from 0 to height to a hue that goes from 60 to 180.

``````size (900, 900);
background (255);
colorMode(HSB, 360, 100, 100);
int start = 0;
int end = height;
int hueStart = 60;
int hueEnd = 180;
for (int y = start; y < end; y++) {
stroke(map(y, start, end, hueStart, hueEnd), 100, 100);
line(0, y, 1000, y);
}
``````

This way you can change independently `start`, `end`, `hueStart` and `hueEnd` to define where you want the gradient and which colors should be in it.

4 Likes

Thank you so much, that is exactly what I was looking for! It is really smart, I would not been able to play with variables like this.