Conf42 Golang 2021 - Online

Between Order and Chaos: Creating Immersive Generative Art With Go

Video size:

Abstract

Generative art is a unique form of artistic expression, building bridges between computer programming, randomness, and visual aesthetics. It has kept my imagination for over a decade. While I have never been particularly skilled at drawing, I have always been amazed by what one could achieve with a couple of lines of code. At the beginning of this year, I wrote and and self-published a book about the use of Go as a language for graphics and generative art programming.

Unlike popular choices such as Processing, NodeBox, openFrameworks, etc., I picked Go for two simple reasons:

Go’s syntax is easy enough that virtually anyone can learn it quickly. The language is far more versatile than what most programmers use it for.

I am hoping that my talk will give the audience a new perspective about their favorite language, and the chance to discover an artistic side they did not know thy possessed.

Summary

  • Prasav will talk about a different side of the could language. The talk will hopefully inspire you to search for the artist within yourselves. It's a story about finding new sources of inspiration, about picking up the goal language later in my career, and last but not least, about rediscovering the joy of programming through the language.
  • processing took the basics of Java, but it really simplified them. Many of the processing works would occupy just a single file. Has so hooked up on the simplistic nature of the language that he started using it for other things. But how does generative art really relate?
  • Generative art is a balance between procedure and randomness. It's the result of simple steps multiplied many times over a complex organism. A lot of this actually applies to go, doesn't it?
  • As is usual for the go language, you're provided with only a bare set of basics. This allows for other libraries to build up on those basics. One of the most widely used libraries when it comes to drawing 2d graphics in Go is called GG.
  • Webassembly can be useful in producing graphics generators for the web. Genetic algorithms will definitely be one of my sources for future content for expansions of the book. Third one is a book recommendation for people wanting to start with graphics engineering programming.
  • The next portion of this talk will be a demo session in which I'm going to show one of my early sketches. In parallel I wanted to demonstrate how go applications can be compiled to webassembly and drive interactive applications on the web.
  • In generative art, we source random images from the Internet. On every iteration, we call the sketch update, the sketches update method. It's essentially a bunch of iterations on top of simple steps. Here's a sample output of the sketch.
  • The sketch is based on a concept called Perla Noise. It will imitate randomly scattered brushes. I'm looking forward to seeing more and more people taking the goal language for a spin.

Transcript

