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 sidesfloat r)
{
    float angle 
360 sides;
    
beginShape();
    for (
int i 0sidesi++) {
        float x 
cosradiansangle ) ) * r;
        
float y sinradiansangle ) ) * r;
        
vertexx);        
    
}
    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 sidesfloat rfloat h)
{
    float angle 
360 sides;
    
float halfHeight 2;
    
// draw top shape
    
beginShape();
    for (
int i 0sidesi++) {
        float x 
cosradiansangle ) ) * r;
        
float y sinradiansangle ) ) * r;
        
vertexxy, -halfHeight );    
    
}
    endShape
(CLOSE);
    
// draw bottom shape
    
beginShape();
    for (
int i 0sidesi++) {
        float x 
cosradiansangle ) ) * r;
        
float y sinradiansangle ) ) * r;
        
vertexxyhalfHeight );    
    
}
    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 0sides 1i++) {
    float x 
cosradiansangle ) ) * r;
    
float y sinradiansangle ) ) * r;
    
vertexxyhalfHeight);
    
vertexxy, -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 drawCylinderint sidesfloat r1float r2float h)
{
    float angle 
360 sides;
    
float halfHeight 2;
    
// top
    
beginShape();
    for (
int i 0sidesi++) {
        float x 
cosradiansangle ) ) * r1;
        
float y sinradiansangle ) ) * r1;
        
vertexxy, -halfHeight);
    
}
    endShape
(CLOSE);
    
// bottom
    
beginShape();
    for (
int i 0sidesi++) {
        float x 
cosradiansangle ) ) * r2;
        
float y sinradiansangle ) ) * r2;
        
vertexxyhalfHeight);
    
}
    endShape
(CLOSE);
    
// draw body
    
beginShape(TRIANGLE_STRIP);
    for (
int i 0sides 1i++) {
        float x1 
cosradiansangle ) ) * r1;
        
float y1 sinradiansangle ) ) * r1;
        
float x2 cosradiansangle ) ) * r2;
        
float y2 sinradiansangle ) ) * r2;
        
vertexx1y1, -halfHeight);
        
vertexx2y2halfHeight);
    
}
    endShape
(CLOSE);

3D Cones made with Processing

Download

You can download the sketches of the cylinder and cone.

Tweet this article