6aba6b665f
This adds a bit of debugging information on mouseover. For example, a tooltip with the text `bird@tail.arm[0]` can be interpreted as "a bird symbol attached to the tail symbol's first arm attachment point." The implementation is a bit funky: we basically annotate the SVG DOM with various `data` attributes, and on mouseover we traverse the DOM from the element the mouse is over all the way up to the SVG root element, picking out relevant `data` attributes and building a tooltip out of it. This ended up being easier than e.g. passing a bunch of props down the whole tree in React. |
||
|---|---|---|
| .github/workflows | ||
| .vscode | ||
| lib | ||
| svg | ||
| vendor/bezier-js | ||
| .babelrc | ||
| .gitignore | ||
| README.md | ||
| build-vocabulary.js | ||
| copy-svgs-from-dropbox.sh | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| tsconfig.json | ||
README.md
This is an attempt by Nina Paley (art) and Atul Varma (code) to tinker with procedural art.
Right now there is no particular goal other than to explore various ideas. The project consists of a web site with multiple pages, each of which is and experiment of some kind.
It can be viewed online or iterated on locally using the instructions below.
Quick start
This requires NodeJS. It was started with NodeJS 14.15.4, but hopefully it should work with any recent version.
After cloning the repository and entering it, run:
npm run watch
then visit http://localhost:1234.
Running tests
To run tests interactively, run:
npm run test:watch
Deployment
To deploy the project to GitHub Pages, run:
npm run deploy