The finished product, a tribute to Bridget Riley's Rustle 6 (2015).

import math

canvasX = 600
canvasY = 600
nFrames = 120
side = canvasX/14
height = (side * sqrt(3))/2
center = (side/sqrt(3))/2
nX = 14
nY = 15
offsetX = side
offsetY = height

from datetime import *
time = datetime.now()

def interpolate(pt1, pt2, ratio):
    assert ratio <= 1
    return (pt1[0] + (ratio * (pt2[0] - pt1[0])), pt1[1] + (ratio * (pt2[1] - pt1[1])))
    
def triangle(s, h, c, inout):
    assert inout >= 0 and inout <= 1
    start = (-s/2, h/2)
    pivot = (0, h/2 - (c * 3))
    target = (s/2, h/2)
    control = interpolate((s/2, -c/2), (0, h/2 - c), inout)
    radius = s
    # optimal distance to control points is (4/3)*tan(pi/(2n); thank you https://stackoverflow.com/users/16673/suma for answering this question https://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves
    control_ratio = ((4/3 * tan(pi/12)) * radius) / (2 * c)
    controlP = interpolate(pivot, control, control_ratio)
    controlT = interpolate(target, control, control_ratio)
    triangle = BezierPath()
    triangle.moveTo(start)
    triangle.lineTo(pivot)
    triangle.curveTo(controlP, controlT, target)
    triangle.closePath()
    drawPath(triangle)

def frame(x, y, m):
    f = BezierPath()
    g = BezierPath()
    f.rect(0, 0, x, y)
    g.rect(m, m, x - (2 * m), y - (2 * m))
    f = f.difference(g)
    f.closePath()
    drawPath(f)

