Processing Month, Day 15 - Rounded Rectangles

Posted by Jan Vantomme on 15 May 2011.
Tags:

For the past two years, rounded corners have been hot in web design. Today’s sketch will be about creating rounded rectangles with Processing. We already used the vertex() function in a few of the sketches this month. Today we’ll add bezierVertex() to create the rounded corners for our shape. The piece of code below is the full function to draw a rounded rectangle from the center, just like you would draw a normal rectangle with rectMode(CENTER).

void roundedRect(float wfloat hfloat r)
{
    beginShape
();
    
vertex(  w/r, -h/);
    
bezierVertexw/, -h/2w/2, -h/2w/, -h/r);
    
vertex(  w/h/);
    
bezierVertexw/2h/w/h/w/rh/2);
    
vertex( -w/r,  h/);
    
bezierVertex( - w/2h/2, -w/2h/r, -w/h/);
    
vertex( -w/, -h/);
    
bezierVertex( -w/2, -h/2, -w/r, -h/2, -w/r, -h/);
    
endShape(CLOSE);

The piece of code below goes inside draw() to display the rounded rectangles on the screen.

for (int i 120i++) {
    roundedRect
2010); 

Examples

The sketch is also available on OpenProcessing.

A series of rounded rectangles drawn with our new function.

Documentation

Download

Download the example for Procesing Day 15, Rounded Rectangles.

Tweet this article