#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# beginShape(args): tutorial or documentation of 'args'

edited May 2017

I would like to see at least a brief summary of how to sequence the calls to vertex() to satisfy the different options for `beginShape(option)`. `option` can be POINTS, LINES, etc., but I've found only rare examples in forum code postings -- always lacking any discussion. Thanks.

Tagged:

• That doesn't really show the vertex ordering.

It's based on the underlying opengl implementation so their documentation might help. I'm on my phone at the moment so it's hard to search for good links but here's one

http://opengl.czweb.org/ch06/145-149.html

Continues for the next few chapters after that to cover triangle fans and quad strips.

• (actually reference does show vertex ordering but you need a pen and pencil to decode it)

• Good hints. I think I can take it from there. Thanks.

• edited May 2017

oh, i thought the images in that link were small on my phone but they are just small, small to the point of being useless.

for points / lines / triangles there's a decent picture here:

http://www.informit.com/articles/article.aspx?p=2111395&seqNum=2

here's one for everything else:

http://glscene.pbworks.com/w/page/6437735/TMeshMode

or figure 2.6 here

https://perso.esiee.fr/~perrotol/TheRedBook-1.0/chapter02.html

• edited May 2017

@koogs -- re:

actually reference does show vertex ordering but you need a pen and pencil to decode it

I have some notes I made that might help with vertex sequences, based on the beginShape reference examples:

``````// points are discrete, one point per vertex
beginShape(POINTS);
// point A
vertex(Ax, Ay);
// point B
vertex(Bx, By);
endShape();

// lines are discrete, one line per vertex pair
beginShape(LINES);
// line A
vertex(Ax1, Ay1);
vertex(Ax2, Ay2);
// line B
vertex(Bx1, By1);
vertex(Bx2, By2);
endShape();

// triangles are discrete, one triangle per vertex triple
beginShape(TRIANGLES);
// triangle A
vertex(Ax1, Ay1);
vertex(Ax2, Ay2);
vertex(Ax3, Ay3);
// triangle B
vertex(Bx1, By1);
vertex(Bx2, By2);
vertex(Bx3, By3);
endShape();

// triangle strips are connected
// points are defined in a zig-zag pattern
// with the first three points defining the first triangle
// each new point adds a triangle sharing the previous two points
beginShape(TRIANGLE_STRIP);
// triangle A
vertex(Ax1, Ay1);
vertex(Ax2, Ay2);
vertex(Ax3, Ay3);
// triangle B
vertex(Bx3, By3);
// triangle C
vertex(Cx3, Cy3);
// triangle D
vertex(Dx3, Dy3);
// triangle E
vertex(Ex3, Ey3);
endShape();

// triangle fans are connected
// the first three points define a center, radius, and first triangle
// each additional point adds a triangle sharing the previous and center point
beginShape(TRIANGLE_FAN);
// triangle A
vertex(Ax1, Ay1); // center point
vertex(Ax2, Ay2);
vertex(Ax3, Ay3);
// triangle B
vertex(Bx3, By3);
// triangle C
vertex(Cx3, Cy3);
// triangle D
vertex(Dx3, Dy3);
// triangle E
vertex(Ex3, Ey3);
endShape();

vertex(Ax1, Ay1);
vertex(Ax2, Ay2);
vertex(Ax3, Ay3);
vertex(Ax4, Ay4);
vertex(Bx1, By1);
vertex(Bx2, By2);
vertex(Bx3, By3);
vertex(Bx4, By4);
endShape();

// the first four points define a quad
// the first quad is NOT given clockwise or counterclockwise
// instead the points are defined in a zig-zag, like a triangle strip
vertex(Ax1, Ay1);
vertex(Ax2, Ay2);
vertex(Ax3, Ay3);
vertex(Ax4, Ay4);
vertex(Bx3, By3);
vertex(Bx4, By4);
vertex(Cx3, Cy4);
vertex(Cx3, Cy4);
endShape();
``````
• Perhaps your examples could be adapted for the `beginShape()` reference article.

