Processing Month, Day 27 - Mesh Basics

Posted by Jan Vantomme on 27 May 2011.
Tags:

Today we’ll take a look at how we can use the QUAD_STRIP and TRIANGLE_STRIP modes with beginShape() to draw a mesh to the screen. This will be useful when you want to get started with drawing 3D shapes with Processing. This first example will draw a strip made from rectangles.

beginShape(QUAD_STRIP);
for (
int i 011i++) {
    vertex
40);
    
vertex4060 );
}
endShape
(); 

A quad strip, made with Processing

The second example uses the TRIANGLE_STRIP mode and draws the same thing to the screen, only with triangles now.

beginShape(TRIANGLE_STRIP);
for (
int i 011i++) {
    vertex
40);
    
vertex4060 );
}
endShape
(); 

A triangle strip, made with Processing

If we want to draw a grid, we need nested for loops. The code is almost the same as in the first example. The y-coordinate of each vertex gets calculated now and we wrapped an extra for loop around the code. Note that the outer for-loop only runs to 10, not to 11. If it would run to 11, we would render a grid of 11 x 10 rectangles.

for (int j 010++) {
    beginShape
(QUAD_STRIP);
    for (
int i 011i++) {
        vertex
4040 );
        
vertex40, (j+1) * 40 );
    
}
    endShape
();

A quad strip grid, made with Processing

If you want to render the grid with triangles, replace QUAD_STRIP in the previous example to TRIANGLE_STRIP to get the result in the image below.

A triangle strip, made with Processing

Download

Download all Processing examples for Mesh Basics.

Tweet this article