How to make amazing generative art with simple JavaScript code

Hi everybody, I'm Frank Forrest, a generative artist and also a game developer and I guess a bunch of other stuff. But right now I'm mostly focused on generative art. And I've really been focusing on, especially this year, but even a couple years ago I started getting into learning JavaScript because I had been learning C++ for so long. So I'm not sure if you guys are familiar with the kind of stuff that I do. So I'm just going to give you a quick... show you quickly like what what I've been up to. What I've been up to.

So, let me see if I can do that. You have to bear with me a little bit because I'm still... I haven't used Zoom that much. So I'm still kind of getting into the flow of things here. Okay, so I hope you can all see my screen now. So I'm showing you a website called Twitter, which is a website to post super tiny JavaScript programs. All these programs are only 140 characters and they're all generative art programs. And I think it's a really great website to experiment and play around with different ideas and see what other people come up with and remix ideas. Like a lot of these are kind of remixes of other people's stuff. But if I... This is not the actual website by the way. This is a website that I made to make it a little bit faster to browse through these things.

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.

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.

So let's create a canvas because you don't need a canvas for generative art. You can create generative art with anything you can imagine. But most generative art does use a canvas style drawing system. So in order to create a canvas, it's really that simple, we've just created a canvas. Now we need JavaScript code in order to operate on that canvas. So in order to do that, we create a script block, where do script and use angle bracket tags, and we do a slash script to end the block. Now we've got our our block set up here. And we want to be able to draw to that canvas. So we need to get a 2D context, which is, I'm just going to store it into a variable. I'll talk a little bit more about variables, but we'll store it to a variable, we're going to do X equals C, which is the canvas, when I do IDC, that automatic creates a variable for the canvas. So we're going to do X equals C dot, get context. That's going to give us our 2D context for the canvas. And JavaScript is so flexible, you should end lines on semicolon, because you might rarely have something happen that's not supposed to if you don't do that, but you don't really need semicolons.

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.

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.

There's a couple different ways to set the size of canvas. You can just do it just like this C dot width equals whatever you want it to be. Um, I'm just going to use scientific notation here you want to make it bigger. Um, wait, that that thing should go away. Okay. We made it bigger. Um, I want to show you really quick. Another trick to get rid of. This, do you see this little white gap on the left top left side of the image here? Um, let's make these, um, fill up the full window. So I'm going to use these variables which are called inner width and inner height, which are already predefined for us. That's going to be equal to the full size of the window. But there's still these little gaps and also a scroll bar. So we don't want scrollbars and we don't want little gaps. We don't want any of that. So I'm going to put another tag in here, body tag, which you're supposed to have, but we don't have one anyway, you don't really need one. The main thing is that we want to set the style, the margin, the CSS style margin. CSS can be confusing, but you don't need to know much about it. All you need to know right now is that you can do margin equals zero. Boom! Bars are gone. Completely fills up the size. I can even go, if I go full screen and hit reload. Now it's going to full the full scene. You can listen if you want on a resize event, I don't have that right now, it's fine. But the point is that it's filling up the whole screen with whatever we want. So you can either do that or, oh, I can move this thing around. Just figuring this out, okay. So you can either do that or you can, you can, what am I talking about? Body style margin width and height. You don't necessarily need to make your canvas use inner width and height. You may want to make your canvas, a lot of times for generative artwork, I just make my canvas a square, like something like this. And if you do that, you may want to add a style tag in here that says something like, kind of like, I'm going to get out of here pretty soon. So now I'm just kind of, if you understand, clamping this, I'm using the width, style width. It helps to know a little bit of CSS. You don't need to know a lot of CSS, but you may want to know how to position your canvas and stuff like that. Just the very basics. So I think that's pretty much all we need to know about HTML. We learned about how to create a canvas, how to create your script tag. Make sure you put your closing script tag. That's very important. If you don't have that, it's not going to work. This is a valid HTML file. This is all you need to know for HTML. So I hope everyone has followed along so far. We're going to move to the next step. I'm going to show you something other than live coding. Which is what we're going to be doing for most of this. What you may not realize about how amazing JavaScript is is this console right here where I'm at right now. You can type commands in there. Any command and it will happen. You can use this on any website. I'm going to show you how live coding works in there, because it is useful for debugging. I can use this for a calculator. If I want to add two numbers together or multiply numbers together, I'll bring this up and start typing stuff in there. You can also do you can literally type your code right in here. Let's make our fill style red again. 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.

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.

