DAG and Tree Representations of Code

  • representing layout as a tree:
    • React JSX:
      <button onClick={onClick}>
        {text}
      </button>
    • hiccup:
      ["button", { onClick }, text]
  • representing CAD as a tree
    • modeler:
      <Union>
        <Path closed={true}>
          <Point x={0}  y={0} />
          <Point x={10} y={20} />
          <Point x={10} y={30} />
          <Point x={9}  y={42} />
        </Path>
        <Circle r={10} x={0} y={0}/>
      </Union>
      notice that parents impact children: Union calculates over Path and Circle, in "normal" code representation that would be:
      union(
        path({ closed: true, points }),
        circle({ r: 10, x: 0, y: 0 })
      )
    • hiccup-sdf:
      ["intersection", [
        ["box", { s: [0.1, 0.1, 0.1] }],
        translatedSphere([0.15, 0, 0], 0.2),
      ]]
  • representing code as a "tree" gives us a way to create UIs close to visual tools:
    • layers by having multiple top-level items
    • show/hide components by toggling on/off from the tree, or just setting alpha={0}
    • visual pickers for properties (and calculated properties using lambdas)
    • references:
  • representing as a DAG (nodes and edges):
    • this is a DAG:
      +->B->E-+
      |       |
      A       +->F->G
      |       |
      +->C->D-+
      
      represented as a tree:
      A
      + B
      | + E
      |   + F
      |     + G
      + C
        + D
          + F
            + G
      
    • DAGs can make describing relations simpler: F depends on E and D - this is used in Makefiles for example
    • node-and-edge languages (VPLs) are DAGs describing computations - they are best modeled with streams, event emitters, etc.