# Horizontal gradient for line

**URL:** <https://discourse.processing.org/t/horizontal-gradient-for-line/35687>\
**Category:** Coding Questions\
**Created:** [March 11, 2022, 8:23pm UTC](https://discourse.processing.org/t/horizontal-gradient-for-line/35687 "2022-03-11T20:23:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bringmeflowers](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bringmeflowers/32/15848_2.png) [@bringmeflowers](https://discourse.processing.org/u/bringmeflowers)\
**Post date:** [March 11, 2022, 8:23pm UTC](https://discourse.processing.org/t/horizontal-gradient-for-line/35687/1 "2022-03-11T20:23:38Z")

</div>

Hi,  
I have been trying out different ways to display horizontal gradients within lines, for example, do gradient for each circle and then put into lines. But it did not work.

I just wonder if the effect is possible to do in p5.js, or anyone is willing to help will be great! Thanks.

Here is the effect I try to achieve

 ![Screenshot 2022-03-11 at 19.56.13](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4f3285fdd54c2f301ba62c14afb24438b6de0546.jpeg)

Code:

```auto
function setup() {
  createCanvas(800, 500);
  noStroke()
  c1 = color(204, 102, 0);
  c2 = color(0, 102, 153);
  noLoop();
}

function draw() {
  background(220);
  gradientLine(50, 50, mouseX, mouseY, c1,c2, 60)
}

// gradient for line
function gradientLine(x1, y1, x2, y2, c1, c2, sz) {
  const d = dist(x1, y1, x2, y2)
  for (let i = 0; i < d; i++) {
    const step = map(i, 0, d, 0, 1)
    const x = lerp(x1, x2, step)
    const y = lerp(y1, y2, step)
    const c = lerpColor(c1,c2,step)
    console.log(c);
    fill(c)
    ellipse(x, y, sz, sz)
  }
}

// gradient for ellipse
function gradient(x1, y1, x2, y2, col1, col2) {
  var grad = drawingContext.createLinearGradient(x1, y1, x2, y2);
  grad.addColorStop(0, col1);
  grad.addColorStop(1, col2);
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 12, 2022, 12:52pm UTC](https://discourse.processing.org/t/horizontal-gradient-for-line/35687/2 "2022-03-12T12:52:25Z")

</div>

Hello @bringmeflowers,

> [@bringmeflowers](#):
>
> Here is the effect I try to achieve

This topic (Java version) may be of interest:

> [@Three parallel beziers](https://discourse.processing.org/t/three-parallel-beziers/34471/10):
>
> The answer is yes but the solution is not as simple as it might seem. The problem is that any curve that is “parallel and constant distance from a Bezier curve” (aka an offset curve) is not a Bezier curve so cannot be drawn using the bezier(...) function. The solution is described [here](https://pomax.github.io/bezierinfo/#offsetting) but as you can see it seems complicated. Fortunately Processing provides the necessary functions that allow us to calculate points on the offset curve which can be used to draw the offset curve. This image show…

I was able to achieve this with a few modifications:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5cbf8fe303a4636b5b560ae88d72a59687503282.png)

`:)`

---

<div class="post-metadata">

**Author:** ![bringmeflowers](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bringmeflowers/32/15848_2.png) [@bringmeflowers](https://discourse.processing.org/u/bringmeflowers)\
**Post date:** [March 15, 2022, 9:22am UTC](https://discourse.processing.org/t/horizontal-gradient-for-line/35687/3 "2022-03-15T09:22:39Z")

</div>

Thank you so much! This is really helpful 😁