Next up is Twitter. I don't know if everyone was here when I first showed this. But I love this website. It's all JavaScript, and these super tiny programs are golfed down. We're not going to be learning about code golfing today, which is a lot of what this website is, which is the practice of taking a program and squeezing it down as much as you possibly can to fit in this incredibly small space. But the other part about it, the aspect of it that I do want to share is the live editing part of it. So I'm going to just start a new tweet right here by clicking the new tweet button. And the live editing part is crazy. So for example, there's like nine of those things right now. Now, if I want to change how many of those things are moving around, I can literally just press one button, and it automatically changes. Do not need to reload anything. Do not need to press any type of special button or anything. You can literally just type in stuff, and it'll automatically happen. I've found this to be so useful for generative art. Because sometimes when you're working on a program, it will take a while to compile, several seconds to a minute, or you're not able to iterate that quickly. Because there's no one-to-one interface where your typing is directly showing up. So, I think this is how we're going to be working most of today. Except if I'm not going to use Twitter. I made a site which is much easier to use than Twitter, I think, is called so if you'd like, I'm going to paste it into the chat here. This is my personal code editor. It's not perfect. I made this a few years ago when I was actually still learning JavaScript. So, I've just kind of been pushing it along. I really do need to start from scratch. But for our purpose today, it's going to be great. You got syntax highlighting. You've got a nice big view screen, and we have the real-time interaction. Live coding. You could also use... Have you ever heard of CodePen? You can use CodePen, though, I think you do need to click a button to reload in there.

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.

A variable in JavaScript is really simple. You don't need to do anything to define a variable. This is the code right here, so C is our canvas, it's the same as it was in the other one. What this first line does is to clear the canvas. It was kind of confusing to me at first why this would even clear the canvas. But what JavaScript thinks is happening is changing the width, essentially. It's not actually changing the width because it's doing a bitwise over zero. Pretty much anything you would do that would modify the width will clear the canvas. Even if it's not modifying the width, if it's an arithmetic operator to the width. So this first line is just clearing the canvas. There's a couple different ways you can do it. You can do times equals one or whatever you want. Or you can even use the height variable. The width is just one letter shorter, so we use that. So that's clearing canvas. Back to variables.

The only variable we're using here is i. I is what we would call a loop variable. So this is a loop. It's a very simple setup. It's just if you've ever seen a loop in C++ works exactly the same way. It has three parts. Three sections really. Really only one of them matters. They kind of they make it seem like it's really important what these sections do, but the only section that matters is the middle section. That's the loop condition. And when that becomes false, it's automatically going to stop the loop. This i minus minus can be a little confusing. All this means is it's going to start at 1,000 and keeps attracting until it reaches zero. So I'm actually afraid to change this. I'll see what happens. Yeah. I... We need to retract i. i is not equal to zero. There we go. So that's another way to do it. Same exact code. Usually this is more like what you would see. You would probably see i equal that. Then i is like greater than 0, something like that. There's so many ways to do this. There's no right or wrong way. We're just looping through this thing. So we could see this shape over here. So let's look a little bit more about how it's created. Well, we know what this fill rect function is. That's just drawing a rect. It has four parameters. A white space is totally... is totally ignored in JavaScript. So when I'm trying to figure something out, I'll often like space things out in to lines and just kind of see like this. So we have our X, we have our Y, we have our width, we have our height. And we... so we can see our width and our height are 29. Now, this... the great thing about this is we can just poke things around to kind of see what's happening. Yes, that's our depth there with each one of these squares. What if we make this lower? What happens? Okay, there's less of those. If we make it bigger, not much of a change. Well, let's look at the first two parts of our fill rect. So these values here, they might seem kind of random to you, but they actually do have a very useful thing. There's a reason why they're like that. I've not told you about throw yet, but it's pretty useful, at least in this context. This is not how you normally use throw, but I use it often in this kind of context to just see what stuff equals. So we've got width is 1920. Width over two is 960. So that's actually why that's there. I can throw that there just to make it easier to see. Height is 1080, height over two is 540. So we'll put that in there. Then I'll remove the throw so it gets back to the rest of the code. Now, if I put that throw at the bottom, then it would be fine. This is where it's putting out the throw, by the way. I don't know if people saw that, but... So we've got our width and our height. This is all set up automatically by Twitter. Now, you might be wondering, like, why is the canvas 1920 in the height, whatever? That's because Twitter set it up to be that. That's because with that HTML code that we had written, they use HTML code and it says the width and the height to be 1920 by 1080. That's what they use on Twitter. It's 1080p resolution. So it's a pretty industry standard thing.

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.

