 # Vertex color interpolation on shape

Hi, I’m using p5js to draw some 3D triangles. For each triangle I have a color defined at each vertex and I would like to see a smooth interpolation of the color using the typical barycentric interpolation across the triangle. I’m trying to do this as follows:

``````beginShape();
fill(color1);
vertex(x1, y1, z1);
fill(color2);
vertex(x2, y2, z2);
fill(color3);
vertex(x3, y3, z3);
endShape();
``````

This is drawing each triangle with a solid flat color instead of an interpolated color. Is there something I’m missing?

1 Like

Hi,

That’s strange, for it surely worked for me.

``````        beginShape(TRIANGLE);
for (int i=0; i<vr.size(); i++) {
Rib r = vr.get(i);
PVector v1 = faces.get(r.tr).cc;
PVector v2 = faces.get(r.tr).cc;
fill(c1);
vertex(vxs.x, vxs.y, vxs.z);
if (faces.get(r.tr).pid!=pid) {
fill(c2);
} else {
fill(c1);
}
vertex(s*v1.x, s*v1.y, s*v1.z);
if (faces.get(r.tr).pid!=pid) {
fill(c2);
} else {
fill(c1);
}
vertex(s*v2.x, s*v2.y, s*v2.z);
}
endShape(CLOSE);
``````

(nevermind all the variables there, there are still three vertices of 3D vectors and I change the `fill()` according to some condition)

The piece of code above draws every little triangle on the screen each of which is formed by a center point of Voronoi diagram and the two points of each of its edges (I really hope I make myself clear enough, sorry if not, feel free to ask to clarify)

Maybe the parameters of `beginShape(TRIANGLE)` and `endShape(CLOSE)` do the job?

1 Like

Your code appears to be running in Processing not in p5js. I’m thinking that maybe this feature isn’t implemented in p5js yet.

Strange, this code works in the p5js editor:

function setup() {
createCanvas(400, 400, WEBGL);
}

function draw() {
background(220);
beginShape(TRIANGLES);
fill(255, 0, 0);
vertex(-100, -100, 0);
fill(0, 255, 0);
vertex( 100, -100, 0);
fill(0, 0, 255);
vertex( 0, 100, 0);
endShape(CLOSE);
}

but draws a solid blue triangle on my website. I wonder if there’s a flag I’m setting somewhere that turns this off, or if I’m pulling an old version of p5js.

Found the problem. It’s when lights() has been enabled. This must be a bug.

``````function setup() {
createCanvas(400, 400, WEBGL);
}

function draw() {
background(220);
lights();
beginShape(TRIANGLES);
fill(255, 0, 0);
vertex(-100, -100, 0);
fill(0, 255, 0);
vertex( 100, -100, 0);
fill(0, 0, 255);
vertex( 0,  100, 0);
endShape(CLOSE);
}
``````

The code above draws a blue triangle in the p5js editor. I’ll file a bug report.

2 Likes
1 Like