 Okay, this is working. I hope. Cool. Hi. I'm Lauren. I am the faculty at NYU in a program called ITP, which stands for Interactive Telecommunications Program and this sort of arcane and meaningless name basically describes a program where we like to think that we are exploring the recently possible. So it looks like kind of like this. It's about 200 students on the floor, grad students, and they make things like this. And I started feeling a little self-conscious that there wasn't enough data viz in my presentation, so I included the obligatory kinetic penis wall that we have on the floor here. It was made by Peckysu for all your everyday data visualization needs. It's a great project. But what I want to talk about today is P5JS. And so P5 is a project that I've been involved in for about the past two years. And I think, you know, when you see these tools that people make or these libraries, I think there's different reasons for doing them. And sometimes it's like there's something you think just needs to exist and it doesn't and it would make your life and everyone else's lives so much better if it did. And so you just go and make it. Or maybe you're just awesome at something and you've made something awesome and you want to like share that wealth and that cool thing with everyone else. You make a toolkit. Or maybe it's some part of your ongoing research. And these are all great reasons to make toolkits, but it's not really the reason that I got involved in this project. And in fact, I didn't really ever mean to do this. I guess at some point I did maybe. But anyway, so what happened was, you know, I was a couple years out of grad school and I was working at Tulsa Limited, as Irene mentioned, and I was making some of my own artwork and I was using a lot of open source tools. And it sort of occurred to me that I would kind of like to contribute and give back a little bit and work on some of these tools. So I started trying to do that, you know, tried to join some mailing lists or figure out how I could help. And the response I got a lot of times was kind of like, it's too complicated to explain to you or it's too hard, you know, maybe just like answer some questions on the forum, which is a great thing to do, but it's not what I wanted to do at that time. So I kind of gave up. I thought, you know, if I'm really going to get involved here, it seems like I'm going to have to really elbow my way in. And that's not really my personality. I'm not. I don't really like force myself into things like that, at least not social situations. So I kind of let it go. And then a couple months later, I met Casey, our advantage to Casey reset a conference. And for those of you that don't know, Casey, along with Ben or Fry, created this tool called Processing, which they started working on in 2001. And it's a Java based toolkit whose goal is to make coding accessible to artists and designers and educators and beginners, and also to start to introduce visual literacy to programmers. So this tool has been widely successful and, you know, it's been going on now for nearly 15 years, and is taught in academic programs in terms of art and design, but also even in some engineering programs today. And so it looks kind of like this. So you're dealing with Java, but you're not immediately thrown into a eclipse in figuring all that out. And you can really quickly get something cool onto the screen without having to jump through all the hoops that you normally would with Java just to get, like, a wreck to show up. So this was exciting and it was approachable. And so anyway, I was talking to Casey, and I was kind of mentioning my interest in getting involved somehow, but, you know, finding it difficult. And I was saying, you know, I wish there was something I could do about this lack of diversity in these communities. But I don't feel like I want to go start a woman coding meetup, although they're great. It didn't feel like my thing. And I didn't feel like I wanted to, you know, I didn't feel like I was going to be an activist or an advocate or someone that's, you know, speaking about these things. And I said, I don't know, you know, what to do. And he said, well, maybe you don't need a big plan or a scheme. Maybe if the opportunity arises, you just take it to, you know, do something, contribute something. And you can just be one more woman that's involved and, you know, go from there. So I thought, okay, yeah, if the opportunity arises. And so of course, it did a few days later when he wrote me and said, so you want to work on processing? And I couldn't really say no at that moment. So, so what we decided is that I would be a processing fellow, which meant for three months, I would work on something related to the project. And at that time, I was really excited about JavaScript, because I had like just learned how to, you know, write my first JavaScript program. And so for some reason, the processing foundation thought I would be like the perfect person to reimagine processing for the web. And it was not meant to be a huge project. It was just three months, do some experimenting, make some little prototypes, and, you know, there'll be some research. So this is cool. This was it. I finally had my chance. I was going to do something. And so I quickly got started spending the next three months doing absolutely nothing. Because I didn't know where to start. And I was scared. And I, you know, I barely knew JavaScript. I didn't really know processing that well even. And I didn't know how to think about making a tool or a library or how to bring two different languages together. And so I mostly spent that time just sending emails explaining that I needed more time and making excuses. And I think, finally, Casey said the same thing, you know, you don't need a whole plan. Why don't you just try and do something and do it by next week, if you can. And so I did. And as soon as I just got down to it and stopped being so scared thinking about, you know, the size of this imagined task, I found it was pretty easy. Actually, if you don't know very much about JavaScript, it's not too hard to write some functions because you're not thinking about, you know, how to make it perform well or documented or fit together or be extensible. So I just started implementing some of these first processing functions, like setting the background, drawing an image to the screen, setting the size of the, of the canvas. And so this was exciting. And it was kind of fun. And it was an experiment. And then I linked up with Evelyn Eastman. And the two of us would, you know, sit around and drink champagne and work on this tool. And she, we were both going to teach a class at RISD, intro programming. And so she said, why don't we use this tool? And I thought, what could go wrong with that? So it was very in progress. You know, this was like the alpha, alpha, alpha. And we didn't, you know, we just kind of went in there and wrote on the whiteboard, okay, install Sublime, go here. And we didn't have all these things like books to teach with or online materials or forums or documentation or a working library. But I think that they understood the kind of spirit of it. And so, you know, our, this was our syllabus or similar to our syllabus. And we always included this disclaimer slash invitation, which I don't know if anyone felt like it was a very cool invitation. But it basically said, like, this might not work. Have fun. But get used to it. And once you get used to it, it'll be even more fun. But I think that they understood the spirit that it was an experiment and that it was exploratory and their work that the students made with it really captured that. They really made things that showed that they were just as fearless, that they were okay with things not working, that they were willing to take risks. And this was exciting. And so, at the end of that semester, we realized that it was, it was becoming maybe more than just a three month experiment. And that maybe we could take this further. And we got some great help from some of the engineers at Boku, which is awesome. And one moment I remember, you know, we spent a couple days there just working with people. And we sat down with Ben Alman, and he offered to do a code review for us. And I think if I knew then, what I knew know now, I would have been like mortified to show this code. But I didn't. So I was like, Oh, here it is. And, and he looked it over very seriously. And then came back and said, So you might not want to put all the source code for your library into one file. You might want to develop some guidelines around spacing and, you know, equal signs, etc. So we looked, you know, looked all these things up. I learned about grunt. And we started kind of this stuff forward from taking this from a prototype or a proof of concept to something that could, you know, be a little bit more. And the whole time we're kind of like, What are we getting into here? You know, it wasn't ever like, Okay, we're going for this. We're doing this. We started getting some support from IDP. Dan Shipman was very excited about it. He's another one of the professors there. And we got some students working with us last summer through Google Summer of Code. So this is Sam Levine working on the IDE. This is Scott Garner who worked on some of the intro materials that I'll show in a moment. And Jason Siegel, who has done a lot with the sound. And we would have these meetups at IDP every two weeks. And basically a group of people would assemble and then like look at me as if I had some idea what was going on. And I would pretend like I did. And it was terrifying. And, you know, I kept doing this and then it started to get less terrifying and really cool. And now we have a group of about 20 people that get together every couple of weeks and are kind of like working independently on this. So that's kind of the, that's the origin. I think the cool thing was that, you know, we're all learning together and we're making together. And nobody in this room was a pro, but we were okay kind of collectively getting on and saying we're going to try to figure it out. And IDP was on that mission also. So what is P5? I guess I wanted to show. So we launched it. We made this kind of really goofy thing and I just thought I would show a little bit of it. Hopefully it's not too soon. Hi, I'm Lauren. And today I'm excited to introduce P5.js. P5 is a library that takes the core ideas of processing and brings them to the web. So you can do everything you've done with processing, but do it in JavaScript and some new stuff too. All the examples you see here were made with P5 and at the end you'll be able to see how they work. Here to show you some specifics is Dan Schiffman. Hi, thanks Lauren. Thanks for having me. My name is Dan and I'm really thrilled to be here to talk about some of the features of P5.js with you. So what is this P5 thing anyway? And what are the things you might do with it? Well, one of the core features of P5.js is drawing shapes. If you use processing before, it's really just the same. You might draw a circle or a square, a triangle or a beautiful flower. Flowers are one of my favorite things to draw. But let's put the flower aside and let's go back to that circle. This nice round circle. How did this circle appear here? A line of code. This line of code. This line of code made this circle appear and this is the thing you'll need to learn to syntax this way of writing code if you want to draw and design your own shapes. But the thing is this is real time software. This is happening right now. This circle can be interactive. You could click on it and it'll change color. Go ahead, click on it. Watch it change color. This is the code that made that happen. But here's the thing. This is the thing I'm the most excited about in terms of P5. We are here. I'm here in this web browser. I'm not really here, but you know what I mean, right? So the web. It's a powerful medium of communication and there's all sorts of things you can do on the web. All the things you can do with the web, you can do with P5. So we can start adding HTML elements to interact with, like a slider. We can put a slider here. You can slide it back and forth and you can change this circle's color. How did this slider appear? A line of code. Create slider. I just really, really love this line of code. I think we'll stop there. So one of the lessons I learned is if you want to do a project like this, it really helps to have someone that's very excited on your team. So that's great. So anyway, that's how we introduced it. And the idea is that you can use the tools you're familiar with. So you could use your favorite code editor and your favorite browser and just start making stuff in kind of immediately. And if you're coming from processing, it's very easy to port one to the other. So the language is very similar, although it diverges where necessary. And, you know, we're starting with the same drawing metaphor. And so this is an illustration by my friend Tayun Choi, who's making the drawings for the upcoming Getting Started with the P5.js book. So this is describing the Create Canvas function, which is kind of your starting place. And the idea is that it's not just the canvas. So there's, it's bringing together JavaScript and HTML, Vive and CSS and trying to make it so that you don't have to learn everything about this whole stack when you get started. You can just start playing and then you can go deeper into all of those as you need or as you want. And so we spent a long time working a lot on the documentation. So trying to make something that's kind of interactive and self-explanatory, so that you can start playing immediately and see how it works. And then also making a lot of examples that work just right in the page. And you can, you know, play with these things and update and see your changes happen without having to download everything and set it all up yourself. And then if you're kind of interested in it, then you can grab that code and drop it into your browser. So trying to make it so that you don't have to wade through Stack Overflow or some very complicated reference or documentation. And then there are new things we had to deal with. So, you know, asynchronousity and callbacks. And so, you know, there's now a method like loadJSON from processing has the ability to take a callback and to deal with that data. But then we also have other things like there's kind of two options. You can use this preload function that's kind of like a promises solution that you can first just call loadJSON like you're used to and then use the data later on in your setup and draw functions. We felt like touch should just work out of the box because it's so easy to get it onto mobile and it's one of the things we're excited about. And we are making a lot of examples and really excited about the possibilities of, you know, working with WebSockets and connecting with a node server and having networked experiences. So this is a thing that's not This is a project by Coven Verdi where it's an interactive soundscape and you play with it on your phone and then it aggregates everyone's interactions into this digital mural. And then the other thing is it should work well with other libraries. So this is a face tracker library. And you can see you can integrate it right in. And this is kind of like a basic mode. So you just start writing and everything is appended into the global namespace. But then if you want to get a little bit cleaner about it, you can wrap it up into what we call instance mode so that all the variables are wrapped up in one namespace and it plays even nicer with other libraries. And then we're building some libraries of our own. So once I have to do with manipulating the DOM or playing the sound and we're adding so many ones this summer as well. Okay, so I just wanted to try and do a quick live demo because I thought that would be like the most potentially disastrous thing I could do. So I'm going to flip back and forth. I hope that's okay. One of my scenes told me it gives her a headache when I flip, but I'm under a time crunch. So I apologize for the migraines. Okay, so this is what you would do if you're making P5. I've got a bunch of things linked in here, but you know, you link in the library. Here's my JavaScript file. And the basic metaphor with processing in with P5 is that you have this setup and draw. Things in setup happen once in the things and draw loop over and over. And so it's procedural. It's not a scene graph model. So you can it works really well for drawing programs and things like that. So that's what I'm going to do today. So I'm just going to make a little canvas. And I'm going to just draw something based on my mouse position. Hopefully that works. Okay, cool. So we've got that. I could make it look a little bit nicer. Switching the color mode. I'll set the fill color to kind of loop around. And then maybe I'll map the size instead of just 50 here to the mouse. Why so? Okay, so now I've got something that looks a little bit prettier. So that's kind of your basic, you know, Hello World program with P5. And then you could get a little bit more into it. So maybe I'll add in like audio input equals new P5. And then let's see, we'll just draw this to and then here instead of mapping mouse Y, I'll map the mic level. I'll also do the Y position. So the mic kind of goes from like zero to one, but I'm just going to make sure we get all the way there. Okay, so if I did that right. Okay, so that's fun. Okay, so then let's add the webcam. So we capture and we'll just grab the video so you don't hear the echo back. And I'll set the size to be the same as the canvas. And I'll set the position 00. I'll make sure this one's at 00. And okay, so now we should have my face in there. Okay, that's cool. But it'd be cooler if I could draw with my nose. So I'll add a tracker in there. So this is from another library that's based on Jason Sorai's face tracker research. And it's pretty easy to use and pretty cool. So I just pass in basically the capture element into this tracker and I initiate it with a model. And then here I could get the position. So if you look at this library, it, you can see there's actually like numbers for all these positions on the face. So I'm going to go with 62, which would be my nose. So something like and then here, we'll keep the audio size mapping. But here, instead of this X and Y, I could say something like, you know, get the 62 point and get the X and Y position. Okay, let's see. Okay. Now I feel like I should pass out, but I'll just keep going. Alright, so that's a show me and there's a whole lot more that you can do. And it's it's very fun. And there's lots of cool things. So I just wanted to share really quickly some of the work that other people are making. So I just, I wish I could show you these on the browser because there's something exciting about seeing that but I just made a video so I don't have to worry about it all so much. So just starting out, this is some student work. So this is from our first RISD class. And so these students have been programming basically, you know, one to maybe three weeks. And so they're exploring, you know, transformations, working with different media. There's artists and designers in the class and architects and you can see them each kind of bringing their own excitement to it. This is a piece by Kevin Verdi where he searches Instagram. It's a bot searches Instagram finds sunsets, uses P5 to pixel sort it and then post these prints online. This is by Mark Abbey playing with emoji. This is a piece by Kate Massoud that was trying to make a more interactive way for people to explore the Cooper Hewitt collection. This is another piece by Mark Abbey exploring storytelling. So it's a much longer interactive experience, but I'm just trying to see clips here. This is a piece by Jason Siegel, Michelle Chandra, Pam Lou and Ziv Schneider. So yeah, and I'm really excited about kind of the diversity of things that you see. It's not one particular type of aesthetic or goal or idea. So what else? So I'm really excited this summer. We have some Google Summer of Code students joining us to work on things like adding WebGL and 3D and shader support finally, adding SVG support and export to PDF, better mobile integration with things like phone gap, exploring serial communication OSC so that we can connect to things like Arduino or Connect, better documentation and adding a gallery finally. So that should be cool. The other thing we're doing at the end of May is one week contributors conference hosted at the Studio for Creative Inquiry in Pittsburgh. So it's going to be a one week conference where we work on all aspects of P5, not just or including, you know, fixing bugs, adding new features, adding documentation, but also things like thinking about outreach, community design, internationalization, university. And this is something that's really important to us and really important to me thinking of considering the place that we started with this project. And so this is open to anyone, you know, we have limited funding to cover travel accommodations and food. So if you're interested, go to this link and let us know in the form. And we'd love to have you join us. There's no specific skill set that you need to have just excitement and interest in being involved. We're also looking for companies that might be interested in supporting the event through scholarships for people that want to come or supporting some of our diversity events that we're planning for the week. So you can also get in touch if you're interested in that. So, you know, there's all the technical things, but the thing that's been really, and maybe this is clear for my talk, exciting to me about this project is a social aspect and thinking about how to communicate in line, how to have these conversations and how to set a tone for the community, how to be hyper aware on these, you know, GitHub threads, which is not too hard for me because I'm very sensitive. To language that might seem kind of aggressive because an understanding that everyone has their own communication style, but together we have to find a way to make sure that everyone can express themselves and feel comfortable doing that. So I'm really thankful for the opportunity that the Processing Foundation gave me two years ago. You know, they took a chance, I mean, I didn't know what I was doing, and they gave me the chance to learn. And I think this is what's so meaningful to me about this project. And if anything carries on, I hope it's that spirit, you know, that you don't have to be an expert or a pro or know exactly what you're doing or have a whole plan, that you could maybe just start doing something and learn along the way. And so I know there's still a lot to do for diversity in terms of access to these tools or having the time to get involved at all. But I think as a first step, we can make sure that everyone that feels interested in being involved doesn't feel excluded or afraid or unqualified, but feels invited and welcome. And it's really important to me in this project. But I think, like all of you today sitting here seeing all these different tools and frameworks, you know, if you are kind of wondering or thinking about getting into it somehow, that you feel, you know, willing to, like maybe we'll take a chance. Because I can say that it's worth it. And like Casey told me, you don't need a whole plan. You can just start and try something. And as a community, I hope that we can, you know, work together to open up this space so that anyone that wants to can have the opportunity to engage, to be a part of it, to make, to lead, and to learn. Thanks.