This S and C, you might be confused. I understand. And Deweiter defines only a couple math operators, sine and cosine of one of them, which defines to be capital S and capital C. There's also a capital T for tan. But this is really just the same as Math.sine and Math. There's a lot of good stuff in the JavaScript math library. Pretty much what you would think would be there, all the trait functions and stuff. Sine and cosine are like some of the most used functions in generative art for all kinds of purposes. So we've got that figured out. Sine and cosine.

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.

Now we got a loop. Now we got different shapes. What if I get rid of this? What if I move t up into here? Move them into both or change these values here. These are the types of things you can be playing around with. Let's add some color to this. Let's add some color to this. I'll show you a way to dynamically add color. We will use the HSL function which is just super useful in generative art. It's hue, saturation, lightness. So there are going to be three different parameters to this function and alpha too we're not going to use. These little tick marks… what do they call? Grave accents, I think. They are used to do, you know, let's just forget about that for now. Let's keep it simple. We'll just use regular quotes. With Java, JavaScript is great about strings. You can literally just add strings together. So if I had Q comma saturation, we need a percent sign. Percent comma, and then value, percent. It just works. Okay. We got a red. I got red, nice poking around with these values, always poking the values because that's gonna help you get an idea of like what's going on. This, it was a little confusing to me at first, but the, the lightness parameter. So it's zero, it's black at 50. It's the full color of whatever color you would set in. And as you move up to a hundred, it gets back to zero to get back to white. So if we want to color, that'll be 50. Now, everything red. That's great and all, but what if we want different colors? So what if I stick eye in there as the hue? Well, that's different. I think let's try... Not clearing the screen. So if you, I'm just using a rate of comment here, you can, you can feel free to comment stuff out if you want. That's kind of interesting. Let's give it a little bit less rainbow. So I'm gonna just reduce eye a little bit so that the hue is not sweeping over such a large portion. I could use, I could use, I could store this x position into a variable. I'm not going to start into lowercase x because lowercase x is already used. Remember, I've done that before. Now we have x. So now it's changing across the x axis. Right? Or it could use, I could do that same thing for y. I think it's kind of good in a way to once you've got your code going, to separate stuff out. Make it easier to see how things work. Now I've got x and y. Now let's do a little generative art trick. What if we do something like x and y and do some type of combination of x and y? You know, like x and y or x or y. What about x times y? That's a little bit too much. You know you can play around with these different, I kind of like something like this. I like to do this, these different functions to get different effects. I would probably make this a little bit bigger so it fills up the whole screen. I like to fill my whole canvas. Now that's like kind of like Turn of Art, you know? We can even make it change color over time, too. What if I mix time into there? Let's see what happens there.

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.

