This is an interactive playground for the book Morphing: A Guide... written by Joseph Choma. This project is in no way related to the author.
While not fully-featured, and lacking some of the more complex examples in the book, this site lets you interactively explore the shapes and formulas defined by Choma in his book. I built this site during my batch at the Recurse Center as a way to tie together my previous work in generative design, and my current interests in domain-specific languages and interaction design.
Contact:
Let me know if you find any bugs!
nikokozak at gmail dot com
Some technical asides:
I wanted to accommodate the way Choma defines his formulas in the book as closely as possible, enabling you to copy-paste them into the editor. In order to do so, I designed a language that follows the book's strict syntax, and not much more. This language was specified using parsing-expression-grammar (PEG) formalisms via the Ohm-JS library, which allowed for left-recursion and neatly separated semantic actions from the actual grammar. Eventually due to performance issues, I translated the original grammar to avoid left-recursion and migrated to PeggyJS, a fork of the PegJS library.
As of now, the syntax does not support variable assignment, but this feature should be added soon.
At present, syntax higlighting is handled by PrismJS via regex declarations, which is redundant given that we can extract location information from the parser - tying the parser locations with live tag interpolation into the editor is going to take some figuring out.
The editor is built on the CodeJar library, which is pleasant and light albeit not as capable as, say, Ace or CodeMirror.
Ranges (or Bounds, I'm still not sure what to call them) are recursive in nature - the first bound will nest inside the second bound if one is declared. This is necessary in order to draw the lines in the same way they're drawn in the book.
In order to accomplish the above, some trickery is introduced into the parsing flow - namely, the evaluation of functions is delayed so that they can be applied to all the steps in our range, with each step representing a new "environment" or "scope" for the given function.
The site is fully responsive, so it should work just as well on mobile/tablet as in the desktop.
THREE.JS is used for the rendering, which all things considered is kind of heavy-handed for our purposes. I'm working on a fork to streamline the sampling of points from Curve objects, in order to bypass having to create thousands of Point objects every time we do so.