# original Riley plan for Rustle 6    
plan = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 1, 0, 0, 0, -1, 0, 0, 0, 1, 0, 0],
    [-1, 0, -1, 0, 0, 0, 0, 0, 1, 0, -1, 0, 0],
    [1, 0, 1, -1, 0, 0, -1, 0, 0, 0, 1, 0, 1, 0],
    [0, -1, 0, -1, 0, 0, 0, 1, 0, -1, 0, -1, 0],
    [0, 1, -1, 1, 0, 1, 0, 0, 0, 0, -1, 1, 0, 0],
    [-1, 0, -1, 0, 0, 0, 0, 0, 0, 0, -1, 0, -1],
    [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
    [0, -1, 0, 0, 0, 0, 0, 0, 0, -1, 0, -1, 0],
    [0, -1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, -1, 0],
    [-1, 0, -1, 0, 0, 0, 0, 0, 0, 0, -1, -1, -1],
    [-1, 0, -1, 0, 1, 0, 1, 0, 0, 0, 1, -1, -1, 0],
    [0, -1, 0, 0, 0, 0, 0, 0, 0, -1, 0, -1, -1, 0],
    [0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, -1, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ]

for n in range(nFrames):
    newPage(canvasX, canvasY)
    frameDuration(1/30)
    ex = sin(radians(n * (360/nFrames)))
    fill(1)
    rect(0, 0, canvasX, canvasY)
    with savedState():
        translate(canvasX/2, canvasY/2)
        fill(0)
        translate(-(nX - 1) * offsetX/2, (nY - 1) * offsetY/2)
        for i in range(nY):
            with savedState():
                translate(0, i * -offsetY)
                if i % 2 == 0:
                    for j in range(nX - 1):
                        with savedState():
                            translate(offsetX/2 + (j * offsetX), 0)
                            triangle(side, height, center, .5 - (ex * (plan[i][j] * .5)))
                else:
                    for j in range(nX):
                        with savedState():
                            translate(j * offsetX, 0)
                            triangle(side, height, center, .5 - (ex * (plan[i][j] * .5)))
    fill(1)
    frame(canvasX, canvasY, side/2)

saveImage('~/Desktop/riley_tribute_test_01_%s.gif' %time)

The reference image:

I mean to do so at some point—probably on GitHub, probably this summer when I can take a little time to clean up code and organize the sketches.

And here's yet another—I forget the name of the illusion just now.

canvas = 500 #750
number = 15
shape = canvas/15
small = shape/2
offset = shape
nFrames = 90 #240
r = 5

def semi(pos, rot):
    s = BezierPath()
    if pos == 'top':
        s.arc((0, 0), shape/2, 0, 180, False)
    elif pos == 'bottom':
        s.arc((0, 0), shape/2, 0, 180, True)
    s.closePath()
    s.rotate(rot)
    drawPath(s)
    
for n in range(nFrames):
    newPage(canvas, canvas)
    frameDuration(1/30)
    fill(.85)
    rect(0, 0, canvas, canvas)
    translate(canvas/2, canvas/2)
    save()
    translate(-(number - 1) * offset/2, (number - 1) * offset/2)
    fill(.2)
    for i in range(number):
        save()
        translate(0, i * -offset)
        if (i % 2) == 0:
            v = 1
        elif (i % 2) == 1:
            v = -1
        for j in range(number):
            save()
            translate(j * offset, 0)
            if (j % 2) == 0:
                semi('top', r * (sin((2 * pi) * (n/nFrames))) * v)
            elif (j % 2) == 1:
                semi('bottom', r * (sin((2 * pi) * (n/nFrames))) * v)
            restore()
        restore()
    restore()
    translate(0, (number - 1) * offset/2)
    for i in range(number):
        save()
        translate(0, i * -offset)
        if (i % 2) == 0:
            fill(1)
            oval((cos((2 * pi) * (n/nFrames)) * canvas/2) - small/2, 0, small, small)
        elif (i % 2) == 1:
            fill(1)
            oval((cos((2 * pi) * (n/nFrames)) * -canvas/2) - small/2, 0, small, small)
        restore()
saveImage('~/Desktop/op_semi_lines.gif')

With both sketches, a larger canvas and more frames (240+) makes for a better effect.

Here's code for another, the 'intertwining illusion'.

canvas = 500
nFrames = 60 #240
size = canvas/36
num1 = 60
num2 = 44
num3 = 30
num4 = 14
r = 15

def mod(rot):
    m = BezierPath()
    m.rect(-size/2, -size/2, size, size)
    m.closePath()
    m.rotate(rot)
    drawPath(m)
    
for n in range(nFrames):
    newPage(canvas, canvas)
    frameDuration(1/30)
    fill(.5)
    rect(0, 0, canvas, canvas)
    strokeWidth(3)
    translate(canvas/2, canvas/2)
    save()
    for i in range(num1):
        if i % 2 == 0:
            stroke(1)
        else:
            stroke(.15)
        save()
        translate(.8 * canvas/2, 0)
        mod(r * (sin(2 * pi * n/nFrames)))
        restore()
        rotate(360/num1)
    restore()
    save()
    for j in range(num2):
        if j % 2 == 0:
            stroke(1)
        else:
            stroke(.15)
        save()
        translate(.6 * canvas/2, 0)
        mod(-r * (sin(2 * pi * n/nFrames)))
        restore()
        rotate(360/num2)    
    restore()
    save()
    for k in range(num3):
        if k % 2 == 0:
            stroke(1)
        else:
            stroke(.15)
        save()
        translate(.4 * canvas/2, 0)
        mod(r * (sin(2 * pi * n/nFrames)))
        restore()
        rotate(360/num3)    
    restore()
    save()
    for l in range(num4):
        if l % 2 == 0:
            stroke(1)
        else:
            stroke(.15)
        save()
        translate(.2 * canvas/2, 0)
        mod(-r * (sin(2 * pi * n/nFrames)))
        restore()
        rotate(360/num4)    
    restore()

saveImage('~/Desktop/opart_intertwine.gif')

The more frames, the more subtle the shift.

Good news about the pen functionality—glad I saw that, it'll come in handy for a couple things I'm working on …

@michelangelo Ned, please feel free to email me at maurice@mauricemeilleur.net. This is a bit of a specialty of mine.

In case anyone's following this thread: over on RoboFont's Discord, thanks to Wim asking we determined that the issue had mainly to do with a bug in a pre-release version of DB I was using; using v3.130 cleared things up.

@jo I doubt it's a UPM issue … I was noticing the problem before I went back and remade the fonts (I did that to solve a different problem, namely to fix problems caused by RoboFont rounding floating-point coordinates in ways that threw off alignment). And I'm getting weird behavior with other fonts, as for example see above in response to Wim's post and using his code …

@monomonnik said in Defining lineHeight and first baseline: status?:

source = 'lestextessociologiques'
fSize = 90
array = FormattedString()
ft = 'Helvetica'
lh_min = 100
lh_max = 200
lh_step = 10

temp = FormattedString()
for lh in range(lh_min, lh_max, lh_step):
temp.append(source, font=ft, fontSize=fSize, lineHeight=lh, align='center')
temp.append('\n')
array.append(temp)

newPage()
with savedState():
fill(1)
rect(0, 0, width(), height())

textBox(array, (0, 0, width(), height()))

fill(None); stroke(1, 0, 0)
y = height()
for lh in range(lh_min, lh_max, lh_step):
y -= lh
line((0, y), (width(), y))

saveImage('~/Desktop/baseline_test.png')

Well, this is interesting: when I run that code, here's the output I get:

Hi, Jo—

Sorry, I've packed a lot into my question. Here's my initial problem:

For the book I'm writing on Jurriaan Schrofer's constructed scripts, I'm designing a series of variable fonts for the diagrams and reconstructions. To recreate this cover Schrofer used for a series of sociology texts I've created a font with two variation axes, height and width, both of which change the ratio of stroke to counter. The strokes or counters are larger depending on whether the value of the axis in question is positive or negative. The height axis is defined such that the glyphs are at their tallest and occupy the entire glyphspace minus top/bottom spaces when the ratio of horizontal strokes to counters is 10:1. They're at their shortest when the ratio is 1:1. Sidebearings are constant and equal to .5 the stroke/counter width at 1:1. (If it helps: I'm using 550upm to keep integer coordinates for all my masters; descender is -5; x-, cap-, and ascender are 545; LSB/RSB are both 5.)

