GitHub GitHub Universe 2020: Play - Creative Coding, 11 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Exploring generative spaces: a quickstart to generative art - GitHub Universe 2020

Description

Presented by Sabine Wieluch, Artist, Bleeptrack

In this talk, Sabine "bleeptrack" Wieluch will give a quick introduction on how to create your own generative art using paper.js. She'll also share insights to common techniques and explain possible pitfalls. She's excited to code art with you!

For more from GitHub Universe 2020, visit https://githubuniverse.com

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Hi nice to meet you, my name is sabine villuch, I'm also known as bleeptrek, and I work a lot with generative and ai art, and I'm very happy that I was invited today to give you a super quick dive into generative art and how you can code, your own generative art with paper js, so yeah, let's get started and what what is generative art. So the main goal is to make some sort of art in the end.

A

This can be anything you can think of images: videos, music, poems whatever you like, though, in this workshop we will go with images and to make this even more detailed, we will create vector, graphics, svgs and um yeah. When we talk about generative art, we always use some sort of rule set to make our art.

A

This rule set in our case, will be created by code by algorithm that we write. But this doesn't. This doesn't need to be the case all the time. Some people also work with dices and they just uh yeah use dices in a physical in the physical world to generate random numbers and then put that in their rule, set that they have in their mind and then draw certain shapes. That also works, but we will go with code and that's that's yeah. When you today hear generative art, you usually think of code and art um yeah.

A

As I already said, there are different kind of input types you can use. You can use yeah random, random numbers. You can also make interactive generative r so that the user can or generates the input, for example, with the kinect, and you can scan the body pose and use that as input. It also works. You can also use completely different sensors that don't have to do anything with users. Let's say you have, I don't know.

A

Maybe a water sensor in your plant that could also work or maybe also any different kind of data doesn't need to be sensors. You could also connect to a large databases like wikidata and draw information from that and use that to generate your art, so the generative models that you write. They can have a lot of different parameters. This can either be like binary values. You can either use rectangles or circles. Something like that. This can also be a range of numbers, and usually you want to set a fixed minimum and maximum.

A

So you find out, I don't know, maybe circles should at least be a certain size and should not get bigger than another size so that it still looks good in some ways. So this is something you have to figure out um yeah and when, when we're all already at figuring out stuff, um there's one important thing that I want to tell you about generative art.

A

When you imagine uh the space that you are in with a generative model, you have basically two spaces. There's uh the possibility space. That is the space of all possible outcomes that you can do with your parameters and your settings. So every permutation is a dot in that space, and you also have that generative space. This is usually a sub, a subset of generative outcomes, because you have some uh certain constraints that you put on. Let's say when circles are small, you make them blue and when they get bigger, you make them red.

A

Something like that um and for generative art. There's a very important thing to consider: how large should your generative space be? um Let's look at the two extremes you can make it super big so that it's basically the possibility space. So you get all permutations.

A

um This has the positive side that you get a lot of different results, but they might get super boring as all like the results get yeah uninteresting or mushy because, like you, throw just random stuff there and hope that it looks good in some way and often it doesn't, it gets sort of boring.

A

The other extreme would be that your generative space is very small and very defined um has the positive side that you are very in control on what you generate and how it looks extremely in control, maybe even so far that you only get one result, and that makes it boring to use right because the fun stuff on generative autodesk is that you get different sorts of outcomes and you lose that when you make the generative space too small, so you need to somehow find a nice way in the middle, where you have a nice variety, but all the results still look interesting before we start with coding.

A

I wanted to show you some of my work to give you a bit of inspiration, what it's possible, and maybe you can already find a bit of a certain path or certain thing that you're interesting to do later, um yeah. So uh the first project I want to show you is called gen chair and I found a paper that was really interesting about how you can simulate the vein. Growth in tree leaves, and it gives super interesting pattern and that rule set.

A

That algorithm is actually super easy to implement and that's what I did and yeah to make it more like a leaf. You would put it in a leaf shape, but in my case I wanted to create a chair out of it. So I let these veins grow inside of a rectangle shape and then just through that onto my cnc machine, which actually took quite long so the the backside and the seating plate took five hours each to cut out of my cnc machine and yeah.

A

When I put that together, I ended up getting a really interesting chair made out of a thick verge plywood and it looks quite fragile, but actually it's really sturdy and I think that's a nice example that you can also use uh sorts or simulation to create generative art. It doesn't need to be like a super hard-coded rule set that you came up with it can also be. You can also use uh yeah, some sort of maybe uh predefined simulation tools that usually works. Great can also be like um gravity simulation or something like that.

