I closed down the blog for a week or so, and took a step back to evaluate where I was with the XVG codebase.
It was relatively easy to write the initial JS code for simple SVG generation of lines, circles and box shapes.
But things soon got quite complicated. For example, how do you assign unique yet user-friendly element IDs, in a scenario where end users create lines or other shapes, then delete some, but also keep others?
Also, how is it possible to create a complex GUI without using globals? With a GUI like XVG, it is necessary to keep track of the state machine underlying the app. It isn’t immediately obvious to me how to do so without using at least some global vars — closures nonwithstanding.
Furthermore, designing a good HTML/UI is not as easy as it looks. Apart from the trickiness of CSS, there is the matter of actually setting up the menu architecture .
Lastly one can eventually really get sucked into the edgier implementation details of JS — which I have tried to defang by writing the app as a series of event listener function calls, with a minimum of whiz bang programming abstractions or obscurely advanced syntax.
The pet peeves are many. Okay to leave out parens if a func is being passed only 1 arg? Really? What were these people thinking?
My rule of thumb is if I can’t tell right away what purpose a function or line of code is serving, then I’ll rewrite it. To me, JS is simply a malleable tool that I’m using to get someplace more interesting — being able to design complex geometric shapes at the click of a button — not an end unto itself.
Despite these challenges, there has been progress — albeit slow.
XVG now knows how to draw many different shapes automatically and instantly (including 20-sided polygons!), and provides the user with a way to connect markers via mouse clicks and thus create new designs without needing to write a single measly line of SVG code.
But I am about to enter the heavy-duty math (linear algebra and coordinate 2-D geometry, er, not my speciality) part of the XVG codebase, functionality that will be necessary for XVG to support before I get to the real heart of the matter: namely, enable end-users to create complex and elaborate geometric designs that are modeled after traditional Islamic patterns.
In this regard, I have found the following series of Coding Math tutorials on YouTube extremely instructive.
Meanwhile, I have refactored a critical part of the XVG script, but still need to improve the simplistic array-based technique I am currently using to dynamically keep track of lines, angles and their associated x-y coordinate attributes. This is going to take some thought.
I’m also going to study paper.js, snap.svg, and svg.js. Maybe code up a geometric design or two. This exercise will provide me with an opporutnity to learn how those legacy APIs/libraries solved some of the problems that I am now encountering with XVG — not to mention improve my JS skills.
Where am I indeed!
# # #