# QUAD\_STRIP not working in WEBGL

**URL:** <https://discourse.processing.org/t/quad-strip-not-working-in-webgl/27638>\
**Category:** p5.js\
**Created:** [February 6, 2021, 7:39pm UTC](https://discourse.processing.org/t/quad-strip-not-working-in-webgl/27638 "2021-02-06T19:39:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![KeirMeDear](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@KeirMeDear](https://discourse.processing.org/u/KeirMeDear)\
**Post date:** [February 6, 2021, 7:39pm UTC](https://discourse.processing.org/t/quad-strip-not-working-in-webgl/27638/1 "2021-02-06T19:39:23Z")

</div>

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:  
 ![Screenshot (1)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d8ac6499d17b52af1b05699c125833765a53b35c.png)

I get these zigzag strips using QUAD\_STRIP in webgl even when using the example code on the P5.js ([found here](https://p5js.org/reference/#/p5/beginShape)). 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:

```auto

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

```

---

<div class="post-metadata">

**Author:** ![KeirMeDear](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@KeirMeDear](https://discourse.processing.org/u/KeirMeDear)\
**Post date:** [February 6, 2021, 8:23pm UTC](https://discourse.processing.org/t/quad-strip-not-working-in-webgl/27638/2 "2021-02-06T20:23:46Z")

</div>

Apparently this is an open issue with P5.js currently,

Hopefully it gets a fix soon 🙂

[https://github.com/processing/p5.js/issues/4401](https://github.com/processing/p5.js/issues/4401)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 7, 2021, 9:37am UTC](https://discourse.processing.org/t/quad-strip-not-working-in-webgl/27638/3 "2021-02-07T09:37:38Z")

</div>

If you change the line

```auto
beginShape(QUAD_STRIP);

```

to

```auto
beginShape(TRIANGLE_STRIP);
fill(200,200,255); // so we can see the shape

```

you get  
 ![Screenshot 2021-02-07 at 09.32.57](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/ab4adb5be13210d1e1a3b6ac37973cfc2ad40b6b.png)  
The only disadvantage of using of using TRIANGLE\_STRIP is that you see the diagonals if using stroke.