Is everyone on the same page with where we are? Is there anyone that is... Wants me to explain? You want to explain more? No. So we got a live coding basics, we learned about variables, we learned a little bit about tests, at least testing if I is greater than zero, we learned our loop, one loop. Random numbers, we have not done yet. That's something very, very key to generative art. Let's do some... Let's start from scratch. Let's start from scratch. Let's do some... Let's like fill a square with a random kind of gradient, you know. So we'll do a four I equals 99. This is just kind of a paradigm that I often copy. So we're looking between I and J. Hmm, I don't want to do that. I don't think I want to do it that way. Let's instead... I want to use this function called math random to get the X and the Y values and make sure this is big enough. Okay, we have something. It's a tiny corner couple from the screen, so these math random... Let's try to throw again. Math random is going to be throwing, it's going to be returning a value between zero and one. Less than one, but between zero and one. So what if we are width and height of our square? Let's make it a little bit higher than it is wide so we can see what's going on. There we go. So let's... That's not really the x and the y, that's more like the x and the y offset. So let's get rid of that and move that into there. Now we have a square that is in the same place every time. It's just going to eventually be filled up to a full like, square. But it's filled up randomly. Let's make it a bit bigger so you can see what's going on here. You see it's just filling up, but what if we... Draw them in a different place every time? So we can kind of see a little bit better. Just as we use this random here, we can use it... Actually, let's learn about functions because that might make this a little easier. This is super simple, nothing complicated. I'm just going to using a simple arrow function. So you want to do r... The name of our function is just lower case r. We'll take a value which will just be, let's just call that A, I guess. This is going to be a random number function. It's going to return MathRandom times A. So, instead of calling MathRandom times W, we can just call Rw, and we can call Rh. We've got that. So, if we want, say, our x to be in a different position every time, we can do something like that. Our y to be in a different position every time, we can do something like that. If we want our width and our height to be different, let's keep a minimum width of 50, a minimum height of 50. A minimum height of 50. And we're just going to use the height, width, and we got that. Let's give it a random color, too. I'm just going to use this function, which is called capital R, which is, again, provided by Twitter. It works like that HSL function I showed you before. But use it, it's RGB. So I can do RGB. But I might do something like. Oh, yeah. Let's give it a random color. That's what I wanted to do. Random. This is RGB, between 256. So we're going to do 256. We've got random colors all over the place. I want more dense squares. I want smaller dots for my squares. I like denser. There we go. There we go. A lot of general art is really tweaking values until you get something that looks interesting. Because it is super easy to make something that is just so close to being interesting, but really just needs to be tweaked slightly differently to get it over the finish line. I'm not saying this is great or anything, but it's a good start. These random values, it's what's called a uniform randomness. That means that it's going to return the value between 0 and 1 is completely uniform. As you can see, it's an even distribution. But it does not have to be like that. What if we take this value, this result here? And we do stuff with it. What if we square it? This is PowerOf in JavaScript to star symbols like that. So if we take this to a power, you'll see how that, I think it might look better on the Y-axis. Let's see how it gives it like a uneven distribution toward the top of the shape. Well, negative two is interesting. What if we say run it through the sine function? We know sine takes a value roughly between zero and 2 pi. Not much. I bet this is up because the output is between 0 and 1. What would we really need to do is multiply the result of sine by h. And sine is taking a value between 0 and 2 pi. I kind of like how that looks actually.

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...

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.

Another thing you might want to do with your compositions is to just like automatically stop them after a certain amount of time. So if it starts to get too noisy after a few seconds, I might just say like t is greater than four. So now it's just gonna go for four seconds and then stop. You might also want to increase the speed thing that I added to just make it a little bit faster to see results now. I think it's probably too fast. That's gonna... One of the things that is tough about JavaScript, one of the downfalls of JavaScript, is it can freeze up your browser. And then you need to like start doing browser and stuff, and it's pretty annoying.

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.

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.

