Hello. Oh, there we go. Hi, everybody. I'm going to refresh this real quick. Going to go back to my title slide. This is actually really great, because it's a little bit of glitch art right in the middle of my presentation that's completely unplanned. I love it. So here's the agenda. Here's what we're going to talk about. I also have a lot of cords up here. I'm going to talk to you guys about math, art, and code. And one of those things may not seem like the others, but hopefully by the end of this talk you'll understand where I'm coming from with this weird transitive property equation. If you think about color palettes -- math == art is pretty great. There's a lot of math inside of art and a lot of math made of art. Color palettes. If you want to make something visually pleasing, you usually have to follow a mathematical principle for a split complementary or compound or triads -- there's a lot of math that goes into just color. And you think about music. Music is really amazing. It can make you feel sorrowful or triumphant. But when you get down to it, it's just data. It's a time signature and a scale and it's points on that scale, which are data points or notes. Gang a bunch of those up, and you have a chord. And you can give that to everybody. And if they can render that, i.e.,, play an instrument, they get to actually recreate that music anywhere. And it's the same thing with code art. You can make it in JavaScript, share it with the world, 7 billion people can look at it. Different medium, but same general principle.
Hello, everybody. It's echo-y. I'm John Brown and I'm from Portland, Oregon, about as far away as you can get on the continental United States. So I've had a long plane ride. I work with a firm that works on tech in interesting ways and interacting retail experiences. I do a lot of stuff. Front end, back end, hardware, software, and I do a lot of cool stuff, and more and more I'm doing it with just JavaScript. And I'm going to talk to you guys about a few projects that are essentially 100% JavaScript that I think are really rad and I'm really proud of. But at night, I work with a group in Portland that does all kinds of code art and generative art. And I'm one of the leaders of that community that put on events that are community art projects, I take part in those, I put on smaller projects, and I'm a digital artist.
And I'm really proud to say that. And I have the pedigree. I really feel like I can say this. Because like all great artists, I dropped out of art school. Two times. My mom is not happy with that slide. So these are a few selected math works -- I play a lot with math. And this is an exploration of sine and cosine, perfectly said. It's rotation, circular movement, and you can create amazing things just by layering. And I'm actually really proud to be here today. I'm kind of bummed that I'm not in Portland right now, because there's an art show going on, Visions of Tomorrows. It actually starts tomorrow. But I have a piece in there, and it's a generative art piece. And it's hanging up alongside sculptures, oil paintings, mixed media. I just wanted to point it out, because a lot of times people think digital art is not true art, but it really is. It's recognized by all the important people, in my opinion. So why am I here, at a JavaScript conference, talking about art? It seems a little weird.
Well, if we go back to the title of the talk, we talked a little bit about math and art. Art and code. I feel like these two things are very intertwined. If you want to explore them, if you want to try being an artist or if you are an artist. Learning is way more fun if you're making art. If you think about -- if you have a dream in the middle of the night and you want to create it, and it involves web sockets, it's this rad artistic... Project, and you think -- I should use web sockets for this -- unlike at work, where it's a mandate, like -- now we're using web sockets, and you have to learn those. You have to go read tech docs, you have to read some tutorials. Now you get to explore and try a bunch of new things. And the outcome doesn't really matter, because it's your project, and you're just trying things. And even along the way, even if things are broken, just a glitchy screen -- you can still create beautiful things with art.
So that leads me to also -- freedom of personal projects. If you're making art, you're very rarely, unfortunately, going to be making it for a paying client. So you get to do anything you want. Anything you can dream, you can try and recreate. There's any kind of analog from the fine art world or the traditional art world in digital art, you can do 3D printing for sculptures, watercolor light canvas work, and then there's things that you can't do in the fine art traditional world that you can do in digital art. There's also a lot of new problems that come up, when you're making things creatively.
And one really rad, like, segment of that is that when you go to work -- and let's take a different example. Let's say you're working on an ecommerce platform. If the payment goes through the payment portal, cool. Done. If it doesn't, that's the other answer. It's binary. But if you're making art, you can explore and try all kinds of different things. Is the line weight good? How do the colors make me feel? Are there too many color particles on this stage? It's a problem you have to solve and use a different part of your brain. I don't buy into the left brain, right brain idea. That's been debunked, but you definitely get to flex creative skills and problem solving when you're making art. So I want to walk you through a few projects. This first one... Real nervous about this. Anyone who's seen me talk knows I go a little bit overboard on demos. So this is the 7th thing I have plugged into my computer right now. And it's upside down. It's not even USB, either. So here's what we're going to do. Work in progress, number 233. Deep breath, everybody. Mostly me. There it is. Okay. All right. If we look up yonder, look up here, as I'm going over this color palette, right, we're getting different things on here. And you probably can't see them very well. But here's the thing. I'm running around in this -- this is a node project. Node server, node client, it's picking up what pixels I'm sort of going over with my mouse. Think of this as a really weird aspect ratio screen. But then if I go outside of the browser, it's still working. And that's the power of node, man. It's amazing. You can run it on the lowest server in operations on your computer. So the reason why I want to do this is because I actually -- don't tell anybody from my work -- but I want to take this, I want to hang it up at work over the weekend, and give everybody on my team the client software for this. So hopefully it'll look a little something like this. Again, some fingers crossed.
Okay. So this is like five... This is a recording session of like five different mouse points. I knew that wasn't going to work. You son of a bee. So imagine a lot of different... Oh, I'm up on stage. Whoa. Imagine all these flying around, and this really amazing piece of art that's being created accidentally in the background over time that nobody is really... Working towards, but there's an amazing... There's an amazing piece of art that's going on in the background, and it's community-driven. Okay. Going to start unplugging some of these things. So here's the thing. This is a work in progress. So why show you guys this? A couple reasons. So one... I think it's important to show things, like, as you're working on them. Anybody can go on and post a highlight reel on their Instagram, but I think it's really cool to do small incremental pieces, because when you're making art, even the steps towards the final product are all -- presumably -- all beautiful and they're worth sharing. And this is a true work in progress. This is at 3:30 p.m. Monday, the day before I left. This is it in a suitcase, at 5:45 p.m., and this is me working on it that day, and this is me, earlier this morning, running around in my hotel room, putting this together, and over here. So I just want to show you -- don't be afraid when you're doing art to show it to people and get opinions and to share it with the world.
All artists have sketchbooks. This is a Van Gogh sketchbook that was recently uncovered. Even these are beautiful. Even these are amazing. Artists used to have sketchbooks like this. Now we have sketchbooks like your code pen sketchbook, or just a giant messy folder on your computer. So when I posited at the beginning... I like to use art to learn more code. What I want to do is, as I show you these projects, talk about the things I learned that I wouldn't have normally gotten to learn in my day-to-day work life. First things first. Bitwise operators. I sort of used them by copy-pasting them out of Stack Overflow, but now I sort of understand them. And being able to push pixels down this strip required me to understand bitwise operators better than I used to. LED dithering. Our eyes are amazing. They evolutionarily evolved to notice the smallest light changes. So when you turn it on to 1%, it makes it look like 17%. So I had to look up tables and inverse function to level that out, so that LEDs look like the brightness grows and shrinks properly. I learned all about RAM swaps on Raspberry Pi. Because you run out of memory real quick, so I had to learn a whole bunch of stuff. There's a lot of these learning slides. So I apologize to everybody over here.
Also, I want to say thank you, because I came in this morning, not sure if this project was going to work, but I had some amazing help today. So thanks. So that's a project that's a work in progress. And the next couple of sort of finished products. This is from a year ago... Probably about six months ago. So this is my buddy, Chris Harth. He's a print designer, and obviously I'm a developer. And he and I were hanging out. We were like... Let's make something this weekend. Let's... Do something creative and artistic. That he's never done before, which is basically most things, because, again, he's just getting into the creative code side. So we decided... I had had glitch art on the mind for a lot of reasons. XOXO had just passed, and that was the theme. And so I thought... Let's make something glitchy.
So when you think about glitch art, you can do one of two things. You can take the actual rendered image, and take chunks of it, and smear it or move it around or whatever, or you can do the deep dive. Getting into the actual guts of the image, and start messing around with it. So this is the path that we chose. Okay. Demo number two. Let's corrupt some data. Okay. So if we look at this mostnervousspeakerever.jpg, you guys may recognize him... So we take this and we open it up in our favorite text editor. This is what a jpeg looks like, everybody. What happens if you just start changing some of these numbers? Now, I hope some people will take a breath. Give me a hex value. A. I heard... U? Who said... Somebody needs to go to the JavaScript introduction. Somebody give me another hex value. 1? 2 to a 1? All right. We'll do it. 8 to a... I heard B. Let's see what this looks like. Okay. All right. Cool. Starting to get a little interesting.
What happens if we take... Let's see. This chunk down here... Let's say this is... I don't know. This is probably beard area. Let's run it up here. Let's drop it in yonder. Okay. We broke that one. We'll talk about that. So... What Chris Harth and I did was we decided to take this idea of corrupting the underlying information of jpgs and turn it into a bot that listens for your tweet at it, and then not only takes your avatar and glitches it out, but glitches it out stylistically over time and makes an animation of it. That's weird. What does that look like? Glad you all asked.
So if we look at some of these, if you tweet @avatarglitch, here's one, here's a couple here that are fun. Here's a little bit more subtle. Here's a little bit... This one is a little crazy. So... If anybody wants to test out the old avatarglitch, feel free to, after the talk. Pay attention. So since I was with Chris, he said -- let me design the way these glitches work. We came up with some that were very subtle and some that were crazy. And I had a really good time working with Chris Harth. So what did I learn? As you can see, if you just start messing around with jpgs, you can corrupt them really quickly. So I had to open up a tech manual, read about how jpegs work, read about the headers, and what you can and can't change, so we knew we could get decent-looking glitch art generatively, as it came back. I would never have had to do that in my regular job. So that's a real awesome win. I also learned about buffers and actually how to make animated GIFs. So this is something I learned since then. It's part of the process of doing something fun and being excited about it and using it going forward. Chris learned how to make bots. He had done a little bit of creative coding but never had done anything that sat there and waited and responded based on input. It was a fun thing to do.
And then we took these learnings. We flipped it. We turned it to a teachable moment. So we went to a local meetup and talked about the project. And we actually launched it live there. It failed completely. I took a couple of hours at night and retooled it and pushed it up. But we ended up talking about it -- me from a developer standpoint, him from a designer standpoint. Where we came on that spectrum, and the things he learned and the things I learned. And speaking of which, I am the... I am a co-organizer of that meetup group. PDX Creative Coders, along with these three gentlemen, and we're a group of now almost 500 artists and developers and hackers and designers that get together and make cool art generatively, we make music, we make all kinds of really cool things. And these are a few projects from whatever hack days. And I encourage you all to find one of these near you. I love that one. pixie.js. Cool. So that's a small weekend project. Let's talk about a big project. A big, long, long project.
How many of you guys -- nope, wrong slide. This is... How many of you guys know Ben Perdy? That's a weird question. He's a friend of mine. I used to work with him at Instrument. He left and started his own studio called Glowbox, in Portland, and we get together and jam, make cool art, cool projects, creative code, hack with some hardware, and Cascadia.JS was coming up last year, and they were having an interactive JavaScript art gallery, so I thought... Let's make something cool with this. So we knew there was going to be a lot of in the browser projects. Me, I wanted to make something physical and outside of the browser.
So we sat there and we brainstormed, and we came up with this idea. Plinko. Do you guys know Plinko? From the Price is Right? This is my favorite. This is probably everybody's favorite. We decided to take this game and use the nostalgia and physics of it, combine it with JavaScript, and turn it into a digital canvas for generative art. It sounds weird and it was, and it was hard. You can't just go and find on the internet how to make a generative pixel Plinko board. There's no steps for that. So it was a lot of exploration, had to learn a lot of things, a lot of stumbling blocks, but we ended up making it. It took a lot longer than we thought it was going to. And that's one of the things with the weird creative code projects -- they often take a lot longer than you think, because there's a lot of gotchas along the way. A lot of repetition. 85 pegs, so we had to do a lot of things 85 times. A ton of stop motion. This is photography. Video. And we finally got it done and actually put it in a couple galleries in the last couple months, and the response has been amazing. People love it. Kids, adults, they don't understand what it is, read the instructions, take one of the pucks and walk up and drop it and see them turn around and go... Oh, yes, this is awesome. And they pick up another one, usually two or three, and drop all three to see what happens.
So this is another one of those things about making art. Is that if you do it in the physical space, you actually get to see people enjoying it and interacting with it. And even if you make something beautiful on a website, you don't get to see that one to one relationship with the person who's actually consuming that art. So what did I learn here? Well, I didn't have to learn about rendering GIFs. We already talked about that. Learned that from avatarglitch. But I learned a whole lot of other stuff. A lot of hardware stuff, a little bit of software stuff. Ben packaged up what we did for the projection mapping, which is all done in JavaScript, and he released it as a standalone library, which is amazing, so if anybody does project mapping, you should check that out. But this whole project was JavaScript. If we go back, this was all JavaScript. This was mostly node, but this was all JavaScript. Avatarglitch, 100% JavaScript. This was about 99.7% JavaScript. And you wouldn't think... If we go back... Looking at this, you wouldn't think that this would be JavaScript. But it's a full screen Chrome browser with canvas, it's a node back-end that's running inside of a little kiosk. It tweets you. If you put your Twitter handle in, it'll tweet you an animation of your run. 99.7% JavaScript. So all of you can make art. Because hopefully you understand JavaScript. Because you're at a JavaScript conference.
Okay. We're going to wrap this up. My timer went out. So I don't actually know how much time I have. We're going to assume 27 more minutes? I don't know. I'm just going to start rambling. So again, anybody that's seen my talks before know that this final part is always a little rough, because this is homework. Homework? What? Yes. Homework. You guys have to do this. Not really. Not contractually. So I'm going to give you guys a couple options for making homework. Or for making some things. And the reason I want to give you guys these options is -- each one of these should take you one to two hours. I would love for you guys to carve off a little bit of time from your day-to-day and just try something new and try flexing a different part of your brain and try just exploring a creative path. We think of this stuff as expressive, instead of functional programming. We... I don't know, we the greater community. So the first project is context. This is a project that I run, that is publicly accessible web sockets that you can connect to. And none of these parameters really tell you what they are. A, B, C, D, E, F. And the point here is -- these change over time. They change according to rules and they change in certain patterns. But none of these tell you what to do with the data.
You could use D to control color for something, or speed, or rotation, or number of particles. Same thing with any of these different parameters. It doesn't matter. Whatever you make with this is 100% your personality coming out in this. So whatever you have in your head -- whatever your identity is, your politics, your personal beliefs, all that -- comes out as art. Just like traditional... Just like fine art. I want to give you guys a couple of examples from this. So these are two Portland-centric artists. So this is Libby. Libby White. And this is one thing she did. I don't know which of these parameters are controlling what. Like, whether they're looking at each other or how wide they are or how tall they are, but something in those parameters moving around is creating this.
And this is Lucas's. Can I get some sounds? Oh, there we go. Oh, what's happening here? There's a lot of sine and cosine happening here. Web API. All JavaScript. Can you guys see this? So these are two people with entirely different backgrounds, entirely different personalities, that are creating art with the same code. Or the same, like, underlying heartbeat. That's option number one. Make something. Option number two is code pen. Who here knows code pen? Yes. There's a woo over there. It's great. Code pen is rad. We talked about sketchbooks earlier. Now, artists have sketchbooks. Code pen is basically a global digital open collection of sketchbooks. And that's great. You can go in and look and see what people are doing, how they're getting things to look and move a certain way, and if you go to the homepage of code pen, if you don't know, they elevate all kinds of rad projects -- some are functional, like button rollovers, but some are really weird. JavaScript or CSS experimentations. You can go in there and learn the math and see how they're sort of twisting the things that you normally think of in one way, and making them into something completely different. Go to code pen, fork something, play with it, find something that is visually interesting, and play with it. That's option two. Option number three is find a code group. They're everywhere, mostly. Except for a lot of Asia and all of Africa and most of South America. Okay. Bad example. But anyway... They're everywhere. And you guys are all from all over the United States. And all over the world.
Go and find a creative code group. Preferably a language agnostic one, because it could be great if you could get in a room and talk to people who did Cinder and Open Frameworks and cross pollinate ideas. And not just developers, but also artists. Go to your local JavaScript meetups and talk about art. I guarantee you, from personal experience, if you go to a local JavaScript meetup, and you start talking about art, people are going to want to talk to you and want to make art with you. That's how I've made friends with some of my favorite people in Portland. And if you can't find one, start one. It's really easy. Meetup.com is free. You need you and just you, and you go find a place and you just start making art. Tell people about it, and they'll come. Probably. Again, no guarantees.
Oh, that's backwards. Hold on. How much time do I have? We'll just assume this is the end. Five minutes? I don't have any more. I don't have any more wisdom to share. I'm just going to wrap this up. Thank you, guys. This is me. I'm John Brown. And I'm making art here and here and here. I have an SEO problem. John Brown is rough. There's a lot of us. Did you guys know Inspector Gadget's real name is John Brown? That's a fun fact. So I'm making art here all the time. We just saw CSS in JavaScript, and I just want to do a terrible plug for myself, but I'm actually working on this hundred day project right now, where I'm exploring CSS in just raw divs. No nesting, no associated styling, no IDs and everything, and just seeing what I can do with those, over 100 days. And I've done some really cool stuff. I'm doing one a day. Some are great, some are terrible, but you should check them out, and they're all posted all along here. #makearteveryday. And that's all. Thank you, everyone!
finally i found someone can make me fell bit better cuz im not crazy lol. cuz i talk to android boy myself lol. i started can see something next days will happen by just browsing the web. oh, voice commendar if have another end with vision, the stats nmb can be lot acurate with mapping latitude and coordinate. it can use on investment as stocks analysis as i have done it but just i also felt it may be too crazy to commuicate with a the robot lol.