# Creating a Gradient for a Bezier Curve?

**URL:** https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719
**Category:** Beginners
**Created:** [September 8, 2023, 8:47am UTC](https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719 "2023-09-08T08:47:53Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![looplider](https://avatars.discourse-cdn.com/v4/letter/l/9fc29f/32.png) [@looplider](https://discourse.processing.org/u/looplider)
#### Post date: [September 8, 2023, 8:47am UTC](https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719/1 "2023-09-08T08:47:53Z")

</div>

Hi there -  
I am curious if there is a way to use a gradient as a “fill” color for a Bezier curve.

I wrote up a silly example with the Bezier… not sure if this is possible though.  
Thanks.

```auto
function setup() {
  createCanvas(720, 400);
  noFill();
  noLoop();

}

function draw() {
  scale(1, 1);
  background(244);
  fill(100, 100, 0);
  stroke(10, 10, 200);
  bezier(100, 90, 20, 300, 31, 20, 90, 100);
}

```

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [September 8, 2023, 12:31pm UTC](https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719/2 "2023-09-08T12:31:47Z")

</div>

Hi @looplider,

the [bezier](https://p5js.org/reference/#/p5/bezier) function just uses the defined [stroke](https://p5js.org/reference/#/p5/stroke) (single color), so if you want to draw a bezier curve with a gradient, you need to implement it with ie. [bezierPoint](https://p5js.org/reference/#/p5/bezierPoint) function.

Cheers  
— mnse

* * *

Here’s an example code (press **`</>`** button):

https://editor.p5js.org/mnse_forum/full/-80bWh5oa

---

<div class="post-metadata">

### Author: ![looplider](https://avatars.discourse-cdn.com/v4/letter/l/9fc29f/32.png) [@looplider](https://discourse.processing.org/u/looplider)
#### Post date: [September 8, 2023, 3:04pm UTC](https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719/3 "2023-09-08T15:04:37Z")

</div>

This is interesting - so, in order to use a gradient with a Bezier curve, one needs to do approximately 100 operations on each curve to smooth the transitions?

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [September 8, 2023, 3:56pm UTC](https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719/4 "2023-09-08T15:56:39Z")

</div>

Hi @looplider,

The 100 steps are not a fixed standard. Depending on the curve, this number may need to be adjusted to ensure a consistent progression.

Cheers  
— mnse

---

<div class="post-metadata">

### Author: ![looplider](https://avatars.discourse-cdn.com/v4/letter/l/9fc29f/32.png) [@looplider](https://discourse.processing.org/u/looplider)
#### Post date: [September 11, 2023, 3:26am UTC](https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719/5 "2023-09-11T03:26:02Z")

</div>

I’m wondering now if I wanted to use a gradient fill() - this would be much harder?

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [September 11, 2023, 7:53am UTC](https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719/6 "2023-09-11T07:53:04Z")

</div>

Hi @looplider,

Don’t know if it is harder, but a bit more to do …

* * *

This is just a quick implementation. The triangle strip could be further optimized, but it’s a good starting point though.

Cheers  
— mnse

https://editor.p5js.org/mnse_forum/full/UzKLR_Li6