Processing Month, Day 15 - Rounded Rectangles

Posted by Jan Vantomme on 15 May 2011.

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)
vertex(  w/r, -h/);
bezierVertexw/, -h/2w/2, -h/2w/, -h/r);
vertex(  w/h/);
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/);

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

for (int i 120i++) {


The sketch is also available on OpenProcessing.

A series of rounded rectangles drawn with our new function.



Download the example for Procesing Day 15, Rounded Rectangles.

Tweet this article