What's going on? What's going on here? That is definitely, Oh, sometimes just poking around can really help. Do you guys...are you guys starting to see what's happening here? I understand. I understand. This actually was kind of cool. So here we're actually rotating the angle of the drawing, like the shading angle. But if I was to put rotate up here, we're rotating it before. So it's rotating the position as well. So that is a pretty good example of how different this can be. What if we want both? Can I get both? I can get both. Let's give this a random value too. Wow, that's not so good. That's not so good. I like it better with a static angle. Oh, you know what? I bet it would look better if this angle was not randomized every single iteration, but rather the same for each square, something like that. So it's different angles, but the same for each square. Also, since we're rotating here, I decided to add a bit of rotation. Let's randomize that too. Oh, again, I want this angle to be the same, not randomized every single time. So the rectangle would be... We need to store it to a variable. And I need to, since we're rotating, I need to widen this x and y. So right now it's changing width and height. Width is 23. I think I need to make make the height more too, probably gonna like that. Let's give it a little more, a little more juice. Cool. Yeah, we got a little bit of fluffy effect going on here with the shading. I'm making y, I'm going to make it far enough, because we're rotating like randomly half of them are, half of them are off the central point. Oh, the screen. What if I do, what if I translate first? You gotta experiment with these things, and you're often gonna be wrong. But there's no way to do it other than try. What if I translate first, then rotate, then I'll do my other translate. So translating to the center of the canvas first, then I can shrink these down a little bit and get a tighter, tighter, tighter fill. It's not in the top. Why are you not in the top part of it? Oh, I need probably because these rectangles should be covering the full two pi sweep. Okay, there we go. These angles, remember this is an angle between zero and one, or zero and two, but the angle really goes up to two pi. So you should probably do that there too. I'll say, so another thing I should probably start telling you is like saving your work and saving like, increment incremental progress of your work. The way. One of the things I like about Capgis is that I can just hit save. And automatically will save out a text file of this thing I just did. Then eventually when I come back to it you can just drag the text file straight back into it and have it load that for you. So I just wanted to show how you, when you hit reload, it will say this that it has code loaded but it is, you know, not it's not going to execute right away because you there are problems that can occur. I should probably show you what one of those problems can happen, that can occur, um R before it happens to you so you will know what to do when it happens. So JavaScript is kind of annoying about infinite loops so let's try to cause an infinite loop here by having a for loop which never never decrements the um the variable. Now thankfully, luckily this at CAPJS and twitter both inject code into these for loops which you may not even see but it is there. I'll prove it to you. I'll prove it to you. You might not even see that the code is there but it is there. So I'm throwing you which happens to be the name of this function. You'll see this is the code. This is our code but we didn't write this code. We didn't write this code. We didn't write this code. That's because this system just injects a little bit of code in there to prevent infinite loop from happening. Because infinite loops really suck. I'm going to show you what happens when you do not have that. So let's go back and how to prevent it from happening. We've got i minus minus back to our old thing. Let's get rid of this throw up here back to our old thing. Okay. Now I'm going to uncheck loop protect. That's going to disable this thing. So it's going to be our raw code executing. Now what do you think is going to happen when I delete this? I'm afraid to do it. Hopefully we'll be okay. I don't know. You guys think I should try it? I'm scared, though, because I'm doing this for you to save you the frustration that I've just been doing. Now this is frozen. I could still click in other tabs. Usually what you can do is just click if in Chrome, click this X at the top of the tab. That's the easiest way to stop this from happening. This is never going to come back, you are locked forever when this happens. And it's very annoying. It can happen with any type of programming, but it often happens with generative art because you're experimenting and poking around and it's very easy to have this happen. Okay. Thankfully we got this. Good. Okay. So now it's going to come up. It's going to save. The program is loaded, modify code, or unpause to execute. We have loop protect back on. So that's to let you know that it can happen.

So now it's going to come up. It's going to save. The program is loaded, modify code, or unpause to execute. We have loop protect back on. So that's to let you know that it can happen. It's not the end of the world if it happens. I'm going to show you another way to prevent it from happening. The old school way. So imagine you have loop protect on, off, if you remove the loop variable, like I said, it's an infinite loop. Never going to exit. So if you do want to do something like that, really quickly, let's say I want to move I over here. It's not in this part. I want to change how it works, basically. What you can do is disable the code. Sometimes we'll do that by deleting part of the for loop. Now it's bad code. It's not going to execute. So we can do whatever we want. You can take I, we can move it down here and we still want to keep the I as the loop variable. And after I've done my little thing, I can put the for loop back and we're good to go. So that's just a little thing to be aware of that is kind of one of the gotcha things. You're probably going to run into it at some point. So it's definitely good to know about. It can be a lot worse with recursive functions. Worse than for loops. Because JavaScript is even worse at detecting those. And yeah, I've had to reboot my computer once or twice. So I am like totally. I could just keep talking about whatever.

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.

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.

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.

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...

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.

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.

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.

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.

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.

