Path Mathematics

Paths in NodeBox consist of Bezier curves. Each curve has a starting point and an ending point, and control handles. But what if we want to know the location of a point on the path that is not one of these, but somewhere in between? What is the location of halfway the path for example? A path in NodeBox has some interesting commands we can use:

path.length(): returns the total length of the path
path.points(amount=100): returns a list of amount points along the path
path.point(t): returns coordinates for point at t on the path
path.addpoint(t): inserts a point at t on the path
path.contours: a list of separate contours in the path

These speed-optimized commands are extremely useful when calculating orbits of animated elements moving down an invisible path in an animation, when creating custom type like the LetterKnitter, when growing grass on shapes, and so on and so on.

Finding points on a path

The example above is an illustration of how points on a path can be found with t (a number between 0.0 and 1.0), which represents time on the path. When t is 0.5, this means halfway the path. 0.0 is the origin of the path, 1.0 the end.

The code:

nofill()
autoclosepath(close=False)
beginpath(100,100)
curveto(150, 100, 200, 150, 150, 200)
curveto(50, 250, 200, 350, 400, 400)
path = endpath()

for t in range(11):
    pt = path.point(0.1*t) 
    oval(pt.x-2, pt.y-2, 4, 4)

And it's even easier like this:

for pt in path.points(11):
    oval(pt.x-2, pt.y-2, 4, 4)

Inserting points on a path

Injecting new points in the path is equally easy:


beginpath(100, 500)
curveto(200,250, 600,600, 400,300)
path = endpath(draw=False)

stroke(0.5)
path.addpoint(0.25)
drawpath(path)

stroke(0.2)
for point in path:
    oval(point.x-4, point.y-4, 8, 8)

pathmatics-split

Contours in a path

A path is basically made up of segments: two points and the curve in between. A group of segments that has a beginning and an ending, or is closed, is a contour. Character glyphs are a composite of contours (for example: the inner and outer oval of the character "o" are two contours. In typography it's often useful to get the separate contours.

path = textpath("contours", 10, 100)
for contour in p.contours:
  drawpath(contour)
  stroke(random(0.5))

pathmatics-contours