John Brown: (math == art && art == code) | JSConf US 2015

John Brown: (math == art && art == code) | JSConf US 2015



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!

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *