RRECT Function

Post Reply
User avatar
rbytes
Posts: 1963
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

RRECT Function

Post by rbytes » Fri Sep 25, 2015 8:04 pm

Did you know we have Steve Jobs to thank for making the rounded rectangle the default shape for buttons? He was said to have hated plain rectangles, and insisted his designers use the RRECT shape instead. Maybe the square corners reminded him too much of windows!

I submitted a feature request earlier this year for a DRAW RRECT command that would draw rounded rectangles. I still think it is a good idea, but here is the next best thing - a function that does the same, and provides a lot of parameters to change the look.

Code: Select all

/* RRECT function by ricardobytes.
The RRECT function draws rectangles with rounded corners so quickly that you can use it like any other graphics command. It is ideal for creating realistic buttons, since they can easily be shaded to appear 3-dimensional. To do this, you create a loop, and draw unfilled rectangles that start tiny and gradually grow until the button is the size you want. Color can be changed gradually as the rrects are drawn, and that is what gives the shaded effect,

Once the button images are saved and loaded again as sprites, the collision function can be used to detect when they are pressed. You can load a second sprite with a different button image that displays when the "button" is pressed. I will post a script soon to demonstrate this. 

I have used PAUSE commands to slow down the drawing so that you can see its progress. Set the Duration variable to 0 to see how fast the shapes can be drawn!

The RRECT function uses DRAW LINE and DRAW ARC commands to create unfilled rrects. It uses FILL RECT and FILL CIRCLE commands to create filled rrects. Set the D variable for your choice: 0 for unfilled, 1 for filled*/

OPTION ANGLE DEGREES
OPTION BASE 1
OPTION TEXT POS CENTRAL
DRAW FONT SIZE 48
DRAW FONT NAME "Arial"
GRAPHICS
GRAPHICS CLEAR 1,1,1
DRAW COLOR .9,.9,.4
SHADOW ON
DRAW TEXT "RRECT FUNCTION - WHAT IT CAN DO" AT 500, 50
SHADOW OFF
Duration = .01        '***** Set to 0 for instant drawing *****
DRAW FONT SIZE 28
'***********************
' Change these settings as you wish
X=300          ' Horizontal screen position at centre of rrect
Y=200          ' Vertical screen position at centre of rrect
W=150          ' Width of rrect
H=100          ' Height of rrect
RADIUS=20      ' Radius of corners
T=1            ' Line thickness (0 = filled)
D=0            ' Add shading at right and bottom
R=.9 ! G=.9 ! B=.9
L$="PLAY"  ' Button label

'***********************
' Calculate repeats needed to fill a shaded rounded rectangle
IF X>Y THEN
  rpt=Y/2
ELSE
  rpt=X/2
ENDIF
DRAW COLOR 1,1,1
' Draw a shaded button
FOR n=2 TO rpt
  W=n*(W/H)
  H=n
  RA=RADIUS*(n/rpt)
  IF n>80 THEN
    R-=.01 ! G-=.01 ! B-=.01
  ENDIF
  IF n>85 THEN
    D=1
  ENDIF
  rrect(X,Y,W,H,RA,T,R,G,B,D)
  PAUSE Duration
NEXT n
DRAW COLOR 1,1,1
DRAW TEXT L$ AT X+1,Y+1
DRAW COLOR 0,0,0
DRAW TEXT L$ AT X,Y
DRAW TEXT "3D button" AT X-RA+24,Y+H/2+20
PAUSE 1
' Draw a filled rounded rectangle with rounder corners
X=600
D=0
RA=30
FILL COLOR 1,.4,1
T=0                           ' Filled RRECT
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Filled" AT X-RA+30,Y+H/2+20
PAUSE 1
' Draw an unfilled rounded rectangle with sharper corners
X=300
Y=400
RA=10
R=0 ! G=0 ! B=0
T=1                             ' Line thickness
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Thin line" AT X-RA+12,Y+H/2+20
PAUSE 1
' Draw an unfilled rounded rectangle with a thicker line
X=600
Y=400
RA=RADIUS
R=1 ! G=.7 ! B=.3
T=5                             ' Line thickness
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Thicker line" AT X-RA+25,Y+H/2+20
PAUSE 1
' Draw an outlined rounded rectangle
X=300
Y=600
RA=RADIUS
FILL COLOR .6,.6,.8
T=0                             ' Filled
rrect(X,Y,W,H,RA,T,R,G,B,D)
R=0 ! G=1 ! B=1
T=3                             ' Unfilled creates outline
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Outlined" AT X-RA+20,Y+H/2+20
PAUSE 1
' Draw an outlined rounded rectangle with a dashed line
X=600
Y=600
RA=RADIUS
FILL COLOR .5,.7,.5
T=0                             ' Filled
rrect(X,Y,W,H,RA,T,R,G,B,D)
R=0 ! G=1 ! B=0
T=3                             ' Unfilled rrect creates outline
DRAW DASH 6,6
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Dashed" AT X-RA+20,Y+H/2+20
PAUSE 20

