Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
AI Generated Video Summary
So I've done over a thousand of these. I have covered pretty much every possible top egg you can imagine. I'll sort by my most popular ones. Anything from like a landscape type of thing. This is all generative art and this is the kind of stuff you'll be learning in this workshop. These are all very, very tiny programs. I want to emphasize this here. You can see the code is literally right there on the screen. So if I was to, for example, go to one of these, now you can actually see the code right here and you can even edit the code. This is the kind of thing I'm going to be showing you. We're going to work towards this. So don't I don't expect you to understand exactly what's going on right here. So for example, I could poke these numbers to change kind of what the colors are. Make it more green, or maybe make it more blue or whatever. So this is kind of how I would be maybe tweaking what's going on with this generative art. I can make these instead of bigger square, I can make them like tiny squares, or I could put like a whole lot more of them, maybe. Or whatever. That's what we're going to play around with today.
2. Creating an HTML File and Drawing Shapes
We're going to start by creating a new HTML file. I'll show you how to draw a square using the fill rect function. Then I'll show you how to apply color to the shape using HTML color names or hex codes. Now, Chris, you can draw more rectangles if you want.
So I see a few people have the camera on. So I just want to say hi to Luz and Gleb. Thank you. You know, I don't want to feel like anyone to be obligated to put their camera on. Bartosz, thanks. You know, just feel chill. Do whatever is most comfortable for you. Though it will help me if you feel like you want to share your screen if you're working on something. Because where you're going to be, maybe remixing some of each other's work, I think that would be kind of fun.
So let's start totally from scratch. We're going to start by just creating a new text file, a new HTML file. So you can do this. You don't need any type of special program. You're just going to right-click. You're going to create a new file. I'm going to call it index.html. You can call it whatever you want. Index.html is kind of like the standard name that's used for HTML files because it will automatically get opened if you go to that folder. So now we have an HTML file. It's an empty file. So I'm going to open up notepad. Now I have notepad++, but I'm just going to use regular notepad here. I'm going to drag it right in there. Now, nothing's in there. So we want to create an HTML file from scratch. And now the thing is, there's a lot of complicated stuff with HTML. And I'm not going to be teaching any of that. I'm just going to go straight into the minimal amount of HTML that you need in order to create generative art. So let's get into it. We got our HTML file here on one side. On the other side, I'm going to open up a web browser. And what I can do is drag the HTML file into the web browser. So now I have a one-to-one. I've HTML on the left, and I have the web browser on the right. So if I was to just type some letters into here, save it, and go over to my web browser and reload it, you'll see that those letters show up in my web browser. Because an HTML file, really is very flexible. And it will automatically open as a text file or whatever you need.
Now I have access to our context. So I'm going to show you how to draw a square, a rect. There's a function called fill rect. And these functions may seem very simple to you. Like how am I supposed to make amazing art with just a fill rect. But really, these are the building blocks. Like at the fundamental level, you will be calling fill rect. And a lot, most of my art uses fill rect or like these simple commands, because at the lowest level, that's really what it comes down to. So fill rect has four parameters, that's just the X and the Y position and the width and the height. So if I say, 100, 100 and then 500 and then 100, so we're going to get a rectangle that's hopefully pretty wide, a little off the side. Now I'm going to hit F5. That's a rectangle. So hopefully everybody has been able to follow so far of how to create a text file, an HTML file that has drawing a shape in it. So this is the very most basic thing. Now, let me show you how to apply color to that shape. Again, we're operating on this object called x. So we've stored our context2d, which is kind of our interface for drawing and stuff to this specific canvas. And it's stored in the variable called x. So I'll do x.DillStyle. Equals read, the word red. And then go over here at 5. They should have a red rectangle, right? So usually, though, you're not going to use names of colors. So this is just supported by HTML. There's a lot of names of colors. Another way to do it is with, if you've ever seen these hex codes. So you would use a hash symbol. And then there, you can either do 6 or 4 or 3 numbers. I usually just use 3. So that's going to be the red, green, and blue components. So if you do F, that would be four red. 0, 0. Let's do them. Let's do a green. So it would be 0 red, full green, and 0 blue. So we've got that. Now, Chris, you can draw more rectangles if you want. So we got one green. I'm just going to copy and paste. And this is not case-sensitive, at least for this part of it, for the color part of it. So I'll do a red rectangle.
3. Using the Debugger and CSS Styling
I'll show you how to bring up the debugger and use it for debugging. We'll also learn how to make the canvas bigger and fill up the full window. I'll explain how to use the CSS style margin to remove scroll bars and gaps. We'll cover the basics of HTML, including creating a canvas and script tag. Lastly, I'll demonstrate the console and how to use it for live coding and debugging.
And then I'll just move it to a slightly different spot. Hit F5. Did not work. Here, let's see. I'm going to show you how to bring up the debugger here. So I'm using Chrome. You may be using Firefox or something else. They both have debuggers. In Chrome, I usually press F12 to bring up the debugger. You can also, sometimes it's not allowed. You can do, I think, more tools, the developer tools. I think it's the same thing in Firefox.
If anyone has a question, you're welcome to post in the chat and I'll get to it right away. Because I'm really, this workshop is totally flexible. I've never done it before and I have no like idea what people don't know.
Oh, maybe I'm off the canvas. Maybe, um. Yeah. Well, what's the size of the canvas by default? It's, um, I think 300 by 150, I think you might be right. So let's make the canvas bigger. Let's, okay, I'll show you a trick to show the full canvas. So what we can just do is do a full one, E nine. So when you an E, something like one E nine, that's scientific notation. So that's just like a really large number. About a billion. We'll just do that and then see what the canvas looks like. Okay, now you can see the canvas is really small. This is the actual size of the canvas right here.
4. Using Twitter and a Personal Code Editor
I should see a red square popping up right away. I didn't need to reload. I didn't need to do anything. I just typed it in, and it automatically appeared. And I feel like that is a much better way to iterate, at least for these small projects. So I'm not going to be using the console here. I just wanted to show you how useful it is in that it is essentially the same as what I'm going to be showing you next. You can just type your code into the console and have it execute in real-time there.
5. Using Variables and Drawing Shapes
Okay, let's move on a little bit further. In our example here, we're starting to get into variables. When I first showed you that little drawing a square, I wasn't using the variables. Obviously, you're really limited with what you can do when you're typing everything out specifically. It's not even really generative art. It's just like drawing shapes. But it starts to become generative art when you can draw way many more things on the computer than you could ever draw in real life. You can control all these things with variables.
6. Exploring Shape Dimensions, Functions, and Color
We explore the width and height of the shape, the use of sine and cosine functions, and the impact of the T value on animation speed. The HSL function is introduced for adding color dynamically. We experiment with different values and observe the effects. We also combine x and y variables to create various generative art effects.
All right. So we got our width and our height here. So this is the X and the Y position. And what if we didn't have this? What would happen? Well, it's going to be a zero. It's going to be centered at zero. So we want that to be centered in the center.
Now this next part is like the width of this shape here. So we could play around with these numbers. All of them just poke around numbers to find out what they do, if I don't remember or to experiment. So we've got our width and our height here.
And this T value is the other variable that's being passed into this function. And that T, I can throw T just like throw anything, is printed out right here. That's the time in seconds. So I'm multiplying T times pi over 2, which is to make it so this animation is a two-second loop, or maybe a one-second loop. Because of course, anything... This is all operating on radians, if you're familiar with radians versus degrees. The degrees goes to zero to 360. But really, any programming language by default, uses radians, which goes from zero to 2 pi. So it just takes a little bit of thinking. But once you get used to it, pi is 180, 2 pi is 360, pi over 2 is 90. I don't know. You just kind of get used to it after a while, I guess. So if we didn't have pi here, what would happen? Well, this is actually controlling how fast this thing spins around. Now, if you'll even notice, if I put up too fast, it kind of like looks like it's spinning slower in a way, because it's starting to hit that frequency where it's aliasing with the actual time. And these numbers I could play around too. These numbers multiplying i.
7. Mixing Time and Randomness in Generative Art
What if we mix time into the generative art? Let's explore the concept further by filling a square with a random gradient. We can achieve this by using the math random function to generate the X and Y values. By adjusting the width and height of the square, we can control its appearance. Additionally, we can use functions to simplify the code and make it more manageable. We can also introduce random colors to add visual interest. Experimenting with different values and functions allows us to create unique generative art pieces.
What if I mix time into there? Let's see what happens there. Nothing. Is that because? Oh, sometimes you do something and it just turns out that the value is just not really big enough to make a difference. I don't really like that personally. I think what might look better, I'm just kind of messing around here, we're going to go into another thing in a second.
8. Exploring Random Variables and Colors
Let's explore the difference between uniform and non-uniform randomness. We can use random numbers as booleans and control the colors of our generative art. By adjusting the values in the code, we can achieve different visual effects. Feel free to experiment and ask any questions you may have.
Let's do that one here too. What if we do other things? What about tan? What does that do? That's not good. Tan does not return a value between 0 and 1. It returns a value between negative infinity. So of course you're going to get a much different result. Cosine is basically the same as sine for this purpose. So we learned a little bit about random variables here and how they can be controlled. There's a big difference between uniform randomness and non-uniform randomness. What you do with the random numbers. You could use a random number as a bool, too. Our colors are really important. We're going to get that in a second. You have colors randomly all over the place like that it's not going to look good. So what if we do something like... Let's say, r10 is less than like two. Let's say, we'll do a red. Red and black. Don't forget your comma. This for loop here, I did not use brackets. So I need a comma in order to make the for loop a full loop. I would advise just using brackets from most of the time. It makes it easier to read. What did I just do? It's randomly chosen between red and black now. That's not really what to do. I wanted to do it more like that. So now, let's a little bit of a pop of red. We can do a little bit of blue too. These randomness values now, I'm using as a boolean. So it's taking random between 0 and 10. It's less than 2. If I was to do less than 20, it will always be red. You can tweak these values however you want. So random, how's everyone doing in the chat there? Anyone got any questions about anything? Should I just keep firing along here? Nice colors. Let me see if...
9. Drawing Circles and Ovals
Let me see if... Next thing we can learn are... We should probably learn more ways to draw things. Rect is not the only way to draw things. You can, of course, draw circles and lines too. And I think that the the fundamental primitives are really going to be that. This rect we just learned aligns in circles or ovals. You have those primitives. You can do anything.
The circles are a little bit trickier. So let me show you how they work. Let's just keep what we have here and just keep building off of it. So yeah, let's actually... Yeah, let's build this. Let's add some circles to this. That might be interesting and see what happens.
This program is actually a little bit on the heavy side because it's drawing all these dots. I've found that the 1E4 fill Rex, that's 10,000 fill Rex per frame is a little bit too much for most computers to take. Usually you're gonna wanna stay... Well, for generative art, it doesn't matter, right? Because it's not real time, like it doesn't matter that it's slow, but just be aware that if you go much higher than that, it may be crazy slow. Crazy, super slow. Let's add oval circles and stuff on top of this. Actually let's keep this. I'm gonna copy and paste the same fill style. So for the oval, it might use the same color. It might use a different color. Who knows?
Now, the thing about the circles, there's no just like straight up command, fill circle, but you could make one if you want. You can make your own function like I just showed you too. And maybe we'll do that in a second. First, let's just do the circle. It's a function called arc. I'm gonna do it like this first. I afraid what might happen if I do it like this. This is the position xy. Then you have your radius, which would just use a width. Then you have your angles for the arc, which are for a circle. It doesn't really matter. You just want to make sure you use angles that are big enough to cover 2 pi. So 0 and 9 will be fine for this. And then I'm going to fill the arc.
Now, what you're seeing here is probably not what you expected to see because it needs to start a new path every time it does an arc. It looks kind of cool. It's kind of cool, I'm not gonna lie. It needs to start a new path every time it does arc. It needs to do… unless you want to link that. So if it starts a new path every time it does the arc, then you will not get that all of these circles connected together. And this is usually what you want to do to draw a circle. Is first call begin path, then call arc, then call fill. There's also another function which is really useful. That's very simple, very similar to an arc, which is called ellipse. Where you pass a width, a height, an angle, and then… An angle is in terms of a rotation angle. So if I, right now it's zero, so if I say set it to these different angles, you'll see how it's rotating that oval. I'm just going to leave it at zero for now. So we got our circles inside, ovals inside the squares. I think it might look interesting if these width and heights change based on the… based on the time. Maybe I could make it get thinner over time or something, like that could sometimes look interesting, or thicker over time maybe. Oh yeah, I want to show you what's happened there, actually. These errors coming up. Twitter and this CapGIS program will show you errors right here. Otherwise you'll probably see errors here in the console when you press F12. And it's really you got to look at those errors because they mean something. Always been kind of annoying to me that these with the high values need to be like, can't be negative. What? So I think everyone knows what it would look like if these values are negative. I don't know why they decided to restrict that. But we're just gonna call it absolute value. Absolute value. That's how you draw a circle or an ellipse or even part of ellipse. Let me show you how to draw a half ellipse. That's where I use these numbers, which control like how much of the ellipse you want to do. And you get up towards a 2pi. That's going to be a full ellipse. Pi is going to be, remember we were saying before, radians, pi is half a circle, and you know pi over two would be like a quarter of a circle. Now you might be again confused, like why is this not a quarter of an ellipse? It is like connecting, coming out of this, you can see user, there's like a chord part. I don't know what the name for this thing is. But what if you do want a quarter of the ellipse, how would you do that? We need another point, which is in the center of the ellipse. It's not plot of point in the center of the ellipse for us. So we need to call this function line2. In order to move to there. Now, the firt- now it is plotting the point in the center of the ellipse. And we can see what a quarter wedge of that ellipse would look like. And this, we can feed time into here. We can do all sorts of things to experiment with this art.
10. Drawing Lines and Shapes
Let's experiment with different ways to draw lines and shapes. We can use the stroke function to connect lines together and the fill function to create polygons. By adjusting the line width and color, we can control the appearance of the shapes. We can also combine the fill and stroke functions to create unique effects. Additionally, we can use the save and restore functions to manipulate the rendering stack and apply translations and rotations to our shapes.
We, let's do more line stuff. Um, let's um, I'll leave this out for now. I like to play around with it myself, comment it out in my code as I'm experimenting. Instead of a fill rect, I'm getting crazy here. What if I do a, um, let's not write much more code. Let's do like a line 2. Now I'm not seeing anything yet. Why am I not seeing anything? What's it call? I need to call a function to draw that line or fill that line. Now, again, remember, not calling beginPath. It's connecting everything together, and not just connecting together, it's a redrawing at every frame. Do not want that. We call beginPath. And see our lines. There are too many lines. We can't even see them. Let's have less, how about less lines. Now I can see our lines. So I'm using a fill. What if we do a stroke? A stroke is going to, you know, connect all those lines to the line. Connect those lines to the line. But if I do a fill, it's going to assume that I'm trying to make a polygon and kind of connect those lines together like that. There's also a cool function called even-odd that you could pass into fill. I'm sorry. That's really confusing. This is just my shorthand notation to get a slightly different result. So that's how we stroke and fill, and you can control the the width of the stroke also. So let's say I want to make it bigger or smaller. I would recommend not making the line width that big because I found that there is a pretty big difference depending on browsers, how it interprets this line width. You'll see how these lines come poking out. It really depends on the browser what exactly is going to happen. And so I've noticed some issues with that, the line width. And you can set the line color the same way you can set the fill color. It's just called stroke style. Stroke style, and you got fill style. Or here's an idea. Let's mix it up together. So we got a fill style and we got stroke style. So we got our fill and we got our stroke. So let's do both. Let's do a fill and a stroke. We got fill rect. I'm gonna fill something in here. Oh yeah, fill. I'm trying to see if there's some, oh there is some colors behind it. It's not really popping out though. Let's make sure I got it up because the line is being drawn on top of the, on top rather than below. I could be, what if I want like more, what if I want to separate these out. We'll do like the line first and then we'll do the, let's go afterwards, on top of the line. I'm just messing around stuff. I don't know if any of this is any good, just experimenting with different ideas of things you might want to try. Let's get a little bigger. You can see, we'll make this a little bit, a little bit too busy. Let's just go for one second. Okay. How about like, rotation? What if we want to make a square that is not perfectly lined up orthogonally with the canvas? So you can do that too. There's a couple of different ways to do that. What would be the easiest way? There's a function called save and restore, which is kind of like pops, pushes and pops the stack off of the rendering stack. So we're not actually doing anything right now, so it's just doing nothing. But if I was to do something like translate, Now it should, I don't think it's working. translate everything over, oh, it is! Oh, that's why! Because the, we're doing, I got confused because the lines are not being translated. Let's get rid of that, so I could see what I'm doing. So, the squares are being translated. We've got our Y and our X translation. So, of course, our translation is literally just these parameters, these fields here, so we've got a Y, these first two parameters here, so let's put those in. And now we have the same thing we have before. This is functionally equivalent. We've got our translate and we got a rotate. A rotate will allow you to apply a rotation to... I need more rows so I can see what's going on... ext.rotate... I'm gonna... I'm gonna see... I think a lot of programming is just figuring out why stuff is not working... I'm trying to delete... rotate fill. I don't know... can anyone see why that would not be... Oh. Rotating... I think you're rotating the pixels. How can rotate work? Put it up here. But, when I put it down there... oh. I think I understand, maybe? Save... translate... rotate. I'm honestly a little bit confused. I thought that the rotate would work after the translate... well, it gives me a static angle, but the angle is right here a value that is rotated. When I put it down here it does not give a value that is rotated.
11. Exploring Rotations and Infinite Loops
We're exploring the concept of rotating the angle of the drawing and the position. We're experimenting with different angles and dimensions to create unique effects. We're also discussing the importance of saving work and incremental progress. Additionally, we're addressing the issue of infinite loops and how to prevent them from occurring.
12. Preventing Infinite Loops
13. Generative Art and Its Uses
Generative art has a wide range of uses, from hanging on walls to commercial applications like packaging and movie credits. Video games also incorporate generative aspects, such as procedurally generated levels and weapons. Generative art is not limited to computer programming and can be found in gardening and landscaping. Even traditional art, like Bob Ross' paintings, can follow generative algorithms. Fire effects can be created using cellular automata or particle systems. Platforms like FXHash showcase generative art, which often combines multiple concepts. Subdivision and recursive functions are common techniques in generative art.
But if there's anything specifically that anyone is interested in for generative bark, whether it be genitalia. Question about it, or like some generative art they have seen that they like. They want to talk about how to make it. So, Chris Evans has a question. He says, playing around with the code is cool, but what kind of usages have you seen out in the wild of generative art. That is a good question. So, art itself, I mean, art has like basically an infinite amount of uses. It can be generative art specifically can used anything from just like art hanging on the wall, like what you see behind me, to like pack more commercial stuff like packaging, credit, movie credits, CD, CDs, like albums, artwork, like I say CDs now we don't use CDs anymore, album artwork or like see like in in magazines a lot of time you'll just see like backgrounds of stuff and there's texture there and stuff and that is generative art and there's just like so many uses for this. Then there's also video games which is a lot of overlap there between nearly all all video games these days have some generative aspects when they video games first started out like nobody really even thought about this type of thing, but nowadays like having a procedurally generated stuff in your game, whether that be like entire levels that are procedurally generated or just like small parts of a level or even like weapons and stuff that you can pick up that have like generative components, like take like Borderlands for example. When you get a weapon in Borderlands that's it's generative weapon that has um and it's generated by combining a whole bunch of different things together both visually and functionally for the actual part. So here, here we see here, there are over 17 million variations. That's because it's combining these different things together. So there's video games, there's graphic design, there is, um, what else? Um, gardening. There's, generative art is not just on the computer. There's a lot of, there's I think most people think of generative art as being. And it is for the most part, something that you would do on a computer, programming. But there are other types of generative art too. Um, I was just looking at, um, some people that grow generative art in paintry dishes. I'm going to post this link because it's just definitely worth reading. Um. This is an article that Amy Goodchild wrote about generative art. And it's a really great read for people that are interested in the, um, fundamentals. But I just wanted to skip to the end to show you what I was talking about a second ago. Um, natural systems, uh here's bacteria, here's one with condensation. But also, think, think about just landscaping. Is that, is that not generative art in a sense? There's really, um, all art, in my mind, is somewhat generative. It's like a sliding scale where you have, like, a 100% generative art where it's all created by a computer. And you have, like, art which is not generative at all. Where an artist is very, like, is very specifically, meticulously doing and thinking about each and every thing. But a lot of art that is painted and stuff in my mind is more on the generative side, some of it is. Like, I think everyone's remembering with Bob Ross. His paintings use a very generative algorithm where he has an algorithm in mind of how to paint the scene. First you're going to paint the background. And you're going to do a sky, and it's going to be like a gradient from top to bottom. Then we'll paint the mountains, and we do that in a certain way. And then we paint the ground level. And then we know how we do trees. Those are, like, little things like that. And he paints a tree the exact same way every time. At least the evergreen tree. There's a couple different types of trees he has almost, like, these algorithms for. And you can create a computer program to do that kind of stuff too. So if I look at some of my tweets, I did a, where is that tree one? I messed around with some Bob Ross kind of tree drawing, very simple stuff. Let's go to our next question, how are we try to create a flame effect? I use Twitter as an awesome resource to surf for ideas. I created this tweetbase program to allow me to search for tweets. James has a question that he says that flames are hard to create and they are, have you ever tried to create a flame effect? I definitely have some tips for you, I've created many, many flame effects. Let's search on fire and search by awesome. Let's see what the most awesome fire effects are. We got yannatan, he's great. Here's a different take on fire. That's not really fire. Here's one that uses a cellular automatop to simulate fire. Here we go, this is another cellular fire. Here's another cellular automata. Fireworks are showing up in here too. Here's a heat wave. Here's one of my better fires with a cellular automata. We probably are not going to get too much into cellular automata but it can be a good way to simulate these types of effects because assuming that any type of fluid simulation type of thing can work well for fire. The standard way of doing fire, here's another one I did, is with particles. I'm going to show you – let's make some fire from scratch. That might be a good exercise for us. Before we do that, let's get to the other questions in chat. But there you go. We'll get to how to make fire. Joss says, I've been collecting a genre of art on FXHash with two of my favorites being industrial park and Harlequin block building. Both of these seem to generate into a grid, which I presume is coordinate-based. Can you give a basic example of how to achieve that? Let's take a look at these. If anyone is not familiar with FXHash, it's a genre of art platform to buy and sell genre of art and also just to look at genre of art. You don't need to buy anything and it's completely free to look at and download everything on this website. Though, a lot of people do sell their art on here, and it's honestly kind of fun to art. I'm waiting for this one, sometimes they don't show up right away. I'm going to try opening it up in a separate thing. That can either because it is a bit slow. Who generate or if you scroll down, these are the thumbnails that had pre-generated. It looks to me like this is a subdivided grid and then each one of the there's a journal of art usually uses multiple different concepts that are kind of combined together. And if you have just one concept, it's probably not going to be that interesting. Here we have I would like to see a little bit better, I'm still waiting for it to load. Louis, it could be also IPFS sometimes goes really slow. You try this other one here. Or is this? Dotcha. Okay, this one is using a subdivision system. So you could tell you can see the difference here. Whereas all these squares are the exact same shape in the grid. So here you're going to grab your okay, well, it looks like some of them can get connected together, but it's still not subdivision. So you get your square, and then you divided into a bunch of small squares, and then possibly connect some neighboring squares like this. Whereas in this other industrial park, you have your whole square, then you basically create a recursive function that divides the square into many different shapes kind of pseudo randomly, which is what this one does. And I have a couple of pieces that do that, too. And both of these things are very common generative art techniques. But of course, I'm just doing subdivision by itself is not not interesting. And that's why this artist does other stuff.
14. Generative Art Techniques and Textiles
They have a color palette, which is important. The artist has made rounded rectangles with a uniform look. The artist combines generative art and predefined images. Twitter is a great resource to find examples. Texturing is a key aspect of generative art. The texture adds uniqueness and importance to the art. There are many examples on Twitter. Textiles use generative art and have been around for thousands of years. Weaving machines create patterns. It's all generative art, just a different type.
They have they have a color palette, which is very important. As you saw when I was using random colors, it's not nearly as interesting, but when you start to pick out just a couple of colors for your palette, it can really make things pop. Like some like say, like some of these here. But this artist has also made, some of these are not rectangles, some of them are like rounded rectangles. And there's this like X in the middle cross in the middle of all of them that gives it kind of a uniform look. Multipurpose a circus, I think I did see this one, I think I bought one of these. That seems like, yeah, I do. I'm number one, by the way. I would put number one and I said, I like this project. Other people should buy one. I posted it in there. It didn't it didn't really take off. But I think it's super cool. I like the one. I got a super tiny one, too. I think I got the smallest one. Yeah, I do have the smallest one. I'm sorry, but these are learning really slow. I don't know what the deal is, man.
Oh, here's one. Here's what's coming up. Here's when this coming up. This is not a subdivision. The way I'm looking at what I'm looking at now, it looks more like it's a space filling. So a subdivision is when you have a square and you're, like, dividing it to smaller and smaller sections, you know, divide in half each one of those halves divided each one of those divided. This, to me, looked more like a space filling where you take a square, then you put a shape inside of it, maybe a square, then you, you see, where can I put another shape? Where's their opening? You know, and I try to slip it in there and this is a tight space feeling, so it's actually, like, putting things like as tight as it possibly can to neighboring squares to fill up all the possible space. And, uh, so what we're talking about is of how to achieve a. Uh, grid based coordinate system. Yeah. I'm trying to think if I think the fire might be a better way for us to start out because these, this is, these are a little bit more, little bit more tricky to do. Has this one finished up yet? No, this I want to take a look like it looks interesting. It looks like there's um, yeah, there are little rooms and one I'm trying to determine is if these brooms are generated. I don't think they are generated actually. Cause I'm looking at it here and I see just in the thumbnail, this room and this room appear to be the exact same room. This room and this room are the same room, but a different color. I think this, I think this piece is using, um, a, um, images, a combination of generative art and predefined images. I think they're subdividing into anywhere between, it looks like probably five and like seven or eight, you know, grid then in each one of those grids, then in each one of those grids, they're picking a random image that they've, um, you know, created in advance. And I'm trying to think of it's rotating. It doesn't look like they're applying rotations to the image. No, um, they're placing the image with a random or they're probably filling the square first with a random color, that's the carpet. Then on top of it, they're putting the image, which is the, um, white part for the furniture and stuff. And there's different ways to do this type of stuff, but I think that's what they're doing in this one. Um, so we can circle back around to all of this. I'm just going to keep going through the questions.
Real Chris Evans is real base question, but do you have any good resources to go to that explain the different math concepts between about some of the journey of art techniques? It's a good question. Um, well the thing about the generate generative art is that it can use any math that you want. Um, so. There's really no limit to what you would do. Um, the best way is really to just as well. Twitter is a great way because like I was showing you here, you can search and then find um, examples. So for example, I need this one called subdivision waves, which is a little bit similar to that circuit work diagram. If I was to like lower this a little bit, then maybe draw, you know, different fillies with different colors and stuff. You start to get something similar. So Twitter is a great resource to, um, find examples. Textiles. Um. I've seen a couple of ones on Twitter relating to textiles. So, uh, Luz, I'm sorry if I'm pronouncing your name wrong. Luz. A variation in textiles. What do you recommend? Interesting techniques to build textiles with generative art. Well, texturing itself is a key aspect of generative art. And even like you saw in this first one, we did like, this is starting to look cool only because of the texturing. It also take away this texturing and starts to just look like, right. Like square, like rectangles and kind of gets boring. So really like the way you feel your art and is going to make it special and unique, and that's just so important. And also when you just think about painting or you think about any type of art, like the, the texture. Is, is often like one of the most key aspects to the art, even if it's like very subtle, even if it's like the lack of texture, you know, but usually you're, you're going to have, you're not going to use just flat colors because it's just, unless the rest of the composition is just interesting enough to carry everything you need texture. And there's a lot of stuff on Twitter for that too. I know just recently I did a few of this, what I was searching in there, but I don't, I don't think there were, I don't think they were listed there. I did a couple, and sometimes they do experiments with just like texture. So for example, here's here's a couple of minimal texture studies I did. There's another one. So you can see this, this is all the code right here. It's a super tiny bit of code. And it's like that because I'm just showing like, you know, you can, you can do, you can experiment however you want this first part. These parts of the code are, well, actually this first part of the code is the X really the only thing is controlling this texture is this very last part. Which is going to, you know, completely change how it looks. What if I do something like that, or like that? I'm just messing around here. I'm just showing you, like there's different ways to create textures. There are also people that are very inspired directly by textiles. Textiles use a lot of generative art. And they're one of the first forms of generative art that we've probably seen, they're like in- cultures that have for thousands of years, really have been weaving like these really cool like blankets and will be big. It's probably not, see, I don't want to search for a new generate art I want to search for like actual textile, yeah like these kind of shapes, these kind of symbols quilting, even like floral type patterns, all these things have- are some of the first kind of forms of generative art before computers were available. And then of course weaving and stuff, were some of the first applications of computers, like running these weaving machines to slip in these- create these patterns. It's all generative art, just a different type of generative art. So I hope these answer some of your questions. I'm going to get into more detail. Thank you Frank. Yeah, thanks, thanks Liz.
15. Inspiration from Textiles and Real World
Textiles are a great source of inspiration for generative art. I find inspiration in both the real world and imaginary concepts. There are different ways to approach generative art. Consider exploring textile-based generative art and finding ways to bring your art into the real world.
I hope that helps. It does. Textiles are really a good source of inspiration, I think, for generative art. You know, I find there's two things I end up getting inspired by, either by like stuff in the real world that I see, and sometimes I'll just take a picture on my phone or whatever, like right away, if I see something interesting. It could be like a rug. It could be just a pattern of oil- an oil stain on the ground, or Or sometimes I get inspired by the other side, which is just like math, I guess. Just like imaginary concepts, which are not based in the real world. And those are- there are different ways to go about it. So yeah, textiles are great. Let's get back to... Thank you. I will do that research. Thank you. Yeah, search around. There's so much good stuff. I think there's probably one or two on fxhash that are worth checking out. Well I know, here let me look at this one. I know I think like loom is called? There's a lot of stuff that is textile based. Which you want to look into. It's a really... It's beautiful. Topic it's beautiful, yeah. And there are other ways to present generative art. You know, you can at first it's all going to be in the computer but in order to present it you might want to eventually try to not just print it out but what if you can, say, send this to someone and have them weave a rug out of it or something. There are places online where you can get things like that done and like that would be so amazing you know. That would be awesome actually. You know, to have like a blanket based on your own generative art. There are ways to do that so think about how to take your generative art out of the computer bring it to the real world.
16. Creating a Fire Effect
Let's try making a fire type of system. Start with a black background and draw a red circle. Use a percentage to control movement, shrinking, and color change. Create a loop to draw multiple flames and spread them out. Use additive blending for the fire effect. There's still more work to do, but we're getting closer to creating fire.
Okay. Let's try, so I'm going to switch back to making a fire type of system. How can we do fire? I'll show you tricks. Okay so fire, let's start with the black background. I'm going to be doing, I'm going to be working a little bit fast here. I'm just going to do a fill rect large enough to fill the whole screen to black. We got a black background.
I'll draw a circle. A radius, I'm not seeing anything because it is a color. So I'm going to use HSHSL here, and like I showed you before how to do stuff, I'm going to do it a little bit easier. I'm going to use this template string thing. And basically it's kind of a simpler way to create these these strings. Hue, saturation, do we got red? We got red. So the idea with this is just this like dollar sign, curly bracket is just a way to I mean, it's fundamentally equivalent to this, but just a little, it takes up less space, and ultimately becomes easier to read once you get used to it. There's also alpha here too, you might not realize that, but there is an alpha parameter, which you can set between zero and one, totally optional. So we've got a red circle, that is the first step to drawing fire, believe it or not. This is not going to be the best fire in the world because I'm just starting out.
I want this to be, let's, uh, it's not to the bottom. I need multiple, like I need, I need this thing to be like moving. I need to be shrinking. I need to be changing color. I need to be, um, all these things. So let's get, let's get like a percentage. I'm just gonna call it P P, and we're gonna throw, we're gonna store the time in there for now. So basically percent, it's going to be time, it's going to repeat every one second. This is modular division, gonna repeat every one second. So we've got our P, um, and we want this to move upwards, upwards not downwards. Okay we got our we got our flame moving upwards. We want to be shrinking in size. So how it's growing, we do not want growing, we want shrinking. So instead of P we want one minus P. Okay we got to shrink, we got to shrink. We got um what else? Color change. We want to color change. Um so you want it to start at like a yellowish kind of color. Um hue oh this always confuses me. Hue is between 0 and 360 so yellow is like a 60 uh let's do something like that. Um T times 50 so we're going from like a yellow... Oh not T times 50, P times 50. Go from like a yellow to like a reddish type of color here. Still not looking that much like fire. Um so the next step would be to um would be to I guess create a loop here. Because obviously just one flame is not going to be cutting it up cutting it. Okay so we're going to do we're going to do a thousand flames. Of course they're all on top of each other so we're not going to see any difference there. Let's um spread them out a little bit. Okay we got them spread out a little bit. Let's spread out like, we spread them out on the x-axis. Let's spread out them in the like time axis. If that makes sense. Who is negative, why are you negative. T equals oh sure. Whoa, hello, hello. This, we want to jumble that up a little bit. Jumbling it by powing it and moding by 1, which is essentially randomizing it out there. I would like to make this a little bit wider here. Let's add vertical randomness 2, I sometimes will take a sign of a value and give it a pow, and then multiply that by something and that will give us a nice randomness. NICE. Oh that's so good. Is that starting to get me a fire? We still have a lot more work to do! I want to get more yellow. We want more yellow. And then we want to.. I think we do.. Well let me show you additive blending. Because you've got to use additive blending for fire. Let me move this up real quick for you guys. So global composite operation is really really useful. What is does is control how these colors are blended together. By default it does your alpha blending. Since our alpha is one, it means its going to draw right on top of it. For alpha is less than one it will blend. But fire doesn't work that way, it's more like an additive type of effect. So let me show you how that works. I've been to this page about 15 million times to see all these different options that you can do. But ultimately, I only use a couple of them. And lighter, not lighten, but lighter. We don't want to keep the lightest, we want to add them. We want to add them together. Too blasted out. We don't want them blasted out. This is where alpha will come in. That's so good. A little bit of fire. What else can we do? It's popping in a little bit. There's a couple of things we can do. I can make this emitter round, probably. That is rounded. That's maybe true. Then we can control... I think...
17. Adding Randomness and Adjusting Parameters
The colors need more randomness. The saturation is crucial for fire effects. Adjusting the alpha parameter controls the appearance. Fixing the pop-in issue at the bottom. Adding more randomness for an interesting fire effect. Tweaking and experimenting make a difference. Save your work for future reference. Fire is not round, explore different shapes.
The colors are a bit too... We need to add random to the color, too. I'm using this S function all over the place. This is so useful because you can... You call sine, and you pass in a value that is paled. You basically get a seeded random value back out which is necessary for this. I can't use math random here because if I was to use math random, I'm just going to Helps you. You do not want to do that. I'm going to attach it to the particle itself, and add just a little bit of... Little bit of randomness to that. But you know what? That, I think that's a saturation that's killing it more than anything. Let's leave that because you want... This is the thing that a lot of people get wrong with fire. When the colors add together, you want it to add to white. It'll only add to white if there's a little bit of blue, but you don't want too much white. You just want a tiny little bit of white. And the only way you can control that is with the number of particles overlapping, how much like blue there is, which is basically being added in by the saturation. Because the lower add the saturation, the more the colors are equalized. Or this alpha parameter here. What's going on here? I see a weird kind of shape there. I wonder what is happening exactly. Let me open this up a little bit. There we go. I don't know if you remember before when we're using the side functions but that is one of the downsides to this way of getting a seeded random value, is that it's going to end up pushing it to the sides, negative one and positive one. So you can do something like this is another way to get a seeded random value. Is like powering an integer and then like modding and it's ultimately going to end up with something somewhat random in there. I think this is probably too much there. I think this needs to be more up there. I think my, um. You're a little brighter. And I, the yellow is too bright and the red is not bright enough. I'm starting to get the point where it's almost like tweaking here is the next step. See how it's popping into the bottom? I'll show you how to fix that. Let's convert this alpha to a parameter here. And so P is the percent, whoop. No. P is the height. Ultimately the height 1 minus P is the height. Right? I'm not sure. Let's get alpha 1. Let me pass P into here. Let's see if it's changing here. Yeah, that is changing with the height. But why is it not? Oh, It is fading at the bottom now. That's right. Yeah. Okay. So it did fix it. Okay. So, so if you see how it's like popping in at the bottom here, this is because the, these circles are just appearing with a full alpha and for particle systems, come in at a size zero or like quickly fade in or something to kind of like cover up this, like pop, so now we've got a fade, so it's fading in. I think the the end size might, might just bump up to the tiny bit, the tiny bit, the size randomness. That's what we need. We need like more randomness, like all over the place, because that's, that's what really makes fire. Interesting. Is it's a little bit too predictable right now. Like for example, the, the size of the shape, let's have like randomized that looks at a, a little bit of randomization. Say, what do I times doing a different, like I took a six, a different power every time. So it's not like locked into the same random seed as these other ones. I have, S I have a value. This is going to be a value between a zero and two. So we want it to be a value between zero and one. I can do one half plus sure. So anytime you want your, you know, your sine or cosine to be between zero and one, it's just a simple. 0.5 and then over two. So now we can maybe like add some randomness to like size of these things. That's too much. I mean, this is too much randomness. This is randomized between zero and one. Massage that a little bit. So instead of between zero and one we'll do X, Y download bits. Let's widen this up a little bit. Okay. It's getting there. It's getting there. It's getting there. Okay. It's going to lower these a little bit. Lower these values a little bit. Tweaking makes a huge difference in this stuff. And it, and like, I can't tell you how much generative coding is tweaking. It really is a lot about like experimenting. And sometimes like you have to try crazy ideas and stuff. Cause that's how you often come up with the coolest stuff is when you like sometimes make a mistake and you'll be like, if you make mistake and something cool happens, make sure you look into it, cause that might be the whole thing that you're supposed to be finding in the first place. Or like just, you know, save it. I'll save this right now. You can also type in a name here so you will save it and then you can go back to it later really easily. What fire? Um, let's do a couple other things really quick here. Um, fire is not round. Uh, so we got X, Y, and then we got a angle and then we got a size, which would be, let's do that. Let's do that.
18. Creating Fire-Like Effect with Oscillation
We add oscillation to make the particles wobble back and forth, creating a fire-like effect. Tweaking the values helps us achieve the desired motion. By adding randomness and controlling the angle of the ellipses, we can create variety and make the shape resemble fire.
Six presents. Whoa. Hello. Oh, wait, did I forget something? I often was like, undo. Hello. Don't take us. Oh yeah. Fire. Embers. That's a good, okay. So Chris Evans is fire embers. Don't take you out a straight path at the top. You could add some extra random oscillation and the particle on the X axis, then increases the frequency, but it reduces amplitude as it rises. You know, that, that would help some side to side motion.
Um, though a lot of the fire effects that you see are two parter's, where the ember effect is a completely separate effect that's added on top of the fire, um, which, you know, uses the completely separate fleet tweet system for those like tiny little embers that, that appear and float away, but, um, let's add a little bit of oscillation here. So if I was to just do something like this, you're going to notice I'm passing. I'm calling sign of time. Let's make that a little faster, wobbling back and forth. Now. We don't, we don't want it to wobble back and forth together. That's no good. We don't want it to wobble that fast either. I'm just doing that so you can see what's going on here. We want it to like add the particle. So I is the, like the identifier of the particle that we can use to create randomness. And it's like a random seed, almost, it's not, it's not random because it's, it's a number between one and a thousand, but it can be almost random because like, so for example, sine takes a takes a, a radian. So when you pass in a value between one and a thousand, it could be, it might as well be a random number. It does not know what this I is. So, again, just to show you, if I, if I get rid of the oscillation, it's looking very, you know, vertical like that. So we add in this oscillation. Now it's looking more and more like fire. Everything we do will make it more like fire. Sometimes you want to put a big, very big value in to see exactly what stuff is doing. Now I can see what that's doing. This is part of tweaking. When you're tweaking, you must put a large value in, in order to see what the value, what's actually the maximum is. If you not put a large enough value in, you're not tweaking properly because you're never seeing, you're never seeing the full thing. And often it's good to put a, you know, low value or a negative value in too, to see what's going on. As you, you know, iterate towards, towards your tweak. Like another good technique is to half and half and multiply. So this is too, this is way too fast. So let's just pretend I don't know anything. I'm just going to half that. So let's do. Okay. So it's like half that again. Okay. That's still too much. It's half that again. You're also noticing, do you see this? Like this kind of thing? I think that's probably happening because I'm passing it by. If I was to multiply that, it would probably be a little bit less noticeable. I kind of liked how it was though. It's kind of like a circular motion, which looks almost like a vertex, like a, like a fire would do. Now, if I start to make it too low, you don't really notice it at all. You want it to be, that's too much. We want it to be something more like a subtle effect. Yeah. Maybe something like two or three. Uh, I think that's not bad. Oh, yeah. I was going to, um, a fire is not round. Uh, arc ellipse. We went ellipse, this is the radius. Obviously no, we don't have a R function yet. We didn't make our function. Okay. I'll use R as the race of my, of my circle. Don't worry about your variable names. Thanks for that. Don't worry about your variable names. Spend too much time thinking about them. For gender of art is better to just jump right in and, uh, get moving. So we got our R zero. I'm changing this to Ellipse now it's working exactly the same. I just want to show you like, what if there's a little bit of, um, a little bit of randomness, um, I often use Q as a variable name because it's like accessible to me. Um, so what I'm doing with Q here is I'm taking one plus it's going to be signed. It's going to be like ultimately a randomly seeded value, and it's going to be like close to one. I can control how close to one it is by dividing here. Right? The sign's going to be between negative one and one, adding one to it. And, uh, so it's going to be something around there. I just wanted to get a little bit of ovalness to it. Um, depending on is that right? No, no. Time times Q. That's definitely right. Uh, R times Q, seem to be a little bit bigger. That's all. Now we have a little bit of variety to the shape, but there's still, there are still always, um, vertical or horizontal, which kind of gives away what's going on so we can, this, this, this variable here is the angle variable for your remember for, um, for ellipses and we can control that. So just, just to show you here, I can, I can remember, I could poke these values to see what will happen. And as I can show this, this is controlling the angle of the ellipses all together. So instead of using, instead of being a fixed angle, I will just throw something like eye in there again.
19. Creating Fire Effects with Particles and Smoke
That's our kind of our go-to seeded value. And now we have a little more variation. Usually for a fire, you would not use ovals or circles, but you would use a texture with the lit of a smoky texture. There are other ways to create fire, such as using an object-oriented system and particle systems. Particle systems involve creating objects with position, color, and lifetime properties. There are multiple ways to control particle systems, and even a particle editor tool. Twitter is a great resource for finding different ways to create fire effects. Smoke can be added to the fire effect by using circles that fade in or out, but it does not use additive blending like the fire itself.
That's our kind of our go-to seeded value. And now we have a little more variation. Usually for, um, a fire, you would not use ovals or circles, but you would use, um, like a texture with the lit of a smoky texture. So it has, so it's not so clear exactly like what the, um, the like delineation of that shape is, or like way more particles though, that you cannot even see like that individual with a much lower, let's see what happens. Let's do, let's do 10 times as many particles. And let's, um, 10th with one 10th of the alpha.
Okay. Now, of course it's going to go slow. It's going to go super slow. You know. So good day. Thank you. Thanks, James. I hope people are following along with how this works. There's, I covered a lot here. Um, so James, is there anything else with this fire that I should get into, or is this like a good enough start? That's brilliant. I really enjoyed that. That's really helpful. Thank you. Thank you so much. So there's other ways to do it, of course. Um, another way to do it, which I, I don't want to get too into right now, but that would be like using object oriented system. And that's how a lot of particle systems work. And the way that would work is you, um, you would create an object. Um, and like that object is the particle. It has a position, X and Y position. And it has like a, um, color at a time, a lifetime. And you can like, for, there's like thousands of those particles in the list and you are continually adding particles, you know, and all those particles you're moving up and slowly fading out and controlling in that way. And that, that actually is how most particle systems like work. Um, you only have a good example. Shade for that too. I'm going to be doing a talk about my little JS engine for, um, for this thing on like, uh, this weekend. I think I don't know the day exactly the seventh, I think, but one of the things that just added is this particle editor tool. I'm just barely started working with this, but this does, so under the hood, this does use a particle system and you're just given access to control like these, um, these different parameters, which are kind of like the minimal parameters you expect, such as like the start color, the end color. Um, it can, it can choose between a star color and start color B and color A and color B to get some variation. Uh, then you like it. Yeah, this is just, this is standard particle stuff. You're starting your end size, you know, your speed, your speed. Um, this is a little messed up. I have to work on this. I've noticed some issues with it since I've created it that caused it to be not for easier friendly. Um, but ultimately it gives you, it gives you an idea of how part of those systems like work, you know, and there's multiple ways to do it. If you wanted to do a fire that was completely static, not moving at all, you would probably do in a totally different way because this is all concern with motion. And if you're, if you're interested in like, um, non moving fire, that's a different thing. So also check out on Twitter because there's so many other ways to do fire. There's all these, um, simulation ways of doing it. There's tricky ways. Here's an, here's another one I did. This uses, you know, something similar to what I showed you guys, but I'm in the DWEET, I was not able to fit like the, um, the global composite operation, for example. So I could, I could grab this and throw it in here. Um, oh, no, I did, I did fit it in there. I used the screen one, which is, which is very similar to the, um, not the exact. I think screen is the same as lighter. Actually. No, it's not the same. It looks a little bit different. It looks a little bit different. I like later better. Honestly, but it doesn't fade out or anything like that. So that's, that's a good place to go to for ideas. Um, don't forget about the embers too. That's part of these tweaking effects often requires multiple effects layered on top. Yeah. And in this case, you've got to have the embers close to each other to create the, um, result. Because when you think about, even when you think about how fire works, there is two very distinct things going on. There's like the fire itself. And then there's this little embers that fly away. And they just don't really use it. And actually there's three things. Um, there's a smoke, there's a smoke too. So the smoke, it's not gonna look right. Um, yeah, I guess there are fires without smoke, but normally you want smoke and that is going to work differently. It will work similar in some ways, where you might have, you know, these circles that are fading in or out, but it's not going to use a lighter composite operation, like an additive blending. It's probably just going to be, um, dark black, kind of thing. Let's turn this into smoke really quick. Um, let's save fire. So let's get rid of my black fill. Let's get rid of my, um, rid of my hue. Let's get rid of my, um, hue saturation, maybe saturation value. I'm going to, I'll, I'll, um, that's not, doesn't even matter. Let's give it some value, a little variation of smoke there. Um, um, now smoke might look better if it didn't go tiny. At the top instead, like, um, more like faded out at the top, it got bigger, actually. And then faded out. You gotta think about how these things work. Um, it's a subtle difference, but when something starts big and goes small versus, you know, starts small, going big. Um, that will affect. So here we got with hey, that's our radius. So radius is one minus P. You can go something like that.
20. Generative Art and Real-Time Performance
We need more, we need less alpha. I'll multiply that a little bit. Let's get crazy. Copy this and paste it down there. I think it would look better if the smoke used less smoke. Always keep an eye on your particle count. Generative art is typically not real-time generated art. There will be a recording of this. Most generative art is static, so the speed of drawing doesn't matter. Real-time generative art in video games is more challenging. You don't have to worry about performance issues in generative art. If it goes slow, it's not a big deal. Tweak the amount of particles for real-time use. Move the smoke above the fire for better visual effect.
We need more, we need less, you need less alpha. So I'll multiply that a little bit. We want a little bit of a bigger starting point. Yes. Yeah. I mean, that's, that's something like smoke. You can see how I took the fire and then turned it into smoke. And now what if I was to, let's get crazy. Copy this and paste it down there. To have some fire on the smoke. I think it would look better if the smoke I could use less smoke. It's kind of chugging right now. Always keep an eye on your particle count and stuff. If you're using it for real time. Generative art is typically not real-time generated art. And that's, that's one of the things I love about generative art. So I've, I was going to do an introduction about myself. I'm sure most of you probably don't know who the hell I am. But I've worked in the game industry for like 20 years. And so that's why I've done so many particle systems and other things like that. But what are they saying? Generative art. I don't even know. I'll think about it. I don't remember. Yes, there will be. Andrea is asking if there will be a recording. I am told there will be a recording of this. Oh yeah. I was talking about, I was talking about the games, games and stuff. So most generative art is like static really or like ultimately it doesn't matter how fast it takes to draw. And that's kind of one of the things I love about it because I've worked in video games for so long. And like having this like interactive component, a real time component to video games, which kind of are generative art in a way, like makes it so much harder to deal with because you need to worry. Is there are there too many particles? It's going to be slow. Is it, what if the user presses a button, goes in a way not supposed to go, but you don't have to worry about that here. So if it goes slow, it's like not that big a deal. So, if I was using things real time, I would tweak down the amount of particles. So I was going to tweak that down a little bit and I was just going to move the smoke up a little bit higher. So it's like starting a little bit above the fire, like that, something like that.
21. Starting with the Basics and Building Up
Start with the basics and gradually build up. It can be challenging to know where to begin, but once you start, it becomes easier to progress. Break things down into simple steps and build from there.
Okay. So what are we doing? I hope I wasn't moving too fast. You know, I definitely, went through that fire example, pre gang busters. I think one of the things I really wanted you guys to understand was like how I like built it up from basics. If you remember, we started with just a red circle and then we started to just like, make that circle move up and change color and then once we had that, we started to add more particles and kind of build out. I think that it's hard to get started on things and hard to know where to get started. And, once you do get started, you get that momentum. It can be a lot easier to like get to the next step, but sometimes just knowing where to start can be kind of tricky. So the idea is to just start out, you know, really simple, very simple as try to break it down to the simplest possible thing you can imagine and then just slowly build out to get what you want.
22. Time, Saving Work, Noise, and Drawing Stars
23. Creating Randomness with Non-Integers
Here's more artifacts, noticing artifacts. Actually, I don't think the artifacts will go away. This is because I is an integer, height is an integer, and ultimately, we're looking at cool stuff about math. You can do a generative art thing like with this, really. Let me go to the full width. You can do some cool generative art stuff just with this, but I want it to be more random. So, one way to get more random is to use a non-integer.
Here's more artifacts, noticing artifacts. Actually, I don't think the artifacts will go away. This is because I is an integer, height is an integer, and ultimately, we're looking at cool stuff about math. You can do a generative art thing like with this, really. Let me go to the full width. You can do some cool generative art stuff just with this, but I want it to be more random. So, one way to get more random is to use a non-integer. If you use anything that's not an integer, that's going to give you something much more random.
Now, if I use a value close to one, we'll start to again notice our, the numbers that X and Y are starting to get linked. What if we just look at what happens over time. As you see, T is getting bigger. Wow, my cat just bit me. He's crazy like that. When I like, he doesn't like me typing. He wants me to pet him the whole time. Scared me, throw T. So as you see his T's getting bigger. Now it doesn't need to get very, very large in order to start seeing this Randomness. I showed you that's one way to get this Randomness. And there's another way to get the Randomness, which has showed you is like something like taking the sign of a number like I. So you take I, and then we're just gonna multiply that, like, oh, that was kind of interesting. Let's do our teacher again and see what happens. You need some pretty cool patterns here. Okay. Oh, sorry. But what I was hoping is if I gets, Oh, it's time. So we want to pal I. Now, if we're pal I, we start to get, Let's see what that looks like. Start to get quickly into randomness territory. Oh, you can see. So this is, I'm just showing you a couple of different ways that you can experiment with pseudo randomness here. Honestly, it doesn't matter what you do. So now we have this, these, these will come stars, you know, filling up the sky. Let's make them high rather than be white instead of black. It's not a star, background black. Then we'll make the fill style white. Make the fill style white. We've got our stars and can we make the stars move? So you wanna say we wanna make like a, a cool like star, like parallax type of effect going on. I'm moving all the stars, all the stars off the screen. We don't want that though, right? We want it to be, well, first we want it to be, when they move off the right side of the screen, we want to with them to move back on the left side of the screen. So we're gonna want to do a modular division, a width. So now they're moving off and they're coming on the other side, but it would also look good if they were like, they were moving at different speeds, right? They're moving at the same speed. That's not so great. So instead of 99, we'll just do one of our little tricks here. Now math sine is the same as S. So I'll just place that. We'll do one of our little tricks. We'll do S times sine of I to the 4th. It's gonna be too small initially to see. So let's see what these values look like. Okay, we're getting way too high there. Let's see if we can come low again. A little bit of variation there. Probably be snow if it was in the Y-axis, right? We will need to make these guys smaller and probably vary in size a bit, like maybe like something like that. So you get a little bit of variety in star sizes. And... But we could do our... Just using my library here. I'm gonna grab my HSL code. And I wanna paste it over to here. As soon as it comes back. And hue, saturation, lightness, we do not need alpha, no. I wanted to maybe like, I was thinking, maybe I'd give some of these just like a little bit of hue, which is... Oh, sure, that's... Gotcha. So we can leave our saturation 99. And for randomness, it was like 50. That's where we get our color. So maybe I would do like... Something like... I'm gonna go for... Get a little bit of color in there, I can see how I'm starting to get some red in there. Thought it might be good to just kind of... get some... Let's do the sign in there. Sign just gives me a lot more control over what's going on. I don't want that. Notice how I'm using a different PAL for each of these, because if I don't, that's gonna cause them to be using the same random seed. Essentially if I were to say, this is I to the three. Now if I put I to the three in both the X and the Y axis, we start to get that same problem again. Or if this is I to the four, or if I put I to the four here, that's gonna link up the lightness with the hue, which essentially means like you're not gonna see like anything that's red is also gonna have a lightness of zero or a low lightness or whatever. So, we want them to be like, you know, totally unrelated to each other. We have our little bit of sky here. So that, I think that's a good, pretty good demo of how to make a sky background. So then from here, you can keep adding to it. So, we've got our stars here. Actually I'm just gonna grab this exact same code and for now I'll just make it red. And I'll just, I thought it might be cool to have like some, I'll just click on this. Yeah, I think it might be good to have some like waves in the bottom like the water, like maybe like that or billings or let's do waves, let's do waves. So, we've got our eye, we've got our y, we've got our width.
24. Adjusting Shape and Adding Wave Effect
We're adjusting the width and height of the shape and adding a wave effect using the sine function. By manipulating the values of i and t, we can control the movement and speed of the wave. Additionally, we can apply colors to the shape to make it resemble water.
Width is gonna be one, which is gonna be one pixel for each one of these. It's just gonna be going off to the bottom of the screen. I'm lowering it, I'm lowering it, I'm lowering it. So, this is our x, this is our y, now we wanna add a little bit of a wave here. So this is our sign in or family sign function. These i, we're not gonna make it move yet, so we're not gonna use time yet. We're just gonna use that. Now, we got this weird like comb effect, that's just because i is too big, because remember, we're passing in radians to this sine function. So we want it to be a very small difference between each i. I is, one radian is not small, one radian is large. So lower that a lot. And then say if we add t to it, that's adding our time value to it. I'm gonna make it move the other way, so we get minus t. And let's move a little faster. Okay. And we can do that, and we can do that, and we can maybe give it a little color that's a little more suitable for water. I'm just gonna give it kind of like a, it does look kind of cool with the, a yellow, a whitish kind of color. So I'm gonna give it something pretty light.
25. Layering Waves and Creating a Landscape
Let's layer waves on top of each other to create a landscape. We can adjust the setup and move speed of each wave to achieve the desired effect. By adding multiple layers and controlling their saturation, we can create a more dynamic scene. Mixing up the random number generators adds variation. We can also adjust the direction and color of the stars to enhance the overall composition. Experimenting with different elements, such as trees or buildings, can further enhance the terrain. The possibilities are endless.
I did want to, oh, let's, so this is only using one wave, but one of the cool things you can do is like layer waves on top of each other. So let's layer another wave with a slightly different setup here and a slightly different move speed here. And then you can maybe, make it a little lower. Let's make that a little bit, there we go. Yeah, that's not perfect, but it's a start, it's a start. This is actually, it's more like a landscape than a, than a, let's make a landscape. Let's make a landscape. So instead of, that's going to be too much to render. So I am going to do, instead of that many, I'm going to do like, one eighth, that many. That means I'll probably have to, but is by a, I don't worry about cleaning up any of this math. I just add numbers in there whenever, however I feel like. It's going to be fine. Then I'm going to, raise it up higher. Raise it up higher. And I want another loop. I want a J equals eight. We're going to do eight. We're going to eight parallax layers here. So we've got Jay, we've got our Y, we've got our fill style. I'm going to copy this, hue saturation, lightness, saturation be like, let's see, well J is the layer. That's what we want to control the saturation. We want our J to be, you know what type is easier? J went between zero and one or zero and eight. Okay. I just have like a shorthand way of doing things, sometimes that I, I sometimes will do J and we need to change the color. Okay. Now we have layers. We have layers now. We need to, we need to make something else. Let's mix up these random number generators. So they're all using I, it's not using J. So let's put J into the mix. And let's slip J into this mix here too. I'm going to use a different, so I'm using J to the two, now I'm using J to the three. And for parallax, we do need the, it should not be moving at a different speed because that's going to make it look not like terrain. That's going to make it look more like water. In fact, I should, I think I need to, I need to like do something like this in order to make it work properly. To make it get, Oh, that's not what I want. That's not what I want. Why is it J, I think what I'm going to do for now is just get rid of it. That part is working fine, but all I wanted to do is make the, make it like move faster in the foreground so that, okay, here we go. And maybe give like a little bit of a different, like let's make the stars move the other direction, or can I make those move in the other direction? I can, I can make this move in the other direction and give it a little bit more, give it more variation to the color. But let's keep the palette a little bit tighter to like a hue range, tighter hue range. And we'll give it an offset so it's not all red, it's not all red, it would look better if it was like a, there we go. We can even give the sky, you know, like a more, like a bluish kind of, kind of tint. You know, and then we can like, maybe, oh, bet the, I bet the stars would look better with the additive. I'm just gonna add that in. I don't know why, it's sometimes slow when I go back to this. Usually it doesn't. Could be because I'm recording. That's gonna give me the stars. I'll go back to set it, like source over. We've got our stars, we got our terrain. That's kinda cool. Maybe I would add trees on there next or buildings or something, you know, or add more, try to get the terrain looking a little more interesting rather than just a sine wave here. You can add other sine waves in order to like further differentiate. There we go. That's a little something. So it's not quite so obvious what's happening. Well, what do you guys think about that? Is that a good scene?
26. Text Rendering and Twitter Inspiration
27. Exploring Generative Art and Longform Creation
Trees are a good generative art theme. There are various types of generative art, such as pixel sprites, architectural designs, tunnels, fractals, and more. Longform generative art, influenced by NFTs, allows for automatic generation based on parameters. It's exciting to experiment and share your generative art with others. Thank you for watching and stay updated by following me on Twitter.
And I dove in and learned everything. Trees are another good generative art theme. Here's some emojis. Well, this is an actual game. This is an actual game. Quick to play. I hope it'll run me over. Oh, it does. Oh, cool. There's all kinds of cool little games and stuff on here. Here's a great one. Pavel. Pavel's great. You'll see a lot of them that follow this format, which is what we call default, which is like when you start a new tweet, it looks kind of like that. And we have a lot of fun remixing them. Here's another brilliant one. It starts out as a cube. Now watch. Now watch. It's like thinking of how to like literally take it to the next level. It's awesome. We have 3D stuff. We have great casting. Now all of these are complicated, by the way. Some, it's often better to just have a really good idea than having code be super complicated. Most of these are really based on very simple ideas that are totally within your grasp. So I'm just looking at some of the different ones that I've seen here that I like. Let's look at how much time we've got left. I think I've got some pretty good ones. I've done at least over a thousand of these. In total, that cover all types of different areas. For a lot of these, I've also done a write-up that totally explains how they work. So for example, this one, I did a write-up that kind of breaks down how everything works in this tweet. Like really gets into deeply how it works. If you're interested in more code-golfing aspects of it. This one is the City Of Shadows is definitely one of my best ones. Where it's like, man, it's got like a city in there, raycasting, shadow casting. It's pretty crazy. Creating like pixel sprites is something a lot of people have played with. Ascemic writing, where you're like making writing that like is not real. It's not anything that you can read, but it looks almost like it could be. The human form, trying to recreate that with just some simple rules, you know, architecture, Eiffel Tower, buildings, so many trees. Tunnels, tunnels are a good thing to do, pretty easy. To get that going, attract, this is a Lawrence attractor, different types of math equations can sometimes really inspire, a general of our ideas like that. Oh, fractals are also big. I have some fractals in here too. Probably just render really slowly. Subdivision, you know, just trying to create simple effects. I had a whole like, series where I would try to like think of a word that I could like represent somehow with code. So I did a bunch of different ones like that, where it's like basically a word with a bunch of effects applied to it to make it like special. More trees, some bricks, some books, a little bit of everything, mazes are a good example, something to try out. Something bouncing around. There's a lot of bouncing, bouncing is good. What else can I show you? So another great place to look for generative art inspiration is fx-hash. That's where we create longform generative art. There's kind of like two types of generative art. I feel like there's generative art where it's not long form, meaning you as an artist will curate the result. You'll generate, you'll run their program as many times as you wanna run it. And when you get to a result that you like, you'll save it as an image, a video, or whatever that may be, and then do something with it, share it, probably, whatever. So that's one type of generative art, and that's totally valid. But then there's this new type of generative art, it's really kinda new, I feel like, because it's kind of arisen from NFPs, where it's more like longform generative art. And the way that works is you create a program, and instead of being able to curate the result and pick out what looks good, the result is automatically generated when someone purchases that NFT, and no one knows exactly what it will look like, because there are hopefully a bunch of parameters that control how it will look. So, for example, I was gonna open any one of these. There are all kinds of parameters for this generative art. I think this one doesn't have the parameters listed. Let me open up one of mine because I know it will have parameters available. Like your long form generative art has all these different parameters, like it might be for this particular one, it's about a tree, a tree scene. You have like a time, you have a season, how many trees there are, that type of thing. There's also a ton of stuff under the hood that's not even showing you that that's generated randomly. But the point is that you don't have control over the result. And that's kind of the fun of it too, is that when people are minting these things, the results are just showing up as we go and we don't know what exactly they might look like. For this one, I had one very small chance of something happening where there won't be any trees at all. It only happened once. And it could have been a sun. It happened to be a moon. It could have looked different, and that's what it looked like. So I would definitely encourage people to experiment, either just like look around on these NFT sites for inspiration. You know, Twitter is also good for people posting their works in progress. I mean, you're not advocating that you should buy any of this stuff, but that's really up to you. But for, just going here and like seeing what other people have done, like, and also like maybe try making it yourself. I would recommend like experimenting with dabbling with it. It's a lot of fun to like share your art with other people. And so I think with that, I think we're just going to wrap it up. I want to say thank you so much from the bottom of my heart to everyone that has, you know, taken the time to watch Next Genes and everyone else that submitted questions. And thanks Gleb, that's great. I really help people learn stuff. I move really fast. So, and hopefully this video will be available to watch later for people to see. Follow me on Twitter for all the latest updates. I'm like 100% focused on genre of art right now. Up until like this year, I've more of been doing like in Indie, no I've more of been like game dev stuff, honestly. But now I'm like, I'm all into genre of art.