Page 1 of 3

Rounded rectangles [Finally Solved, see last post]

Posted: Sat Apr 09, 2011 2:04 pm
by osmiumusa
Hello everyone!

After countless attempts at, well, everything I've been able to come up with, I turn to you in hopes of someone helping me.

My problem seems simple - I can't figure out how to write a graphics routine that draws a rounded rectangle.

If anyone can help, please do, because I'm really stumped on this one.

Regards,

Osmiumusa :mrgreen:

Re: Rounded rectangles

Posted: Sat Apr 09, 2011 3:42 pm
by Karlosoft
They are four lines plus 4 halves of a circle... so you should have a prototype like

void drawRoundedBox(uint16 x0, uint16 y0, uint16 x1, uint16 y1, uint16 ray);

So...

Code: Select all

void drawRoundedBox(uint16 x0, uint16 y0, uint16 x1, uint16 y1, uint16 ray){
if(x0>x1)ROTATE(uint16, x0, x1);    //This is a macro.. 
if(y0>y1)ROTATE(uint16, y0, y1);
//You should also make controls on the length of the ray
uint16 x0v=x0+ray;
uint16 x1v=x1-ray;
drawLine(x0v,y0,x1v,y0);  //Upper line
drawLine(x0v,y1,x1v,y1);  //Bottom line

uint16 y0v=y0+ray;
uint16 y1v=y1-ray;
drawLine(x0,y0v,x1,y0);  //Upper line
drawLine(x0,y1v,x1,y1);  //Bottom line

//And now the circles....
circle(x0v,y0v,180,90); //Center x, center y, from angle to angle
circle(x1v,y0v,90,0);
circle(x0v,y1v,270,180);
circle(x1v,y1v,360,270);
}

Re: Rounded rectangles

Posted: Sat Apr 09, 2011 3:46 pm
by xvedejas
given:

Code: Select all

width
height
radius
xpos
ypos
note that (0, 0) represents the upper-left of the screen and (xpos, ypos) is the upper-left of the rectangle.

fill in all pixels that meet all the following:

Code: Select all

x >= xpos
y >= ypos
x < xpos + width
y < ypos + width
if x < xpos + radius and y < ypos + radius, then distance((x, y), (xpos + radius, ypos + radius)) < radius
if x > xpos + width - radius and y < ypos + radius, then distance((x, y), (xpos + width - radius, ypos + radius)) < radius
if x < xpos + radius and y < ypos + height - radius, then distance((x, y), (xpos + radius, ypos + height - radius)) < radius
if x < xpos + width - radius and y < ypos + height - radius, then distance((x, y), (xpos + width - radius, ypos + height - radius)) < radius
Obviously it wouldn't be wise to go through every pixel and see if it meets all these conditions, but at least this should show you the logic behind things.

Re: Rounded rectangles

Posted: Sat Apr 09, 2011 4:02 pm
by osmiumusa
Karlosoft,

Thank you very much. What would be on the rotate macro? Or is is built into C?
Again - how would I go about making the arc. That's my main issue. Bezier curves crash the system.

Thank you so much

Osmiumusa :mrgreen: :mrgreen:

Re: Rounded rectangles

Posted: Sat Apr 09, 2011 4:11 pm
by Karlosoft
ROTATE is a macro I wrote in my code, it is something like this
#define ROTATE(a,b,c) {(a) x=(b);(b)=(c);(c)=x;}
Bezier curves? The bezier curves aren't able to generate a circle without a change in the original formula. You can simply use sinus and cosinus math functions.

Re: Rounded rectangles

Posted: Sat Apr 09, 2011 4:57 pm
by VolTeK
Karlosoft wrote:sinus and cosinus
Who taught you your Math an English.


If you are using a 2d interface, id suggest Polar Coordinates. In this case you will use it 4 times. Each for every angle. You will only need 90 degrees of top right, top left, bottom right, bottom left angles for each part of the circle. Id also suggest making this a function to post coordinates where and how big of an angle using polar coordinates.


Polar coordinates will help you make alot of "cool" curves and shapes, as well as its main purpose (a circle). Cosine and Sine will be the only trigonometry you will use for this however.

Re: Rounded rectangles

