# Quad() gets drawn twice

**URL:** <https://discourse.processing.org/t/quad-gets-drawn-twice/24382>\
**Category:** Coding Questions\
**Created:** [October 6, 2020, 10:59am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382 "2020-10-06T10:59:46Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![theqxy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/theqxy/32/10813_2.png) [@theqxy](https://discourse.processing.org/u/theqxy)\
**Post date:** [October 6, 2020, 10:59am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/1 "2020-10-06T10:59:47Z")

</div>

Hello, everyone.

Lately I’ve been casually working through Daniel Shiffman’s book Learning Processing, to better familiarize myself with Processing.

I was working on exercise 14-5 in the book: “Create a three-dimensional cube using eight quads — beginShape(QUADS)”.

My idea was to create a quad in the xy-plane, and then to translate and rotate the quad six times to generate the cube. Although when I tried this, I encountered a strange problem.

When I try to translate the quad using push/popMatrix(), the quad gets drawn twice, once at the origin, and once to where I translated the quad. If I comment out the push/popMatrix() lines, the quad only gets drawn once.

I don’t understand why this happens. So, I was hoping someone here can help me understand. 🙂

```auto
float dphi;

void setup() {
  size(400, 400, P3D);
  
  dphi = 0;
}

void draw() {
  background(255);
  translate(width/2, height/2, 0);
  rotateX(-PI/12);
  rotateY(dphi);
  
  drawBox(200);
  
  dphi += 0.01;
}

void drawBox(int d) {
  stroke(0);
  strokeWeight(10);
  noFill();
  
  int D = d/2;
  
  beginShape(QUADS);
  
  pushMatrix();
  translate(0, 0, -D);
  quad(-D, -D, D, -D, D, D, -D, D);
  popMatrix();
  
  endShape();
}

```

I added some rotation to better visualize the 3D object.

---

<div class="post-metadata">

**Author:** ![theqxy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/theqxy/32/10813_2.png) [@theqxy](https://discourse.processing.org/u/theqxy)\
**Post date:** [October 6, 2020, 11:06am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/2 "2020-10-06T11:06:10Z")

</div>

I see now that it draws two quad regardless of push/popMatrix(), but they were drawn at the same location, so I didn’t see.

```auto
beginShape(QUADS);
  
  translate(0, 0, -D);
  quad(-D, -D, D, -D, D, D, -D, D);
  
  translate(0, 0, 2*D);
  
  endShape();

```

But if I do this, still two quads get drawn, even though the quad() function is only called once, which I still don’t understand.

---

<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:** [October 6, 2020, 11:09am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/3 "2020-10-06T11:09:15Z")

</div>

Hello,

Welcome.

Try translating _only_ the shape:

```auto
  pushMatrix();
  translate(0, 0, -D);
 
 beginShape(QUAD);
  quad(-D, -D, D, -D, D, D, -D, D);
  endShape();
 
 popMatrix();

```

`:)`

---

<div class="post-metadata">

**Author:** ![theqxy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/theqxy/32/10813_2.png) [@theqxy](https://discourse.processing.org/u/theqxy)\
**Post date:** [October 6, 2020, 11:11am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/4 "2020-10-06T11:11:56Z")

</div>

Hello, thanks for the quick response!

This does work. But should I then use a new begin/endShape(), for every side of the cube?

Like this?:

```auto
pushMatrix();
  translate(0, 0, -D);
  beginShape(QUAD);
  quad(-D, -D, D, -D, D, D, -D, D);
  endShape();
  popMatrix();
  
  pushMatrix();
  translate(0, 0, D);
  beginShape(QUAD);
  quad(-D, -D, D, -D, D, D, -D, D);
  endShape();
  popMatrix();
  
  pushMatrix();
  rotateX(PI/2);
  translate(0, 0, -D);
  beginShape(QUAD);
  quad(-D, -D, D, -D, D, D, -D, D);
  endShape();
  popMatrix();
  
  pushMatrix();
  rotateX(PI/2);
  translate(0, 0, D);
  beginShape(QUAD);
  quad(-D, -D, D, -D, D, D, -D, D);
  endShape();
  popMatrix();

```

---

<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:** [October 6, 2020, 11:14am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/5 "2020-10-06T11:14:14Z")

</div>

There is a discussion here about this:

> [@Transformations issues](https://discourse.processing.org/t/transformations-issues/24079/6):
>
> It isn’t quite that it ignores them entirely. It is that the coordinate space for the vertex data is based on the transformation matrix when you write “beginShape().” If you want a torus as a connected mesh, some good approaches are: use the equation for a torus, and compute the mesh coordinates without using translate / rotate – use sin/cos instead. This is how the [processing.org](http://processing.org) Toroid example does it, using QUAD\_STRIP for a square mesh. [https://processing.org/examples/toroid.html](https://processing.org/examples/toroid.html) use t…

`:)`

---

<div class="post-metadata">

**Author:** ![theqxy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/theqxy/32/10813_2.png) [@theqxy](https://discourse.processing.org/u/theqxy)\
**Post date:** [October 6, 2020, 11:14am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/6 "2020-10-06T11:14:34Z")

</div>

Because then it seems quicker to just not use push/popMatrix() and just translate back after each quad.

---

<div class="post-metadata">

**Author:** ![theqxy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/theqxy/32/10813_2.png) [@theqxy](https://discourse.processing.org/u/theqxy)\
**Post date:** [October 6, 2020, 11:15am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/7 "2020-10-06T11:15:19Z")

</div>

Okay, thank you, I will read through it!

---

<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:** [October 6, 2020, 11:16am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/8 "2020-10-06T11:16:58Z")

</div>

Hello,

_[https://processing.org/examples/rgbcube.html](https://processing.org/examples/rgbcube.html)_

This example and others are also in the Processing PDE in the files menu; not on the site but should be.

Some insights here as well for grouping shapes:

_[https://processing.org/tutorials/pshape/](https://processing.org/tutorials/pshape/)_

`:)`

---

<div class="post-metadata">

**Author:** ![theqxy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/theqxy/32/10813_2.png) [@theqxy](https://discourse.processing.org/u/theqxy)\
**Post date:** [October 6, 2020, 11:18am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/9 "2020-10-06T11:18:42Z")

</div>

I did see that is most examples they used vertex() instead of quad(). Is there a specific reason for that?

---

<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:** [October 6, 2020, 11:21am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/10 "2020-10-06T11:21:50Z")

</div>

> [@theqxy](#):
>
> Is there a specific reason for that?

Explore the references, examples and tutorials.

_[vertex() / Reference / Processing.org](https://www.processing.org/reference/vertex_.html)_  
_[quad() / Reference / Processing.org](https://www.processing.org/reference/quad_.html)_  
_[PShape / Processing.org](https://processing.org/tutorials/pshape/)_

`:)`

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 6, 2020, 6:17pm UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/11 "2020-10-06T18:17:08Z")

</div>

> [@theqxy](#):
>
> I did see that is most examples they used vertex() instead of quad(). Is there a specific reason for that?

In general vertex is more flexible. You can have 3, 4, 5, 6, or 100 points, whereas quad has four. Also, if you are having many tiles – like a quad strip – then you can do it manually with vertex, or you can arrange your vertex data using the QUAD\_STRIP feature of PShape / beginShape… if you have a lot of point data then this may end up being much more efficient to render as a surface / object rather than drawing a separate quad() 100 times, and it is often easier to code something that moves along stitching sets of coordinates rather than breaking it down into individual shapes.

Still, there is nothing wrong with using quad – its just that most of the documentation and examples jump straight from rect to vertex, as you say.

---

<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:** [October 6, 2020, 11:57pm UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/12 "2020-10-06T23:57:10Z")

</div>

> [@theqxy](#):
>
> I was working on exercise 14-5 in the book: “Create a three-dimensional cube using eight quads — beginShape(QUADS)”.

This question is expecting you to create a cube using the QUADS parameter.

See reference:  
_[beginShape() / Reference / Processing.org](https://processing.org/reference/beginShape_.html)_

quad() is already a shape (in the xy plane) and does not require beginShape() and endShape().

See reference:  
_[quad() / Reference / Processing.org](https://www.processing.org/reference/quad_.html)_

Your last example works with transformations but does **not** require beginShape() and endShape().

There is a learning curve to all of this and you are working through it.

`:)`

---

<div class="post-metadata">

**Author:** ![theqxy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/theqxy/32/10813_2.png) [@theqxy](https://discourse.processing.org/u/theqxy)\
**Post date:** [October 8, 2020, 11:35am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/13 "2020-10-08T11:35:40Z")

</div>

Aaah okay that explains it, thank you! 😁

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [October 8, 2020, 11:58am UTC](https://discourse.processing.org/t/quad-gets-drawn-twice/24382/14 "2020-10-08T11:58:16Z")

</div>

`quad()` also uses (by default) `beginShape()` and `endShape()` internally. That you are causing `endShape()` to be called twice in a row, before and after matrix change, is probably why you see it drawn twice.