Why not this simple solution …
But do not use transparent or the “balls” will appear 
background(40, 40, 50)
strokeWidth(60) lineCapMode(ROUND)
stroke(206, 206, 206, 255)
line(500,300,600,350)
strokeWidth(56)
stroke(28, 100, 150, 255)
line(500,300,600,350)
Re Peter
I’d like to see a mesh version of rounded rectangles.
@Ric_Esrey You already have it … it’s in the Utilities.lua file in my library.
For everyone else, it’s:
--[[
This is an auxilliary function for drawing a rectangle with possibly
curved cornders. The first four parameters specify the rectangle.
The fifth is the radius of the corner rounding. The optional sixth is
a way for specifying which corners should be rounded by passing a
number between 0 and 15. The first bit corresponds to the lower-left
corner and it procedes clockwise from there.
--]]
local __RRects = {}
function RoundedRectangle(x,y,w,h,s,c,a)
c = c or 0
w = w or 0
h = h or 0
if w < 0 then
x = x + w
w = -w
end
if h < 0 then
y = y + h
h = -h
end
w = math.max(w,2*s)
h = math.max(h,2*s)
a = a or 0
pushMatrix()
translate(x,y)
rotate(a)
local label = table.concat({w,h,s,c},",")
if __RRects[label] then
__RRects[label]:setColors(fill())
__RRects[label]:draw()
else
local rr = mesh()
local v = {}
local ce = vec2(w/2,h/2)
local n = 4
local o,dx,dy
for j = 1,4 do
dx = -1 + 2*(j%2)
dy = -1 + 2*(math.floor(j/2)%2)
o = ce + vec2(dx * (w/2 - s), dy * (h/2 - s))
if math.floor(c/2^(j-1))%2 == 0 then
for i = 1,n do
table.insert(v,o)
table.insert(v,o + vec2(dx * s * math.cos((i-1) * math.pi/(2*n)), dy * s * math.sin((i-1) * math.pi/(2*n))))
table.insert(v,o + vec2(dx * s * math.cos(i * math.pi/(2*n)), dy * s * math.sin(i * math.pi/(2*n))))
end
else
table.insert(v,o)
table.insert(v,o + vec2(dx * s,0))
table.insert(v,o + vec2(dx * s,dy * s))
table.insert(v,o)
table.insert(v,o + vec2(0,dy * s))
table.insert(v,o + vec2(dx * s,dy * s))
end
end
rr.vertices = v
rr:addRect(ce.x,ce.y,w,h-2*s)
rr:addRect(ce.x,ce.y + (h-s)/2,w-2*s,s)
rr:addRect(ce.x,ce.y - (h-s)/2,w-2*s,s)
rr:setColors(fill())
rr:draw()
__RRects[label] = rr
end
popMatrix()
end
--[[
Adds a rounded rectangle to an existing mesh
--]]
function addRoundedRect(t)
local m = t.mesh
local x = t.x
local y = t.y
local w = t.width or 0
local h = t.height or 0
local s = t.radius or 10
local c = t.corners or 0
local a = t.anchor
local fc = t.colour or fill()
if a then
x,y = RectAnchorAt(x,y,w,h,a)
end
local v = {}
local nv = 0
local ce = vec2(x + w/2,y + h/2)
local n = 4
local o,dx,dy
for j = 1,4 do
dx = -1 + 2*(j%2)
dy = -1 + 2*(math.floor(j/2)%2)
o = ce + vec2(dx * (w/2 - s), dy * (h/2 - s))
if math.floor(c/2^(j-1))%2 == 0 then
for i = 1,n do
table.insert(v,o)
table.insert(v,o + vec2(dx * s * math.cos((i-1) * math.pi/(2*n)), dy * s * math.sin((i-1) * math.pi/(2*n))))
table.insert(v,o + vec2(dx * s * math.cos(i * math.pi/(2*n)), dy * s * math.sin(i * math.pi/(2*n))))
end
nv = nv + 3*n
else
table.insert(v,o)
table.insert(v,o + vec2(dx * s,0))
table.insert(v,o + vec2(dx * s,dy * s))
table.insert(v,o)
table.insert(v,o + vec2(0,dy * s))
table.insert(v,o + vec2(dx * s,dy * s))
nv = nv + 6
end
end
local nrv = m.size
m:resize(nrv + nv)
for k,ve in ipairs(v) do
m:vertex(nrv + k, ve)
m:color(nrv+k,fc)
end
local ri = m:addRect(ce.x,ce.y,w,h-2*s)
m:setRectColor(ri,fc)
ri = m:addRect(ce.x,ce.y + (h-s)/2,w-2*s,s)
m:setRectColor(ri,fc)
ri = m:addRect(ce.x,ce.y - (h-s)/2,w-2*s,s)
m:setRectColor(ri,fc)
end
Oh, thank goodness. It’s a simple script! Wow.
Either way, I’m trying to use it for buttons and rounded, glossy sliders, so I could emulate some of basic IOS look and feel for Cider/2.
I was thinking meshes, looks like that’s the way to go.
hello,
I am new to any form of coding. I thought this would be a excellent start for me. but this is very confusing to me. I don’t exactly know what I’m asking but this rounded corners is really confusing me. Mostly because i have no clue what I’m looking at. I understand like what the width and height, and kinda what the code is saying but at the same time I don’t. is there anyway that someone could help me out? Or send to to a webpage that can explain like every baby step?
@AudieLittle1111 - you may want to build up to meshes. Here is a tute on how to do corners old school: http://codeatuts.blogspot.com.au/2012/06/interlude-4-rounded-border-class.html , it is probably easier to understand.
There is also a tute on meshes in the wiki.
@AudieLittle1111 - this is WAY too hard for a beginner. Start with the online documentation for Lua and Codea, and all the tutorials. The FAQ at the top of this forum has some good links.
Don’t be put off - Codea is a really nice programming platform, and way, way simpler than most of the well known languages. You’ll have a lot of fun with it.
@Simeon - Is there any chance of a fix for the “balls” on the end of lines? I’ve had multiple times I’ve ran into that issue. If it’s not coming soon, where could I find a shader that could fix it? Thanks!
Also, just an update to Simeon’s code. It wasn’t working because he was referencing the r color value that was used in the fill, not the global radius. I also added the width, height, and rectangle color.
function setup()
parameter.number("CornerRadius",0,50,10)
parameter.number("W",0,500,100)
parameter.number("H",0,500,100)
parameetr.color("Color",color(255,0,0))
end
function draw()
background(0, 0, 0)
fill(Color)
roundRect(WIDTH/2-W/2,HEIGHT/2-H/2,W,H, CornerRadius)
end
function roundRect(x, y, w, h, cr)
pushStyle()
insetPos = vec2(x+cr,y+cr)
insetSize = vec2(w-2*cr,h-2*cr)
rectMode(CORNER)
rect(insetPos.x,insetPos.y,insetSize.x,insetSize.y)
r,g,b,a = fill()
stroke(r,g,b,a)
if r > 0 then
smooth()
lineCapMode(ROUND)
strokeWidth(cr*2)
line(insetPos.x, insetPos.y,
insetPos.x + insetSize.x, insetPos.y)
line(insetPos.x, insetPos.y,
insetPos.x, insetPos.y + insetSize.y)
line(insetPos.x, insetPos.y + insetSize.y,
insetPos.x + insetSize.x, insetPos.y + insetSize.y)
line(insetPos.x + insetSize.x, insetPos.y,
insetPos.x + insetSize.x, insetPos.y + insetSize.y)
end
popStyle()
end
Thanks!
@Zoyt There’s a rounded rectangle that uses meshes in my libraries. I think it’s in Library Base in CC, but it might be in Library Utilities. It’s also standalone - it doesn’t need any of my other stuff to use.
@Andrew_Stacey - Thanks. I don’t think I’ll end up using rounded rectangles. Just didn’t fit my app.
@JakAttak - Thanks.