 All right, good morning everybody. We're a little bit behind schedule, but I'm probably going to be on the short side, so we'll get you out to lunch before it's ravaged by everyone else. So thank you for coming in. It's my talk called Code of Art. I decided last year that I really wanted to speak at RubyConf, so I wrote three proposals about different topics to speak about. One topic I knew really well. One topic I knew pretty well. One topic I didn't know anything about. And so then, you know, kind of crossed my fingers and waited. And then I got one, two, three rejection letters in a row. I said, oh man, this is really tough. So then I emailed Chad, and I said, Chad, why do you hate me so much? How'd you reject? How'd you reject three proposals that I thought were all pretty good? And then somebody else canceled, and they decided, hey, you can do this one. And of course, it was the one I knew the least about. The reason I wrote this was that I wanted an excuse to learn about it. I didn't know anything about the subject, and I figured this was a good, high-pressure way to do it. So hopefully today you can learn a little something. Now to make one of my other presentations is about giving good presentations, and I will now proceed to break several of the rules that I lay out, one of which is relying on conference Wi-Fi to do things. So if you can, while we all raise Chad's room bill to astronomical levels, I would invite you to open a laptop if you have it, and please, Jim, install Ruby Processing. It's about a 12 meg download, so that'll take probably by Sunday it'll be done. And I just hope if we could get a couple of people with it downloaded, that would make me feel good. In the meantime, we're going to do some discussion. So if it's running in the background at a whopping 15 k per second, it's really kind of match to make fun of us in our third world internet this morning. Hopefully somebody could get it done. Also, everything that you see today from code, slides, PDFs of this document are all on my GitHub page here with the code of art. You'll see it there. It's the only public repository on my GitHub. So another rule that I've broken here is to make the AV people very mad. So we have the kind guys from Code Freaks here doing their awesome work recording. I said, yeah, so I want to use two screens, and I'm also going to switch computers in the middle. And at least I don't have audio, but it's kind of a complicated set up, my friend. Mark is going to help us when we get to the live coding part. I'm hoping that some of you can follow along and do some code. So to get into it, we're going to be talking about Ruby processing. Our goals for today are to define Ruby processing so you know what it is that we're talking about. Oh, I should actually plug my power in. To understand how it works, what the framework is, what it does with set up and draw, and to write a first sketch. So in processing, programs are called sketches. So what is processing? What can it do? What's Ruby processing? And then a quick tutorial about writing your first thing. That's what we're going to try and do in our 40 minutes. So processing is a specialized language built kind of on top of Java. It runs through the JVM. It is Java-like in its syntax, but it's kind of simplified. There are a lot of helpers and libraries to aid you in producing visual programs, visual sketches, so through several means. It was invented at the MIT Media Lab. And they really tried to make it easy for non-programmers. They wanted to get more artists involved in programming. Specializes very easily in 2D, so this is a little demo program called Pointillism that's pulling a JPEG image, finding the color code at random pixels, and then creating circles of that color code. So I'm showing you on the left side here is the code that runs this. We're gonna talk about how the structure works here. First, we require Ruby processing, create a class. The two keys to a processing sketch are the setup and the draw. Setup is a one-time automatically run initializer. Set your instance variables, your constants, things like that. And then draw is just run over and over. By default, it'll go as fast as it can. So here in the movie, it was drawing one point, each run through the draw method was drawing one point of the flower picture. So just going through this over and over. That's all a processing sketch is, setup and draw. Everything else from there, you're writing your own methods, you're invoking classes, you can utilize libraries. There's nothing magical beyond that. Setup and draw, that's it. So 2D drawing, we can see a few things in here. Most of this should look very Ruby-ish. There's like a load pixels method here which is pulling the pixels from the image. This is part of the Ruby processing library. Fill is setting a fill color and ellipse is what's actually drawing the circle. Ellipse takes four parameters, the X coordinate, the Y coordinate, the height and the width, or width and height. So like most graphics libraries, X and Y zero is up in the top right corner. And so you just say X 200, 200. So it comes over 200, down 200, and then draws a point-alize-size circle. So up in the top, I set my point-alize-size to 10 pixels. Okay, so simple example, not all that impressive. We can look at a 3D example. This is using OpenGL. If you have an old, sad MacBook like mine that doesn't even do hardware OpenGL acceleration, yours will be all choppy like this. These balls are following the mouse pointer as you can see and moving around in there, gravitating towards it. And so this is a pretty minimal example. But you can see there isn't a ton of hardcore graphics code in here. Basically, all flight patterns does. That's the name of this demo of flight patterns. It loads a couple libraries, these voids. OpenGL handles obviously the OpenGL backend stuff. And so this is taking advantage of processing Java roots because processing's written in Java. Ruby processing runs all your code through JRuby. When you install, when you do gem install Ruby processing, you get a packaged up JRuby interpreter so that your code is running through JRuby through the JVM. Because of that, you get the advantages of hooking up to the JVM, especially being able to use Java libraries very easily. So here it's using Java OpenGL libraries in a Java library called voids. Does some setup and sets up OpenGL. Defines a mouse pressed. So when you click on here, it changes from 3D specular balls to flat balls bouncing around. And the draw method, most of this is the complexity of making the balls track the mouse. You can get into kind of complex math pretty quickly as soon as, especially if you get into 3D, but still for rendering 3D mouse tracking stuff, you're still ending up with 59 lines of code, including everything. So it's made it relatively easy. You can also do video. So yes, I recorded this in my hotel room. I called it witness protection, just basically blowing up the pixels of a video and redrawing them as squares of 10 pixel wide. So you can kind of tell it's me. It's really pretty when you sit down with a video camera and like, oh, I need to record a video of myself. You're not quite sure what to do. So that's just, yeah, that's it. This is, the way I wrote it is extremely slow. So it comes out to like, it's not even, I guess it'd be half FPS. It's a frame every two seconds, three seconds. Again, if you have a nicer computer, probably go faster than mine. But just to look at how this demo is put together, requiring Ruby processing, loading a video library, importing the processing video library, a little setup information, and then a draw and draw point. Draw point is just my method to create the squares. But again, in 50 lines, most of which are simple. I'm opening up the camera, collecting video, interacting with that video, and outputting frames. So it is kind of amazing to me that it just worked. That's simply that I get the little light fires up next to my eyesight and it's on and working. So if you wanna do things with video, it's probably too slow to do in real time for most applications. But you can work with recorded video and you can output frames very easily. You can output JPEGs, PNGs, TIPS, and then you can combine those in QuickTime Pro and create a movie file from that. All right, and then interaction. Who doesn't love Pong? So this is the game of Pong. It's a little bit longer in terms of this code length because you're dealing with when the ball intersects with the paddles and what angle and bouncing off the edges and all these things. But still relatively simple. You can do interaction with keys with, I'm not a very good Pong player against myself, so I started missing, the mouse. It just makes it very, very easy. And it's especially easy when you start with an existing example. So I found myself really having, unfortunately I missed this morning, Adam Keyes gave a talk about having fun programming. And when I started working with these examples, really kind of unlocked some fun that I felt like I hadn't had in a while. Like I was just goofing around, how do I make my paddles bigger? How do I make them smaller? Speed up the ball, you can make the ball impossibly fast. So Jeremy Ashkenus, who's not here this weekend, wrote Ruby Processing, wrote the library that wraps Processing for your use from Ruby, made it really easy. He has a beautiful site with awesome projects on it, has ported a lot of examples from Java's Processing. And he's cool. So he really deserves any credit. He did all the hard work. So what I would like to do now, did anybody get the gem successfully installed? Zero, bam. Okay, well, Fantasyland, you all got it installed. Woo-hoo, let's build it. So I'm done with that. So this isn't the category of things not to do, like make your presentation complex enough to change. So I know as soon as you get out, probably at lunch, because you'll be salivating and you're so excited to try out Processing, you can hopefully read this little tutorial I put together. We'll walk through it relatively fast, especially since nobody's doing it except for Mark. So on the front, discuss a few of the key things to know about Processing, what we've already said. I show you a summary of the most important commands to know there's not much to it, especially when you're working in 2D as we're gonna be doing in this demo. Basically all you need to know are a few shapes, ellipse, quads, rectangles, triangles, and you can do some pretty cool stuff. All right, so if you look on the inside, it shows you with execution, we're already queued up here for RP5. RP5, when you install the gem, it installs this RP5 executable that runs your code through JRuby and all that for you. So RP5 has a few different run modes, the first of which is just run, which executes code as you normally expect. Watch will observe your code file and anytime you save changes to that file, automatically reload the window. So when you're experimenting, this is what I always use is watch. You can just make a few changes, Apple S and then see your sketch update. There's also Live, which I have not messed with very much, but it loads your sketch and an IRB terminal where you can kind of interactively reprogram your sketch as to advance for me. So we're gonna start up with a little bit of code, so this is what I call I0. It's pretty simple. We just set up, we set up background color is zero, so our background comes out black. Smooth is turning on anti-aliasing, and then I set ellipse mode and rec mode to center. They can either be center or something else I don't even use, I always use center, whatever. That's just basically, am I gonna specify the center of the circle or do I wanna specify the top left corner? I find it more logical to specify the center. And then in my draw, I set the fill, so a color of 128, 128, 255, it's RGB values, right, zero to 255, a stroke of white, a stroke width of 10, and drawn ellipse at x400, so over 400, down 300, and height and width of 100. Cut off my circle, now I'm an artist. I told you that set up is run once and draws run many times, but you don't really see anything happening, right? It is still running draw over and over. If we were to observe my activity monitor, we'd see, you know, 15% or something like that. There's code running, it's just drawing this exact same thing over and over, so we can't see any change. So what we'll do from there as we start working on I1 is to add in some animation. Simplest way to do this is start introducing some instance level variables. What I wanted to do was create kind of a scrolling effect where I draw some circles and then go down to the next line, draw more circles, go down to the next line, draw more circles. So we're going here, add a little bit of code to create the x, the y-start, the delta is gonna be how big the steps are, both as they move to the right and move down. I introduce a method, so I just call it blue circle. And at this point, this is where I think Ruby processing gets better than regular processing. It's kind of an aside. People in my business frequently ask me like why use Rails or Ruby when you can use Python or Django or PHP and KPHP and all those things. And I'm generally against imitation and so if you could use the original, why use an imitator? In this case, I think the imitation, the Ruby processing is better in many ways than original processing because I don't really like using Java. So as soon as you get beyond using two methods, if you're in normal processing, you need to start writing Java. And that's no fun, but we can write Ruby instead. So at this point, I've now transcended past what Ruby processing is giving me and just starting to write normal Ruby. I could import libraries. I could interact with a Rails app, a Sinatra app, whatever. It's just Ruby. So I created a method, blue circle, that is now parameterized with an X and Y coordinate. Pretty much the same code for actually drawing it. And so now you can see it steps along creating rows. All right, simple enough. And then I2, we're gonna start getting a little bit of interaction. So everything so far is just run it and things happen. Now I wanna do a little bit of interaction with the mouse. So there are a few predefined methods that fire events, respond to events of mouse clicking, key clicking and so forth. So if you scroll down, yeah, we have mouse clicked is when it's pushed down and released. There's also mouse pressed when it's down, when it first goes down, there's mouse released when it comes up or mouse scrolled. We'll get to that one next. So now all I'm doing is setting a kind of logo style like pen up, pen down is what I was thinking about when I created this was to make a draw on instance variable that's when it's on, draw a circle and then draw one, turn it off and just turn that flag when the mouse is clicked. So if we save it and run that, get a blank canvas until the mouse comes over and starts clicking things and just give one circle for each mouse click. Pretty simple, right? On the back page, it's not very interesting, right? So we said we're doing arts and we just made a few circles that all look the same. And that's even in modern times, it's not qualifying, it's very artsy. So I want to add in a little bit of variation, some colors, some transparency and so forth. It makes it very easy to deal with transparency, you just add on a fourth parameter, then anything that's a color, it's RGB and then transparency zero to 255. So first I define color set is a set of a few colors. If, is anybody else color blind? Just you and me. Well, if you're not a good with colors, there's a little book called the Color Index, which is amazing, it's about this big and you can flip through it and it has awesome color combinations. And so whenever I need to do something like this, I just pull a random page and then pick six colors that all work together and it gives you the RGB values or the CMYK values and they're awesome. So I pulled those out, all right? And then I created, if we go down a little bit Mark, there's a random color method that's just gonna select one element out of that array. Mouse press, still having the same function, just turning my drawing on. And then draw, yeah, if you go in the draw, I added in a few, a little randomness to the size. So it's just gonna add a third parameter to my circle. So specifying the D for diameter, diameter is gonna be random between 100 and 200 pixels. And that's it. And so now when we click, we'll get some different colors, some different sizes, okay? Getting a little bit better. And so then finally, I've now lost my animation. It's all mouse actuated. I wanted to add in a little bit of what we had taken out from I2. So if we go to I4, thank you. I set, I just built a little, go all the way up. I just set a D, D equals D start. So I wanted to, the longer the person kept the mouse down, I wanted the diameter to increase. So just have diameter as an instance level variable. Draw is pretty much the same now. Random color, same, random transparency up there a little bit, setting a randomized transparency. I also added in a little section about key interaction. It's built like a tree line. The mouse is not working. Okay, so this is what a key press event looks like. You could just say case of key. It gives you a string of the key that was pressed. So you can react to that. I said C for clear to background zero. S, that's all you have to do to output files is just say save frame and then give it a name. It auto fills in the numbers with the number of the frame it's on. You can specify different formats and I guess it reads what file name you've given. So if you say dot PNG it'll output PNGs or if you say dot 10 it'll output tips. It's pretty cool. And then just cue to exit. Mouse press is the same. Go down a little bit. Mouse release. So once the user lets go of the mouse, I want the drawing to kind of return to its start state. So to set the diameter back to D and then whenever you're dragging the mouse it's constantly increasing the diameter. So, move on that. Drag around. Mouse failure. So this, I know many of you are probably looking at this like oh my god this is always after for this talk like with the colored circle. But I swear if you try it out you will start to say to yourself like oh this is pretty fun. And that was really what I enjoyed about it. There are amazing examples available. So in the zip that I sent you are just the few that I demoed here. If I can pull down a pile of shit. If I go. There's, in the gem file itself he packages a bunch of examples. And if you go, it's like RP5 unpack samples or something like that. You'll get out about 15 different samples that try like fern shows you some neat recursion. Flight patterns is that 3D1 we looked at. Jay Wishie is kind of a famous little rotating thing. There's also a great book. If you get interested in this, this book is written for non-programmers. So for all of you who are probably better programmers than I am you could fly through this book in like a day or two. Just flip pages, I don't need to know what an array is. Just skip through. And everything, it's written obviously for original processing, so in Java syntax. But if you just take things that are camel cased in Java and just make them, you know, under whatever we call it underscore lowercase letters, it'll work. Like Java, I'm sorry. Ruby processing implements everything in like kind of a way you would expect. The method names are very similar. They're just so small changes. In this book, Jeremy on his GitHub page posted all the examples from this book converted to Ruby processing. So as you're following along, you can do everything in Ruby. And it's really pretty cool. And that's it. I hope you can give it a try. I knew we were gonna be fast and I didn't know we were gonna be quite that fast. So if anybody has a question, I'd be happy to try and answer it and apologize if I can. Yeah. Can you tell people a little bit about the relationship between processing and wiring? Nope. Can I talk about the relationship between processing and wiring? I have no idea at all. Should I? Okay. I can repeat it. So wiring is an environment for, oh yeah. So wiring is an environment for doing like physical computing stuff. So there's a wiring board that's like sort of like a super huge Arduino if you've ever seen such a thing. And wiring is the processing environment or the environment that you used to program it. Processing was, I actually can't remember which one came first, but they are very similar environments. They come with a similar set of libraries. They're obviously meant for doing very different things. But processing wiring and the Arduino development environment all kind of share the same, like the distributed ones all kind of share the same thing. And processing and wiring are both kind of set up to be able to talk to each other as well. So you can do physical stuff with the wiring board and the wiring environment. And then it very easily allows you to talk to processing to do visual stuff on your computer. Thank you. That does remind me. I wanted to mention that some of these Ruby-based processing projects are not stagnant, but it doesn't seem like many people are using it. If you search for examples, there aren't a lot of like blog posts or libraries. If you look at the GitHub page, a lot of it is from 2008. Everything I used worked, and 90% of it was all from this one guy. So I would really encourage you, if you find it interesting to try writing a little tutorial about it, try to pump it up a little bit because it's really pretty neat. Next question, yeah. Can you handle gestures? I think it would be pretty difficult. I would guess you would have to look, like maybe if there were a Java library that could do that. So if it weren't complicated enough for you to like run Ruby, talking to JRuby, and then in parallel to run Mac Ruby, talking to Coco and pool all this data together, then yes, you could do it. As you're like, that's four interpreters running at once, which would be, it's kind of impressive. And after all that, you can make some awesome circles. Yeah, color index. If I had wifi, I would pull it up for you. There's a whole set of little books, color index, type index, color index to photo idea index. It's like one guy, he writes them all, and they're awesome. They're also bound with like a plastic cover. So after you pull them out and read them a hundred times, it still looks great. It doesn't get beat up. Color schema, I haven't seen that one before. Software. Color schema studio. See, I told you I already pissed off the audio guys like once or twice. This is just learning processing. Simple enough. Yeah. So then I can use this kind of thing in a web app. Do you know anything about that? Can you talk about that? I haven't experimented with it, but I was thinking a little bit what it would look like, and I think relatively easily, you could stitch this together with web apps to generate images in the background, which could be pretty cool. Like I was wanting to experiment with creating graphs and things like that, data visualization. There's awesome work. So I know I saw at least one person from sunlight labs around this morning. So Jeremy did a project, has done two projects for sunlight labs, apps for America project, to mix data and processing. So he wrote one that maps earthquakes using like a 3D globe and pulling GIS data about where earthquakes are occurring, I think this year and maps it all in 3D, which is pretty amazing. There's another one he did called Node by Congressman that uses processing. I think there's good potential there for interfacing with web apps. I haven't seen much of it done. And that could be that I just haven't seen it, but to me it's, there's like fertile ground there for a little maybe like Ruby Rails and processing integration to do some neat back end stuff. Yeah. Can use processing.js is another library so you can use it directly in JavaScript if you want to access all the processing capabilities except that last time I heard it only did the two dimensional part. Okay, so there's processing.js that can do JavaScript-based processing interaction. You can also, the way they have the JRuby interpreter packaged up, you can load them as like applets if you want your web server and your user to transmit 12 megabytes each time they load your page. It will work eventually, but yeah, you have to like wait and come back. Yeah. You're on, Mr. I was trying to understand how it works since you said it keeps on repeating. Is it trying to achieve some frames per second or does it... You can specify, so the question was draw, does draw have, is it trying to achieve something? And so you can specify a max frames per second and it will try and go up to that. So typically a lot of examples will say frame rate 30, you know, it's just a typical frame rate, but otherwise it goes as fast as it can. As fast as it gets through it, it'll just call it once again. Yeah, exactly. Any other questions? All right, enjoy your lunch. Thanks. Thank you.