beginShape vertex, lights() issues

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• [x ] Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: 1.4.0
• Web browser and version: 93.0.4577.82 (Official Build)
• Operating System: MacOSX
• Steps to reproduce this:

Run the code below. Comment out:

beginShape(TRIANGLES); for (let face_points of faces){ for (let p of face_points) { vertex(...vectors[p]); } } endShape();

or
box(100)

When it is the box, the directional light is consistent. When it is the beginShape() the lighting is very bright then very dark as if the light itself is rotating in its own way? And not working properly as a result.

`const PHI = (1 + Math.sqrt(5)) / 2;
let vectors = [
[-1, PHI, 0],
[ 1, PHI, 0],
[-1, -PHI, 0],
[ 1, -PHI, 0],
[0, -1, PHI],
[0, 1, PHI],
[0, -1, -PHI],
[0, 1, -PHI],
[ PHI, 0, -1],
[ PHI, 0, 1],
[-PHI, 0, -1],
[-PHI, 0, 1]
];
let faces = [
[0, 11, 5],
[0, 5, 1],
[0, 1, 7],
[0, 7, 10],
[0, 10, 11],
[1, 5, 9],
[5, 11, 4],
[11, 10, 2],
[10, 7, 6],
[7, 1, 8],
[3, 9, 4],
[3, 4, 2],
[3, 2, 6],
[3, 6, 8],
[3, 8, 9],
[4, 9, 5],
[2, 4, 11],
[6, 2, 10],
[8, 6, 7],
[9, 8, 1],
];

const canvasWidth = 500;
const canvasHeight = 500;
const fps=30;
const rad=50;
function norm_v(v) {
const ln2 = Math.sqrt(v[0]**2+v[1]**2+v[2]**2)
return v.map(c=> c*rad/ln2);
}

let middle_point_cache = {};
function middle_point(point_1, point_2) {
smaller_index = min(point_1, point_2);
greater_index = max(point_1, point_2);
let key = smaller_index.toString()+'-'+greater_index.toString();
if (key in middle_point_cache) {
return middle_point_cache[key];}
let middle = vectors[point_1].map((c, i)=>(c+vectors[point_2][i])/2 );
vectors.push( norm_v(middle) );
index = vectors.length - 1;
middle_point_cache[key] = index;
return index;
}

function divide(faces) {
let faces_subdiv = [];
for (let tri of faces){
v1 = middle_point(tri[0], tri[1]);
v2 = middle_point(tri[1], tri[2]);
v3 = middle_point(tri[2], tri[0]);
faces_subdiv.push([tri[0], v1, v3]);
faces_subdiv.push([tri[1], v2, v1]);
faces_subdiv.push([tri[2], v3, v2]);
faces_subdiv.push([v1, v2, v3]);
}
return faces_subdiv;
}

let all_cs = [];

function setup(){
const random_seed = parseInt(random(100));
randomSeed(random_seed);

createCanvas(canvasWidth, canvasHeight, WEBGL);
frameRate(fps);
background(all_cs[0],all_cs[1],all_cs[2]);

const subdiv = parseInt( random(2) )+2;//4;

for (let i = 0; i < 12; i++) {
  all_cs.push(random(255));
}
vectors = vectors.map(x=>norm_v(x));
for (let i = 0; i < subdiv; i++) {
    faces = divide(faces);
}

}

function draw() {

console.log(frameRate())
translate(0,0,200);
background(all_cs[0],all_cs[1],all_cs[2]);
ambientLight(128, 128, 128);
directionalLight(128, 128, 128, 0, 0, -1);
rotateY(0.01frameCount);
rotateZ(0.01frameCount);

fill(all_cs[6],all_cs[7],all_cs[8]);
strokeWeight(0.1);
stroke(all_cs[9],all_cs[10],all_cs[11]);
//box(100)
beginShape(TRIANGLES);
for (let face_points of faces){
    for (let p of face_points) {
        vertex(...vectors[p]);
    }
}
endShape();

}
`

Thank you for any help that can be provided.

Reproduce the sketch with WEBGL using beginShape(TRIANGLES), directionalLight(), and box(100) as the comparison. Start by tracing the WebGL shape and lighting paths involved in those entry points; done means the custom triangulated shape has consistent lighting comparable to the box under the reported rotations.