Posted: Sat Apr 09, 2011 5:19 pm
by Combuster
You can draw a circle without sin/cos/sqrt or even a division - just remember the pythagorean equality a²+b²=c² and that in the case of discretisation you want to have adjoining pixels while minimising the error |a²+b²-c²|. It's a lot faster too.

Re: Rounded rectangles

Posted: Sat Apr 09, 2011 8:53 pm
by gravaera
GhostXoPCorp wrote:
Karlosoft wrote:sinus and cosinus
Who taught you your Math an English. (Where is the question mark?)


If you are using a 2d interface, id suggest Polar Coordinates. In this case you will use it 4 times. Each for every angle. You will only need 90 degrees of top right, top left, bottom right, bottom left angles for each part of the circle. Id also suggest making this a function to post coordinates where and how big of an angle using polar coordinates.


Polar coordinates will help you make alot of "cool" curves and shapes, as well as its main purpose (a circle). Cosine and Sine will be the only trigonometry you will use for this however.
Apparently the same person who taught you :)

--Don't try to look down, unless you're standing in a better place,
gravaera

Re: Rounded rectangles

Posted: Sun Apr 10, 2011 2:45 am
by Karlosoft
If English language uses the words in the wrong ways it isn't my fault. Sine and cosine derive from sinus and cosinus latin words. As you say cactus, data, momentum- perhaps making the plurals cactuses or momentums instead of cacti or momenta- I think that I'm allowed to use the original latin words. It's easy to attack people for their mistakes, why don't you study a bit of Latin before?
I know that my English is full of mistakes, It's my fault? If the Italian instruction system gives us only 4 hours a week, 1 of grammar and 3 of English literature what should I do? Why don't you think before attacking people....

Re: Rounded rectangles

Posted: Sun Apr 10, 2011 6:51 am
by pcmattman
A quick Google search shows "sinus" and "cosinus" being valid (albeit "unusual" for many here) terms for "sine" and "cosine" (synonyms) - "sine, From Latin sinus".

In my humble opinion it would be best that we avoid correcting each other's use of English or terminology (except where it is absolutely and provably incorrect) and focus on actually answering questions.

Re: Rounded rectangles

Posted: Sun Apr 10, 2011 9:33 am
by VolTeK
Karlosoft wrote:It's my fault? If the Italian instruction system gives us only 4 hours a week, 1 of grammar and 3 of English literature what should I do? Why don't you think before attacking people....
Lol calm down ?

Re: Rounded rectangles

Posted: Sun Apr 10, 2011 10:09 am
by Darwin
GhostXoPCorp wrote:
Karlosoft wrote:It's my fault? If the Italian instruction system gives us only 4 hours a week, 1 of grammar and 3 of English literature what should I do? Why don't you think before attacking people....
Lol calm down ?
You're the one who unjustly criticized him.

Re: Rounded rectangles

Posted: Sun Apr 10, 2011 10:45 am
by TylerH
GhostXoPCorp wrote:If you are using a 2d interface, id suggest Polar Coordinates. In this case you will use it 4 times. Each for every angle. You will only need 90 degrees of top right, top left, bottom right, bottom left angles for each part of the circle. Id also suggest making this a function to post coordinates where and how big of an angle using polar coordinates.
Great idea! Now, how does he draw straight lines?
GhostXoPCorp wrote:Cosine and Sine will be the only trigonometry you will use for this however.
Not if he wants to draw straigt lines.

Re: Rounded rectangles

Posted: Sun Apr 10, 2011 12:06 pm
by VolTeK
These trigonometric functions should be used for the curves around the angles of the rectangle. Read again and you will know that the curves are all i am talking about, straight lines in this situation are the least of concern as they should be easier to draw. However i have given advice on the curves portion of the rectangle.

Your failing at being a smart @$$ towards my answer. Please try again in a different response later :)

Re: Rounded rectangles

Posted: Sun Apr 10, 2011 12:23 pm
by MDM
GhostXoPCorp wrote:These trigonometric functions should be used for the curves around the angles of the rectangle. Read again and you will know that the curves are all i am talking about, straight lines in this situation are the least of concern as they should be easier to draw. However i have given advice on the curves portion of the rectangle.

Your failing at being a smart @$$ towards my answer. Please try again in a different response later :)
Your ideas work, however, they'd be inefficient, and I wouldn't recommend it for low level drawing code. You were rude, and you are still being rude. It doesn't make you look cool or intelligent, it makes you look obnoxious.