There were a couple of questions that I might be able to get to. Anyone else have any questions or anything that I like went by too quickly? I want to check how much time we have left too. I'm not sure if this goes until another 45 minutes or another, does anyone know? I think it ends at 12. Wait, oh that's, this is, it ends at 11. Huh. Is this supposed to be over now, or should we keep going? I guess I did, I did guess we did talk for a while. But, um, I'm happy to, I'm happy to keep going until about 12. That's kind of what I planned from the beginning. So, if, it doesn't seem like anyone has any questions. So what I can do is just, um, we'll start to move towards a wrap up. I'm trying to think of other things that might be important to share. Um, in, for people who are learning this type of stuff. A couple of other things I wanted to mention. So we talked about, about saving, saving your work, saving incremental progress of your work. That's very important because, um, you might like make, make a mistake and then you want to go back to an earlier version. Or sometimes you just like things just change so much that you want, that you end up going in a totally different direction, but you still want to have the earlier stuff available to, um, use for another idea. Um, but also I want to stress that it's, it's really important to like build your own like library. And that's really just like a text file that you're going to keep, or it could be a Google doc or whatever is most comfortable to you, where you kind of paste your own snippets of code and things that you will be using often. Like for example, this like HSL type of template string might be useful thing or like a random function, whatever, whatever's useful, you're going to build up your own library of like functions and stuff for you to use. Very, very useful. Noise is, um, can add, um, a layer of like quality, I guess, to generative art. Um, so for example, like here's one of, one of the pieces that I've done called astronomic comics. There's a tiny little bit of noise. Now I can toggle on and off. You might not even be able to see, I don't know if you could see it with the compression. Um, there are other, there are other ones that have more noise. Um, but this little bit of noise that you can add on top of your like final work can really make it feel like more like, like, I guess, more like art. I don't know how to explain it otherwise. It's just like having a little bit of, okay, here, let me show you another one that I've done. Um, my, uh, grayscale bytes is a very simple composition for infrastructure intentify, because it has a noise. So I have a noise slider here. I can control. It is subtle and a magic trick. you can see it through the compression of whatever you're viewing this from, but when you see it on your screen, having noise adds a lot. And all that is just random pixels added on top. Very low alpha random pixels that like kind of just make it feel more real, you know? So that's something to think about. If you're, if you're being a little bit more compositional, it's like how to add noise and there's, there's different ways to do that. And you could probably just download a library to help with that. I think p5 JS has some stuff built in for that. Um, p5 JS is um, is i'm a library for from using for making general art with JavaScript, but I, I personally just prefer, um, I believe that's the game I was just pointing to was the copy paste. Prefer, um, vanilla JavaScript. Um, some other aspects of charity art. Let's um, I think I've covered, I think I actually did really well so far. I've covered pretty much everything. I want to cover. I'm, I'm probably just going to move on to just doing another demo of something. And if anyone wants something specific, I'm going to, I'm going to pick something out randomly. But we'll be good. We could do like a stars, like a star field type of thing. That's pretty easy to do. Um, yeah, let's do like a scene. Let's see like a landscape type scene and then we'll see how it goes. Got some stuff into it. I think that might help get a better grasp of like, um, some of these random number type generator type things and how I'm doing is seeded randoms and all that type of thing. Back to my, just hit reset here. I want to draw stars. So how, how do we draw like new, how do we draw, let's plot these like points randomly without using a random function at all. Okay. And I think this will help with the pseudo random thing, which is super important. So what if we want to fill up this canvas with these points? There's a hundred points. We want to fill it up randomly. We know, we know how big the canvas is 1920 by 1080. So let's just start our simplest possible way we could do something like this that's the naive approach. We'll make it a little bigger so we can see them easier. So passing an eye to both the X and the Y axis we get a line. That people understand what it is. So the problem is not that they're in a line along one axis. But the problem is that they're in a line that both axis are like tied together. Both axes are tied together. That's the problem. That's the problem we're getting at here. So how do you untie these like axis? Well, we can do what I said. We can convert this eye to like almost, use it as like a random number, pseudo random number generator, basically. So let's do i mod, so the height. Let's just make it height, simple. So not going to change anything yet, right, because i is to less than height. Height is at 1080. But what would happen if we say, what if we just multiply i by something? Let's see what would happen. Oh, we get more of these. Well, that's interesting. What if I, okay, how is that happening now? So we're getting like almost like a grid type of situation going on, but it's not random, right. It's almost like these x and y-axis are still like linked. They're linked somehow, but just not in the same way they were before. So here's the trick. In order to convert this to like make i not be in height, linear, anymore, we need it to be nonlinear. That's how we get out of this, and we're going to do this by a piling I. You can literally just do I times I. So we're going to notice some artifacts here initially. That's this kind of thing here. If we do a higher power, this is just start to go away.

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.

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.

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?

