How can I draw a rect with round corners?

Questions
1

Hi, how can I draw a rect with round corners? Thanks, Pedro

2

@pvchagas On the right side of the page, just above “Start a New Discussion” is a search bar. You can use that to do a search for round rectangles or anything else. There are a lot of examples in this forum, you just need to search for things.

3

Thanks for your reply. I had searched, but I only found pre-2.0 threads, so I was wondering if this feature had been added recently.

4

Why not making a new contest ‘smallest code rounded rect’? That would be fun! I’ll post my entry below.

5

here it is (22 single-command lines inside the function)

-- rounded rect

function roundedRect(x,y,w,h,r)

    local oldFill = color( fill() )
    local oldStroke = color( stroke() )
    local s = strokeWidth()
    local ds = math.max(s-1,0)

    local function rawRect(x,y,w,h,r)
        translate(x,y)
        rect(r,0,w-2*r,h)
        rect(0,r,w,h-2*r)
        ellipse(r  ,r,r*2)
        ellipse(w-r,r,r*2)
        ellipse(r  ,h-r,r*2)
        ellipse(w-r,h-r,r*2)
        translate(-x,-y)
    end

    noStroke()
    fill(oldStroke)
    rawRect(x,y,w,h,r)
    fill(oldFill)
    rawRect(x+ds, y+ds, w-ds*2, h-ds*2, r-ds)

    strokeWidth(s)
    stroke(oldStroke)
    fill(oldFill)
end

function setup()
end


function draw()
    background(40, 40, 50)
    strokeWidth(5)
    stroke(255, 174, 0, 255)
    fill(255, 0, 0, 255)
    roundedRect(100,200,200,100,20)
    rect(400,200,200,100)
end

[edit] had to make a couple changes for 100% compatibility with strokeWidth

6

here i have gained 1 line (21 now).
[edit] argh! back to 22: i must put a resetStyle for 100% compatibility.
[edit] damned! Doesnt work correctly with transparent colors.

-- rounded rect

function roundedRect(x,y,w,h,r)

    local oldFill = color( fill() )
    local oldStroke = color( stroke() )
    local s = strokeWidth()
    local ds = math.max(s-1,0)

    local function rawRect(x,y,w,h,r)
        translate(x,y)
        rect(r,0,w-2*r,h)
        rect(0,r,w,h-2*r)
        ellipse(r  ,r,r*2)
        ellipse(w-r,r,r*2)
        ellipse(r  ,h-r,r*2)
        ellipse(w-r,h-r,r*2)
        translate(-x,-y)
    end
    
    pushStyle()
    resetStyle()
    noStroke()
    fill(oldStroke)
    rawRect(x,y,w,h,r)
    fill(oldFill)
    rawRect(x+ds, y+ds, w-ds*2, h-ds*2, r-ds)
    popStyle()

end

function setup()
end


function draw()
    background(40, 40, 50)
    strokeWidth(5)
  --noStroke()
    stroke(255, 174, 0, 255)
    fill(255, 0, 0, 255)
    roundedRect(300,200,200,100,20)
    rect(400,200,200,100)
end

i could gain 2 more lines (include the tanslate inside, but would be less readable)

7

this version is compatible with transparencies, but now it is 50 lines.

-- rounded rect
local function rawRect(img,x,y,w,h,r)
    setContext(img)
    background(0,0,0,0)
    fill(255)
    translate(x,y)
    rect(r,0,w-2*r,h)
    rect(0,r,w,h-2*r)
    ellipse(r  ,r,r*2)
    ellipse(w-r,r,r*2)
    ellipse(r  ,h-r,r*2)
    ellipse(w-r,h-r,r*2)
    resetMatrix()
    setContext()
end
function roundedRect(x,y,w,h,r)

    local oldFill = color( fill() )
    local oldStroke = color( stroke() )
    local oldTint = color( tint() )
    local s = strokeWidth()
    local ds = math.max(s-1,0)
    local img = image(w,h)
    local imgOuter = image(w,h)
    local imgInner = image(w,h)
    local imgStroke = image(w,h)

    pushStyle()
    resetStyle()
    pushMatrix()
    resetMatrix()
    spriteMode(CORNER)
    noStroke()

    rawRect(imgOuter,0,0,w,h,r)
    rawRect(imgInner, ds, ds, w-2*ds, h-2*ds, r-ds)
    
    setContext(imgStroke)
        sprite(imgOuter,0,0)
        blendMode(ZERO, ONE_MINUS_SRC_COLOR)
        sprite(imgInner,0,0)
    setContext()

    blendMode(NORMAL)
    setContext(img)
        tint(oldStroke)
        sprite(imgStroke,0,0)
        tint(oldFill)
        sprite(imgInner,0,0)
    setContext()
    
    popMatrix()
    tint( oldTint )
    spriteMode( rectMode() )
    sprite(img,x,y)
    popStyle()

end

function setup()
end


function draw()
    background(0, 0, 0, 255)
    strokeWidth(5)
  --noStroke()
    stroke(255, 174, 0, 198)
    fill(255, 0, 0, 120)
    rect(400,200,200,100)
    roundedRect(300,200,200,100,20)
end
8

I’d just like to put in a quick note: This has been asked 3 times before with amazing answers. Before you ask a question please, please search the forums and try to make your own version first.

9

@Zoyt, @dave1707 touched on that above :slight_smile:

10

@JakAttak - Whoops… Sorry. Missed that.

11

You can use the class roundRect from the sounds plus example project.

12

@pvchagas Not sure exactly what you’re after, but here’s an example of rounded rectangles.


supportedOrientations(LANDSCAPE_ANY)

function setup()
    parameter.integer("height1",50,350,50,setup1)
    parameter.integer("width1",50,300,50,setup1)
    parameter.integer("height2",50,350,50,setup1)
    parameter.integer("width2",50,300,300,setup1)
end

function setup1()
    r1=roundRect(225,400,width1,height1,color(255,0,0))
    r2=roundRect(225,25,width2,height2,color(0,255,0))
end

function draw()
    background(40, 40, 50)
    r1:draw()
    r2:draw()
end

roundRect=class()

function roundRect:init(x,y,w,h,c)
    self.x=x    -- x position
    self.y=y    -- y position
    self.w=w    -- width
    self.h=h    -- height
    self.c=c    -- color
end

function roundRect:draw()
    fill(self.c)    -- set color
    rect(self.x,self.y,self.w,self.h)  -- draw rectangle
    ellipse(self.x,self.y+self.h/2,self.h+1)  -- draw rounded left end
    ellipse(self.x+self.w,self.y+self.h/2,self.h+1) -- draw rounded right end
end