DEF RRECT(X,Y,W,H,RA,T,R,G,B,D) ' Screen x, screen y, width, height, corner radius, line thickness (0=filled), red, green, blue, darken right & bottom edge on-off
DRAW SIZE T
DRAW COLOR R,G,B
W2=W/2
H2=H/2
IF NOT T THEN      
'do filled version
FILL CIRCLE X-W2+RA,Y-H2+RA SIZE RA         ' Top left corner
PAUSE .Duration*20
FILL RECT X-W2+RA,Y-H2 TO X+W2-RA,Y+H2      ' Main body
PAUSE .Duration*20
FILL CIRCLE X-W2+RA,Y+H2-RA SIZE RA         ' Bottom left corner
PAUSE .Duration*20
FILL CIRCLE X+W2-RA,Y+H2-RA SIZE RA         ' Bottom right corner
PAUSE .Duration*20
FILL CIRCLE X+W/2-RA,Y-H/2+RA SIZE RA       ' Top right corner
PAUSE .Duration*20
FILL RECT X-W2,Y-H2+RA TO X-W2+RA,Y+H2-RA   ' Left side
PAUSE .Duration*20
FILL RECT X+W2-RA,Y-H2+RA TO X+W2,Y+H2-RA   ' Right side
ELSE
'set color of top
DRAW LINE X-W2+RA,Y-H2 TO X+W2-RA,Y-H2                ' Top edge
DRAW ARC X-W2+RA,Y-H2+RA,RA,180,270                   ' Top left corner
'set color of left side
DRAW LINE X-W2,Y-H2+RA TO X-W2,Y+H2-RA                ' Left edge
DRAW ARC X-W2+RA,Y+H2-RA,RA,135,180                   ' Bottom left corner upper
IF D THEN
R-=.02 ! G-=.02 ! B-=.02
DRAW COLOR R,G,B
ENDIF
DRAW ARC X-W2+RA,Y+H2-RA,RA,90,135                    ' Bottom left corner lower
DRAW LINE X-W2+RA,Y+H2 TO X+W2-RA,Y+H2                ' Bottom edge
DRAW ARC X+W2-RA,Y+H2-RA,RA,90,0,1                    ' Bottom right corner
'set color of right side
DRAW LINE X+W/2,Y+H/2-RA TO X+W/2,Y-H/2+RA            ' Right edge
DRAW ARC X+W/2-RA,Y-H/2+RA,RA,0,315,1                 ' Top right corner lower
IF D THEN
R+=.02 ! G+=.02 ! B+=.02
DRAW COLOR R,G,B
ENDIF
DRAW ARC X+W/2-RA,Y-H/2+RA,RA,315,270,1               ' Top right corner upper
ENDIF
IF D THEN
R+=.02 ! G+=.02 ! B+=.02
'DRAW COLOR R,G,B
ENDIF
DRAW COLOR R,G,B
END DEF
Attachments
image.png
image.png (151.58 KiB) Viewed 1113 times
Last edited by rbytes on Sat Sep 26, 2015 1:52 pm, edited 5 times in total.
Zzzzz

User avatar
Mr. Kibernetik
Site Admin
Posts: 4608
Joined: Mon Nov 19, 2012 10:16 pm
My devices: iPad, iPhone, MacBook
Location: Russia
Flag: Russia

Re: RRECT Function

Post by Mr. Kibernetik » Fri Sep 25, 2015 8:46 pm

Your rects look very nice!

User avatar
rbytes
Posts: 1963
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: RRECT Function

Post by rbytes » Fri Sep 25, 2015 9:13 pm

Thanks. I also tried a similar experiment with the rounded rectangle poly that I created in Poly Designer, but I find that the DRAW ARC function gives much smoother curves.
Zzzzz

User avatar
rbytes
Posts: 1963
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: RRECT Function

Post by rbytes » Sat Sep 26, 2015 1:52 pm

Here is an update with some new effects. To make the Texture 1 button, I drew a colored and filled RRECT. Next I used the DRAW DASH command to make the pattern. FInally I use a loop to draw unfilled, nested RRECS on top of the filled RRECT in a slightly different color. Texture 2 was made by adding STEP to the loop so that it skips every other RRECT. Texture 3 combines the first two techniques.

Code: Select all

/* RRECT function by ricardobytes.
The RRECT function draws rectangles with rounded corners so quickly that you can use it like any other graphics command. It is ideal for creating realistic buttons, since they can easily be shaded to appear 3-dimensional. To do this, you create a loop, and draw unfilled rectangles that start tiny and gradually grow until the button is the size you want. Color can be changed gradually as the rrects are drawn, and that is what gives the shaded effect,

Once the button images are saved and loaded again as sprites, the collision function can be used to detect when they are pressed. You can load a second sprite with a different button image that displays when the "button" is pressed. I will post a script soon to demonstrate this. 

I have used PAUSE commands to slow down the drawing so that you can see its progress. Set the Duration variable to 0 to see how fast the shapes can be drawn!

The RRECT function uses DRAW LINE and DRAW ARC commands to create unfilled rrects. It uses FILL RECT and FILL CIRCLE commands to create filled rrects. Set the D variable for your choice: 0 for unfilled, 1 for filled

SHADOW does not play well with these shapes. Try it yourself and you will see the weird effects it gives. But in my next code example I'll show how you can get SHADOW to work perfectly with RRECTS with just a few extra lines of code.*/



OPTION ANGLE DEGREES
OPTION BASE 1
OPTION TEXT POS CENTRAL
DRAW FONT SIZE 48
DRAW FONT NAME "Arial"
GRAPHICS
GRAPHICS CLEAR 1,1,1
DRAW COLOR .9,.9,.4
SHADOW ON
DRAW TEXT "RRECT FUNCTION - WHAT IT CAN DO" AT 500, 50
SHADOW OFF
Duration = .005        '***** Set to 0 for instant drawing *****
DRAW FONT SIZE 28
'***********************
' Change these settings as you wish
X=200          ' Horizontal screen position at centre of rrect
Y=200          ' Vertical screen position at centre of rrect
W=150          ' Width of rrect
H=100          ' Height of rrect
RADIUS=20      ' Radius of corners
T=1            ' Line thickness (0 = filled)
D=0            ' Add shading at right and bottom
R=.9 ! G=.9 ! B=.9
L$="PLAY"  ' Button label

'***********************
' Calculate repeats needed to fill a shaded rounded rectangle
IF X>Y THEN
  rpt=Y/2
ELSE
  rpt=X/2
ENDIF
DRAW COLOR 1,1,1
' Draw a shaded button
FOR n=2 TO rpt
  W=n*(W/H)
  H=n
  RA=RADIUS*(n/rpt)
  IF n>80 THEN
    R-=.01 ! G-=.01 ! B-=.01
  ENDIF
  IF n>85 THEN
    D=1
  ENDIF
  rrect(X,Y,W,H,RA,T,R,G,B,D)
  PAUSE Duration