A

What I also like to do a lot is working with pen plotters, and this is also the reason why I started working with paper js, because there are a lot of awesome tools for creating generative art and I think the most well-knowns are processing and p5.js and they are extremely great tools and they have awesome communities with awesome learning materials.

A

The one point that I was missing when I started getting into generative art was a very good export for svgs or vector graphics, because, as you can see, I work a lot with machines that need these paths to yeah to cut along or draw along, like cnc machines. Pamplo does laser cutters and all that stuff also 3d printing usually benefits.

A

If you have a nice dxf file, for example, that you can work with, and that's why I started using paper js and that's also the tool I want to show you today, and this uh project is that you can see here is called over flower yeah. It generates some sort of flowery images, maybe looks a bit like succulents succulent plants, and what you can see here is what I talked about earlier about the importance of choosing the right size of your generative space.

A

You can see that these flowers, they look quite different and some have pointy leaf. Some have more round leaves there are different filling patterns.

A

They are placed in different locations in there in their square, so they look quite different, but they also you can see that they belong to the same model and that's a nice feeling that I usually want to create. With my artworks that you have a nice that you can generate a nice row of different images, they look like they belong together, but each one is interesting on its own. That's super important to me.

A

My latest project is called pico planet and yeah. I like a lot to experiment with different materials and how I can transfer these digital artworks into the physical world and with this project I tried to yeah put generative art on pcbs, and it was a very interesting task for me because for each new material that you experiment with, you need to find out prerequisites on how you need to prepare your digital file so that it's easy to process it in the basically in the processing path that you choose. In this case, I'm not sure.

A

If maybe have looked at a pcb. You have different layers. um You have these copper layers, then there's a solder mask on top and on the solder mask there can be a screen print in this case. That's the that's the white screen print and I want to somehow utilize these different layers, because uh different combinations uh give different colors, for example, with pico planet.

A

You can see these swirls in the background and they, uh the lighter swirls, are a combination with copper and solder mask and the dark background uh are places where there's no copper under the solar mask. So you can play with that or, for example, um the these little sort of yellow stars. They don't have uh layers on top of them at all, so it's only the base plate and you can use them to shine light through the pcb so always think about what your end product will be.

A

You have similar interesting cases when you use pen plotters, because when you create digital paintings and for example, you have a circle with another circle on top and they have a fill color, you can just draw them on top and one will partly over that overlap, the other. That's totally fine.

A

If you put the same svg later on pen plotter, you will have a problems with that overlap, because both circles still exist, so both circles will be drawn completely and you need to find a way to like cut out certain shape paths so that they are not drawn later in the image. So this is all stuff that you need to think out in the best case before you start to write your code, or maybe you need to refactor that later.

A

What I can also highly recommend is using generative art in the creation of event corporate designs, because you can also not only publish a docu, a design document with all the colors and stuff that people should do for their slides.

A

But you can also create a generator as a tool and give all participants this tool to easily create their own logo version or their own presentation slide backgrounds, and that automatically automatically fits the corporate design of your event- and this is a very interesting thing to see when people start using these and they like to use it because it's either fun to use, for example, or it's just a convenient way for them to get their own images, but when they start using it and a lot of people use it.

A

The in the whole event gets more yeah. You know like cooperative science like uh it gets more, a more community feeling and if you make it easy for people to get this community feeling by conveniently making their own images. This is usually a huge step and people will start.

A

I don't know printing their own t-shirts or their own merch stuff with their own variation of the logo, and this is usually a super fun thing to see and for the last years I did this for chaos, communication congress um and made generators for people to use, and it's yeah, it's always great- to see how people used to use these images in their own creative ways.

A

One super quick last idea that I want to give you what you can do with your generative piece and also maybe with a generator that we will write at the end of the day, um is to make it into a twitter bot or a social media board doesn't need to be twitter, of course, um but it's a very interesting thing to experience, because you give your art a very con. A very casual way to be viewed like people can just subscribe. It's let's stay with the twitter example.

A

You can just subscribe to the twitter feed of your creative art, bot and yeah every now and then every few hours a new image will be created and they can just watch it and can comment on it, and this is a super. I don't know like yeah, open and public way to show your art and also it's a very nice way for you as the creator to consume your art, because I guess you will also follow your art, bot and yeah.

A

When you throw a scroll through your timing line, you will see a new image and this it wasn't you you who had to push the generate button, so it gives always a nice warm feeling to your heart when you can interact with your own art in a very easy way, and you don't have to interfere a lot.

A

