How to draw a curveVertex with color gradient?

Processing Beginners
1

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

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:

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 from 2017 but unfortunately, the OP did not reveal how color gradients with vertices and curvedVertices behave the same…

2

u can use the lerpColor(c1, c2, amt) function to make a gradient in processing check out this doc for reference
lerpColor() Reference

3

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.

4

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
image774×778 8.87 KB 

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
image783×781 4.04 KB 

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 may be able to generate small segments so you can render them with different colors.