Creating a Gradient for a Bezier Curve?

p5.js Beginners
1

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.

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);
}
2

Hi @looplider,

the bezier function just uses the defined stroke (single color), so if you want to draw a bezier curve with a gradient, you need to implement it with ie. bezierPoint function.

Cheers
— mnse

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

2 Likes
3

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?

4

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

1 Like
5

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

6

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