NEXT n
DRAW COLOR 1,1,1
DRAW TEXT L$ AT X+1,Y+1
DRAW COLOR 0,0,0
DRAW TEXT L$ AT X,Y
DRAW TEXT "3D button" AT X-RA+24,Y+H/2+20
PAUSE Duration*200
' Draw a filled rounded rectangle with rounder corners
X=500
D=0
RA=30
FILL COLOR 1,.4,1
T=0                           ' Filled RRECT
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Filled" AT X-RA+30,Y+H/2+20
PAUSE Duration*200
' Draw a textured button
x=800
y=200
T=0
FILL COLOR 0,5,0
RA=RADIUS
rrect(X,Y,W,H,RA,T,R,G,B,D)
T=1
DRAW DASH 3,3
R=0 ! G=1 ! B=0
FOR n=80 TO rpt
  W=n*(W/H)
  H=n
  RA=RADIUS*(n/rpt)
  IF n>80 THEN
    R-=.01 ! G-=.01 ! B-=.01
  ENDIF
  IF n>85 THEN
    D=1
  ENDIF
  rrect(X,Y,W,H,RA,T,R,G,B,D)
  PAUSE Duration
NEXT n
DRAW COLOR 0,0,0
DRAW TEXT "Texture 1" AT X-RA+20,Y+H/2+20
DRAW DASH 0
PAUSE Duration*200
' Draw an unfilled rounded rectangle with sharper corners
X=200
Y=400
W=150          ' Width of rrect
H=100          ' Height of rrect
RA=10
R=0 ! G=0 ! B=0
T=1                             ' Line thickness
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Thin line" AT X-RA+12,Y+H/2+20
PAUSE Duration*200
' Draw an unfilled rounded rectangle with a thicker line
X=500
Y=400
RA=RADIUS
R=1 ! G=.7 ! B=.3
T=5                             ' Line thickness
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Thicker line" AT X-RA+25,Y+H/2+20
PAUSE Duration*200
' Draw a second textured button
X=800
Y=400
T=0
FILL COLOR .6,0,0
rrect(X,Y,W,H,RA,T,R,G,B,D)
T=1
DRAW DASH 0
FOR n=2 TO rpt STEP 6
  W=n*(W/H)
  H=n
  RA=RADIUS*(n/rpt)
  IF n>80 THEN
    R-=.01 ! G-=.01 ! B-=.01
  ENDIF
  IF n>85 THEN
    D=1
  ENDIF
  rrect(X,Y,W,H,RA,T,R,G,B,D)
  PAUSE Duration
NEXT n
DRAW COLOR 0,0,0
DRAW TEXT "Texture 2" AT X-RA+20,Y+H/2+20
PAUSE Duration*200
' Draw an outlined rounded rectangle
X=200
Y=600
RA=RADIUS
FILL COLOR .6,.6,.8
T=0                             ' Filled
rrect(X,Y,W,H,RA,T,R,G,B,D)
R=0 ! G=1 ! B=1
T=3                             ' Unfilled creates outline
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Outlined" AT X-RA+20,Y+H/2+20
PAUSE Duration*200
' Draw an outlined rounded rectangle with a dashed line
X=500
Y=600
RA=RADIUS
FILL COLOR .5,.7,.5
T=0                             ' Filled
rrect(X,Y,W,H,RA,T,R,G,B,D)
R=0 ! G=1 ! B=0
T=3                             ' Unfilled rrect creates outline
DRAW DASH 6,6
rrect(X,Y,W,H,RA,T,R,G,B,D)
DRAW COLOR 0,0,0
DRAW TEXT "Dashed Outline" AT X-RA+20,Y+H/2+20
PAUSE Duration*200
' Draw a second textured button
x=800
y=600
T=0
R=0 ! G=1 ! B=1
FILL COLOR 0,.6,.6
rrect(X,Y,W,H,RA,T,R,G,B,D)
T=2
DRAW DASH 1,2
FOR n=2 TO rpt STEP 6
  W=n*(W/H)
  H=n
  RA=RADIUS*(n/rpt)
  IF n>80 THEN
    R-=.01 ! G-=.01 ! B-=.01
  ENDIF
  IF n>85 THEN
    D=1
  ENDIF
  rrect(X,Y,W,H,RA,T,R,G,B,D)
  PAUSE Duration
NEXT n
DRAW COLOR 0,0,0
DRAW TEXT "Texture 3" AT X-RA+20,Y+H/2+20
PAUSE 20