This transcript was autogenerated. To make changes, submit a PR.
Hello and welcome to my talk. My name is Prasav, and today I'm going to talk about a different side of the could language, one that will hopefully inspire you to search for the artist within yourselves. While preparing for this talk, I thought a lot about how to approach the subject. I could just sit and talk about art theory for hours, but no one would stay here and listen. I could also just dive straight into coding. That wouldn't make it quite either. Beyond the basics, much of the real creative work is just sitting alone and trying things for hours, failing and trying again and over and over and over again, trying different things, until they suddenly click. So I figure I could just tell a story instead, one that approaches the subject through the prism of my own experience. A story that, interestingly enough, starts at the end. At the end of our story, there has a book, an actually different kind of book. It had none of the usual suspects in it. There would be no web servers, that there would be no networks, no containers even. The book wasn't even supposed to teach the goal language. Instead, it was more meant to inspire people to try new things. Interestingly enough, it was also the first quote unquote product that I released after jumping into the unknown waters of solopreneurship at the start of this year. And yet, this book is only a byproduct of a long journey. Therefore, it's the journey that the rest of the story will focus upon. It's a story about finding new sources of inspiration, about picking up the goal language later in my career, and last but not least, about rediscovering the joy of programming through the language. My story with graphics began in the early 2000s. Like many kids at the time, I also wanted to make video games. So I started with can Pascal, but quickly realized that those weren't really helping me make the flashy stuff as fast as I wanted. So somewhere around that time, a new language called processing appeared. It caught my attention, and I immediately started playing with it. Processing was born at MIT. It wasn't meant so much targeting professional programmers, but more towards non experts, especially people with an artistic background. This was really the first time that I saw a language that was meant two really help people deal with graphics and such. So processing took the basics of Java, but it really simplified them. It also came with a really nice library that was helping people to work with graphics. Many of the processing works would occupy just a single file. They were called sketches at the time, and one of them would look something like this. So actually, this sketch on the left is one of the first sketches that I wrote in processing, and later on, it was the one that actually inspired me to write the book. As you can see, there's really nothing too complex and fancy about those sketches. It's essentially just a few lines of code that would, at the beginning, would just a nice color palette from a source image, and then would use those colors to basically randomly spread rectangles around in various degrees of opacity. And this would create this nice sort of overlay effect. But most of the processing sketches are something like that. They're quite simple. My obsession with the language even met me later on with one of the forefathers of the computer graphics field, the german guy called fidanaki. I was a student of his during my masters, and it was about that time when I really started reading more deeply about the philosophy behind those randomly scattered squiggly lines. But in a typical fashion, life took over, so I had to move on with it. I jumped out of university, and I made the career as a Java developer. It was about until late 2018 when I was introduced to go as actually a part of a job switch. This was a pivotal moment, and probably one of the few moments that was going to define my future trajectory. I has so hooked up on the simplistic nature of the language that I started using it for other things. Has. Well, at some point, I figured I could just grab my old processing sketches and translate them two go, would that work? And the answer is yes. And as people say, the rest was just history. One thing led to another. But how does generative art really relate? Two law. To go into that, I will first have two define what generative art really is. And that's a difficult subject by itself, because you're probably about to find as many definitions of generative art as there are people dealing with it. And of course, none of them would fit the context of the goal image. So I had to come up with my own explanation. Allow me to share it with you. Generative heart is a balance between procedure and randomness. It's the result of simple steps multiplied many times over a complex organism of tiny actors interacting sequentially and concurrently with one another. Think about it. A lot of this actually applies to go, doesn't it? Actually a fun fact, this animation on the right was completely made with the goal language. I think it really exemplifies what I mean with this definition. It's a bunch of tiny actors, each of them taking simple and seemingly random steps. But in a combination, these lead two the breeding of new behavior, of complex behaviors. And this is one of the postulates of generative art as well. It's like you don't have to write complex code to achieve complexity. You just have to write simple things and multiply them over and over and over again, stepping on the product of the previous step, essentially. All right, let's look at some of the basic building blocks that the go standard library provides as well. As is usual for the go language, you're provided with only a bare set of basics. However, these basics are so well designed as it is usual for the language, we're provided with only a bare set of basics. In fact, most of the code types can really fit on one slide. It's just these three interfaces that you see on this slide that you need two know about, and you can pretty much say that you know most of the graphics fundamentals provided by the go standard library. Those basics are extremely well designed. They hold a minimum set of requirements, and that's it. For a type to qualify as an image, for example, it only needs to implement three simple methods, the same for the color you can think of. Those has essentially as the reader and the writer interfaces of the graphics domain. It's really this idea of composability and swapping that makes this whole thing so easy and so interesting. As we'll see later, this allows for other libraries to build up on those basics. All right, let's look at one example. I think there's no better way to speak about composition than the concept of image filters. A filter can be an image too, wrapping its source in itself. If we implement all the methods that satisfy the image interface, we could then use our filter in any other place that accepts an image. Another example, cutting a circle out of an image. I think this was actually featured in the Go documentation tool. Again, we can achieve the same effect by wrapping can existing source and telling it how to render each pixel. Unlike the previous example, here we selectively play with the opacity of the pixels and not just the color hue and saturation. So in a way, we achieve the creating of the circle by saying any pixel that's not in the circumference of the circle will have an opacity of zero, essentially meaning that it will be completely transparent. This leads to the perfect circular cutout we can see on the right hand side. Implementing all of those things by ourselves will be an overkill. Thankfully, there is a number of great libraries out there that provide us with what we need. Thanks to the composability and lack of deep abstractions. Those are also extremely easy to integrate or learn from. I could say perhaps one of the most widely used libraries when it comes to drawing 2d graphics in Go is called GG, and it's really simple to use. It's one of the main libraries that also feature in my book, and it's been essentially an indispensable tool in my work ever since I started working with graphics and go. What I really like about it is the fact that it has the same procedural API and look and feel of many of the functions that exist in the processing programming language. So those who have played with it would expect to find the same basic primitives to work with, essentially shapes and rectangles and fonts and basic image filters and such. It's extremely useful, and I can totally recommend using it. All right, before we go into a short demo session, here are a couple of notable mentions that didn't make it into this talk. The first one is webassembly. It's something that I've dedicated the whole bonus chapter and part of my book, and it's something that I would definitely want to expand further upon, and we might have a slight chance to see this into the demo. Although I'm not going two go into the code, I'm still going to show you how webassembly can be useful in producing graphics generators for the web. For example, the second thing is genetic algorithms. It's something that I'm currently working on, and it will definitely be one of my sources for future content for expansions of the book, and why not future topics for talks. So definitely expect to see more to come in the next year or so. And the third one is a book recommendation. I have to say it's one of the few books that I would definitely recommend for people wanting to start with graphics engineering programming ego. The book is called the Nature of Code by Daniel Shipman, and it's actually about processing, but it's so well written and so easy to follow that many of the things would be easily sort of transferable and applicable to go. And I should say there are a lot of interesting concepts going back to math and statistics and sort of different fields also, like talking about different aspects of the graphics and art. So definitely something to check out. All right, so the next portion of this talk will be a demo session in which I'm going to show one of my early sketches, and in parallel I wanted to demonstrate how go applications can be compiled to webassembly and drive interactive applications on the web. Let's jump right in. One of the subjects that I at least wanted to show in the demo. Unfortunately, it's quite a complex topic of its own, so I'm not going to be able to talk so much in detail about it is the compiling of go applications to webassembly and using them inside a web browser. So at least I wanted to show how I took one of my sketches and basically put it inside of a website. So what this website here, and this is the URL, what this website here does is it allows anyone to just go there and generate graphics, basically randomly generated graphics of their own. So I can definitely advise anyone to just go there and try it. It's completely live and I will make sure to put all the relevant URLs and addresses inside of the slides. So without further ado, I just wanted to start rendering and in parallel move to my other demo because this might take a little bit of time. Right. Okay. Loaded the wasm file and it starts drawing. So we could be able to see some results in a couple of, not more than a couple of minutes. In the meantime, I wanted to switch to a very simple sample sketch. It's actually the sketch that I'm speaking about in my book, and as one can see, setting up the whole sketch and the sketch itself, they're not really complex. They shouldn't be complex at all. Actually, I just wanted to show you a sample output of the sketch. So this is what it's supposed to render. It's essentially a reinterpretation of the processing sketch that you saw above, but with a little bit of addition. And since I actually like playing with random color palettes most of the time, I don't even start with predefined images of my own, but actually source random images from the Internet. And one of the things that I wanted to show you is how I do that. Not many people know, but the popular image sharing service unsplash, it has an API and it allows people to essentially go there and say, give me a random image. In our case, we don't even want to book at it, we just want to use it as a color palette source. Then once we have this image, we essentially create a sketch, and I will go in a couple of seconds into what this sketch entails. We give it a bunch of parameters, which I totally understand that not everyone will really understand what they mean. Sometimes I don't either. These are just meant to essentially drive the generation of every next step of every next iteration. So as you can see there, some of them will stay the same throughout the whole destination width, destination height, or others are essentially what the initial alpha of the rendering is, and minimum edge count and maximum edge count of the polygons that we're drawing and stuff like that. So with that done, what we do essentially is we go through a bunch of iterations. That's one of the things that make generative art what it is. It's essentially a bunch of iterations on top of simple steps. And on every iteration, we call the sketch update, the sketches update method. So let's take a quick look into the sketch itself. Again, super procedural. Nothing too fancy, nothing too complex. It's setting up a canvas under the hood using the library that I mentioned, Gg. It's extremely helpful for allowing us to set those things and draw primitives on top and mix and match with varying opacities and stuff like that. It's extremely simple and nice to start with. And then the actual update method is also not super computer. What's happening is unlike we draw a random pixel from source, transpose it over to the destination using this super complex, super complex formula of just finding the corresponding pixel into the destination and essentially saying, draw a polygon depending on the configuration, with a certain number of edges at this location. To make things even more interesting, I added these two parameters. So one is like this stroke inversion threshold, which says well beyond a certain size, since these polygons are expected to get smaller and smaller over time, start adding something like a border, so that the smaller the polygons are, the more sketchy they look like. So it looks like a graphic. So one is this, and the other is basically the one that's called stroke jitter. Again, something that I invented. It's completely up to the people who create the sketch to come up with naming conventions that sort of mean something to them. So the stroke jitter will just say, we don't want this particular color to appear in that exact spot based on the source. You can just as well add a little bit of a randomness to it. And that's what this stroke jitter will do. It just go through, we'll just say, take the pixel and give it a varying amount of distance from the original source. And yeah, on every iteration, we'll make sure to reduce the stroke size, and we'll also increase the alpha so that we create this sort of effect of reducing the polygon size. And at the same time, I'll just explain it as building up or sort of a kept effect of the drawing. So without further ado, I'll just say, let's go and try it. And as I was saying, based on the fact that it loads a completely random image, I have no clue what the actual output will look like. So this will be a bit of a surprise for me too. One thing you'll notice is that the smaller the polygons, respectively, the smaller the brushes at the end. It will get progressively faster and faster until eventually just finishes in a couple of milliseconds. So let's see the output. All right. Completely different image. Not sure if you like it or not. A bit dark to my taste. Maybe we'll just, you know, we'll just generate another one, but it will basically follow the same pattern image. Few more iterations and beyond the thousand, it will speed up. And there we go. Black and white. Interesting. All right, now let's switch back to the browser and see what we've. Okay, this is a new sketch. It's based on a concept called Perla Noise. It's very well explained in the Daniel Schiffman book, and it's something that I want to definitely emphasize more on in future talks and in future chapters of the book. So, as you can see, this one is also quite nice. And essentially, this sketch follows a similar approach in that it will etc. A sort of a random image from the Internet, and we'll use it as a color palette, but instead of randomly distributing polygons and triangles and whatnot, it will just use a concept called perlin noise to imitate randomly scattered brushes. So, yeah, again, this looks quite nice to me, but I leave it to the interpretation of the viewer at the end. So, yeah, with this beautiful picture, I just wanted to say thank you once again for choosing my talk today and definitely looking forward to seeing more and more people taking the goal language for a spin and seeing what else could be done with it beyond the usual aspects of its application. Thank you.
...

Preslav Rachev

Founder @ PSV

Preslav Rachev's LinkedIn account Preslav Rachev's twitter account



Awesome tech events for

Priority access to all content

Video hallway track

Community chat

Exclusive promotions and giveaways