Vertex color interpolation on shape

p5.js
1

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
2

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[0]).cc;
          PVector v2 = faces.get(r.tr[1]).cc;
          fill(c1);
          vertex(vxs.x, vxs.y, vxs.z);
          if (faces.get(r.tr[0]).pid!=pid) {
            fill(c2);
          } else {
            fill(c1);
          }
          vertex(s*v1.x, s*v1.y, s*v1.z);
           if (faces.get(r.tr[1]).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)

TestRandomVectors
TestRandomVectors602×627 137 KB

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

1 Like
3

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

4

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.

5

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
6
1 Like