Creating Rounded Rectangle Board

General
1

I am trying to create a board that is similar to the 2048 board except with the dimensions 5 x 5 and for a different purpose. I have created the large board, but the small squares inside is where I am troubled. I can create it, but the distances between the wall and squares are not consistent. I am trying to make the board so that the distances between the squares and the distances between the walls and the squares are the same. Here is the program I am using for creating the board:

function draw()
  
   -- This sets a dark background color 
    background(40, 40, 50)

    -- This sets the line thickness
    strokeWidth(5)
    smooth()
    fill(152, 140, 140, 255)
    roundRect(40,20,WIDTH-80,WIDTH-80,13)
    -- Do your drawing here


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
2

Try this.


function draw()
   -- This sets a dark background color 
    background(40, 40, 50)
    -- This sets the line thickness
    strokeWidth(5)
    smooth()
    fill(152, 140, 140, 255)
    roundRect(40,20,WIDTH-80,WIDTH-80,13)
    -- Do your drawing here    

    fill(255)
    sz=(WIDTH-80)/5
    for x=0,4 do
        for y=0,4 do
            roundRect(x*sz+40,y*sz+20,sz,sz,13)
        end
    end

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
3

Try this line in my loop if you want smaller rectangles. Change the value of 16 to change the size of the squares. Change the 8 to be 1/2 of the value you replace the 16 with. That centers the squares.

roundRect(x*sz+40+8,y*sz+20+8,sz-16,sz-16,13)
4

Thanks a ton! I understand the math now.