DEF RRECT(X,Y,W,H,RA,T,R,G,B,D) ' Screen x, screen y, width, height, corner radius, line thickness (0=filled), red, green, blue, darken right & bottom edge on-off
DRAW SIZE T
DRAW COLOR R,G,B
W2=W/2
H2=H/2
IF NOT T THEN      
'do filled version
FILL CIRCLE X-W2+RA,Y-H2+RA SIZE RA         ' Top left corner
PAUSE .Duration*10
FILL RECT X-W2+RA,Y-H2 TO X+W2-RA,Y+H2      ' Main body
PAUSE .Duration*10
FILL CIRCLE X-W2+RA,Y+H2-RA SIZE RA         ' Bottom left corner
PAUSE .Duration*10
FILL CIRCLE X+W2-RA,Y+H2-RA SIZE RA         ' Bottom right corner
PAUSE .Duration*10
FILL CIRCLE X+W/2-RA,Y-H/2+RA SIZE RA       ' Top right corner
PAUSE .Duration*10
FILL RECT X-W2,Y-H2+RA TO X-W2+RA,Y+H2-RA   ' Left side
PAUSE .Duration*10
FILL RECT X+W2-RA,Y-H2+RA TO X+W2,Y+H2-RA   ' Right side
ELSE
'set color of top
DRAW LINE X-W2+RA,Y-H2 TO X+W2-RA,Y-H2                ' Top edge
DRAW ARC X-W2+RA,Y-H2+RA,RA,180,270                   ' Top left corner
'set color of left side
DRAW LINE X-W2,Y-H2+RA TO X-W2,Y+H2-RA                ' Left edge
DRAW ARC X-W2+RA,Y+H2-RA,RA,135,180                   ' Bottom left corner upper
IF D THEN
R-=.02 ! G-=.02 ! B-=.02
DRAW COLOR R,G,B
ENDIF
DRAW ARC X-W2+RA,Y+H2-RA,RA,90,135                    ' Bottom left corner lower
DRAW LINE X-W2+RA,Y+H2 TO X+W2-RA,Y+H2                ' Bottom edge
DRAW ARC X+W2-RA,Y+H2-RA,RA,90,0,1                    ' Bottom right corner
'set color of right side
DRAW LINE X+W/2,Y+H/2-RA TO X+W/2,Y-H/2+RA            ' Right edge
DRAW ARC X+W/2-RA,Y-H/2+RA,RA,0,315,1                 ' Top right corner lower
IF D THEN
R+=.02 ! G+=.02 ! B+=.02
DRAW COLOR R,G,B
ENDIF
DRAW ARC X+W/2-RA,Y-H/2+RA,RA,315,270,1               ' Top right corner upper
ENDIF
IF D THEN
R+=.02 ! G+=.02 ! B+=.02
ENDIF
DRAW COLOR R,G,B
END DEF
Attachments
image.png
image.png (222.96 KiB) Viewed 1113 times
Zzzzz

User avatar
Dutchman
Posts: 925
Joined: Mon May 06, 2013 9:21 am
My devices: iMac, iPad Air, iPhone
Location: Netherlands
Flag: Netherlands

Re: RRECT Function

Post by Dutchman » Sun Sep 27, 2015 9:17 am

We consider it a refreshing mental exercise to figure out ways to circumvent foolishness (Quote from Richard)

User avatar
rbytes
Posts: 1963
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: RRECT Function

Post by rbytes » Sun Sep 27, 2015 1:49 pm

Thanks for pointing this out, Dutchman. I did a forum search on the topic "rounded rectangle" before posting, and it did not show this contribution. I'm not sure why.

By the way, I miss your regular posts. They are always very clever and useful.
Zzzzz

User avatar
Dutchman
Posts: 925
Joined: Mon May 06, 2013 9:21 am
My devices: iMac, iPad Air, iPhone
Location: Netherlands
Flag: Netherlands

Re: RRECT Function

Post by Dutchman » Sun Sep 27, 2015 3:07 pm

Thanks for the praise.
I'm now busy with other activities and also need a new idea for programming ;)
We consider it a refreshing mental exercise to figure out ways to circumvent foolishness (Quote from Richard)

Post Reply