@michelangelo Not too late! I can help with stuff like LeWitt and Schrofer, and Crouwel and Albers, etc. anytime.

I've marked the points in the curve to try to make sense of its behavior: green for the starting point, red for the others.

canvas = 300
start = (100, 100)
pt1 = (200, 100)
pt2 = (200, 200)
radius = 100

newPage(canvas, canvas)
fill(1)
rect(0, 0, canvas, canvas)

path = BezierPath()

path.moveTo(start)
path.arcTo(pt1, pt2, radius)
fill(None)
stroke(0)
drawPath(path)

stroke(None)
start = list(start)
pt1 = list(pt1)
pt2 = list(pt2)
fill(0, 1, 0)
oval(start[0] - 1, start[1] - 1, 2, 2)
fill(1, 0, 0)
oval(pt1[0] - 1, pt1[1] - 1, 2, 2)
oval(pt2[0] - 1, pt2[1] - 1, 2, 2)

print(path.points)

So that first defined point in arcTo() feels like an off-curve or control point, right? But then pt2 must be more than just the point to which the arc curves, because if I change radius to 400 I get this:

and if I change pt1 to (400, 300) I get this:

I'm just having a hard time telling a story about what these points are doing that makes sense to me …

And since I'm asking: Looking at these lists of points, how do I know which ones are what in an application like Illustrator we'd call the 'corner points', where the 'handles' = off-curve points are not collinear with the 'anchors = on-curve points between them? Again, sorry in advance if these are really elementary questions …

So, there have been two things that have bugged me since I started working with DrawBot a couple years ago. One is very simple and has to do with the documentation for arcTo().

canvas = 500
size = canvas/2

newPage(canvas, canvas)
fill(1)
rect(0, 0, canvas, canvas)
translate(canvas/2, canvas/2)
stroke(0)

p = BezierPath()
p.moveTo((0, size/2))
p.lineTo((0, 0))
p.lineTo((size/2, 0))

print(p.points)
drawPath(p)

My list of points is:
[(0.0, 125.0), (0.0, 0.0), (125.0, 0.0)]

So let's say I want to close that path to make a quarter-circle. The documentation for arcTo() says:

arcTo(pt1, pt2, radius)
Arc from one point to another point with a given radius.

Well, I know the two points I want to connect: (0, size/2) and (size/2, 0). But what does 'radius' tell me in this context? It's obvious for the arc() method, because there you specify a center point with the radius. If I just enter my points and set radius to size/2:

…
p = BezierPath()
p.moveTo((0, size/2))
p.lineTo((0, 0))
p.lineTo((size/2, 0))
p.arcTo((size/2, 0), (0, size/2), size/2)
…

I get a shape visibly unchanged:

and this list of points:
[(0.0, 125.0), (0.0, 0.0), (125.0, 0.0), (125.0, 0.0), (125.0, 0.0), (125.0, 0.0), (125.0, 0.0), (125.0, 0.0), (125.0, 0.0), (125.0, 0.0)]

If I use (size/2, size/2) as my first point:

…
p = BezierPath()
p.moveTo((0, size/2))
p.lineTo((0, 0))
p.lineTo((size/2, 0))
p.arcTo((size/2, size/2), (0, size/2), size/2)
…

I get the shape I want:

and this list of points:
[(0.0, 125.0), (0.0, 0.0), (125.0, 0.0), (125.0, -2.0767666935733048e-14), (125.0, 69.03559372884915), (69.03559372884918, 124.99999999999999), (7.654042494670958e-15, 124.99999999999999), (7.654042494670958e-15, 124.99999999999999), (-4.785710873658687e-14, 124.99999999999999), (-4.785710873658687e-14, 124.99999999999999)]

So does this mean I'm not drawing an arc between xy1 and xy2, but instead defining an off-curve point with xy1 and an on-curve point with xy2? If so, what is radius telling me? Because if I change it to (size), here's the shape I get:

and my list of points:
[(0.0, 125.0), (0.0, 0.0), (125.0, 0.0), (125.0, -125.00000000000004), (125.0, 13.071187457698286), (13.071187457698343, 124.99999999999994), (-124.99999999999999, 124.99999999999996), (-124.99999999999999, 124.99999999999996), (-125.0000000000001, 124.99999999999996), (-125.0000000000001, 124.99999999999996)]

I have a feeling that learning the answer to what's going on here will suggest the answer to the other thing that's been bugging me, which is the syntax for defining curves with points—how do I know/specify which ones are the on-curve and off-curve points?

Thanks in advance to anyone who can help. I suspect this is something pretty basic which people who get exposed to DrawBot or RoboFont in a different way than I did understand implicitly, so I apologize if my questions sound elementary.

@frederik Ah! Thanks, I had totally misremembered that.

@frederik @justvanrossum Am I crazy, or did one of the recent updates of DB introduce a while() function that can replace save() and restore()? Perhaps I'm misremembering the name; in any case I can't find it here on the forum. Any help?

True—both these sketches are quickies from last year, when I was still learning my way around the code.

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.

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