# Gradient with lines

**URL:** <https://discourse.processing.org/t/gradient-with-lines/32035>\
**Category:** Coding Questions\
**Created:** [August 31, 2021, 8:09pm UTC](https://discourse.processing.org/t/gradient-with-lines/32035 "2021-08-31T20:09:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 31, 2021, 8:09pm UTC](https://discourse.processing.org/t/gradient-with-lines/32035/1 "2021-08-31T20:09:08Z")

</div>

Hi there!

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

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

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

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [August 31, 2021, 10:27pm UTC](https://discourse.processing.org/t/gradient-with-lines/32035/2 "2021-08-31T22:27:28Z")

</div>

Hi

Play with this

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

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [September 1, 2021, 6:10pm UTC](https://discourse.processing.org/t/gradient-with-lines/32035/3 "2021-09-01T18:10:37Z")

</div>

check out lerpColor()

> **[Reference](https://processing.org/reference/lerpColor_.html)**
>
> Calculates a color between two colors at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first point, 0.1 is very ne…

it should help a lot.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [September 2, 2021, 7:39am UTC](https://discourse.processing.org/t/gradient-with-lines/32035/4 "2021-09-02T07:39:43Z")

</div>

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.

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/57c239384882e2ea06c705cd189f4af8809fb9bd.png)

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [September 2, 2021, 7:37pm UTC](https://discourse.processing.org/t/gradient-with-lines/32035/5 "2021-09-02T19:37:07Z")

</div>

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.