This repository hosts the source code of L'Arbre Intégral website, a digital poem by Donatien Garnier.
Made with Cycle.js with a Wordpress backend.
Note: The text of the poem is not available in this repository and has been replaced by random Shakespeare verses.
The poem is composed of 127 fragments and follows a binary tree structure. The reader starts at the poem root and choose one of its two childrens. At each node, he can navigate to one of its neighbors until there is no more fragment to read. A fragment already red is not available anymore as a possible navigation choice, it is replaced by the next neighbor in the same direction. Neighbors can be childrens, "brothers" (nodes at the same level), or a "parent" node (a parent, could in fact be a node on the opposite side if all ancestors of the current node have already been visited). The final node is fixed and cannot be visited unless all other nodes have been visited.
The path followed by the reader is graphically rendered on a map of the poem tree. A small version is always visible on the top right of the screen and is updated live. Clicking on this mini-map opens a panel with a larger map on wich is replayed the path evolution since the panel was last open.
When the reader is on a node of the third level, the map may rotate so that the current node is displayed on the upper half of the tree.
src
javascript sources of the main app, a Cycle.js single page application for exploring the poem and its visualizations.www
wordpress sitewww/wp-content/themes/arbre-integral/
custom theme where the Cycle.js single page application build is copiedwww/wp-content/plugins/arbre-integral/
custom plugin wich allows management of the poem contents and the generation of the final PDF documents.
Poem contents are stored in the www/arbreintegral.json
JSON file (shakespeare.json
on the gh-pages branch). The file name is defined in the src/setting.xxx.js file.
For a stripped down version containing only the Cycle.js app, whithout the worpress backend administration, please look at https://github.com/mmai/poemaze/ (demo: https://mmai.github.io/poemaze/ )
- Design : Franck Tallon
- HTML/CSS : Mathieu Bué
- SVG, Javascript & PHP development : Henri Bourcereau