Grid



  • Hi everyone, I’ve been learning to use drawbot; I’m trying to make a grid, I’ve figured the next code, but I have problems with a guide at the end of the canvas both x and y side. Does anybody know how can I fix it? Thank you very much.

    #We're going to create the canvas
    
    def canvas(w, h):
        newPage(w, h)
        
        fill(1)
        rect(0, 0, w, h)
        
    canvas(1000, 1000)
    
    #Defining the grid
    
    rows = 1
    cols = 1
    
    strokeWidth(2)
    stroke(0,1,1)
    
    def vGuide (cols, gutter):
        for currentCol in range(cols):
            pos = width()/(cols)
            x = width()/(cols) + currentCol*pos
            y = 0
            print(pos)
            
            line((x-(gutter/2), y),(x-(gutter/2), height()))
            line((x+(gutter/2), y),(x+(gutter/2), height()))
                    
                
    def hGuide (rows, gutter):
        for currentRow in range(rows):
            pos = width()/(rows)
            x = 0
            y = width()/(rows) + currentRow*pos
            print(pos)
            
            line((x, y-(gutter/2)),(width(), y-(gutter/2)))
            line((x, y+(gutter/2)),(width(), y+(gutter/2)))
     
    #Execute
               
    vGuide(4, 12)
    hGuide(4, 12)
    


  • hello @eduairet,

    the number of spaces between columns is the number of columns + 1. so:

    def vGuide(cols, gutter):
        for currentCol in range(cols+1):
            x = width() / cols * currentCol
            # ...
    
    def hGuide(rows, gutter):
        for currentRow in range(rows+1):
            y = height() / rows * currentRow
            # ...
    

    you can also loop over the actual rows and columns to create a grid using rectangles:

    size(1000, 700)
    
    cols = 4
    rows = 3
    gutter = 12
    
    w = (width()  - gutter * (cols + 1)) / cols
    h = (height() - gutter * (rows + 1)) / rows
    
    fill(None)
    strokeWidth(2)
    stroke(0, 1, 1)
    
    for col in range(cols):
        for row in range(rows):
            x = gutter + col * (w + gutter)
            y = gutter + row * (h + gutter)
            rect(x, y, w, h)
    

    cheers!



  • @gferreira said in Grid:

    w = (width() - gutter * (cols + 1)) / cols
    h = (height() - gutter * (rows + 1)) / rows

    Thank you very much, it worked way much better, I also tried to add a margin feature that worked well so now I can design over the grid 😀

    size(1000, 1000)
    
    cols = 3
    rows = 3
    gutter = 12
    
    #Margin
    
    mTop = 10
    mBottom = 20
    mLeft = 10
    mRight = 10
    
    w = (width() - gutter * (cols + 1)) / cols - ((mRight + mLeft) / cols)
    h = (height() - gutter * (rows + 1)) / rows - ((mTop + mBottom) / rows)
    
    fill(None)
    strokeWidth(1)
    stroke(0, 1, 1)
    
    for col in range(cols):
        for row in range(rows):
            x = gutter + col * (w + gutter)
            y = gutter + row * (h + gutter)
            rect(x + mLeft, y + mBottom, w, h)