So that's all for the beginning. I hope hope this gave you a bit of inspiration and we will start coding now um to do so. Please go to paperjs.org.

A

This is the javascript library that we will be using and there are three links that might be of interest to you. One is the references link where you can find all the documentation.

A

There's also a link called tutorials gives nice written short tutorials on different topics and most important one is the sketch link, because paper js has a great online editor, and this is where we will start now. So in this quick generative coding example, we want to create a grid made out of rectangles, and these rectangles should change along the axis so x and y axis, and also some stuff diagonally.

A

I prepared certain steps in the coding process for you so that you don't have to watch me writing down all the code, and I can better explain you what we do and how it works. So, in the first step we end up with a red rectangle paper. Js has a class that is called path and that basically holds every kind of vector, graphic path that you would usually use, but it has also some nice predefined forms of paths, for example rectangles, and these rectangles. They need some certain information, so they know how to look.

A

um Rectangles need the position in this case. That's the top left point and also the size, so how big the rectangle should end up being. In this case, we placed it in position 8080 and the size. That's a bit hard to read the size is 50 by 50 units, vector graphics. You usually don't work with pixels it's more units and sometimes also depends on the exports, what the units end up being with. Sometimes it might be millimeters or different stuff.

A

um This rectangle also needs some styling information so that it's visible with vector graphics. You have usually two main options to style. You have the fill color and you have the stroke, color and yeah also the stroke width- and these are just set here with the attribute stroke, color with and fill color and with paper chest. It's really nice that you for colors can use basically any type of color descriptions. You know from css, so you can use the css color names. You can go rgb or hsl.

A

Basically, anything you want and to make this a quick example. I just use the color strings black and red, and I set the stroke width to two. So when I run the code, you can already see the result. We get a little rectangle. So let's take this one step further. We want to make a grid out of the rectangles, so I you can basically choose any grid size. You want to make this a bit easier to look at in the recording and choose a smaller grid without six by six rectangles.

A

I put this in a separate variable so that we can reuse this later, better and yeah. Basically, we just take two for loops and make a grid. I didn't change much interesting parts. It's just a placing, maybe so we can use the x and y coordinates to place it in a nice grid when they have the size of 50 by 50. We maybe want to have a bit of space between the rectangles.

A

So I choose a position that is a bit larger when we want to decrease the space between the rectangles, we can also just decrease these numbers, and then it gets smaller choose it, as you like.

A

um I think the 80 by 80 looks quite nice because later we want to manipulate these rectangles and it's nice to have a bit of space between them and then there's also one really nice function. Color paper js has a color class and this class has a random function, so it just gives you a random color.

A

That's super nice and super easy to use, but if you now look at that rectangle grid, it looks a bit messy right, but, like you throw a lot of colors in there in one place and it yeah looks a bit messy, it might be nice to change the colors later on, but first, let's start to manipulate the shapes and forms of these rectangles in the next step.

A

I start to scale them along the x-axis. That's also super easy to do. You can scale a path just with the scale method, and usually you might start with, um because we want to make them bigger. We can just go with x, our x-axis coordinate, divided by number of rectangles. We have there, but if we do that we will lose the first row because we start with zero, because x starts counting with zero in this case, at least.

A

This is why I added one to that x here, so that we start with a small rectangle and it doesn't get invisible and then we grow to the original size.

A

The next step we can then do is rotate the rectangles. That's also super easy to do. There's a rotate function that takes degrees and in this example, we can maybe just go through that step by step. So if you just want to rotate it more along the y-axis, we can, for example, just throw in a y in there, but uh why we just count from zero to uh six. Then it's we end up with six degrees. That's not that much, but we can't uh just add some uh yeah some factor in there.

A

uh For example, let's say we take it times: three, that's also it yeah, it rotates a bit, but it could be more and we could also maybe make it more fancy and just throw in our grid size in there. For example, it rotates it even more. So we end up with a six in the end and to make it even more interesting.

A

um We can throw in a random factor, for example,.

A

And that's more or less what I did here in the beginning. We have our factor. We have a also a random factor and also, we always add a certain number, because if we would not do this, we might up end with a zero overall, because math random can give you a zero um and that would make the whole term a zero. So we always want to have at least three degrees and then maybe more, and that looks quite fun if we press play a couple of times here.

A

That looks good. I think we can go to the next step and play even more with that sketch. um Let's get some colors in there, and this is what we want to end up with. We want a color gradient from the top left spot in our grid to the bottom right and we choose two random colors to do so, and we need to calculate the steps from one color to another. So let's figure out how to calculate that.

A

