# Shading a polygon PShape

**URL:** <https://discourse.processing.org/t/shading-a-polygon-pshape/21833>\
**Category:** Coding Questions\
**Created:** [June 13, 2020, 7:44am UTC](https://discourse.processing.org/t/shading-a-polygon-pshape/21833 "2020-06-13T07:44:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![opheliagame](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/opheliagame/32/8552_2.png) [@opheliagame](https://discourse.processing.org/u/opheliagame)\
**Post date:** [June 13, 2020, 7:44am UTC](https://discourse.processing.org/t/shading-a-polygon-pshape/21833/1 "2020-06-13T07:44:58Z")

</div>

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.

 ![image-3083](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7695f40874f98894bab13a1201588529cc829de8.png)

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.

```auto
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();

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 13, 2020, 3:50pm UTC](https://discourse.processing.org/t/shading-a-polygon-pshape/21833/2 "2020-06-13T15:50:34Z")

</div>

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/reference/beginShape_.html)  
[https://processing.org/examples/rgbcube.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!**
>
> ```auto
> 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);
> }
> 
> ```

`:)`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/43975d89946b250ff8ff42680d00b15145d76429.png)

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