Geometry

Dividing Rect(angles)

One of the core concepts of Coldtype is the use of the coldtype.geometry.Rect class to encapsulate rectangles and methods for slicing & dicing them.

The most basic rectangle is the one passed to a renderable, i.e. the r variable you get when you define a renderable function, like def r1(r) below. So to fill the entire canvas with a single random color, you can do something like this:

@renderable((700, 300))
def r1(r):
    return P(r).f(hsl(random()))

Inset, offset, take, divide, subdivide…

All @renderables have a rectangle associated with them (the full rectangle of the artifact canvas), and all rendering functions are passed rectangles, either via the first and only argument, or as a property of the first argument, as is the case with @animation renderables, which pass a Frame argument that makes the rectangle accessible via f.a.r (where f is the Frame).

But we’re getting ahead of ourselves.

A Rect has lots of methods, though the most useful ones are inset, offset, take, divide, and subdivide.

Here’s a simple example that insets, offsets, subtracts, and then subtracts again. (Probably not something I’d write in reality, but good for demonstration purposes.)

@renderable((700, 300))
def r2(r):
    r1 = (r.take(0.5, "W") # "W" for "West"
        .inset(20, 20)
        .offset(0, 10)
        .subtract(20, "E")
        .subtract(10, "N"))
    
    return (P().rect(r1)
        .f(hsl(0.5)))

More complex slicing & dicing

You may have noticed that the rect functions take a mix of float and int arguments. That’s because a value less than 1.0 will be treated, by the dividing-series of rect functions, as percentages of the dimension implied by the edge argument. So in that take(0.5, "W") above, the 0.5 specifies 50% of the width of the rectangle (width because of the W edge argument).

Here’s an example that divides a rectangle into left and right rectangles, and shows another useful method, square (which takes the largest square possible from the center of the given rectangle).

@renderable((700, 300))
def lr(r):
    ri = r.inset(50, 50)
    left, right = ri.divide(0.5, "W")
    return P(
        P().rect(ri).fssw(-1, 0.75, 2),
        P().oval(left
                .square()
                .offset(100, 0))
            .f(hsl(0.6, a=0.5)),
        P().oval(right
                .square()
                .inset(-50))
            .f(hsl(0, a=0.5)))

Here’s an example using subdivide to subdivide a larger rectangle into smaller pieces, essentially columns.

@renderable((700, 300))
def columns(r):
    cs = r.inset(10).subdivide(5, "W")
    return P.Enumerate(cs, lambda x:
        P(x.el.inset(10)).f(hsl(random())))

Of course, columns like that aren’t very typographic. Here’s an example using subdivide_with_leading, a useful method for quickly getting standard rows or columns with classic spacing.

@renderable((700, 500))
def columns_leading(r):
    cs = r.subdivide_with_leading(5, 20, "N")
    return P.Enumerate(cs, lambda x:
        P(x.el).f(hsl(random())))

Grids

If you’re a fan of CSS grids, you might like the weird little Grid class made available in Coldtype.

r = Rect(700, 300)
g = Grid(r, "a a", "a a", "a b / c d")

@renderable(r)
def simple_grid1(r):
    return P(
        P(g["a"]).f(hsl(0)),
        P(g["d"]).f(hsl(0.5)))

g = Grid(r, "a 100", "100 a", "a b / c d")

@renderable(r)
def simple_grid2(r):
    return (
        P(g["a"]).f(hsl(0)),
        P(g["d"]).f(hsl(0.5)))

g = Grid(r, "a 100 a", "a 100 a", "a b c / d e f / g h i")

@renderable(r)
def simple_grid3(r):
    return (
        P(g["a"]).f(hsl(0)),
        P(g["e"]).f(hsl(0.3)),
        P(g["i"]).f(hsl(0.5)))