I did use pencil and paper to decipher current reference article and implemented this code which seems to have generated the desired 3D surface in top-to-bottom row sequence with grid pitch dX-by-dY:

``````    // Loop through columns drawing quad point pairs at row and row+1
for (j = 0; j < rows-1; j++) {
for (i = 0; i < cols; i++) {
x  = i*dX;
y1 = j*dY;
y2 = y1 + dY;
vertex(x, y1, s[i][j]);
vertex(x, y2, s[i][j+1]);
}
endShape();
}
``````

Based on @jeremydouglass observations, I build a small demo next.

Kf

``````boolean showGrid=false;

void settings() {
size(600, 400);
}

void setup() {

textAlign(CENTER, CENTER);
rectMode(CENTER);

fill(255);
textSize(16);
}

void draw() {
background(150);

if (showGrid==true) {
stroke(0);
strokeWeight(1);
line(0, height/2, width, height/2);
line(width/3, 0, width/3, height);
line(2*width/3, 0, 2*width/3, height);
}

surface.setTitle("Mouse X,Y : "+mouseX%200+", "+mouseY%200);

strokeWeight(5);

pushMatrix();
translate(0, 0);
text("Points & Lines", 100, 100);
// points are discrete, one point per vertex
beginShape(POINTS);
// point A
vertex(40, 40);
// point B
vertex(50, 50);
endShape();

// lines are discrete, one line per vertex pair
beginShape(LINES);
// line A
vertex(30, 30);
vertex(60, 30);
// line B
vertex(30, 40);
vertex(30, 60);
endShape();
popMatrix();

pushMatrix();
translate(200, 0);
text("Triangles", 100, 100);
// triangles are discrete, one triangle per vertex triple
beginShape(TRIANGLES);
fill(255, 0, 0);
// triangle A
vertex(30, 30);
vertex(60, 30);
vertex(30, 60);
fill(0, 255, 0);
// triangle B
vertex(90, 90);
vertex(60, 90);
vertex(60, 60);
endShape();
popMatrix();

pushMatrix();
translate(400, 0);
text("Triangle Strip", 130, 100);
strokeWeight(1);
// triangle strips are connected
// points are defined in a zig-zag pattern
// with the first three points defining the first triangle
// each new point adds a triangle sharing the previous two points
beginShape(TRIANGLE_STRIP);
fill(255, 0, 0);
// triangle A
vertex(30, 30);
vertex(60, 30);
vertex(30, 60);
fill(255);
// triangle B
vertex(30, 80);
// triangle C
vertex(60, 80);
// triangle D
vertex(45, 110);
fill(0, 255, 0);
// triangle E
vertex(75, 110);
endShape();
popMatrix();

pushMatrix();
translate(0, 200 );
text("Triangle Fan", 100, 100);
// triangle fans are connected
// the first three points define a center, radius, and first triangle
// each additional point adds a triangle sharing the previous and center point
beginShape(TRIANGLE_FAN);
fill(255, 0, 0);
// triangle A
vertex(30, 60);// center point
vertex(30, 30);
vertex(60, 30);
fill(255);
// triangle B
vertex(80, 60);
// triangle C
vertex(55, 75);
// triangle D
vertex(20, 90);
fill(0, 255, 0);
// triangle E
vertex(5, 45);
endShape();
popMatrix();

pushMatrix();
translate(200, 200 );
fill(255, 0, 0);
vertex(30, 30);
vertex(60, 30);
vertex(60, 60);
vertex(45, 60);
fill(0, 255, 0);
vertex(180, 180);
vertex(120, 180);
vertex(120, 120);
vertex(150, 120);
endShape();
popMatrix();

pushMatrix();
translate(400, 200 );
// the first four points define a quad
// the first quad is NOT given clockwise or counterclockwise
// instead the points are defined in a zig-zag, like a triangle strip
fill( 255, 0, 0);
vertex(30, 30);
vertex(60, 30);
vertex(30, 60);
vertex(75, 60);
fill(255);
vertex(20, 75);
vertex(110, 75);
fill(0, 255, 0);