What I'd like to do is keep fontSize constant and vary the lineHeight from line to line based on the calculated height of the drawn glyphs in each line according to the setting of the height axis. (The heights will all be less than the nominal fontSize because the glyphs never need to be drawn to their maximum height for this layout.) The linespacings are easy enough to calculate, but for some reason I can't feed them as lineHeights to a FormattedString and get linespacing I can make any sense of.

So for example: here I have a textBox the dimensions of the canvas and the height axis in the first line set to my intended max ratio 3.5:1 (strokes/counters), except for the last glyph S with the axis set to 10:1 for reference, and the lineHeight set to the fontSize. The first baseline is exactly where I'd expect it to be; the first red line from the top is the fontSize distance from the top of the textBox. But the next baseline, for a line of type with identical linespacing to the first line (fontSize), is … not. The second red line shows where the next baseline should be (twice the fontSize from the top of the textBox), and you can see where DrawBot is actually drawing the type.

It gets weirder: If I calculate what the linespacing for the first line should be and give it to both lines of text in the FormattedString, here's what I get. The two blue lines are where the lines of type should be, the red lines are from the first example for reference.

You can see the lines are moved up from the first example, but not by nearly enough, and the lines are much farther apart than their specified linespacing.

Here's the code (I can share the font too if needed):

source = 'lestextessociologiques' 
fSize = 550
array = FormattedString()
ft = '/Users/meilleur/Desktop/Variable/schrofer_02_textes-VF.ttf'

u = fSize/55
lHAdj = (5 * u) + (3.5 * 5 * u)

temp = FormattedString()
for index, char in enumerate(source):
    temp.append(char, font=ft, fontSize=fSize, lineHeight=lHAdj, align='center', fontVariations={'wdth': -5.5 + index * .5, 'hght': 2.5 if index < (len(source) - 1) else 9}) #9 is max height, 10:1 stroke:counter
