Angelica is joined by the wonderful Anthony Starks to discuss creative coding to create art & visualizations with Go. Anthony is an independent developer/designer interested in data visualization, generative art, building tools & combining art + code.
Anthony Starks: So the first one, we can start with SVG Go. That was created – that’s the oldest one. Started in March 2010. So Go was sort of introduced to the world in November 2009, and a few months later SVG Go was born. So that is the ability to, again, take data from whatever, and take those high-level concepts in SVG and make a picture. So sort of the subtype I like is programming pictures. So that’s sort of what we’ve been doing.
Subsequently, I created other tools… So I use that a lot for generating SVG. So just one more thing that I want to say is, in all my packages I really spend a lot of time on the documentation. And because these are visual tools, it’s really important to make sure that we’ve got really nice illustrations for everything. So I just wanted to put that in there. So that’s SVG Go.
[00:09:44.04] So let’s go back to 2013-2014, something like that… Again, in the corporate world things don’t exist unless they’re on a PowerPoint. Right? [laughter] So a lot of the world’s knowledge is sort of locked up in PowerPoint. And I’ve been doing a lot of PowerPoint and that kind of thing, and again, I’d use SVG Go for doing, again, architectural diagrams, I had my own sort of markup language that was specific for those kinds of things… Again, you could have used Visio and those kinds of things, but whenever I wanted to make a tool, I would make a bespoke tool for a particular kind of visual using SVG Go. But it didn’t really quite work to make that as a PowerPoint, so I said “What are the things that build a nice PowerPoint?” I became sort of a student of what makes a good presentation, looking at Steve Jobs’s keynotes and those kinds of things, using things like Keynote on the Mac… I said “What are the things that really make that?”
So one of the insights was start with a blank canvas. Throw out all of the defaults that the tools give you, and start with a blank canvas. And again, that’s another sort of learning, is the defaults that you get with things like PowerPoint, and Excel, and those kinds of things are terrible. They’re really bad. Maybe they’ll be better in this age of AI, but right now they’re bad. And a lot of bad visuals and things have been foisted on the world because people just click on the default, and it’s not their fault.
Anyway, so pulling back, I said “Hm…” Remember the Present tool that the early Go developers created? I said “Well, you know what? Let me make a parser for that, so that I can sort of build those kinds of things.” And then from there, I said “Wait a second, what am I doing?” Because it was not really specified anywhere, the grammar or anything about that, I said “Let me pull back, and let’s create a bespoke markup language just for presentations.” So the whole thing is a deck, and then within the deck you’ve got slides, and then within slides you’ve got text and graphics. Okay, that’s sort of the basics.
So given that, I created this tool to do that, and - it’s interesting, the first client was built for Raspberry Pi. Because it had nice graphics, and I had sort of a 2D graphics library that I was working with at the same time. So I could create nice presentations around that on the Raspberry Pi. But because you had a markup language, you can take that as a basis… So hm… Let’s make an SVG out of it. Let’s make a PDF out of it. Hm… Let’s make a PNG out of it. So from there, you can create a whole deck, and then boom, you’ve got your PDF, and then nobody knows that you didn’t do it with PowerPoint, or whatever… It’s just a PDF and slides, and you can walk through it. So that’s sort of the beginning of that.
And then after that, I built another tool on top of that called Dchart, that uses the elements – so it turns out those fundamental elements that you can use are also perfectly great for making charts and graphs. So for example, if you wanted to make, let’s say, a bar chart, what are the elements of a bar chart? We’ve got numbers along the bottom, and you’ve got lines that make the bars, that can go this way or this way… And you just lay them out.
[00:13:54.04] So one of the things that I also want to mention is all of these tools use a simplifying thing called a canvas. But that canvas is percent-based. So it doesn’t matter what the aspect ratio is, everything goes from x, from y, from 0 to 100. And it uses the coordinate system that you learned in elementary school. X goes from left to right, increasing, y goes from bottom to top increasing… Which is sort of flipped from typical graphics programming, but from sort of a user’s perspective, or from my perspective, that was a fundamental sort of insight. Then, you can just sort of say “If I want something in the middle, it’s at 50/50. Boom, there it is. And it doesn’t matter what size the canvas is. The size of the can be this way, it can be this way… It doesn’t matter, it scales to it.
So you only have to remember numbers from 0 to 100. So that makes it easier to think about and to reason about. And it also simplifies your layout, because again, you can think in those very simple terms, of where things are going to go.
So that was – so we were talking about Dchart. So Dchart is built on Deck, which is the markup language… So therefore, your charts and your other elements are no different. There’s no sort of pasting it in, or whatever. It becomes a fundamental part of it. And then from there, that became a library that you can embed. And then again, you can have programs that work together… Again, all of my tools are command line-based. So you work on the command line, you can build your own tools around that… And again, from there – so before, I’d been writing sort of the markup language in raw XML, like sort of a caveman. But I realized, “Wait a second, I can create a domain-specific language, that will abstract –” In many ways, it’s a one to one. So if I want to draw a line, the line command looks like sort of the line markup. But you have other larger things, like if you wanted to draw star, that’s actually a polygon, for example. So you sort of work in those kinds of terms.
And I sort of built up the things as I needed them. So if I needed something that wasn’t there, I would just create an element in the markup language, and then create a way to express it, and away I went. So that was Deck, Decksh… And again, in - let’s see… In 2019 I learned about the work of W.E.B. Du Bois at the 1900 Paris Exposition, where he wanted to tell the world the progress of African Americans since emancipation. And he used a series of charts and graphs to do this, and it was all documented in a book. The name of the book is W.E.B. Du Bois Data Portraits Visualizing Black America. And in this book, they have each of these – they were large poster-size things, and I said “You know what, developing these tools concurrently with learning about that, why don’t I start and try to recreate them?” So I was on vacation, I said “Let me start, see how far I can get.”
So there are around 60 visualizations in the book, and I started in July of 2019, and I finished by October. So it took a few months to do it… But once they were done, I had this nice collection, I had learned a lot about how do you develop a domain-specific language… Again, the philosophy is let’s start from the minimum, and then let’s just build only as we need it, going up further. So that’s sort of the journey of those sort of sets of tools.