 I don't know how that name will push people, but whatever. So hi, people. Who's here for the first time ever at TopJS? You people? OK, cool. Me too. Hi. So I'm going to be talking about generative art reprocessing JS, and don't worry about the big words. We'll talk about them later. So my name is Sherman. Ooh, that does not look good. It's supposed to look like an image. This is why you always host images locally, don't? Yeah. Yeah. Oh, no. That's terrible. I'm connected. Anyway. OK, there we go. Yes. And then our phones are loading. It's the wrong phone. OK, doesn't matter. So my name is Sherman. I'm a front-end web engineer, which means that I have to love JavaScript. I am Malaysian. I just spent the last 18 weeks of my life at the Request Center in New York City. A little bit of a plot. For those of you who have not heard of it, it was formerly known as Hacker School. And it is an educational retreat for programmers. So if you want to take time off from working on work stuff and you just want to take time to learn things that you're interested about, it's a great place. And you work on projects. And you meet a lot of cool people. So it's also free. And while I was at the Request Center, I discovered this thing called generative art. So I really like programming and art, but I find it really, really hard to consolidate the both of them. How do you create art with programming? So what is this generative art thing? According to Wikipedia, it is art that has been created to use of an autonomous system that is non-human and can independently determine the features of an artwork. For example, art that is generated by algorithms. But my sister just calls his screensavers. If you remember this from the 90s, 3D pipes was the bomb. And this is my favorite. I don't know if you remember the old version, but old version had straight lines, and they only had one or two colors. This is like the Windows 10 version, which is like extra fancy as a curved lines and everything. It's called mystify. So if you have Windows 10, please use it. It's awesome. So some examples of generative art that I worked with on processing JS. I don't know if you can see this. Can you see this? All of this is running in a browser right now. My presentation is on review JS. So very screen-savory. That's fun. Something like this. And in case you can see it. Yeah. Yeah, it's a bit of a niche art where it's interesting enough that you can stare at it for hours, but at the same time, it continues to surprise you, but it's not too engaging. This is inspired by a famous generative artist, programmer, Jay Tarbell. And I've included links to some really interesting generative art that all of these are generated with the user algorithms, and it's a little bit different every time you run it. Here's more. And this one's really cool. We have two checkered patterns, overlaid on top of one another. If you rotate one, it gives you some really trippy effects. So cool stuff. So all of this is done in processing. This is also an older processing project, but it's all running on Java applet. So you can view it, sadly. And you're like, what is processing JS? And to talk about processing JS, we first need to talk about processing, which was a language that was invented to make it easy for people who are not programmers to learn how to code or to do visual things in the context of the visual arts. And it comes with IDE. And when it first came out, it runs on Java. And everything that was compiled were Java applets, which is great, but that's not how we do things anymore nowadays. And the language looks a lot like Java. If you've ever done anything typed, this should look familiar. So Java looks a lot like JavaScript. So hey, that's great, but with types. And yeah, I'm going to just run this code here to show you what it does. So in processing, you have two major functions that you need to have, set up and draw. And they do exactly what they say. Set up, set things up for you, and draw, draw things. And if you've ever done animation, drawing draws stuff on every frame. And in a typical animation, you can have like 60 frames per second. So it gets updated every time. So for example, here, whoops, wrong. No, don't save. And I have here running on webpack. Ooh. Did I not save? Oh, did I not save? No, that's terrible. There, OK. So in this case, set up here, set the canvas size, and the stroke, which in this case is setting it to be white, and sets the background color to this nice little chic orange color. And draw just draws a line from the starting point here, x and y, to your mouse, x and y. So if you go here and do things, ha ha, lines, yay. So it's really simple, and works really well. So we ran that. And Processing.js is the JavaScript part of the processing language. So it compiles processing code into JavaScript. And it uses the browser's Canvas APIs, because web and because Java app is no longer supported on Chrome, so sad. So I'm going to do a little quick demo. I'm going to do a little quick demo of how you do things in processing. And hopefully, this would explain things. And I realize I'm blocking the screen. Let's see. Oh, OK. Yes, that's right. I was like, but not very pretty people on the sites. All right. So for example, if I don't want to draw a line, let's say, I'm just going to move this out to the global scope. And I want to draw a circle centered at x and y. And I want it to be 50 pixels wide and 50 pixels tall. And cool. So the origin. Where's the origin? Origin of the circle. Stand third. No, I mean the whole Canvas. Oh, the whole Canvas. It's just top right. You can set it. You can position it using CSS or regular styling. It's all actually just a Canvas thing. So if you right-click an inspect element, it's a JavaScript Canvas. But hey, so great. We have a ball. It's not really doing much. Let's say I want to move the ball to. And at every frame, I want to update my x position. Velocity. Great. We have it moving. But because it draws over and over again, you see the position of the ball before. So in order to do that, I want to update the background at every frame. So hey, we have a moving ball. Great. But it goes over the screen. So not very cool. I'm going to call this velocity x so we can specify that. So in the case of the ball going off the screen, so if x is more than width. And in this case, width is a global variable. That is the width of the Canvas. So in this case, it's 400 pixels. Or x is less than 0. I want to change the velocity. So instead of going one way, it will go the other way if it hits either end. So velocity x change direction. And this should make it bounce. And we have a bouncing ball. We could also do the same thing for the other way. The other for the y direction. And copy, paste, copy, paste. Always remember to change your variables when you copy and paste. Yeah. Yeah. La, la, la, la, thanks. Yes, good call. And we have a bouncing ball. So this is really nice because it's very intuitive and it's easy to use. You don't have to do crazy things. If you've ever worked with JavaScript Canvas, you realize API is very, very verbose. So that's great. You can put more bouncing balls if you wanted to do more interesting things. So yeah, that's processing. And you're like, oh, I mean, this is not in JavaScript. This is processing. We're here for a JavaScript meetup. You can also run JavaScript code. So for example, and it will leave JavaScript code alone. Or console.log, whatever. And you can have a mix of processing in JavaScript, which is not totally recommended. But you can if you want to, which is nice. Let's see. Yeah, so if you're curious or you want to learn more about generative art, you check out the galleries that I showed you earlier. And they're also a lot of great resources. There's the ProcessingJS, a lot of syllables, ProcessingJS learning page, which has examples of how to do things. It also handles mouse interactions. So you can build really cool games with processing. Documentation is fantastic. And there's online editors and also courses on how to do things in processing. So yeah, if you're ever curious about generative art, you come and talk to me afterwards. Or if you have questions, you can ask them now, because we have time. Any question? So just now, right, did you say that the result is not deterministic every time you run it? It depends. So in this case, it is because I didn't include any randomness. But for some of the art that I've done, for example, like this one, it's non-deterministic. Because I place things randomly. And it grows at different rates and things like that. And it has a different color every time you run it. Most times, oh no, it's purple again. So a lot of generative art has randomness added to it to make it more interesting. Like how screen savers have to be used slightly random. Yeah, any questions? What's? You choose processing.js. But we all know that there are a lot of animation like the Snap, Canvas, SVG, whatever. What makes you choose processing.js? That's such a great question, because I actually had a question before this. And I was like, oh, why use? I was like, just in case. So I guess it really depends on how much control you want over things. The reason why I like processing is because the API is really simple, and it comes built in with a lot of useful tools. So for example, if you're working with, let's say, the Canvas API, and when you're reading images, you have things like they come in RGB colors. And if you want to change modes, it's really difficult. But processing comes in with a lot of really nice features. For example, if you want to change mode to like HSV, you don't have to do the Mac yourself. All of this is built in. You also have things like there's only one way to draw ellipses in Canvas. And in processing, it gives you tools like, oh, if you want to center my element at the first two parameters, I can if I want to center it at the corner. Sorry, put a corner of the ellipse at this corner. I can. So it's really convenient. It allows you to not worry too much about the details and a low-level implementation of things. Because previously, I was working with the JavaScript Canvas API. I was just like, oh, it's little things, contacts, blah, blah, blah. And processing wraps around that very nicely. Good question. Question? OK. Yes? Yeah. I only prepared one, and we're just going to do that. Yes? Where was it again that you did this? I'm glad you asked. I was doing this thing called the Recurse Center. If you guys have time, you should check it out. If anybody is a programmer and if you like programming with other people, it's a project-based, self-directed retreat. And it's based in New York City. It's free. And people come together and work on very different things. So we have people who are front-end engineers and people who are more hardware people. Yeah? Are you going to do it here? I wish there was one in Singapore. As far as I know, the only people who do it, you're talking about a center, not processing. Processing, are you? Yeah, you should do it here. If anybody want to run it, I would participate. I don't know if I want to run it. What program will you just walk in at any time or just walk out? There are batches. So there's a start date and end date, and batches overlap. And it runs all year long. So yeah. We totally recommend. It's funded by the city? It's not. It's free. The way they fund themselves is by they help me find jobs after the program ends. And they partner up with companies. If companies hire you, they pay the request center a small fee for your thing. So they also work as a recruitment thing. But it's no pressure whatsoever to do things. Yeah, if you're curious about it, you should come talk to me about it. Awesome place. Yeah. More questions? Cool, awesome. All right, thank you. Thank you.