How does P5 webgl vertex fill work

p5.js Coding Questions
1

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.

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

2

hi @chaseLoop ,

you need to sepatate them if you want dedicated colors…

Cheers
— mnse

3

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.

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);  
  }

imageimage

This may be a challenge for complex shapes.

:)

1 Like