# Drawing a Cylinder with Processing

Posted by Jan Vantomme on 10 December 2010.
Tags: , ,

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.

!http://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 bodybeginShape(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);  ```

## 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);}  ```