# How does P5 webgl vertex fill work

**URL:** <https://discourse.processing.org/t/how-does-p5-webgl-vertex-fill-work/43192>\
**Category:** Coding Questions\
**Created:** [November 11, 2023, 6:05pm UTC](https://discourse.processing.org/t/how-does-p5-webgl-vertex-fill-work/43192 "2023-11-11T18:05:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![chaseLoop](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@chaseLoop](https://discourse.processing.org/u/chaseLoop)\
**Post date:** [November 11, 2023, 6:05pm UTC](https://discourse.processing.org/t/how-does-p5-webgl-vertex-fill-work/43192/1 "2023-11-11T18:05:48Z")

</div>

Hi, I intend to fill some custom flat shape with different color for different vertex in p5js Webgl mode, but some vertex color doesn’t show up as intended. In this example below i’m expecting the upper right corner to be white and red only shows up in the botton half of the shape, but the corner turns out red.  
How could I turn that corner white? Thank you if any suggestions.

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

function draw() {
  background(220);
    noLoop()
  beginShape()

  fill('#fff')
  vertex(-100,-100)
   fill('#fff')
  vertex(100,-100)
 fill('#fff')
  vertex(100,0)

   fill('#fff')
  vertex(100,100)
  fill(250,0,0)
  vertex(00,90)
   fill(250,0,0)
  vertex(-100,100)
  fill('#fff')
  vertex(-100,0)
  endShape(CLOSE)
}

```

![Screen Shot 2023-11-11 at 1.05.16 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/8/d89aae50d1fa684e6e7d5e63172ea118eec597b2.png)

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 12, 2023, 6:59am UTC](https://discourse.processing.org/t/how-does-p5-webgl-vertex-fill-work/43192/2 "2023-11-12T06:59:24Z")

</div>

hi @chaseLoop ,

you need to sepatate them if you want dedicated colors…

Cheers  
— mnse

https://editor.p5js.org/mnse_forum/full/fZ8PhuCNy

---

<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:** [November 12, 2023, 10:44am UTC](https://discourse.processing.org/t/how-does-p5-webgl-vertex-fill-work/43192/3 "2023-11-12T10:44:25Z")

</div>

Hello @chaseLoop,

I separated the shapes to get a clean gradient from top to bottom.  
HSB was used so I had color saturation from 0 to 100 which was easy to work with.

```auto
function setup() 
  {
  createCanvas(400, 400, WEBGL)
  colorMode(HSB, 100)
  background(220);
  
  beginShape();
  fill(0, 50, 100);
  vertex(-100, 0);
  
  fill(0, 100, 100);
  vertex(-100, -100);
  
  fill(0, 100, 100);
  vertex(0, -100);
  
  fill(0, 50, 100);
  vertex(0, 0);
  endShape(CLOSE);
 
  translate(0, 100); // I did this to simplify! May want to generate vertices.
  beginShape();
  fill(0, 0, 100);
  vertex(-100, 0);
  
  fill(0, 50, 100);
  vertex(-100, -100);
  
  fill(0, 50, 100);
  vertex(0, -100);
  
  fill(0, 25, 100);
  vertex(0, -50);
  endShape(CLOSE);  
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/e/deddb150698af06c53d64432a23d1762ef0621fd.png) ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/8/d87b1166ccea75d80d5170b13578656261f1c269.png)

This may be a challenge for complex shapes.

`:)`