So I’m trying to create a grid, with each row being a single beginShape() object using QUAD_STRIP.
My code uses a nested for loop to generate the x and y values, and then runs through these values per row, with each xy value adding one vertex for its position and one vertex for the next row like quad strips requests (it’ll make more sense in the code bellow)
Unfortunately, in webGL mode I end up getting the zig zag strip shown bellow instead of a quad strip:
I get these zigzag strips using QUAD_STRIP in webgl even when using the example code on the P5.js (found here). But when I go into 2D mode I get quadstrips like normal. Does anyone know why I’m getting these zigzags in webGL and how to fix them?
Many thanks,
chreeb
The Code:
let grid,gridWid,gridHei,numHeiVariations;
function setup() {
createCanvas(window.innerWidth,window.innerHeight,WEBGL);
smooth();
gridWid = 10;
gridHei = 10;
numHeiVariations = 10;
grid = [];
for (let y = 0; y < gridHei; y++) {
let tempRow = [];
for (let x = 0; x < gridWid; x++) {
let tempTile = {
x:x,
y:[],
z:y
}
for (let i = 0; i < numHeiVariations; i++) {
let n = noise(tempTile.x*0.1 + (i*10),tempTile.z*0.1 + (i*10)) * map(dist(tempTile.x,tempTile.z,0,0),0,(gridWid * gridHei),1,0.1);
tempTile.y.push(n);
}
tempRow.push(tempTile);
}
grid.push(tempRow);
}
}
function windowResized() {
resizeCanvas(window.innerWidth,window.innerHeight);
resetCamera();
}
function draw() {
background(255);
let size = (width / height) * 50;
rotateX(radians(54.));
rotateZ(radians(45));
translate(-(size * (gridWid-1))/2,-(size * (gridHei-1))/2,0);
fill(255);
for (let y = 0; y < 1; y++) {
beginShape(QUAD_STRIP);
for (let x = 0; x < 5; x++) {
vertex(grid[x][y].x*size,
grid[x][y].z*size,
grid[x][y].y[0]*0);
vertex(grid[x][y+1].x*size,
grid[x][y+1].z*size,
grid[x][y+1].y[0]*0);
}
endShape();
}
}
