JS GameDev Summit

JS GameDev Summit 2022

Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to make amazing generative art with simple JavaScript code

So, hi, everybody. I'm Frank Forrest. I'm 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 focused 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 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 like 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 like remix ideas. Like a lot of these are kind of remixes of other people's stuff. 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 like topic you can imagine. I'll sort by my most popular ones. Like 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. Like you can see the code is literally right there on the screen. So if I was to like, for example, go to one of these, now you can actually see the code right here and you can even like edit the code. This is the kind of thing I'm going to be showing you. We're going to work towards this. So 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, you know, what's going on with this generative art. I can make these instead of bigger squares, I can make them like tiny, tiny squares. Or I could put like, you know, a whole lot more of them maybe or whatever. So that's what we're going to be playing around with today. So I see 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 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 like share your screen, if you're working on something because like, we are going to be like maybe remixing some of each other's work. I think that would be kind of fun. So let's start like 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. 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 have 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. We do script in these angle bracket tags, and we do a slash script to end the block. Now we've got 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 automatically 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. JavaScript is so flexible, you can put a, you should end lines with a 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. Okay. Now we 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, that is, these are the building blocks. At the fundamental level, you will be calling fill rect. And a lot, most of my art uses fill rect or like draw, 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 our 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 basic, 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 context 2D, which is kind of our interface for drawing and stuff to this specific canvas. And it's stored in the variable called X. So we'll do X dot fill style equals red, just the word red. And then go over here, hit F5, they should have a red rectangle, right? So usually though, you're not going to use like 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 this, these hex codes. So you would use a hash symbol and then there, you can either do six or four or three numbers. I just usually three. So that's going to be the red, green, and blue components. So if you do F, that would be full red, zero, zero. Let's do a green. So it'd be zero red, zero red, full green, and zero blue. And we've got that. Now, of course 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. It didn't work. It did not work. Okay. 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, but you can, 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's, why am I, oh wait, this, okay. Let me bring my chat up so I can see what that's saying. Okay. 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 idea what people don't know. So, oh, maybe I'm off the canvas. Maybe I'm. Yeah. What's the size of the canvas by default? It's, I think 300 by 150. I think you might be right. So let's make the canvas bigger. Okay. So I'll show you a trick to show the full canvas. So what we can just do is do a full 1E9. So when you an E, something like 1E9, that's scientific notation. So that's just like a real 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 of different ways to set the size of the canvas. You can just do it just like this. C.width equals whatever you want it to be. I'm just going to use scientific notation here. You want to make it bigger. Wait, that thing should go away. Okay. We made it bigger. I want to show you really quick another trick to get rid of, do you see this little white gap on the left, top left side of the image here? Let's make these, 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 scroll bars and we don't want little gaps. We don't want any of that. So I'm going to put another tag in here, a 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 fold 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, what am I talking about? Body style margin, width and height. But yeah, you can either, 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. You know? And if you do that, you may want to add a style tag in here that says something like, kind of like,


Frank Force

LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>