 I'm here to talk to you guys about creative coding, code art, creative technology, and what that means to me and hopefully what it can mean to you guys in the future. So what is creative coding? It's art, it's experimentation, and it's exploration through code, and it's doing it in an interesting, out-of-the-box way. It's making something without really knowing what you're gonna be making a lot of the times. If you think of technology as a jungle, you're just kind of a shetty and you're just going forward and maybe you'll end up at Oasis and maybe you'll end up getting bit by a snake. Who knows? It's trying new things and knowing that they're gonna fail sometimes and just accepting that and just embracing that as part of the process. And it's about rediscovering the beauty of code constantly and that's my favorite part. Hello? My name's John Brown. I'm a technical director at Instrument which is a creative code, or I'm sorry, it's a digital agency in Portland, Oregon. There's about 100 people there. And more important than my work at Instrument, I'm an organizer for PDX Creative Coders in Portland, Oregon. We've got 300 people who love code art and generative art and creative technology and doing all kinds of fun things with code in and out of the browser. And I consider myself a creative coder and a digital artist. And I mean artist and you know it's true because I did drop out of art school twice. So I can't draw. This is me trying to draw skeletal data from a Kinect with a body around it and it's a hot mess. I can admit that. But like I said, I dropped out of art school. Took me a while to find my medium. But my medium is code and I love making things move. I love exploring things with technology. And that's what I'm here to talk to you guys about. So, that was a weird jump. There's so many different ways to make things with code nowadays. It's incredible. Anything you can do in the fine art realm of art, you can have a digital analog for it. Sculpture, you can make music. Plots, robots, all these things. And all these things you can do with JavaScript. And I'm gonna show you guys some examples. So some personal projects have done recently. So in Portland, Oregon, another organizer for the PX Creative Coders Group decided to put on an art gallery. And the idea behind it was you walk into the room and on all the walls is digital canvases and in the center is one touchscreen. So if you walk up and you touch the touchscreen right in the middle, it's 0.5x, 0.5y. On each of the digital canvases, something will happen at that center point. And all these have been created by other artists. So you swipe your finger across the touchscreen, each of the canvases react accordingly. So it sounded like a great idea. So what I ended up doing was I wanted to do it. I invited a friend of mine. His name is Chris Arth to come do it. He's a print designer. He wanted to do some creative code stuff. I wanted his expertise in color and space and all those sorts of things. So what we did is we went to the hack day for the show. We sat down on the couch. We messed around for about two and a half or three hours. We came up with these two pieces that are very complementary, but they're very different. One's rectilinear and monochromatic. One has arches and it's full of color. And they're all responding to touch input or the leap, the leap motion in the background. It was so well received by the group that we ended up going in the window outside of the gallery in downtown Portland. So for a week, anybody walking around downtown could walk by our exhibit and move their hand around in front of the window and create some magic. It's really powerful. It was Chris Arth's first foray into creative coding. I got to work with a really good friend. It was super rewarding. And again, we didn't know what we were gonna make when we walked in, and that's important. And then a couple of weeks later, I called up Chris Arth and I said, hey, I'm bored, let's make something. He said, okay, what do you want to do? Let's make a Twitter bot. It had been a really long time since I'd made a Twitter bot. He had never made a Twitter bot. Again, he's a print designer. So what we ended up doing was, I went back into my memory banks of some things that had been happening recently. I'm gonna mute this. Wait, this is a sound? You guys probably can't hear the sound. That's all right. So another friend of mine, Ben Purdy, did all the visuals for XOXO this year. And I hung out with him a lot while he was sort of walking through the process, doing all these really creative things. And I thought to myself, I wanted to do something with glitching. So he was doing all this stuff on the very top level with corrupting just the visual output. I wanted to go down into the guts of these things and do something really interesting. So I said to Chris Arth, I said, let's crop some data. So don't cringe at what I'm about to do. Anybody that knows how JPEGs work. So this is a JPEG. It's a handsome devil right there. So if we take this and we open it in our favorite text editor, this is what it looks like. So if you come in here, scroll down a little ways. Turn this nine to a five. Is anybody cringing? Turn this seven to a five. Doesn't matter. Let's turn this, okay, there's another seven. We'll turn this seven to an eight. We'll save it. Fingers crossed, I didn't completely destroy this file. Cool. So we got a little bit of corrupted data. What happens if we scroll down a little bit? Take this chunk of data here. Cut that out. I know, this is risky business right here. This is the first of three demos I'm gonna do. And let's see what it looks like. Oh, that's a bad one. Okay, anyway, destroy that file. No big deal. So the idea behind this was we wanted to take this data. We want to take some data when to corrupt it, do something at a very low level with JPEGs. So I got to read about how JPEGs work with the headers. Chris Arth just got to learn how to generally make something that waits for input and then does something with it. So we ended up making avatar glitch. It's a Twitter bot. Nobody do anything right now because I wanna make sure that this works. Which one of these million things should I connect to? Exmission? Exmission, five gigahertz? This is one of the things I should have done before. Here we go. Everybody, get off the Wi-Fi. Keep, just keep, just gonna keep doing this. Boom. Okay. Hi, avatar glitch. Let's do something fun. I always mess up. Let's see if that actually went out. I don't know. That may actually not have worked. Okay, I'll show you guys a little bit about that. So we made avatar glitch. What it does is it takes your avatar, if you tweet to it, it downloads it, converts it into a JPEG and creates one of these weird glitch pieces to it. And some of them are subtle. Some of them, this one just ignores all the headers and just goes crazy with it. But I got to sit down again with Chris Arce, this is him, and just make something interesting over a couple hours. And it was a lot of fun because I got to learn, he got to learn. And then the best part is that we then got to go to the Creative Coder Meetup and talk about it. I talked about it from a development standpoint. He talked about it from a design standpoint and it was this learning moment for everybody. Let's check out the demo. Yeah, I don't like that one out. Anyway, check out Avatar Glitch later. It'll give you a fun avatar. Plinko from The Price Is Right. Hopefully you guys all remember this. My favorite game from The Price Is Right. I used to watch this when I was sick at home. I was hanging out with Ben Purdy from the XOXO visuals. And there was an arch exhibit coming up for Cascadia.js. We wanted to do something physical and interactive to put into the art show. So a little bit of brainstorming later. We said, let's make a modern day version of Plinko. Plinko. Just saying the finished name, I love it. So we started with a prototype. Again, sort of knowing what we were gonna be going for but not really knowing how to get there because there's no manual to look up how to make a modern 2.0 version of Plinko. So we decided to start from the very beginning of making a prototype. Sliding puck bounces off a peg. It senses on the computer. This is an iPhone. It didn't focus very well. Step one done. Step two, oh, no, that's step three. Step two, nope, step one. We scaled it up, tried a bunch of sensors. We put a projector on it so we would get visual feedback every time it bounced off a peg. Not bad, I think we got something. It's time to go full scale. I'm seeing it in the reflection over here. Hold on, there it is. So we ended up going full scale. Plinko size board. Spent a lot of time making some boards, some soldering. Oh, I'm also a full stack developer as well. So I do hardware software, a bunch of different stuff. So this is sort of coming out of nowhere. We wired it all up. There's a lot of time-lapse photography and then I'm sure you guys can all realize when you're just walking through a jungle of technology with a machete disaster. The day before we were supposed to turn it in, a lot of things were going wrong with it. First of all, all the pins attached. We used epoxy with 3000 PSI tensile strength. Didn't matter, they just started coming off. It was horrible, it was a big problem. There were constant misfires where you dropped it down on one side and all of a sudden, bunch of these ones didn't go off. Didn't know why that was happening, that's a problem. The Arduino board we used was too slow. We just missed pegs all the time, not even misfires, it just missed them. And then we missed the deadline. Came and went, we went hung out with the organizers and we're like, sorry, we just couldn't get it done. But, this is a disaster, you also have to overcome it. Especially in this field, if you wanna call it that. Because again, there's no playbook for how to make these things work. You have to realize that there's problems and you gotta figure out how to get around them. So, we just soldered the pegs on, took it apart, reconstructed it, perfect. I called some friends from Intel who had master's degrees in electrical engineering to ask them why there were misfires that came to the studio. They looked at it and they gave us some pointers. Awesome. We tried a few other boards, including the teensy, which ended up being 20 times faster than the Arduino. We had to try a few, but then it was like picking them up like butter. Is that a thing? That's not a thing, if you don't pick things up like that. And then we created our own deadline or created a new deadline. There was another gallery show that was gonna be opening in about two or three months. And so he said, that's gonna be our new deadline. And then, with all these things accomplished, there was install day. And we got to step back and for two or three hours, just watch people walk up, not really understand what's happening and then realize, pick up a puck and then drop it. And we got to see the joy on their face as a puck would just drop down and it would create these beautiful visuals. When you work on the back end for an e-commerce site, you don't get a lot of joy from your end users if they even know you exist. So it's doing creative coding and code art is a wonderful way of using your skills and technology in a way that's gonna give you some sort of like instant gratification and really good feelings. The state up for a month, we learned a lot about how to make Plinko boards if anybody ever wants to make a Plinko board. And we learned a lot about how people wanna use the Plinko board because people would drop one puck and then they'd immediately pick up all three and just drop them. And none of the visuals were meant for that but we learned that. We actually ran into a big O problem because there was an in factorial issue on one of the visualizations. So it stopped running very well after people chose that one. I know you're saying this is a JavaScript conference. So there's hardware and we're talking about Arduinos but here's the deal about this. This is a 99.5% JavaScript. There was a few, there's about 40 lines of code that's actually on the board that's grabbing all of the pin strikes but the rest of it was all JavaScript. Not only was it all JavaScript but Ben Purdy ended up creating an actual projection mapping framework so we didn't have to go outside of the browser and use MadMapper. And that's now available, he released that on GitHub. It is awesome if anybody wants to do projection mapping check out MatTastic. But JavaScript for all this was so powerful. Which leaves me to my next slide. Choose your path. JavaScript developers, you guys are all using the exact same thing that I'm using and let me assure you from the talks that I've seen today you are probably all much smarter at that stuff than I am. So using your creativity and your knowledge of how these things work, taking NPM modules and putting them together and trying things is gonna be super powerful. A lot of people will say try processing. I say try JavaScript because you can write it and seven billion people around the world can see it if you want to put it up on a browser. You can do it in vanilla JavaScript. Has this been opened? Can I have this water? Okay, it hasn't been opened yet. Vanilla JavaScript, P5, the processing port. It was designed for designers. It's created for designers to get into code art. So it has a very simple syntax, it's very high level but it's really super powerful. 3JS, you can create entire 3D worlds in the browser. That's pretty awesome. And you can have access to just tons of WebGL stuff that's been abstracted. And then there's all sorts of input and I've worked with all these so I can say these are all great. Connect, oh geez, connect. Just don't try and draw anything on the whiteboard and nobody will make fun of you for that. Connect, leap motion which is connect through your hands. The Myo, which is you put it on your arm and it can tell you your pitch, yaw, your roll, acceleration, all this stuff of how your arms are flailing around like my do when I give talks. And then, ooh, that was risky business right there. And then you've got brain scanners, commercially available brain scanners which I'm gonna do another demo of later. That's also terrifying. And then there's all kinds of microcontrollers. Raspberry Pi, can run Node. TESL is built on JavaScript and on all the plug and play sensors that they have have NPM modules. You can plug it in, you can immediately be using any of these, pair them together, create something amazing. And there's more. Like I said earlier, anything in the fine art world, there's an analog for it in the digital world. You wanna do sculpture, you can do 3D printing or subtractive printing. You wanna make something that looks like watercolor. You can do that in a canvas or acrylic. And then there's so many things that you can do with technology that you can't do outside of a computer. And those are the sorts of things that I love to push and to explore and to try. So, what's the payoff here? A lot of people wanna know what the bottom line is. You're just a few of them. You're gonna be your own boss. You're gonna go home after work and you're gonna create something for yourself. And that is super powerful when it comes to art. Because right now, when you're working at work, you will have to sort of follow the dictates and the mandates of what's happening around you based on the team that you're working on but when you do it with just yourself or one fellow developer or just a couple of them, you guys get to figure out what you wanna do and you get to go for it. And then you get to put it on the internet. Make sure you put it on the internet so other people can see what you're doing. The future of art is digital. My wife has two degrees in art and she tells me that I am correct when I say this statement. So, that's important to me. In the future, we're gonna have frames in our house that are just gonna be there for artwork. We're gonna be able to push WebGL experiments and animated GIFs and all these things to the wall. I can't wait for that day. And a lot of agencies nowadays are embracing this idea of creative coding. As these things become more commercially available and a little bit more stable, you can actually get paid to go to work and to do creative coding, do technology exploration, which is what I do. I'm very proud to say that when I work at instrument, most of the work that I do is with creative coding and I'm gonna do some really fun things. I was a lead developer for the Google IO experiment last year. This is a 3D world that we made with CSS 3D, created a framework around it, just this wonderful exploration of CSS 3D that not a lot of people use in any super meaningful way, but this would run on perfectly on a mobile browser. Instrument also did this about a year or two ago. Running on Node, it's these tetrahedrons that are in the center of the city, nearby really, really busy streets, and they're flashing and they're vibrating with all these colors that are connected to music venues all across the city. And you can walk up and you can interact with it. You can just sit in the middle and meditate, but it's quintessential creative coding and such a wonderful project. And I'm gonna try a demo. Okay, wish me luck, sorry guys. Okay, now imagine, if you will, that you walk into a room and you heard there was gonna be a party there and you invited a friend and your friend and you walk in and all of a sudden you realize it's really quiet in here. Thought this was supposed to be a party. There's no music, there's no sounds, there's no lights. Everybody's just standing and looking at the door and when you walk in, somebody goes, hey here, try this. So you take this, brain scanner. Let's hope this works. You put it on, oh, there it goes, here it comes. Put it on and then all of a sudden, music, lights, visuals, spring up everywhere and then you die, all created with your brain waves. There it goes, you start dancing, you start, everybody has a good time. Then all of a sudden you realize, oh, I need to go to the bathroom. So you don't want people to be seeing what you're thinking when you go to the bathroom. So you take it off, you go and put it down on, you go and put it to the side. All of a sudden, it goes quiet again and everybody starts booing you and you go, oh right, you're right. So you hand it to your friend, you take it, you put it on and all of a sudden, they're now controlling the party. It's a fun idea and I got to work on this at work just as an exploration in what could be possible with brain scanners and potential ideas. Very surprised that worked, considering the luck we've been having today. I called it rave wave, where you get to be the life of the party no matter what, introvert, extrovert. Regardless of your physical abilities, as long as you have a brain, you can lead the party. These sorts of ideas are made totally possible with creative technology. And I hope that you guys all are interested in exploring those ideas. Oh, there was a demo in case that whole thing fell apart. But this is a commercially available brain scanner and there's more of these on the market and this got cut off. But I also used neuronal synchrony, which is an SVG animation library to make that and the sounds and everything. So, I think you guys saw this earlier. Got a swear word up here. I know you're thinking, what's the H word? Anybody have any ideas, what's the H word? Nope, it's fine. I told you I wasn't gonna do that, homework. So, sorry, but you guys have homework. I'm gonna give you guys, let's say a six week deadline to do one of these four things. Oh, go back. Oh, go back. Option one, make a Twitter bot. I don't care what it does. Just use some NPM modules and make something on Node and throw it upon a server. Do something visual, something with sounds, combine some things. Just have a good time, spend a couple hours making a Twitter bot. That's option one. Option two, is fork something on CodePen. So, CodePen does a really great thing where on the front page they put all sorts of CSS animations and JavaScript experiments. And one of the hardest things for an artist to do is look at a blank canvas and know where to go from there. So, as an example, I saw the, oh boy. As an example, nice. So, as an example, I saw this by Jonathan Hooker. It's just spinning double the decahedron. Really great. I said, yes, I love it. Let's push it. I'll use this as a jumping off point. I made this. I gotta learn about how color transitions between points. I got to work in a 3D space, which isn't really my thing usually. I'm usually a very flat 2D person. But I had a great time making this. I didn't know what I was gonna do. I was just like, let's explore this double decahedron. This is what came out of it. So, does this thing work? Ooh, let's just ignore that one. So, find something that you think is interesting. Fork it and explore it. Option number three. I think that you'll maybe have noticed a theme in every project that I've done. I've said there was somebody else working on this with me. And that's really important to me. It's a community and having somebody to bounce ideas off of and helping you when you're stuck. Maybe they're the same discipline as you. Preferably they're cross-discipline. But, is anybody in here from Dallas? Yes, okay. Computer visionaries, look it up. Awesome code group, creative code group. Is anybody in here from Pasadena, California? Thought that might be the case, nobody. Hypercube, if you go to Pasadena. Anybody in here from Vancouver? Anybody in here from Berlin? Is anybody in here from Salt Lake City? Woo! Woo! Okay, awesome. You guys have a different assignment. You guys have to start a creative code group. I couldn't find one for the life of me, correct me later if I'm wrong, but I want to come back in a year and I want to see that you guys are working on something interesting together. Look around the room, and anybody who's not checking their computer or their Twitter, actually seem engaged. Those are your peers. Those are the people you want to connect with over the next day and a half. Option number four, submit something to Uncontext. So what Uncontext is, it's a project that I started last year. And it creates, or it's several streams of, mum, mum, mum. It is several streams of uncontextualized data. It just, all the data that streams over a web socket doesn't have any identifying features. It's A, B, C, D, E, or F, and they all change at different times at different rates based on different rules. So anything that you consume that web socket with and you create is 100% who you are as a person. If you use A to control the color of something it spins, I can use A to control the speed at which something bounces. Uncontext is a great way to sort of take data that doesn't have any meaning and eject meaning into it, and it doesn't matter, you guys can check it out later. Make something with that and send it to me. We've had hack days with Uncontext data. Here's just a couple of things that people have created with it. The first one was also had music attached to it. Here's some fun 3D visuals. I don't have a steady cam, sorry about that. 3D shapes that were created in 3JS and then printed out on a 3D printer. We got it to control Mario at one point. There's been paintings and music generated and all these things just from this data that has no context to it, except I know what the context is, which is awesome. All right, here's a few final thoughts and then I'll get out of your hair. Creativity is hard. When you want to start walking down these paths and you want to start calling yourself an artist like I did, you have to realize that you're gonna be bad at it and that's fine. There are some of the best artists in the world that the world says are the best artists, but they themselves are thinking that their art isn't any good and it doesn't touch anybody. So if people who have, who the world sees as great artists have issues with that, know that when you first start getting into digital art, you're gonna have some struggles with that, but embrace it and just keep getting better. POV is important in this particular field of technology. I'm a huge proponent of diversity in tech and I think that one of the best places to really showcase that is in the creative code art area. Because like art, it's all about what you feel inside and what you put outward. Who you are, your past, your ambitions, your gender, your identity, all those things get wrapped up into who you are and they come out when you make art. Whether it's digital or whether it's analog. For example, I met Alicia Kia at one of the code groups that, one of the code events that I organized and I showed her the rave way of thing or I had talked about the rave way of thing and she said, hey, I made one of those also. She ran to her car, she pulled this out. She actually made hers. I ordered mine on the internet so she's way more badass than I am, which is pretty great. And this is some of the work that she made. So mine was very frenetic and it had sound and it had a different sort of context and hers is very subtle and it's smooth. And this is, oh, and this is her interpretation of visualizing that in like a constant, in a constant way. So POV is super important, especially in this area. And a final thought, a final, final thought. There is this wonderful essay that's very short that you guys should all read. It's called The Work of Art in the Age of Mechanical Reproduction. And it's all about when lithography and photography was coming to the forefront of art and how there's no longer a one-to-one relationship with art because you can take a negative and you can create an infinite number of prints. Before then, art was all about the one-to-one myth. The Mona Lisa is what it is because of Da Vinci's talent, the time in which it was made, the story behind it. There's all these things that make up what the Mona Lisa is. But when you're just taking photographs, a lot of people are like, well, what's the point? You can make as many of these as you want. If you read this essay and you replace mechanical with digital throughout, you're gonna get a manifesto for creative coding. And this last part is my favorite part of the whole essay. To an ever-greater degree, the work of art reproduced becomes the work of art designed for reproducibility. When you're making these things, you have the ability to put them on a browser and seven billion people in the world can look at it. That is super powerful. And know that that's what makes digital art powerful, potentially more powerful than fine art that's hanging up in a gallery because it can be shared with anybody at any time. You can have infinite iterations on it. So when you take this idea and all the frameworks that are out there for creating, you take the community of people that are interested in making art and doing some creative coding, you package that all together. That's what makes me an artist. So make you an artist and you an artist and you an artist. Everybody in this room an artist. So I want you to go home in the next six weeks, pick up a digital paintbrush and make something interesting. Thank you. I probably went long, do you want me to do questions? If anyone has any questions, in this moment, no. I could, oh, sorry. When I put the brain scanner on, was I using it to figure out what colors it was? In this moment, no. Those were the colors of nervousness and fright. But in theory, you could program it to influence it based on your thoughts and your impressions. Cool, good question. Anybody else? Yeah, totally, that's a great, that's one of the reasons, that's one of the things that I put out there. Go to CodePen, find something that's interesting, learn how it's put together because you can see the source right there, futz around with the inputs and the outputs and figure out the math that's behind it. And you can learn a lot just by, I mean, everybody knows you can learn a lot by looking at other people's code, especially when it comes to art. But yeah, that's a wonderful way to start. The question was about how, if you were gonna do a creative code group, it is using CodePen a good way to get started. Another really good way to get started is just to get a bunch of people in a room. I gave a talk in Nashville about this exact same thing and two months later, I got a tweet saying they were having their first creative code meetup and they got 70 people in a room and apparently so much cool stuff came out of that and a bunch of people met, that that's exactly what I wanted and I really hope that you guys can have that in Salt Lake City as well. So I'm gonna move the walk over here. Okay, cool, thanks everybody.