array.append(temp)
array.append('\n')

temp = FormattedString()
for index, char in enumerate(source):
    temp.append(char, font=ft, fontSize=fSize, lineHeight =lHAdj, align='center', fontVariations={'wdth': -5.5 + index * .5, 'hght': 2.5})
array.append(temp)
# array.append('\n')

newPage(2000, 2000)
with savedState():
    fill(1)
    rect(0, 0, width(), height())
textBox(array, (0, 0, width(), height()))
fill(None); stroke(1, 0, 0)
line((0, height() - fSize), (width(), height() - fSize))
line((0, height() - 2 * fSize), (width(), height() - 2 * fSize))
stroke(0, 0, 1)
line((0, height() - lHAdj), (width(), height() - lHAdj))
line((0, height() - 2 * lHAdj), (width(), height() - 2 * lHAdj))
stroke(0); strokeWidth(2)
rect(0, 0, width(), height())

saveImage('~/Desktop/baseline_test.png')

I've reviewed everything I could find that people have posted here and on the DB GitHub repo about the difficulties with defining lineHeight and first baselines, and the conversations/threads feel either abortive or circular/self-referential—so let me ask this outright: Is it (still) impossible to specify exactly the lineHeight of a FormattedString (in a given line of text, across multiple lines, from one line to the next) and the position of the baseline of the first line of text in a textBox? Or, have (precise, reliable) solutions been found to these problems?

Even fixes that have to be tailored to a given font that still allow me to set type algorithmically would be welcome. I'm going to have a lot of diagrams and specimens to make soon, and I'd really hate to drag InDesign and manual typesetting back into my workflow any more than I absolutely have to …

Thanks—I guess this makes sense, but the docs suggest that it's possible to add arguments to specify an 'area of interest' (https://www.drawbot.com/content/image/imageObject.html#drawBot.context.tools.imageObject.ImageObject.areaAverage). In any case I found a workaround by getting creative with sampling pixels in the image.

For an upcoming course—and for my book on Jurriaan Schrofer—I'm trying to recreate the process some of Schrofer's former colleagues at Total Design used in 1987 to rasterize a photo of him with various weights of one of his script designs.

It seems like I should be able to use areaAverage() to scan a grid of areas in a given image, get the average color of each area, and then use that information to choose an appropriate weight of the glyph that will act as a pixel for that area in the generated image. That is, I'll get a 1px image with that average color—which I can presumably then extract the color information from to use further?

But: the output of my code suggests that areaAverage() isn't seeing the image in the ImageObject. I'm saving the images in an array to analyze them one at a time; here's the code:

path = '/Users/meilleur/Desktop/maurice-meilleur-web-600p_hi.png'

w, h = imageSize(path)

newPage(w, h)
im = ImageObject()
with im:
    size(w, h)
    image(path, (0, 0))
image(im, (0, 0))

res = 60
s = w/res
areas = []
startX = 0; startY = 0
for row in range(res):
    y = startY + row * s
    temp = []
    for col in range(res):
        x = startX + col * s
        temp.append(im.areaAverage((x, y, s, s)))
    areas.append(temp)
print(imagePixelColor(areas[0][0], (0, 0)))

And this throws an error:

Traceback (most recent call last):
File "schrofer_illegible_raster.py", line 23, in <module>
File "/Applications/DrawBot.app/Contents/Resources/lib/python3.9/drawBot/drawBotDrawingTools.py", line 2020, in imagePixelColor
AttributeError: 'NoneType' object has no attribute 'startswith'

Obviously I'm missing something here …

It looks to my untutored eye like the ffmpeg codec supports looping—could that be included as an optional argument in saveImage() for .mp4?

Update: this problem appears to be an artifact of combining and expanding two+ strokes in DrawBot. I only see this at corners where two adjacent closed paths are combined and expanded.

Welp. Thought I’d skate through using expandStroke() for the Schrofer constructed script I’m currently digitizing in RoboFont, but I think I’ll be rolling my own instead.

This doesn't happen consistently, by the way: