Drawing a Cylinder with Processing

Posted on 2010-12-10 by Jan Vantomme
Tags: processing, tutorial

In this second article, I'm going to show you how you can create your own custom 3D shapes with Processing. You'll learn how to draw a cylinder by using the beginShape(), endShape() and vertex() functions.

A cylinder consists of a top, bottom and body. Bottom and top are usually circles, but in this case, we'll write a function that will allow us to create shapes like hexagonal or octagonal cylinders. The code below shows you how the top face for the cylinder is constructed.

void drawCylinder(int sides, float r)
{
    float angle = 360 / sides;
    beginShape();
    for (int i = 0; i < sides; i++) {
        float x = cos( radians( i * angle ) ) * r;
        float y = sin( radians( i * angle ) ) * r;
        vertex( x, y );        
    }
    endShape(CLOSE);
}

The image below shows you how you this function can be used to draw a detailed circle with 30 vertices and other geometric shapes with less vertices.

!https://img.vormplus.be/blog/processing-circles.png (Circles built with vertices.)!

The code we have so far only draws the top of our cylinder. To draw the bottom, we'll need to duplicate the block of code starting with beginShape() and ends with endShape(CLOSE). The problem we face now is that both shapes will be drawn on top of each other. We haven't thought of the height of our cylinder yet.

We need to add an extra parameter to the drawCylinder() function to use the height of the cylinder. We also need to add the z-coordinate for each vertex so both shapes will be drawn with the height of the cylinder between them. the code below fixes our problem.

void drawCylinder(int sides, float r, float h)
{
    float angle = 360 / sides;
    float halfHeight = h / 2;
    // draw top shape
    beginShape();
    for (int i = 0; i < sides; i++) {
        float x = cos( radians( i * angle ) ) * r;
        float y = sin( radians( i * angle ) ) * r;
        vertex( x, y, -halfHeight );    
    }
    endShape(CLOSE);
    // draw bottom shape
    beginShape();
    for (int i = 0; i < sides; i++) {
        float x = cos( radians( i * angle ) ) * r;
        float y = sin( radians( i * angle ) ) * r;
        vertex( x, y, halfHeight );    
    }
    endShape(CLOSE);
}

The last thing we need to do is draw the body of our cylinder. To do this, we'll need to add an extra parameter to the beginShape() function. For this one, I'll be using the TRIANGLE_STRIP parameter to connect the vertices. Note that I'm using a for loop from 0 to sides + 1. Otherwise, the body would be missing one rectangle.

// draw body
beginShape(TRIANGLE_STRIP);
for (int i = 0; i < sides + 1; i++) {
    float x = cos( radians( i * angle ) ) * r;
    float y = sin( radians( i * angle ) ) * r;
    vertex( x, y, halfHeight);
    vertex( x, y, -halfHeight);    
}
endShape(CLOSE);

3D Cylinders made with Processing

Drawing a Cone

You can make the function a little more flexible so you can also use it to draw cones. To do this, you need to add an extra radius parameter to the drawCylinder() function. The first radius will be used for the top, the second one for the bottom. The code for the body also needs to change a little.

void drawCylinder( int sides, float r1, float r2, float h)
{
    float angle = 360 / sides;
    float halfHeight = h / 2;
    // top
    beginShape();
    for (int i = 0; i < sides; i++) {
        float x = cos( radians( i * angle ) ) * r1;
        float y = sin( radians( i * angle ) ) * r1;
        vertex( x, y, -halfHeight);
    }
    endShape(CLOSE);
    // bottom
    beginShape();
    for (int i = 0; i < sides; i++) {
        float x = cos( radians( i * angle ) ) * r2;
        float y = sin( radians( i * angle ) ) * r2;
        vertex( x, y, halfHeight);
    }
    endShape(CLOSE);
    // draw body
    beginShape(TRIANGLE_STRIP);
    for (int i = 0; i < sides + 1; i++) {
        float x1 = cos( radians( i * angle ) ) * r1;
        float y1 = sin( radians( i * angle ) ) * r1;
        float x2 = cos( radians( i * angle ) ) * r2;
        float y2 = sin( radians( i * angle ) ) * r2;
        vertex( x1, y1, -halfHeight);
        vertex( x2, y2, halfHeight);
    }
    endShape(CLOSE);
}

3D Cones made with Processing