HashiCorp's events are something special. A dedicated in-house events team makes sure every single detail is considered and perfected. At HashiConf 2018, in San Francisco, one of the many details was this generative art installation in the HashiCafe.
\nFirst, let's be clear that this is art and art doesn't need a purpose. If you go through life constantly searching for meaning, you will leave this world disappointed. But, this particular installation was a piece of a larger puzzle and it did have some purpose.
\nWe wanted something fun, creative, and unexpected. A lot of people who go to tech conferences go to a lot of tech conferences, and they can all start feeling the same. It takes something special to break that rhythmic monotony. A 2D plotter sitting modestly in a cafe does exactly that.
\nWe also wanted something physical. Engineers write code all the time, so seeing things off screen is a treat. Watching the AxiDraw plotter is a treat in itself.
\nLastly, we wanted something that could be taken home.
\nPutting this all together meant a generative art piece that tied into the HashiCorp brand and plotted fast enough that we could make a lot of them over the two days.
\nHashiCorp has really strong product brands, so I had no shortage of imagery and motifs to work with, but everything had to be implemented as code. Fortunately our branding is rather geometric, but it's eye-opening how much math programs like Illustrator and Sketch are doing that we just take for granted.
\nIn order to draw lines within a polygon, I had to write a clipping mask implementation* from scratch. Things went from \"I'm having fun with shapes\" to \"slope intercepts, quadratic formula, normal vectors, oh my!\" really fast. Honestly the math just added to the fun. It meant everything took longer than expected, but I was more than okay with taking it slow and enjoying exploring more computational geometry.
\n\nNormally I would do something cheeky like draw black rectangles over the inverse of the bounding box, or use a clipping mask when available, but having the pure arc paths allows for cool things like this. It's also (hopefully) plotter safe! pic.twitter.com/UrWgK9v4TW
— Michael Lange (@DingoEatingFuzz) September 9, 2018
The end result was a single program that would generate an SVG of a random product grid for a given seed. This SVG was then plotted with the AxiDraw plotter.
\n*Okay, it's not a complete implementation, but it works for arbitrary lines and circles in an arbitrary polygon.
\nBefore this project, I had never used an AxiDraw. I knew going in that I would need some alone time with the plotter to learn how it works and pick up some best practices. This meant figuring out how to scale an SVG to a piece of paper and align that with a piece of paper underneath the plotter's pen arm. It also meant experimenting with different papers and inks to see what works and what doesn't.
\nSince the theme of HashiConf was black and gold, we wanted to also use black and gold with this generative art to tie the theme in. We ended up using a nice black card stock along with gold gelly pens. Although gelly pens sound childish, they resulted in truly beautiful shimmering line art. However, gelly pens lay ink down thick. With SVGs, lines can be infinitesimally thin, so translating what was an acceptable line thickeness and distance on the screen to the paper took some trial and error. If artwork was too dense, it would be plotted as a blob. If artwork was too sparse, large, or simple it would compromise the overall composition or branding.
\nLastly, there is a fair amount of finesse that needs to go into setting up any pen in the plotter. The pen is lowered to the paper by gravity, so putting the pen in too tightly creates friction that may mean the pen won't make it down to the paper by the time the plotter driver thinks it has. Conversely, a loose pen may not go up and down at all, causing drag marks. Although ideally this would never happen, it's easily prevented with some practice.
\nAfter writing the code to generate the art and working with the plotter to choose the best paper and ink as well as dial in the art to make sure it plots well, everything was done end to end. However, we wanted to make as many plots as we could in two days, and everyone who staffs HashiConf is wearing many hats: giving talks, doing booth duty, meeting with customers, etc. This meant the performance of plotting on site needed to be thought through for the most success.
\nThe single most effective way to ensure everything went smoothly was to automate as much of this process as possible. The standard way to use the AxiDraw plotter is to create an SVG however you like, then use Inkscape to layout the graphic and send it to the plotter. This is a tedious process that requires a lot of prep work. It's not so bad when you are only making one plot, but we were making 100+ plots. Fortunately, the fine folks at AxiDraw have been working on a CLI tool and a Python SDK for exactly our purpose.
\nUsing the CLI tool and the SDK, I was able to construct a make file that had targets for
\nAll this together made operating the plotter quite simple. A single command, make generate && make plot would create a graphic and plot it. If a pen ran out of ink or if something went haywire in any way, make raise would lift the pen off the paper, and make release-motors would allow the operator to manually reset the position of the pen. Staff were able to be trained on the plotter in less than 10 minutes, so we could cycle shifts throughout the conference.
The last piece of the performance was creating a preview screen so it was a little more obvious what the plotter was doing. This ended up being a quick and dirty little express server I wrote the day before. It watched the filesystem for changes to the SVG file the plotter looked for and used a websocket to send that new SVG over to a web browser. The client page styled the SVG in black and gold using CSS as you'd imagine.
\nAll this together made for a pretty seamless performance. Next time I'll do a better job estimating how much paper and ink we'll go through, so I won't have to make another emergency trip to the art store.
\n\nOnly at HashiConf, you can get a plotter-print of HashiCorp tools. Each background is randomized and totally unique! @DingoEatingFuzz pic.twitter.com/YIcSEuzAdl
— Mitchell Hashimoto (@mitchellh) October 23, 2018
javascript:<insert-lots-of-javascript-here>.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-jobs.png","alt":"Nomad UI jobs list","caption":"The Jobs List page serves as the home page for developers interacting with Nomad. It represents all software known to the cluster.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-deployments.png","alt":"Nomad UI job deployments","caption":"Nomad supports automatic rolling and green/blue deployments as well as optional canary deployments. All of this is represented in the UI\nand kept up to date in realtime.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-logs.png","alt":"Nomad UI stdout log streaming","caption":"Nomad also has a streaming HTTP API for tailing logs for allocations. The UI lets any privileged user see these logs using fetch and streaming\nrequests when possible and falling back to polling otherwise.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-stats.png","alt":"Nomad UI metrics over time","caption":"Stats in Nomad are not stored, but the UI makes a best effort attempt at tracking data over time by storing previous values in memory,\naccounting for skipped data, and persisting historical data (up to a limit) between page views.\n"}]}},"pageContext":{"slug":"/project/hashiconf-genart-plotter/"}},"staticQueryHashes":[]}