Grid

eduairet

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)

gferreira

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!

eduairet

@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 - gutter
mBottom = 20 - gutter
mLeft = 10 - gutter
mRight = 10 - gutter

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)