Making of: Flat API tree

Flat API Tree

Next in the "Making of" series are the steps to reproduce the Flat API diagram. One particular thing to note, as it is a very central concept of Flat: create the shapes or strikes at the beginning and reuse across the whole program. This is different from say, Processing, where one maintains the drawing state manually. The code does not save the resulting image on disk, it shows it in Even instead.

from flat import rgb, font, moveto, curveto, shape, strike, tree, document, view

api = tree((
    'flat', (
        'document', (
            'page', (
                'placedimage', (
                    'image',),
                'placedshape', (
                    'line', (
                        'shape', (
                            'stroke', (
                                'gray',
                                'ga',
                                'rgb',
                                'rgba',
                                'cmyk',
                                'spot',
                                'devicen',
                                'overprint'),
                            'fill ...')),
                    'polyline ...',
                    'polygon ...',
                    'rect ...',
                    'circle ...',
                    'ellipse ...',
                    'path', (
                        'shape ...',
                        'commands', (
                            'moveto',
                            'lineto',
                            'quadto',
                            'curveto',
                            'closepath')),),
                'placedtext', (
                    'text', (
                        'paragraph', (
                            'span', (
                                'strike', (
                                    'font',
                                    'textcolor ...'),
                                'string')))),
                'placedoutlines', (
                    'outlines ...',),
                'placedgroup', (
                    'group',)),),
        'scene', (
            'mesh',
            'diffuse'),
        'raw',
        'tree', (
            'tree',),
        'view', (
            'flat',))))

black = rgb(0, 0, 0)
blue = rgb(25, 51, 229)
# Inconsolata by Raph Levien
# http://www.google.com/fonts/specimen/Inconsolata
bold = font.open('Inconsolata-Bold.ttf')
drawing = shape().stroke(blue).width(0.8)
caption = strike(bold).size(8.9, 10).color(black)

space = caption.width(' ')
half = caption.ascender() * 0.7

page = document().addpage().size(657, 297, 'pt')
api.flip().frame(1, 8.3, 598, 280)

for node in api.nodes():
    x2, y2 = node.x, node.y
    page.place(caption.text(node.item)).position(x2, y2 - half)
    if node.parent:
        x0, y0 = node.parent.x, node.parent.y
        x0 += space * len(node.parent.item) + space
        x2 -= space
        page.place(drawing.path(
            moveto(x0, y0),
            curveto(
                (x0 + x2) * 0.5, (y0 + y2) * 0.5,
                (x0 + x2) * 0.5, y2,
                x2, y2)))

view(page.image(ppi=100, kind='rgb').png())

— 29. 10. 2013