Processing Month, Day 15 - Rounded Rectangles

Posted on 2011-05-15 by Jan Vantomme
Tags: processing, tutorial

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 w, float h, float r)
{
    beginShape();
    vertex(  w/2 - r, -h/2 );
    bezierVertex( w/2 - r , -h/2, w/2, -h/2, w/2 , -h/2 + r);
    vertex(  w/2 , h/2 - r );
    bezierVertex( w/2, h/2 , w/2 - r , h/2 , w/2 - r, h/2);
    vertex( -w/2 + r,  h/2 );
    bezierVertex( - w/2, h/2, -w/2, h/2 - r, -w/2 , h/2 - r );
    vertex( -w/2 , -h/2 + r );
    bezierVertex( -w/2, -h/2, -w/2 + r, -h/2, -w/2 + r, -h/2 );
    endShape(CLOSE);
}

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

for (int i = 1; i < 20; i++) {
    roundedRect( i * 20, i * 10, i ); 
}

Examples

The sketch is also available on OpenProcessing.

Documentation

• bezierVertex()

Download

Download the example for Procesing Day 15, Rounded Rectangles.

Tweet this article