First, we take two random colors like here. That's what you have already seen. That's nothing new! The nice thing with paper. Js is that you can the that paper. Js uses a nice way of operator overloading, so you can just use plus minus divide and stuff um to add or subtract vectors and colors in paper. Js are also basically just vectors in their color space. So what do we do when we want to calculate a gradient? Is we want to calculate the vectors in the color space? So first we have.

A

uh We have color one color two and we need to know a little bit the little vector steps that we can iteratively add on to make that gradient. So this is what the color dist function does. So we take the large vector from one to two and then divide it by the number of steps we need. So how did I come up with that number super easy? We have that we have our grid. Let's see how many colors we need so um because all uh all rectangles that are diagonally on the same line.

A

They get the same color. So this is one color. These rectangles get one color these two, these two, so we have one two six until we are in the middle and then we need five more until we reach the end. So it's always the grid size plus grid size minus one, and that's why we end up with this number.

A

So what we now have is that small vector- and I want to save them in an array so that I can later just grab the calculated color so to get each yeah each color vector we can always go with color one and then add the small distance vector on top iteratively, and then we just need like here set the fill color in the right place instead of the random color that we took before.

A

That's basically it and it gives you a nice gradient, and I think that really looks looks really interesting, makes it way more pleasant to look at and often picking, colors in generative art can be quite hard because two random colors often don't match very well, but if you make them into a gradient, they suddenly start to work quite well, at least in most cases, there's still problems.

A

If they are too similar, maybe that's maybe an idea if you want to work further on that code to make sure that colors are not too similar or maybe choose colors that are on the opposite side of the color spectrum. Maybe that's everything you can do later.

A

Okay, next step, we want to add a bit more interesting stuff to the image, it's basically more or less the last step that we will do. We add more rectangles that are not filled, but are a bit not distorted but rotate differently and also scale differently. So that makes it more interesting to look at and that's not a lot. We have to do to make this.

A

We just add another nested loop. This is this loop that counts uh I until it reaches two like uh three times so we add three rectangles the first rectangle. This is this one here that gets the fill color like in the step before the others: don't get a full color, so they stay transparent and then we need to play a bit with the rotation and especially the scaling.

A

To be honest, we don't need to change a lot or actually nothing with the rotation, because it also already has that random factor. So they will always look a bit different, um nothing, nothing much to change here, but the scale factor um we can add the I in here, which is really nice, so the scaling um from each stacked rectangle is already one step ahead. Basically, this is where they look a bit bigger like um this rectangle.

A

This colored rectangle now becomes also the same rectangle size from the next step and the step after that, so they get bigger and that's basically it, but when we let that run a bit, that makes it really interesting and then there's one last teeny tiny thing that we can do. Currently, you can see that the whole sketch is basically glued to the top left corner because of the way we calculate the positions, and it's easy to do it in that way.

A

But maybe we want to center it to make it look a bit more appealing if you would integrate that to a website or something and that's a easy thing to do- that we put everything in one group. This is also a paper js class and every every path object that we create. We need to add that to that group, that's done by add child, and in our case we just throw in the rectangle and now comes the the fancy part. We can just set the group position to the view center.

A

The view is also an object that is given by paper.js and that's like a super helpful line to just center stuff can highly recommend using that and that's how we end up with our nice rectangle generative art piece. Please feel free to experiment more with this code example, I prepared a link for you, which is called example.bleeptrack..

A

That link will bring you directly to this paper, js sketch, by the way, it's super nice to share them, because the url in co encodes the whole code. So the links get quite long, but you can share your whole project with that. So yeah just just go there. You will find the example we created together today and yeah feel free to experiment further with it go crazy experiment with colors or certain ways to choose two colors for the gradient. Maybe you can also play with opacity or blending modes.

A

That's the thing we didn't talk about at all, which makes really nice effects. Maybe you know these blending modes from photoshop, where you can like have a multiply layer, so you can mix different half transparent layers together to get new colors. That's super fancy, maybe make it interactive or animate the rectangles, make them pulsating or create shapes by scaling in an animation or make it interactive by I don't know, maybe people can choose their color or can drag some rectangles around or change the rotation or something so yeah yeah go crazy experiment, a lot!

A

That's the fun thing with generative art, just try a bunch of things that come to your mind and see how it goes and where it takes. You have fun coding and I hope to see you soon. If you have any questions or want to reach uh to me, you can find my contacts on my website bleeptrek.de or you can also find me, for example, on twitter or instagram or other social media channels by the name of bleeptrek.

A

Yeah have fun at youtube universe and see you soon. Bye.