We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Syntax Questions › The best way to draw a rounded rectangle
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
The best way to draw a rounded rectangle (Read 3857 times)
DennisKoks
The best way to draw a rounded rectangle
Jun 17th, 2008, 11:59am  
A very straightforward question: What's the best way to draw a rounded rectangle within processing?
Back to top
 
 
Jo Wood
Re: The best way to draw a rounded rectangle
Reply #1 - Jun 17th, 2008, 12:48pm  
There may be better ways, but this is what I came up with:

Code:
void roundRect(float x, float y, float w, float h)
{
  float corner = w/10.0;
  float midDisp = w/20.0;
  
  beginShape();  
  curveVertex(x+corner,y);
  curveVertex(x+w-corner,y);
  curveVertex(x+w+midDisp,y+h/2.0);
  curveVertex(x+w-corner,y+h);
  curveVertex(x+corner,y+h);
  curveVertex(x-midDisp,y+h/2.0);
  
  curveVertex(x+corner,y);
  curveVertex(x+w-corner,y);
  curveVertex(x+w+midDisp,y+h/2.0);
  endShape();
}


The degree of rounding can be tinkered with by changing the corner and midDisp values.
Back to top
 
 
eskimoblood
Re: The best way to draw a rounded rectangle
Reply #2 - Jun 17th, 2008, 1:28pm  
Or you import it as a svg graphic.
Back to top
 
Andreas Köberle {eskimoblood}
222550793  
DennisKoks
Re: The best way to draw a rounded rectangle
Reply #3 - Jun 17th, 2008, 1:37pm  
@eskimoblood If I import it as a svg image, would it still be dynamic (resize with content for example)?
Back to top
 
 
eskimoblood
Re: The best way to draw a rounded rectangle
Reply #4 - Jun 17th, 2008, 2:46pm  
Yes you can set width and height of the graphic
Code:

svg.draw(x, y, width, height)
Back to top
 
Andreas Köberle {eskimoblood}
222550793  
sw01
Re: The best way to draw a rounded rectangle
Reply #5 - Jun 17th, 2008, 5:17pm  
But I wonder which way renders faster: SVG or curveVertex?
Back to top
 
 
ajstarks
Re: The best way to draw a rounded rectangle
Reply #6 - Jun 18th, 2008, 2:02am  
Quote:


void roundrect(int x, int y, int w, int h, int r) {
 noStroke();
 rectMode(CORNER);

 int  ax, ay, hr;

 ax=x+w-1;
 ay=y+h-1;
 hr = r/2;

 rect(x, y, w, h);
 arc(x, y, r, r, radians(180.0), radians(270.0));
 arc(ax, y, r,r, radians(270.0), radians(360.0));
 arc(x, ay, r,r, radians(90.0), radians(180.0));
 arc(ax, ay, r,r, radians(0.0), radians(90.0));
 rect(x, y-hr, w, hr);
 rect(x-hr, y, hr, h);
 rect(x, y+h, w, hr);
 rect(x+w,y,hr, h);

}
Back to top
 
WWW ajstarks80  
mhuyck
Re: The best way to draw a rounded rectangle
Reply #7 - Jun 18th, 2008, 2:42am  
You may also find this thread to be of interest:

 http://processing.org/discourse/yabb_beta/YaBB.cgi?board=Programs;action=display;num=1201879926
Back to top
 
 
mflux
Re: The best way to draw a rounded rectangle
Reply #8 - Jun 18th, 2008, 8:41am  
The drawback to doing rounded rects via svg is ofcourse you can't specify the radius.

Not unless your svg renderer supports "rounded rectangle" primitives, specifically. I don't believe Candy does, right now.
Back to top
 
Portfolio
fluxhavoc  
mql_
Re: The best way to draw a rounded rectangle
Reply #9 - Jan 7th, 2010, 4:30pm  
I've put together a roundedRect function for Processing.js that uses quadratic curves for the rounded corners.

Its implemented as a shape and can be parametrized by with x, y, width, height and the corner radius. You can use fill and stroke as usual.

Sadly I'm not allowed to post links so you have to enter this manually. Wink

quasipartikel.at/2010/01/07/quadratic-bezier-curves-for-processingjs/

Cheers,
Michael
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›