p.setup = () => {

    const setupChildren = (initialState, children) =>

      children.map((child) => {

        const childState = Object.assign({}, initialState, child(initialState));

        childState.element(childState);

        const animation = childState.animate(childState);

        const children = setupChildren(childState, childState.children);

        return () => Object.assign({}, childState, { children }, animation);

      });

    const canvas = (initialState) => {

      p.createCanvas(initialState.width, initialState.height);

      const animate = (state) => {

        if (state.background) p.background(state.background);

        const children = setupChildren(state, state.children);

        const nextState = Object.assign({}, state, { children });

        return () => animate(nextState);

      };

      return () => animate(initialState);

    };

    const circle = ({ x, y, diameter }) => p.circle(x, y, diameter);

    const square = ({ x, y, size }) => p.square(x, y, size);

    const sketch = canvas({

      width: 400,

      height: 400,

      background: 220,

      children: [

        () => ({

          element: circle,

          x: 100,

          y: 100,

          diameter: 100,

          children: [

            (parent) => ({

              element: square,

              size: parent.diameter,

              x: parent.x,

              children: [],

              animate: (previous) => ({

                y: previous.y + 2,

              }),

            }),

          ],

          animate: ({ x }) => ({

            x: x + 1,

          }),

        }),

      ],

    });

    p.draw = () => {

      const draw = (drawFrame) => {

        const drawNextFrame = drawFrame();

        p.draw = () => draw(drawNextFrame);

      };

      draw(sketch);

    };

  };

});

​