# Gradient color in Line

**URL:** <https://discourse.processing.org/t/gradient-color-in-line/6694>\
**Category:** Coding Questions\
**Created:** [December 17, 2018, 8:19am UTC](https://discourse.processing.org/t/gradient-color-in-line/6694 "2018-12-17T08:19:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [December 17, 2018, 8:19am UTC](https://discourse.processing.org/t/gradient-color-in-line/6694/1 "2018-12-17T08:19:59Z")

</div>

Hello! It’s me again 😊 with the beginner question.

So I was playing around with lines as you can see in the code below and I want to make the gradient **color from black to white in the lines** to give effect of depth. But I don’t know how to do it. I try to read the gradient function in the library but I couldn’t understand ☹

[Gradient Lines](https://editor.p5js.org/istiko@gmail.com/sketches/SyM_z0NgE)

```auto
function setup() {
    createCanvas(600, 300);
}

function draw() {
    background(220);
    for (let y = 20; y <= height - 20; y += 20) {
        for (let x = 20; x <= width - 20; x += 20) {

            //draw lines
            stroke(50);
            line(x, y, mouseX, mouseY);

            //draw dot
            fill(220);
            noStroke();
            ellipse(x, y, 5, 5);

        }
    }
}

```

Any idea how to it? 😌

Thanks

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [December 17, 2018, 8:47am UTC](https://discourse.processing.org/t/gradient-color-in-line/6694/2 "2018-12-17T08:47:27Z")

</div>

Example:

```auto

void gradiant_line( color s, color e, float x, float y, float xx, float yy ) {
  for ( int i = 0; i < 100; i ++ ) {
    stroke( lerpColor( s, e, i/100.0) );
    line( ((100-i)*x + i*xx)/100.0, ((100-i)*y + i*yy)/100.0, 
      ((100-i-1)*x + (i+1)*xx)/100.0, ((100-i-1)*y + (i+1)*yy)/100.0 );
  }
}

float px, py;

void setup() {
  size(600, 600);
  px = 300;
  py = 300;
}

void draw() {
  background(128);
  gradiant_line( color(0), color(255), mouseX, mouseY, px, py );
}

```

This could probably be improved…

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [December 17, 2018, 9:15pm UTC](https://discourse.processing.org/t/gradient-color-in-line/6694/3 "2018-12-17T21:15:38Z")

</div>

@TfGuy44 is spot on however this is a question about p5 so the syntax is slightly different. Also took the liberty of changing some of the names.

```auto
function gradiantLine(color1, color2, x1, y1, x2, y2) {
  for (let i = 0; i < 100; i ++) {
    stroke(lerpColor(color1, color2, i/100.0));
    line(
      ((100 - i) * x1 + i * x2) / 100.0,
      ((100 - i) * y1 + i * y2) / 100.0, 
      ((100 - i - 1) * x1 + (i + 1) * x2) / 100.0, 
      ((100 - i - 1) * y1 + (i + 1) * y2) / 100.0
    );
  }
}

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(128);
  gradiantLine(color(0), color(255), mouseX, mouseY, 300, 300);
}

```

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [December 18, 2018, 3:02am UTC](https://discourse.processing.org/t/gradient-color-in-line/6694/4 "2018-12-18T03:02:05Z")

</div>

Awesome! It works very well. I think I am started to understand about the lerpColor function. Thank you for your guidance ⭐