# 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 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. 