Gradient with lines

Processing Coding Questions
1

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
2

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
3

check out lerpColor()

it should help a lot.

1 Like
4

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.

gradient
gradient900×900 4.43 KB

4 Likes
5

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.