Pixelating a Bezier Path

eduairet

Hello everyone, I'm struggling with a script to make fake hinting within the Bezier Path, my doubt resides in the incognita that if there's a method to join two points with a series of squares, something like adding a stroke with a pattern and replicate this to the fill of the shape, this way I can loop the effect through the whole characters of the typeface and make individual gifs with different square size.

This is the code I've been working on:

pageSize, inset = 1080, 100
sz = 5

def pixeling(sz):
    
    newPage(pageSize, pageSize)

    path = BezierPath()
    path.text('E', fontSize=300, font='Menlo')

    minx, miny, maxx, maxy = path.bounds()
    w = maxx - minx
    h = maxy - miny

    boxWidth = width() - inset * 2
    boxHeight = height() - inset * 2

    s = min([boxWidth / float(w), boxHeight / float(h)])
    translate(width()*.5, height()*.5)
    scale(s)
    translate(-minx, -miny)
    translate(-w*.5, -h*.5)
    letterPaths = path.points
    
    x = []
    y = []
    for i in range(len(letterPaths)):
        x.append(int(letterPaths[i][0]))
        y.append(int(letterPaths[i][1]))
        
    print(x, y)

    for i in range(len(x)):
        for j in range(len(y)):
            fill(0)
            rect(x[j], y[j], sz, sz)
                    
pixeling(sz)

#saveImage('~/Desktop/hint_{0}_px.png'.format(sz))

Thank you very much for your help.

frederik

In the current release you can set antiAliasing as an option while saving the context to an image. Set it to True.

see https://www.drawbot.com/content/canvas/saveImage.html#drawBot.saveImage

hope this helps

frederik

an other option is to use path.expandStroke(10) so you can do point inside testing.

see https://www.drawbot.com/content/shapes/bezierPath.html#drawBot.context.baseContext.BezierPath.expandStroke

eduairet

@frederik said in Pixelating a Bezier Path:

antiAliasing

Thank you Frederik, it's working now, I'm having this message randomly *** DrawBot warning: Unrecognized saveImage() option found for PNGContext: antiAliasing *** but I don't know why because the exported image is good. Could it be because of the font? for example, Menlo doesn't make it but a test font do it.

x, y = 500, 500
resolutions = [72, 18]
mfont = 'Menlo'
font(mfont)
print(listFontGlyphNames())

letters = ['a', 'A']

def pixelar(tx, t, al=True):
    
    newPage(x, y)
    
    path = BezierPath()
    path.text(tx, fontSize=500, font=mfont)

    coords = path.bounds()
    
    translate((x - (coords[0] + coords[2])) * 0.5, (y - (coords[1] + coords[3])) * 0.5)
    drawPath(path)
    
    saveImage('~/Desktop/hint_{0}_{1}_aal_{2}.png'.format(tx, t, str(al).lower()), imageResolution=int(t), antiAliasing = bool(al))
    newDrawing()


for letter in letters:
    for resolution in resolutions:
        pixelar(letter, resolution, False)                   
        pixelar(letter, resolution)

frederik

Update DrawBot

See https://github.com/typemytype/drawbot/releases/tag/3.126

eduairet

@frederik thank you

It worked great now:

x, y = 500, 500
resolutions = [72, 18]

mfont = '/Library/Application Support/Adobe/Fonts/SansNom-Regular.otf'

installFont(mfont)
font(mfont)
print(listFontGlyphNames())

letters = ['n', 'E']

def pixelar(tx, t, al=True):
    
    newPage(x, y)
    
    path = BezierPath()
    path.text(tx, fontSize=500, font=mfont)

    coords = path.bounds()
    
    translate((x - (coords[0] + coords[2])) * 0.5, (y - (coords[1] + coords[3])) * 0.5)
    drawPath(path)
    
    saveImage('~/Desktop/hint_{0}_{1}_aal_{2}.png'.format(tx, t, str(al).lower()), imageResolution=int(t), antiAliasing = al)
    newDrawing()


for letter in letters:
    for resolution in resolutions:
        pixelar(letter, resolution, False)                   
        pixelar(letter, resolution)