# Vertex color interpolation on shape

**URL:** <https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614>\
**Category:** p5.js\
**Created:** [February 7, 2020, 8:41pm UTC](https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614 "2020-02-07T20:41:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bowersjc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bowersjc/32/8029_2.png) [@bowersjc](https://discourse.processing.org/u/bowersjc)\
**Post date:** [February 7, 2020, 8:41pm UTC](https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614/1 "2020-02-07T20:41:54Z")

</div>

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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![LuckSmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lucksmith/32/5805_2.png) [@LuckSmith](https://discourse.processing.org/u/LuckSmith)\
**Post date:** [February 7, 2020, 9:49pm UTC](https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614/2 "2020-02-07T21:49:42Z")

</div>

Hi,

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

```auto
        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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a634d095502e582e2615d7fd430a0b6cf34b7f75.jpeg)

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

---

<div class="post-metadata">

**Author:** ![bowersjc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bowersjc/32/8029_2.png) [@bowersjc](https://discourse.processing.org/u/bowersjc)\
**Post date:** [February 8, 2020, 2:04pm UTC](https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614/3 "2020-02-08T14:04:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bowersjc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bowersjc/32/8029_2.png) [@bowersjc](https://discourse.processing.org/u/bowersjc)\
**Post date:** [February 8, 2020, 2:11pm UTC](https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614/4 "2020-02-08T14:11:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bowersjc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bowersjc/32/8029_2.png) [@bowersjc](https://discourse.processing.org/u/bowersjc)\
**Post date:** [February 8, 2020, 2:17pm UTC](https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614/5 "2020-02-08T14:17:17Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 8, 2020, 3:21pm UTC](https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614/6 "2020-02-08T15:21:30Z")

</div>

> <https://github.com/processing/p5.js/issues/4274>
>
> Most appropriate sub-area of p5.js?
> Color
> Core/Environment/Rendering
> Data
> Events
> Image
> IO
> Math
> Typography
> Utilities
> WebGL
> Other (specify if possible)
> Details about the...