So Artaz says he needs to go and thanks us for the session. I think I'm nearly done now. I'm planning to go until 12. So I probably don't have enough time to do a whole nother like demo, but I could definitely like answer questions or try to show anything that I missed. I'm trying to think of stuff that I missed, no because I probably did miss a lot of stuff. What else can we do? I'm not sure. I feel like that's, once we start getting to the next level of things, like we could literally spend hours on just like the tiniest thing. So I feel like I really had given you guys a good like tight introduction that incorporates everything. And it's showing, I'm looking at my, I like sheet here, my cheat sheet here. Maybe I'll show you a little more JavaScript stuff. I'm not sure how people are more familiar with JavaScript and they want to know like more details about like say like how arrays work or not deep into that, but more like how you would use it in general art or objects or other types of, you know, or I could show you more about how you could get the shim, a shim working for something like, and to create an entity. What if coding covered all that a CDScape? Text rendering. Let's do text rendering. I wanna make sure that everyone knows how to do that. That's important. How my skip that. There are a couple of things to know about text rendering. I'm gonna do right on top of this. I'm gonna do right on top of everything. Cause it doesn't really matter. Let's give it a nice red font. And then so fill text works similar to these other functions. It's not used quite as often in generative art, but it's used pretty often. It's very useful for debugging and stuff too. It's used a lot in games. It is used a lot on Twitter. It is actually technically slightly smaller to do fill rect or fill text than fill rect if you want to just like one point. So you could do like fill text and then zero and then like your X and Y position. So the first part is the text that's gonna print out. It's super tiny. Right there. You can control the size and font of the text really easily just like this. Font equals. There's a couple different like units you can use. Pixels is one of the easiest ones. It's going to just be PX. That's like roughly the size of pixels. Now it hasn't changed yet. That's because you need to define a font. So I can use... Actually it doesn't matter what you type in here. Anything you type will work literally. So if you can use Arial, that's a common font that you might want to use. Impact is a good font that you might want to use. Monospace is another one I use really often. And if you want to try... If you want to save a tiny bit of space, you might see this on Twitter. Like doing like this, like adding a quote inside here is like a trick to like make it... Think that there's a name of a font there, which is like technically required to have this thing work. So you have your font size, but you can change. You have your font... Oh, there's another parameter to font too, which is optional, which will squeeze the font. So let's say we want this to be a little bit bigger. But now it's like wrapping off the side of the screen. You don't want that. So we're gonna pass that third parameter in, which controls the size of the font. See, like squishing and stretching it. And if that value is too high, it won't end up doing anything. It's actually just the maximum value, I guess. So if it has it set higher than the maximum value, then you won't see anything. And of course, I go to this website all the time to grab emojis, which are kind of fun to play around with on Twitter. So you can grab your emoji. Grab your emoji, and you can write your emojis in there just like you could any kind of text. They will be squished too as well, just like everything that's happening. Emojis, what else about text? Oh, there's also... So let's say we want the text to be perfectly centered. You can do x.center, which is useful if you are using this Regenerative Art, you probably would want to have more control over the position or the exact position of this. So let's think, how would I use this Regenerative Art? I would do something like this. So instead of dots here, I would grab this code here. Paste it in there, paste that in there, paste that in there. Now, move that out of there. And we even do something like, let's grab another fruit. And, you know, decide which thing you're gonna render based on conditions or whatever. And you can use this, these emojis, it's almost like a brush. Like watch what happens when I delete this width. I'm not clearing the screen anymore. So I'm getting like a fill of this. These emojis are like filling the screen, basically. They're adding color. So yeah, emojis are a fun way to play around with, around with that stuff. I definitely wanted to talk about text, so we got that. Anything else I missed that you'd like to see? I have about 10 minutes left, I'm planning to do this. I think I'm gonna show you guys some more Twitter stuff. Far Awaitings, to give you some inspiration about the types of things that you can do. I find Twitter to be like so inspiring. And when I first got into generative art, like really deep into it, like three years ago, like this Twitter was what inspired me the most, because like these most amazing programs are just so incredibly tiny that like you don't, I don't know, I guess when I've always been working with video games for so long on this big projects. And even on my own indie projects, there are still like reasonably big. So thinking that you can make all these cool, amazing art, this isn't my stuff, by the way, I'm just searching by the top, most awesome tweets. Knowing that you can create this like awesome art with like such little code, I found to be so incredibly inspiring that I just wanted to learn how to do it. And I dove in and learned everything.

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.