Shading a polygon PShape

[opheliagame]

I am making a custom PShape and setting different colors to the different vertices. From my experimentation, I have understod that the PShape is triangulated and the colors given to the different vertices are interpolated between the edges of these triangles.

I am unable to understand the details of this process tho, and specifically how one example turns out.

The first half of the dome is different from the second half in how the triangles are being constructed. Can someone explain why this might be happening?
Here is my code.

dome1 = createShape();
  dome1.beginShape(POLYGON);
  dome1.stroke(255);
  
  dome1.fill(random(255));
  dome1.vertex(r/2, 0);
  dome1.fill(random(255));
  dome1.vertex(0, 0);
for(float t = PI; t < PI+radians(60); t += radians(15)) {
    float x = cos(t) * r + r;
    float y = sin(t) * r;
    dome1.fill(random(255));
   dome1.vertex(x, y);
  }
for(float t = PI+radians(120); t < TWO_PI; t += radians(15)) {
    float x = cos(t) * r;
    float y = sin(t) * r;
    dome1.fill(random(255));
   dome1.vertex(x, y);
  }
dome1.fill(random(255));
  dome1.vertex(r/2, 0);
  dome1.endShape();

[glv]

Hello,

One of the best tools in a programmers tool chest is knowing the resources available to you and learning to navigate and use them.

This is a very short list:
Resources < Click here to expand !

https://processing.org/reference/beginShape_.html
https://processing.org/examples/rgbcube.html

I just a spent a minute with your code and added a few lines that may help you think though this; it is NOT a complete solution and only intended to get you started.
Consider rethinking this and mapping out the order you want to create and color the shape vertices.

"Example < expand this!

PShape dome1;
float r = 200;

float col;
float c;
float tmp;

float x, y;

void setup()
  {
  background(0);
  size(500, 500, P2D);
  translate(width/3, 2*height/3);
  
  //println(TRIANGLE);
  
  col = 255/9.0;
  
  beginShape();
  dome1 = createShape();
  dome1.beginShape();
  //dome1.stroke(255);
  dome1.noStroke();
  
  //tmp = c++*col;
  //dome1.fill(tmp); println(tmp, int(x), int(y));
  
  //dome1.vertex(r/2, 0);
  
  //tmp = c++*col;
  //dome1.fill(tmp); println(tmp, int(x), int(y));
  
  //dome1.vertex(0, 0);

for(float t = PI; t < PI+radians(60); t += radians(15)) 
  {
  x = cos(t) * r + r;
  y = sin(t) * r;
  
  tmp = c++*col; println(tmp, int(x), int(y));
  dome1.fill(tmp); 
  
  dome1.vertex(x, y);
  }

  for(float t = PI+radians(120); t < TWO_PI; t += radians(15)) 
    {
    x = cos(t) * r;
    y = sin(t) * r;
    
    tmp = c++*col; println(tmp, int(x), int(y));
    dome1.fill(tmp); 
    
    dome1.vertex(x, y);
    }
  
  tmp = c++*col; println(tmp, int(x), int(y));
  dome1.fill(tmp);
  
  dome1.vertex(r/2, 0);
  dome1.endShape();
  
  shape(dome1, 0, 0);
  }

:)

And something I have yet to explore also:
https://processing.org/tutorials/pshader/