# How to draw a curveVertex with color gradient?

**URL:** <https://discourse.processing.org/t/how-to-draw-a-curvevertex-with-color-gradient/28513>\
**Category:** Beginners\
**Created:** [March 14, 2021, 12:02am UTC](https://discourse.processing.org/t/how-to-draw-a-curvevertex-with-color-gradient/28513 "2021-03-14T00:02:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tea\_tree](https://avatars.discourse-cdn.com/v4/letter/t/d6d6ee/32.png) [@tea\_tree](https://discourse.processing.org/u/tea_tree)\
**Post date:** [March 14, 2021, 12:02am UTC](https://discourse.processing.org/t/how-to-draw-a-curvevertex-with-color-gradient/28513/1 "2021-03-14T00:02:40Z")

</div>

Drawing a color gradient with a line, even in 3D, is pretty straight-forward:

```auto
import peasy.*;
PeasyCam cam;

void setup() {
  size(1300, 1300, P3D);
  cam = new PeasyCam(this, 200);
}

void draw() {
  background(255);
  beginShape(LINES);
  stroke(0, 0, 0);
  strokeWeight(30);
  vertex(30, 20);
  stroke(178, 34, 34);
  vertex(85, 75);
  endShape();
}

```

But as soon as I try to draw a curve vertex, the same structure will not draw a color gradient. Why is that and how can I draw a curveVertex with a color gradient?

Here’s a MWE:

```auto
import peasy.*;
PeasyCam cam;

void setup() {
  size(1300, 1300, P3D);
  cam = new PeasyCam(this, 200);
}

void draw() {
  background(255);
  beginShape();
  stroke(0, 0, 0);
  strokeWeight(30);
  curveVertex(30, 20);
  curveVertex(85, 20);
  stroke(178, 34, 34);
  curveVertex(85, 75);
  curveVertex(30, 75);
  endShape();
}

```

I found [this post](https://forum.processing.org/two/discussion/20362/drawing-a-line-with-color-gradient-using-vertices) from 2017 but unfortunately, the OP did not reveal how color gradients with vertices and curvedVertices behave the same…

---

<div class="post-metadata">

**Author:** ![ReyzArtz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reyzartz/32/11750_2.png) [@ReyzArtz](https://discourse.processing.org/u/ReyzArtz)\
**Post date:** [March 14, 2021, 5:29am UTC](https://discourse.processing.org/t/how-to-draw-a-curvevertex-with-color-gradient/28513/2 "2021-03-14T05:29:15Z")

</div>

u can use the `lerpColor(c1, c2, amt)` function to make a gradient in processing check out this doc for reference  
[lerpColor() Reference](https://processing.org/reference/lerpColor_.html)

---

<div class="post-metadata">

**Author:** ![tea\_tree](https://avatars.discourse-cdn.com/v4/letter/t/d6d6ee/32.png) [@tea\_tree](https://discourse.processing.org/u/tea_tree)\
**Post date:** [March 14, 2021, 5:52am UTC](https://discourse.processing.org/t/how-to-draw-a-curvevertex-with-color-gradient/28513/3 "2021-03-14T05:52:50Z")

</div>

Thanks! However, when I use lerpColor, I will end up with a number of gradient colors that I would use the same way I have used the stroke(x,x,x) color here. So if I’m not mistaken, the only thing that lerpColor(x,x,x) would change is that I could calculate a number of colors automatically but it would not provide a solution for drawing a curveVertex with a gradient. Please correct me if I’m wrong.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 14, 2021, 11:25am UTC](https://discourse.processing.org/t/how-to-draw-a-curvevertex-with-color-gradient/28513/4 "2021-03-14T11:25:40Z")

</div>

Stroke inside begin/endShape works with lines (vertices) because if I understand correctly this is directly passed to OpenGL renderer (in fact this doesn’t work in P2D)

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

```auto
void setup() {
  size(800,800,P3D);
  noFill();
  strokeWeight(5);
  beginShape();
  vertex(0,0);
  vertex(0,0);
  stroke(0);
  vertex(300,150);
  stroke(255,0,0);
  vertex(500,650);
  stroke(0,255,0);
  vertex(800,800);
  stroke(0);
  vertex(800,800);
  endShape();
}

```

and perhaps `curveVertex` is treated differently, Processing calculating vertices in between and passed to the render. And during this process, color is not interpolated (but if you look closely you can see the gradient probably due to the gap between vertices)

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

```auto
void setup() {
  size(800,800,P3D);
  noFill();
  strokeWeight(5);
  beginShape();
  curveVertex(0,0);
  curveVertex(0,0);
  stroke(0);
  curveVertex(300,150);
  stroke(255,0,0);
  curveVertex(500,650);
  stroke(0,255,0);
  curveVertex(800,800);
  stroke(0);
  curveVertex(800,800);
  endShape();
}

```

So if you need gradient you need to implement catmull-rom spline by yourself with color interpolation, which is doable if you are patient. Or, libraries like [geomerative](http://www.ricardmarxer.com/geomerative/documentation/index.html) may be able to generate small segments so you can render them with different colors.