3 Playing with code
The aim of this course is to Design algorithmic wallpaper for a place in your home. You will be playing with code to make algorithmic tiles and then arrange those tiles into a larger wallpaper pattern (see Figure 5).
In this project, you will be using p5.js, which is a programming library that uses the JavaScript programming language and syntax. There are many different programming languages available; for example, you may have heard of Python, Java, or C++. Every language has different strengths and limitations and they have a slightly different syntax – meaning the grammar of commands that they use.
We have chosen to use p5.js because it is based on Processing [Tip: hold Ctrl and click a link to open it in a new tab. (Hide tip)] , an open-source software, which was developed for artists and designers for its ease of use and its ability to quickly get visual output onto the screen.
Here is a talk by Lauren McCarthy, one of the founders of p5.js, about the origins and spirit of the p5.js language. It is a lovely video, but you only need to watch the first 14 minutes or so.
Download this video clip.Video player: Video 2
Transcript: Video 2 Lauren McCarthy discusses the making of p5.js
LAUREN MCCARTHY
What I want to talk about today is p5.js. So P5 is a project that I’ve been involved in for about the past two years. And I think 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 share that wealth and that cool thing with everyone else so you make a tool kit. 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, I was a couple of 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. I 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. 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, 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 force myself into things like that, at least not in social situations.
And so I kind let it go. And then a couple of months later I met Casey – or I ran into Casey Reese at a conference. And for those of you that don’t know, Casey, along with Ben Fry, created this tool called Processing, which they started working on in 2001.
And it’s a Java-based tool kit 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 it’s been going on now for nearly 15 years, and is taught in academic programmes in terms of art and design, but also even in some engineering programmes today.
And so it looks kind of like this. So you’re dealing with Java, but you’re not immediately thrown into Eclipse and 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 a rect 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 finding it difficult. And I was saying, 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 – I didn’t feel like I was going to be an activist or an advocate or someone that’s speaking about these things. And I said, I don’t 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 do something, contribute something. And you can just be one more woman that’s involved and go from there. So I thought, OK, yeah, if the opportunity arises.
And so of course, it did a few days later when he wrote me and said, so, do you want to work on processing? And I couldn’t really say no at that moment. 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 just learned how to write my first JavaScript programme.
And so for some reason the Processing foundation thought I would be like the perfect person to re-imagine 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 it’ll be some research.
So this was 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 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 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.
[LAUGHS]
And so I did. And as soon as I just got down to it and stopped being so scared, thinking about 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 how to make it perform well or document it 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 canvas. And so this was exciting, and it was kind of fun, and it was an experiment.
And then I linked up with Evelyn Eastmond. And the two of us would sit around and drink champagne and work on this tool. And we were both going to teach a class at RISD, Intro to 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, that was like the alpha, alpha, alpha. And we just kind of went in there and wrote on the whiteboard, OK, instal 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 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 will be even more fun.
But I think that they understood the spirit, that it was an experiment, and that it was exploratory. And the 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 OK with things not working, that they were willing to take risks. And this was exciting.
And so at the end of that semester, we realised that 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 was awesome. And one moment I remember, when we spent a couple of days there, just working with people, and we sat down with Ben Ullman, and he offered to do a code review for us. And I think if I knew then what I 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 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 equal signs, et cetera. So we looked all these things up. I learned about Grunt. And we started, kind of this step forward from taking this from a prototype or a proof of concept to something that could be a little bit more.
And the whole time we were kind of like, what are getting into here? It wasn’t ever like, OK, we’re going for this, we’re doing this. But we started getting some support from ITP. Dan Shiffman 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 was 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 I’d have these meetups at ITP every two weeks. And basically a group of people would assemble and then 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 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 working independently on this.
So that’s kind of the – that’s the origin. I think the cool thing was that we’re all learning together and we’re making together, and nobody in this room was a pro, but we were OK, kind of collectively getting on and saying we’re going to try to figure it out. And ITP 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 silly.
LAUREN MCCARTHY
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 Shiffman.
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 favourite things to draw.
But let’s put the flower aside and let’s go back to that circle. It’s a 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, this 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 will change colour. Go ahead, click on it. Watch it change colour. 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 colour. How did this slider appear? A line of code, create slider. I just – I just really, really love this line of code. And –
[LAUGHS]
LAUREN MCCARTHY
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 favourite code editor and your favourite browser and just start making stuff, 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 we’re starting with the same drawing metaphor. And so this is an illustration by my friend Taewon 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 it’s bringing together JavaScript and HTML5 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 write in the page, and you can play with these things.
And let’s 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 have to deal with, so asynchronicity and callbacks. And so there’s now a method – like, Load JSON 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. So you could use this preload function, that’s kind of like a promises solution that you can first just call Load JSON 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 were excited about. And we are making a lot of examples, and really excited about the possibilities of working with WebSockets and connecting with a node server and having networked experiences. So this is a thing that’s not playing.
This is a project by Cavon Verde, 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 the 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 ones I have to do with manipulating the dom or playing with sound, and we’re adding some new ones this summer as well.
OK. 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.
[LAUGHS]
So I’m going to flip back and forth. I hope that’s OK. One of my students told me it gives her a headache when I flip. But I’m under a time crunch, so I apologise for the migraines.
OK. So this is what you would do if you were making P5. I’ve got a bunch of things linked in here. But you link in the library. Here’s my JavaScript file. And the basic metaphor with processing in with P5 is that you have this set up and draw. The things in setup happen once, and the things in 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 programmes 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, and hopefully that works. OK. Cool. So we’ve got that.
I can make it look a little bit nicer. Switching the colour mode. I’ll set the fill colour to kind of loop around. And then maybe I’ll map the size, instead of just 50, here to the mouse, y. So. Something like that.
OK. So now I’ve got something that looks a little bit prettier. So that’s kind of your basic, Hello World! programme with P5. And then you could get a little bit more into it. So maybe I’ll add in, like an audio input. Let’s say mic 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. And I’ll also do the y position.
So the mic kind of goes from 0 to 1, but I’m just going to make sure we get all the way there. OK. So, if I did that right. Ah. Ah. Ah! Ah. OK. So, that was fun.
[APPLAUSE]
Oh, thanks. OK. So then let’s add the webcam. So, create 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. Oops. And I’ll set the position, zero, zero. I’ll make sure this one’s at zero, zero. And. OK.
So now we should have my face in there. Dah. Ah. OK, that’s cool. But it would be cooler if I could draw with my nose. So –
[LAUGHING]
I’ll add a tracker in their tracker. So this is from another library that’s based on Jason Sarri’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, you can see there’s actually numbers for all these different positions on the face. So I’m going to go with 62, which would be my nose. So something like, get action. And then here, we’ll keep the audio size mapping. But here, instead of this x and y, I could say something like, get the 62 point and get the x and y position. OK. Let’s see. Oh no. Oh, there we go. Hey. Dah.
[APPLAUSE]
OK. Now I feel like I should pass out, but I will just keep going. All right. So that’s the show me. And there’s a whole lot more that you can do. And 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 wish I could show you these all in 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 Vis D class. And so these students have been programming basically one, two, maybe three weeks. And so they’re exploring 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 Cavon Verdi, where he searches Instagram as a bot, searches Instagram, finds sunsets, uses P5 to pixel sort it, and then posts these prints online This is by Mark Abbey, playing with emoji.
VOICE
How do we show some enthusiasm?
[MUSIC PLAYING]
LAUREN MCCARTHY
This is a piece by Kate Visuth that was trying to make a more interactive way for people to explore the Cooper-Hewitt collection.
MAN: (SINGING)
What I want, you got. It might be hard to handle. But like a flame that burns the candle, the candle feeds the flame. Yeah. Yeah. What I got, full stop. I thought –
LAUREN MCCARTHY
This is another piece by Mark Abbey, exploring storytelling. So it’s a much longer interactive experience, but I’m going to show you some clips here.
[MUSIC PLAYING]
LAUREN MCCARTHY
And this is a piece by Jason Segel, Michelle Chandra, Pam Lew, and Shiv Schneider.
[MUSIC PLAYING]
LAUREN MCCARTHY
So, yeah. And I’m really excited about 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 PhoneGap, 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 a 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 fixing bugs, adding new features, adding documentation, but also things like thinking about outreach, community design, internationalisation, and diversity. And this is something that’s really important to us and really important to me, 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 an 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 there’s all the technical things, but the thing that’s been really – and maybe this is clear from my talk – exciting to me about this project is the social aspect, and thinking about how to communicate online, how to have these conversations and how to set a tone for the community, how to be hyper aware on these GitHub threads, which is not too hard for me, because I’m very sensitive.
To language that might seem kind of aggressive and 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. They took a chance on me. 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 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 willing to – like you maybe will 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 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.
[APPLAUSE]
Video 2 Lauren McCarthy discusses the making of p5.js
Interactive feature not available in single page view (see it in standard view).
P5.js allows us to embed a code editor into the module website, so you don’t need to install any software on your computer to put your learning into practice. Any p5.js code you create can be embedded in any website, so anything you create in this topic can be shown on your personal website for the whole world to see.
There are many useful p5.js resources online, and the best place to start is the p5.js website. The website has many examples and tutorials, as well as a detailed reference section that lists all the syntax of the language.
There is also a very good p5.js web editor, which gives you lots of space to see and edit your code. You might find it useful to use this editor to work on the code that has been provided for you as part of the learning material, rather than using the embedded code editor.
Throughout this topic, there are some conventions used in the example code which aren’t strictly necessary, but are good coding practice and will help with translation into other coding languages. For example, you will notice that code is indented and that semicolons are frequently used at the end of a line of code, but there are only a few occasions where this is strictly necessary in JavaScript.