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

bob97086

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.

TfGuy44

https://processing.org/reference/beginShape_.html ???

koogs

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.

koogs

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

bob97086

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

koogs

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

bob97086

These are all helpful links. Also helpful is the response to my related question which links to Shiffman's video:

https://forum.processing.org/two/discussion/22371/how-to-create-mesh-add-color-or-texture-add-lighting-just-a-hint#latest

jeremydouglass

@koogs -- re:

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

• https://processing.org/reference/beginShape_.html

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

// quads are discrete, one quad per four vertices
beginShape(QUADS);
  // quad A
  vertex(Ax1, Ay1);
  vertex(Ax2, Ay2);
  vertex(Ax3, Ay3);
  vertex(Ax4, Ay4);
  // quad B
  vertex(Bx1, By1);
  vertex(Bx2, By2);
  vertex(Bx3, By3);
  vertex(Bx4, By4);
endShape();

// quad strips are connected
// the first four points define a quad
// each additional pair of points adds a quad
// the first quad is NOT given clockwise or counterclockwise
// instead the points are defined in a zig-zag, like a triangle strip
beginShape(QUAD_STRIP);
  // quad A
  vertex(Ax1, Ay1);
  vertex(Ax2, Ay2);
  vertex(Ax3, Ay3);
  vertex(Ax4, Ay4);
  // quad B
  vertex(Bx3, By3);
  vertex(Bx4, By4);
  // quad C
  vertex(Cx3, Cy4);
  vertex(Cx3, Cy4);
endShape(); 

bob97086

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++) {
        beginShape(QUAD_STRIP);
        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();
    }

Thanks for your input jeremydouglass.

kfrajer

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 );
  text("Quads", 100, 100);
  // quads are discrete, one quad per four vertices
  beginShape(QUADS);
  fill(255, 0, 0);
  // quad A
  vertex(30, 30);
  vertex(60, 30);
  vertex(60, 60);
  vertex(45, 60);
  fill(0, 255, 0);
  // quad B
  vertex(180, 180);
  vertex(120, 180);
  vertex(120, 120);
  vertex(150, 120);
  endShape();
  popMatrix();

  pushMatrix();
  translate(400, 200 );
  text("Quad Strip", 100, 130);
  // quad strips are connected
  // the first four points define a quad
  // each additional pair of points adds a quad
  // the first quad is NOT given clockwise or counterclockwise
  // instead the points are defined in a zig-zag, like a triangle strip
  beginShape(QUAD_STRIP);
  fill( 255, 0, 0);
  // quad A
  vertex(30, 30);
  vertex(60, 30);
  vertex(30, 60);
  vertex(75, 60);
  fill(255);
  // quad B
  vertex(20, 75);
  vertex(110, 75);
  fill(0, 255, 0);
  // quad C
  vertex(30, 110);
  vertex(130, 125);

  endShape();
  popMatrix();
}


void mouseReleased() {
  showGrid=!showGrid;
}