# How do i make gradient lines?

**URL:** <https://discourse.processing.org/t/how-do-i-make-gradient-lines/32377>\
**Category:** Coding Questions\
**Created:** [September 22, 2021, 5:05pm UTC](https://discourse.processing.org/t/how-do-i-make-gradient-lines/32377 "2021-09-22T17:05:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![BAE](https://avatars.discourse-cdn.com/v4/letter/b/bbe5ce/32.png) [@BAE](https://discourse.processing.org/u/BAE)\
**Post date:** [September 22, 2021, 5:05pm UTC](https://discourse.processing.org/t/how-do-i-make-gradient-lines/32377/1 "2021-09-22T17:05:24Z")

</div>

![오늘이다](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2fadebc1d6fe0e06f87544f15ab9e43511039908.jpeg)  
Sorry guys. I can’t English well  
So, I want to know How to make gradient line like this picture?

I made shape

```auto
size(600,600);
background(255);
fill(255);

for(int a=1; a<6; ++a)
for(int b=1; b<6; ++b)
for(int c=1; c<6; ++c)
for(int d=1; d<6; ++d) {
ellipse(a *100,b* 100,10,10);
stroke(255,255,255);
line(a *100,b* 100,c *100,d* 100);
}

```

But I don’t know fill gradient colors in lines.  
Can you help me?  
I’m very begginer.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 22, 2021, 5:25pm UTC](https://discourse.processing.org/t/how-do-i-make-gradient-lines/32377/2 "2021-09-22T17:25:19Z")

</div>

Hi,

You can use the P2D renderer and set a color for each vertex:

```auto
void setup() {
  size(500, 500, P2D);
  background(20);

  strokeWeight(2);
  beginShape(LINES);
  stroke(255, 0, 0);
  vertex(100, 100);
  stroke(0, 255, 0);
  vertex(400, 400);
  endShape();
}

```

---

<div class="post-metadata">

**Author:** ![BAE](https://avatars.discourse-cdn.com/v4/letter/b/bbe5ce/32.png) [@BAE](https://discourse.processing.org/u/BAE)\
**Post date:** [September 22, 2021, 5:45pm UTC](https://discourse.processing.org/t/how-do-i-make-gradient-lines/32377/3 "2021-09-22T17:45:25Z")

</div>

Thank you. But still I don’t know how i make picture shape in gradient.

Maybe

```auto
void setup() {
  size(500, 500, P2D);
  background(20);

  strokeWeight(2);
  beginShape(LINES);
  stroke(255, 0, 0);
  vertex(100, 100);
  stroke(0, 255, 0);
  vertex(400, 400);
  endShape();
}

for(int a=1; a<6; ++a)
for(int b=1; b<6; ++b)
for(int c=1; c<6; ++c)
for(int d=1; d<6; ++d) {
  ellipse(a*100,b*100,10,10);
line(a*100,b*100,c*100,d*100);
   }

```

these are wrong sentences.  
How I make?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 23, 2021, 12:39am UTC](https://discourse.processing.org/t/how-do-i-make-gradient-lines/32377/4 "2021-09-23T00:39:12Z")

</div>

Your code above is not correct. If you want to draw with setup only, you need to put all your code inside setup:

```auto
void setup() {
  size(500, 500, P2D);
  background(20);

  strokeWeight(2);
  beginShape(LINES);
  stroke(255, 0, 0);
  vertex(100, 100);
  stroke(0, 255, 0);
  vertex(400, 400);
  endShape();
  for (int a=1; a<6; ++a)
    for (int b=1; b<6; ++b)
      for (int c=1; c<6; ++c)
        for (int d=1; d<6; ++d) {
          ellipse(a*100, b*100, 10, 10);
          line(a*100, b*100, c*100, d*100);
        }
}

```

Also, because you are a beginner, I recommend that you always use braces “{}” when you use `for()`. Write your code like this – it is easier for you to understand:

```auto
void setup() {
  size(500, 500, P2D);
  background(20);

  strokeWeight(2);
  beginShape(LINES);
  stroke(255, 0, 0);
  vertex(100, 100);
  stroke(0, 255, 0);
  vertex(400, 400);
  endShape();
  for (int a=1; a<6; ++a) {
    for (int b=1; b<6; ++b) {
      for (int c=1; c<6; ++c) {
        for (int d=1; d<6; ++d) {
          ellipse(a*100, b*100, 10, 10);
          line(a*100, b*100, c*100, d*100);
        }
      }
    }
  }
}

```

Also, you are using drawing one line with vertex, then all your other lines with your for loops. If you want to use vertex for all your other lines, you need to put it in your for loops.

If you are a complete beginner (to loops, color, points and lines), I might also recommend starting with easier projects first!

For example, try modifying this:

> **[Simple Linear Gradient / Examples](https://processing.org/examples/lineargradient.html)**
>
> The lerpColor() function is useful for interpolating between two colors.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 23, 2021, 12:46am UTC](https://discourse.processing.org/t/how-do-i-make-gradient-lines/32377/5 "2021-09-23T00:46:20Z")

</div>

One way of changing your lines into gradient lines is to draw them one point at a time.

```auto
void pointLine(int a, int b, int c, int d) {
  float travel = max(abs(c-a), (d-b)); // how many points? choose longest dimension
  for(float i=0; i<travel; i+=0.5) { // draw point every half-pixel
    float x = lerp(a, c, i/travel); // find x
    float y = lerp(b, d, i/travel); // find y
    point(x, y);
  }
}

```

Call `pointLine(x1, y1, x2, y2)` instead of `line(x1, y1, x2, y2)`, and it will draw the same line, but with points.

THEN you can modify your pointLine to take two colors, color c1 and color c2, and decide the color of each point in the line using [lerpColor](https://processing.org/reference/lerpColor_.html).

```auto
void pointLine(int a, int b, int c, int d, color c1, color c2 ) { // ...

```

---

<div class="post-metadata">

**Author:** ![BAE](https://avatars.discourse-cdn.com/v4/letter/b/bbe5ce/32.png) [@BAE](https://discourse.processing.org/u/BAE)\
**Post date:** [September 23, 2021, 8:09am UTC](https://discourse.processing.org/t/how-do-i-make-gradient-lines/32377/6 "2021-09-23T08:09:30Z")

</div>

okay^^  
thank you.

I’ll try.