Hi HN! I've been frustrated with standard GUI-based design tools, because they don't match the way I think: like a programmer, in terms of relationships and abstractions. (Does this resonate with the community here?)<p>So I've been hacking on this new DSL for design that allows the designer to specify figures in terms of relationships, which are compiled down to constraints and solved using an SMT solver. This also leads to good support for abstraction, because constraints compose nicely.<p>The system is still a WIP, but it's usable enough that I made all the figures and diagrams in my latest paper and presentation with it, so I thought I'd write up a blog post about it and share some results.<p>This post is about how I think about design and how the programming language implements this philosophy. It also contains a number of case studies of designing real figures with the tool.<p>There are also some (probably useless?) but really amusing results, like what happens if you solve figures via gradient descent: <a href="https://www.anishathalye.com/#gradient-descent" rel="nofollow">https://www.anishathalye.com/#gradient-descent</a> (the result is oddly satisfying).<p>I'd love to hear what you all think about the ideas in the post. Do you share any of my frustrations with existing design tools? How do you think when doing design -- does your model match mine, or is it something different? Do you currently use any design tools that you're really happy with, that I should know about?
This is really cool, and looks appropriate for the hacker crowd.<p>I'll confess that one of my biggest wishes is for a universal standardized system and visual language+tool for graphic design with constraints -- so that graphic designers can learn a <i>single</i> system and simply <i>export</i> to HTML+CSS, to iOS layout, to whatever it is.<p>Implementing designs in front-end requires so much back-and-forth with designers -- "what should happen when this text overflows, what should happen if the viewport width doesn't fit this", etc etc etc. I wish this stuff would just be <i>built in</i> to visual design tools, zero code required, and <i>map perfectly</i> to software implementation. It's silly that it's almost 2020 and we still have to manually map this stuff to code.
Thank you all for the pointers to related projects and research papers!<p>To address a couple common questions:<p>Q: Is Basalt open source? A: Not yet, but it will be. The language is still under heavy development, and it's currently being completely rewritten in Racket. I'm waiting until it's a bit more stable to release the code.<p>Q: Are there plans for a GUI tool? A: Yes, I think it would be awesome to have a GUI tool! It seems like a hard problem to implement this, so it might take some time. The live preview is the best that I have currently.
I once took a course on AutoDesk Inventor and was blown away by its parametric sketching tools, which allow you to define constraints on points, lines, and angles. It was very easy to draw a rough sketch of what I wanted and then add the necessary constraints to "clean up" the design—I want these objects horizontally aligned, with identical dimensions, arranged equidistantly from this point, etc.<p>I've been longing for a 2D diagramming tool with just this feature. Unfortunately there are not many options. Solvespace seemed the most promising last I looked: <a href="http://solvespace.com/index.pl" rel="nofollow">http://solvespace.com/index.pl</a><p>I hope in the future there are GUI tools that can help with designing Basalt documents.
This is very cool! I hope this gets released--even if it's a rough prototype, I would still use it in its current state.<p>Like others (apparently), I started writing a system remarkably similar to this earlier this year. I just wanted to generate some simple diagrams programmatically, and went down the rabbit hole of creating a Python library to combine Z3 with SVG generation. For whatever reason, I was getting awful performance from Z3, so I started writing my own constraint solver. That ended up being a lot more of a pain than I had the patience to deal with, so I abandoned it.
> What if the figure design were changed slightly, for example the circle was to be inscribed in the rectangle? With Illustrator, it requires recomputing all the positions by hand; with Basalt, the change is one line of code:<p>Hi. I've been using Illustrator as my main art tool for most of twenty years.<p>1. Draw a circle. Give it a stroke in some color.<p>2. Open the Appearance palette.<p>3. Using the button at the bottom of the Appearance palette, add a new stroke. Make it another color.<p>4. Select this stroke and add effect>convert to shape>rectangle, relative sizing, add 0pt in X and Y.<p>5. Add effect>distort and transform>transform to the stroke. 70% in X and Y.<p>6. Open the Graphic Style palette and make a new style. Give it a name.<p>7. Visit the Appearance palette's menu and turn off "new objects have basic appearance".<p>8. Select the Graphic Style you made, draw some circles using it.<p>9. Turn off the Transform effect in the Appearance palette; hit 'redefine Graphic Style' and watch every circle change.<p>While your later examples like "make a little graph constrained to a shield" are more complex to make, there's still ways AI could help you do this stuff - you could maybe make a pattern brush with a circle for the end and corner pieces, and empty space for the main body, pile that on top of a plain stroke, and quickly drag some points around until you had a shape you like.<p>Eventually your examples get out of the territory of things I'd consider sane to do automatically in the tools AI has. But it can do more than you think.<p>okay enough procrastinating back to drawing my crazy comic in AI :)
I think this is super cool and definitely fits my mental model of how I think about diagrams and designs! Would love to take a look at the code if its available. I'm not a front-end engineer but it seems to me like a more expressive version of CSS parent/child tags and width/height percentages.
Eh hem... One of those developers of constrained
"CAD programs, not practical graphic design tools"
chiming in: This is cool! Very nice work and beautiful presentation. It makes me pine to build an actual nice website explaining what I did for B-splines/could do for subdivision (so I assert). Or you know, a Rhino plugin, etc.
Combining trains of thought, wouldn't constraint programming for B-spline design be applicable to fonts? I do not know anything about fonts really; I just had this belief that font design was often done with splines of some sort.
Wow, this is eerily similar to a thing I've been working on for a few years as well. Very cool! I love seeing other people who are asking the same questions as I am, and arriving at similar conclusions.
> Basalt doesn’t place many restrictions over these equations, which gives great flexibility to the user, but it makes the underlying implementation more challenging because it has to solve these equations automatically.<p>Given you seem to focus on diagram layout, is the added complexity in defining and solving arbitrary constraints worth the power you get out of having them? Or, can you give an example use of arbitrarily powerful constraints?
This idea is also closely related to Jen Simmons's “Intrinsic Web Design” concept. There is already some automation that can be done on web layouts at the moment.<p>More about it: <a href="http://www.zeldman.com/2018/05/02/transcript-intrinsic-web-design-with-jen-simmons-the-big-web-show/" rel="nofollow">http://www.zeldman.com/2018/05/02/transcript-intrinsic-web-d...</a>
You may be interested in Penrose (<a href="https://penrose.ink" rel="nofollow">https://penrose.ink</a>) which generates graphics of math figures from equation. I don’t know if they have as much in the way of a constraint language, but it’s certainly in a similar vein of work, and I know they use some force directed layout.
Figma's recently released Autolayout is somewhat analogous: <a href="https://www.figma.com/blog/announcing-auto-layout/" rel="nofollow">https://www.figma.com/blog/announcing-auto-layout/</a><p>You can deeply nest Autolayout frames.
Very cool. How does it differ from Cassowary?<p><a href="https://cassowary.readthedocs.io/en/latest/" rel="nofollow">https://cassowary.readthedocs.io/en/latest/</a>
Very smart and original approach. I’d love to see a instructional video on how you implemented it in Racket or the sorce code when it goes open source. Will be keeping an eye on it for sure