[MUSIC].

Thank you for having me.

Hi, this is my first time in the UK, first time in Europe.

March is the first time I've actually left the states, so this has been an exciting.

Month for me, and I'm gonna talk about something that is truly dear to me,

not JavaScript or jQuery but art, so as I just mentioned my name is Jenn Schiffer.

I am an Open Web Engineer at a company called Bocoup,

which is based in Boston which is covered in snow right now.

And I live in New Jersey which is also covered in snow.

So, I'm very happy to be here where the weather is beautiful and

I wish I can stay forever.

I also a creator 8-bit art tool called Make 8-bit art!

which you can find on make8bitart.com because I'm a pixel artist.

And I'm also a developer.

I figured I would troll you guys by showing some Java code.

Java's like ES 1992.

>> [LAUGH] >> [LAUGH] But, yeah, I'm a pixel artist.

And I also make art in real life.

I made this chat application for

a bathroom and art space as part of this, like, flash art exhibit.

And we also tracked how much toilet paper used with 3D printed dowels and Arduinos.

So I love like, this whole like, connection of like, coded and tech.

And, and basically title of my talk is anything you paint I can program better.

Which is actually not true.

So.

Several years ago,

I was teaching at a University in New Jersey called Montclair State.

I was teaching Java, always good time, and

I found that teaching code, having since learn how to

code with art as a focus, was really, successful.

It kept them motivated to create something they liked what they were creating.

It was.

More than just Hello Worlds but just as basic and simple for

them to digest I guess.

And that sort of became my thing.

In June of 2013 my journey to creative coding and what brought

me here today actually started with speaking at a jQuery conference.

Which is my first time speaking at a conference.

Is at jQuery Portland.

Which was keynoted by everyone's favorite Dave Methvin.

The title of my talk was called learn code, make art.

And I talked about how, I taught how, people how to program using art.

And it went really well.

A lot of good feedback.

There is a technical talk going on in the second track.

So I had a lot of people who were just learning how to program, or were teachers.

And a lot of them were saying, like, wow.

This is, like, a really interesting concept to bring art into

what is seen as a more scientific classroom.

So in September 2013.

I spoke at jQuery Austin.

There were no videos.

But Dave keynoted.

>> [LAUGH].

>> And [LAUGH] my talk, KISS MY CANVAS: Making and

Facilitating Art with Code, I talked about how I made, make 8-bit art,

which facilitates the creation of art using code.

And taught how to use HTML canvas to draw.

It's a little more of a technical talk, but

it still is I think digestible for people who are just interested in figuring out,

okay, I want to learn jQuery, but like what should I make with it?

And I feel like HTML Canvas is like a really awesome

element to use because a lot of us has been making art since we were little.

So why not.

Continue that into our adulthood or when teaching our kids to do code.

so art and

code became something that I was really passionate about in my side projects.

At the time i was working at the National Basketball Association with one of my best

friends, Nicholas Ortenzio, who is not only an extremely talented engineer,.

But he's an extremely talented artist.

He would not pay attention in meetings he would just draw presidents of the U.S.

on the white board.

And I love this and

I love being around at least one person that was interested in the creation and

learning about art as well as the fact that they engineer by day to pay for rent.

But I wasn't getting that much out of that job.

And so my, couple of friends of mine were, like, why don't you leave there and

join Bocoup?

And I did, and that's Boaz, the founder of Bocoup.

He's gonna kill me when he sees this.

[LAUGH], so in September 2014 I spoke at my third jQuery conference in Chicago,

which was keynoted by Dave Methvin.

>> [LAUGH].

>> [LAUGH].

And I gave a very super artistic talk about HTML tables,

my actual favorite element, which isn't really considered to be that artsy, unless

you like to take spreadsheet and tables, and have people create art out of it.

And the reason why I'm taking you though this sort of like trip of my jQuery talks

is because the reason why I'm here today, and what I'm gonna talk to you about is

this art project I created called vart.institute.

That's started because of jQuery UK,

before it was even announced and because of jQuery Chicago.

I walked around and I saw lot of really awesome public art.

Has anybody here been to Chicago in the U.S. before?

Okay lots of really awesome public art and

it was really inspiring to me to the point that I was thinking

well I've been learning how to code and teaching people how to code using art.

But there's a lot more that I can learn.

About art itself.

And maybe I can use my knowledge of code in order to implement that.

And at the time, Ruth, one of the organizers of this great event I'm so

excited to be at, was like.

We wanna launch the jQUK site and we need an abstract for your talk.

And so because I like to,

like, say I'm gonna do something before I actually know whether it's feasible.

And then stress out about it.

Like, leading up to the event?

I was, like, oh.

I'm gonna do this project called.

Var tists.

Where I, I'm gonna like recreate art work using code.

And I'd never done it before, and it was like, yeah that sounds good.

Like, let's, let's do it.

Ship it.

And then they announced it, and I decided to change the name to, to vart.

Which yes, it sounds like fart.

We all sound ridiculous.

You're welcome.

And so there's three parts of, the vart dot institute project.

There's words.

I like to write.

I usually write satire about tag and jokes on Twitter and stuff like that.

But I figured I wanted a project where I could get a little more serious and

little bit more personal.

And so I usually write essay that pertains to the artist I've chosen and

how they apply to me personally.

As someone whose an engineer also has always been an artist and

is interested in furthering that, using my engineering background.

Then, there's the art of course.

The point is the learn about art using code.

So picking an artist, usually a fine artist.

And then the code itself where I will.

Generate similar artwork or generate something using code

that represents artists or what the artist work or

a particular time period of their life meant to me or, like, touched me more.

Because this is a lot more of an emotional project than a basketball stats website,

even though I do get pretty email over basketball.

From New York and it's, it's a sad state of affairs up there.

So vart.institute was the project that, that launched and actually made it.

And it still exists today which is why I didn't cancel speaking here.

[LAUGH] And so, again here we are today at a keynote and Dave Methvin.

jQuery UK.

A picture of me will actually on here so I'll have to update that later.

So what I wanna do is take you through the vart gallery or

vart institute if you will.

So I started with Piet Mondrian.

How many people here are familiar with Mondrian's work?

Okay, so here's an example.

Now how many of you are familiar with his work and didn't realize it?

[LAUGH] Okay, very common to see Pete Mondrian's work

in all sorts of commodity items.

Actually his work entered the open archive.

I think 2015, I think this year.

He's a Dutch painter.

Part of the neoplasticism movement.

And did mostly good work and stuff.

Like this little piece here.

Composition number Ten.

He was really into making not just abstract art, but abstract art that was.

I guess easily enjoyed by people that didn't understand art,

kinda like most of us in this room, myself included.

And when I was at jQuery Chicago a friend of mine,

Sarah was giving a talk about a Pacman game that she had made with JQuery.

You might have heard of it.

And.

She had made a comment about how she didn't use tables and

it was like, oh I know Jen loves tables because I had spoken before her.

But she's like, but you really can't really make much with tables.

And I was like, that's not true.

>> [LAUGH].

>> I'm like, I'm gonna make Mondrian's work using tables.

And that's what I did.

So, I like to draw on paper, colored pencil and crayon, stuff like that.

So what I like thinking of doing is like I'm gonna recreate one of his artworks.

I'm gonna keep track of what I had to do,

in order to come from a blank piece of paper,.

To a Mondrian style work and that will be my algorithm and

then I rewrote it in JavaScript this is sort of my

js digital version of this original composition, and so

my algorithm was, I wanted to create a table.

Or grids, some people call it's an HTML table.

And then I want to create a given number of rows, and

in each row, give a number of cells.

And then I have to randomly, and recursively,

create tables within those cells, and then randomly color them.

He's mostly known for using primary colors.

So if you think, if you look back at this piece this is a table, and

in some of them, there are tables within themselves.

And I randomly go through each one and decide if its gonna get a color and if so,

then I randomly pick from red, blue, or yellow, whether to fill that cell or not.

And when I was drawing, I was like, this sounds like it's gonna be really easy,

but its tables, it never is so here's my demo.

This is a page that has a whole bunch of Mondrian grids there and it's generative.

So it uses random numbers to generate different work, so every time you refresh

it, a different set of Mondrian style artwork that my code created will show up.

You can see some of them have more tables or more cells within it than others.

And you just keep going forever, and ever, and ever and look, it's so easy.

Like Piet Mondrian who, you know, [LAUGH] so

I"m not gonna show too much code cuz, code's really boring to me.

But generally I have, I created a table, and then through each cell I have

a chance that I've given of whether it's gonna have a table within that cell.

And as you, and then recursively call this generate Mondrian table,

which does it all over again and I have a depreciation rate.

Because the deeper you get into each cell,

the less likely there're gonna be more cells within that table.

Which is something that I had to think about.

I wanted it to eventually get to zero.

I did try doing, like, an infinite loop thing.

But as we all know, JavaScript really sort of cuts out pretty quickly.

Just a restriction of the browser.

So I launched it right after jQuery Chicago, and I was like, okay, good.

So, like, if I don't ever do this for any other artist again,

at least I have something to talk about in the UK.

And I learned a few lessons.

One, there's a lot of parallels between programming and art.

Go figure.

Abstract art, abstract programming.

They both have like different meanings, but sort of what we're trying to do,

as engineers, is make our code more digestible in abstract art.

Even though, abstract may, may seem like it's kind of weird or whatever.

Is to make artwork more, you know, digestible for people who don't,

necessarily you have to look for a meaning in a painting.

If I'm looking at a composition of, of Mondrian, I'm not like, oh this like

reminds me of the trees on the beach one time when like my dad left my family.

Or something like dark or whatever [LAUGH] count on me to make things dark.

So the parallels are really there which comforted me

as someone who's an artist and got into engineering.

Because I always have this problem where I feel like I'm not doing enough in

either fields to legitimize myself as an artist or engineer.

I don't spend 24/7 writing code.

I don't spend 24/7 creating art.

What does that make me then, you know?

Well, it makes me a well-rounded human being.

But that's besides the point.

Developer backgrounds bury, vary.

I have a lot of feedback from people who were like oh, I really like this.

I am an engineer at this, you know, startup or this company.

And I studied art in college my co-worker and one of my best friends,

Adam Sontag, he studied theater and

he's an awesome engineer Nick at the MDA he didn't go to college, or

like, he like took one class or whatever and was like, I'm not into this, and

he taught himself how to program and he's one of the smartest people I know.

Strangely enough I have a masters in Computer Science.

I didn't study art, I kind of like regret that cuz I'm like,

oh I could've studied something like cool, like art or whatever, but

that's why I am catching up now in this project.

Also we feel like we need permission to art.

There are a lot of people who are like, thank you for doing this.

I'm gonna go do it now too.

And they're like, I'm like why are you thanking me?

Like, I just like, wrote a shitty blog about art.

Like, and I wrote, like, spaghetti java script to make it happen.

Which is also great about making art with code,

is like, it's my art work, so I don't expect anyone to contribute to it.

So like, I don't need build tools.

I don't need frameworks and stuff like that.

You can just sort of, think of something that you wanna make, and

then just write it up, and if it like looks the way that you want or

conveys your story the way you want, then excellent, awesome.

But a lot of people, especially engineers feel like they need permission or

some sort of validation, which is, as I mentioned I feel,

to create create art and still consider themselves an engineer.

And the other the, the other way happens too where we have a lot of people who have

studied art and are learning to code, and they feel like they don't belong.

They feel like they're entering some sort of territory that, you know,

belongs to us nerds or whatever.

And that's all bullshit.

Another thing is people are really weirded out by the new TLDs.

When this ended up on Hacker News, which is always like a nerve racking experience.

Especially as a, as a woman in the JavaScript community.

The only feedback was like, .institute is a domain name.

Yes, it is.

[LAUGH] So my next artist is Rene Magritte.

Rene Magritte is one of my favorite artists, a great surrealist painter.

And there happened to be a really awesome exhibit happening in Chicago,

which I wouldn't have seen if I didn't go and speak at jQuery Chicago.

And so, you might be familiar with some of his work on man.

And then, this is the interpretation of dreams, a four-celled panel.

And, and Magritte, much like engineers, reused a lot of his stuff.

A lot of elements in his paintings you see all over the place,

like the green apple, the bowl hat, the sky, the pipe.

That's not a pipe.

Horses, clocks, all this sorta stuff like that, and

as I was going through this exhibit, which showed all of this, much prolific work,

you would see these elements through many paintings.

So it's, his stuff is very recognizable.

And you know, we've reused code or, you know, reused or

we talk a lot about web components now.

We make it easier for ourselves to reuse those items.

He had to manually paint all of them.

So this is the work that I was inspired by from Magritte and so

what I wanted to do was create a four cell window,

and I wanted to randomly show items in each cell.

And randomly mislabeled all but one of those items, because the point like,

sort of what he was trying to convey with this painting and

a lot of his other works being a surrealist,

is that the things that you see are never quite what you think they actually are.

Like this, I'm pretty sure, I mean, I didn't study barn animals but

I don't think that's a door I think it's a horse.

That's a clock.

Not the wind.

That's some pottery.

Not a bird.

And that is a velice, or suitcase.

So I wanted to match that three items mislabeled, one not mislabeled.

And so I created this work.

I had this sort of like bag of items and they're labeled and

I would go through each item and put them on the cell, and then I would label them.

And if the label, if the item matches the label, then don't label that correctly.

And I added my own items, like here's some java script here.

If I refresh it and see if it works.

Well, it's gonna take a while to load.

But anyway, this is like a generative work as well.

There's some randomness to it.

It starts out with this bucket of things, I call it.

Which is a technical Java term for an array of objects, [LAUGH].

So I had, a module and it's label.

And then I have each section, the four sections in my item.

And I generate a random thing.

And go through each section and add it to there.

Then I worked on Henri Matisse.

I was noticing this pattern of men with names that start with M,

which I'll get into.

Henri Matisse is also a very prolific artist.

This is probably one of the most beautiful paintings I've ever seen in my

entire life.

And he's part of the Fauvism Movement, which I believe it Fauvism,

is like, is French for like the wild beast.

He was an impressionist that used bolder colors that made it less like real

life and that was sort of the Fauvism movement.

And that's why I love this painting so much because the colors are so brilliant,

and it, I'm sure the screen doesn't do it justice.

So if you look up Femme Eau Chapot, I believe, is how you pronounce it.

Woman with a hat.

You can find it, and it's just, I don't know, I, I.

I get chills when I, when I look at that.

But later on in his life, he fell really ill, and became wheelchair ridden.

And, he sort of had this like rebirth of like what kind of art he wanted to use,

and started with working with paper cut-outs.

Around the time that I was thinking of what artist to do next, the Museum of

Modern Art in New York City opened up an exhibit of Matisse's paper cutouts.

And so I went and this is the sort of work that he had.

And he had assistants help him cut the pieces.

And he made tons and tons of these, like, sort of things.

And some of them even converted into stained glass.

And it was just really cool.

And so for generating his work I wanted to make a tool that

creates paper cut out like work, not something that randomly generates it.

And so I reused a lot of stuff from make8bitart.com,

where you create a canvas, and then when you click a canvas you're starting.

And then continue a path as you click.

And when you click near the beginning of your path.

Then close it and fill it with color and

you can sort of add you know shadows to your canvas like elements

to make it look more like 3 dimensional like paper on paper.

And so here we have cutting out Matisse,

it starts with default blue and as I click I got my path here.

And then I have my cutout.

[BLANK_AUDIO]

And then I added some colors that are based on some of the other works

that he had.

And that just something that you can draw.

And there's, for all the stuff that involves canvas I always have the clear

button if you want to start over, or save if you want to save as a png file to show

off your art work, which a lot of people have done, which I think is really cool.

So, last night, I was on Twitter.

I just joined Twitter last night, actually.

And there's this, I don't know who she is.

I think she's a sister of a friend of mine.

I would kind of, I kind of remember who she was as I was following her.

But she said something really interesting.

And this is something that I had struggled with after realizing that I had done

three nail painters with like the last name starting with M.

And that was name a single female painter.

Any female painter, no Google, just pick from the top of your head.

This treat should make you very sad.

It does make me very sad.

And I'm totally guilty about not knowing enough about female painters.

I was having conversation a couple months ago when I was thinking what next artist

to do, and I was like, oh, what female artist should I do?

And everybody was like, Georgia O'Keeffe, Georgia O'Keeffe.

Like, all that was all that they were saying, and I was like, I.

Her artwork doesn't typically like actually resonate with me, and so

I don't feel like I could write an essay that personally attaches it to me.

I can't wrap my head around how it would like mash up with like code.

And also really that's the only female painter any of us can come up with.

And then Frida Calo, who resonates with me as someone who loves selfies.

>> [LAUGH].

>> But this is something I struggled with a couple of months ago, and

just seeing this last night reminded me.

And I had decided that my next painter was going to be Mary Cassatt.

Who was an impressionist from the United States.

Much like myself.

But I was like, how the hell am I going to recreate her artwork using JavaScript?

Without having any research.

And it took me a while, but

I found some really awesome work of hers that looked unfinished and sketched.

Where she sketched like pencil or, or charcoal over paper and

then did color you know pastel over it.

And some of these items like they're so brilliant these pieces.

Even though that it sort of has it's unfinished look.

I love this 'cuz that baby's like can I live, like.

So I was like, oh, I will make

something that lets you upload an image and create like a de-sketched look.

Because the image that you upload, like, if it's a photo,

somebody has already done.

But, like, let's see if we can, like, undo some of it.

So, I wanted the person who will upload an image draw a specific color in pencil

on the canvas, and

then have an eraser that erases every color except that pencil color.

Sure, I can do that.

That's probably easy.

Famous last words all the time.

So, I actually managed to do that, and launched it a couple of weeks ago.

So, you can upload an image.

[LAUGH] This is, this is Dave from the lobby when we met up the other day.

[LAUGH] you start out with a pencil, and.

Let's see, you can just basically, draw anything.

Like, I'll outline these fellows right here, that were talking.

You know, Dave and I had just landed from the East Coast in the states.

It was like, 7:45 when we landed.

We got to the hotel at 10.

We waited around for a little bit and pretended to have a conversation and

understand what we were saying, even though that, we were so tired.

And here the eraser erases everything but the pencil.

And really cool things have been made with this.

People have posted on Twitter to me again, which if you do that I'd love to see it.

And then you can save it if you like.

Look, they're ghosts.

Now the hotel is haunted.

The power of art.

And the way that this is done, is the most important part.

Is the erase tool checks the current pixel where you click.

And I have a square, and wherever the eraser goes, it checks all the pixels in

that square, and if it matches the color of the pencil that I gave it.

Then it doesn't do anything.

Otherwise it erases it.

And I had to keep the eraser pretty small.

Because that's a lot of calculations going on as you're

moving your mouse over the canvas.

Which again, JavaScript doesn't,

isn't able to handle all that sort of stuff cuz it's not meant to.

But some lessons I've learned is that most people love art.

A lot of people,

I've only mostly heard positive feedback about vart and these pieces.

And I've had a lot of people who I work with or

just people on Twitter that are like, oh I would love to do a guest post.

I'm like that's great, show me like, what stuff you make and

soon I'll be posting guest stuff on vart.institute.

And it's good because then it's something I want to continue doing, and

it's hard to do something in the tech community that people are against,

because every time you hear negative feedback or, about something,

it's just like, I have no time for that.

You know what I mean?

I, I get yelled at on the internet enough for writing satire.

The last thing I want is someone to yell at me about me trying to create something

that makes me feel good, and hopefully makes other people feel good.

Some people like JavaScript.

I, I kinda like it, you know.

JavaScript is very portable, and, and a lot of people tell me,

like when you taught, why did you teach art with JavaScript?

And the main reason was because of portability, you know what I mean?

When I had students ranging as I say from age eight to 80 who are in the lab,

all I had to do was say open up the browser and

then I showed them how to up the console in whatever browser they choose.

And we just write JavaScript.

And then when they want to go home and

do that, they probably already have a browser, and they just do the same thing.

There's no setup of a Java virtual machine or anything like that.

No node install.

It's just, it's good for that.

And some people, you know, if, if it, if there's no barrier to the language,

or to like whatever environment it is, then the better it is and

the easier it is to make art.

Which is a cool thing.

JavaScript is an expressive, yet restrictive, medium for creating art.

I've been able to do a lot.

More than I could ever fathom.

And all of my ideas were last minute.

I'm just like I can do it, it's fine.

The CIO, the MBA always used to say, it's just software, you can do it.

It's just software.

Which would drive me nuts.

Because, No, it's not just software, there's like time and money and blah,

blah, blah, blah and Internet Explorer, and.

[LAUGH] But, JavaScript allows you to create a lot of these cool things.

And JavaScript with HTML canvas is just like,

one of the main reasons why I'm still a JavaScript developer today.

Also because PHP can't figure out what to call itself.

And it's restrictive though.

You know when I was creating the pink fill algorithm for

[UNKNOWN] you could paint large areas.

Everything that I wrote would lock up the browser.

Firefox would literally say too many recursions,

which a Java developer doesn't like to be told too many recursions.

So relearning how to do math in different ways to

make the JavaScript work without crashing your browser made it restrictive,

but I also learned more and it was more of a challenge which was cool.

And there's a lot of art and chal-, a lot of math and

challenging stuff in the creation of art with it.

So what's next for vart?

I have to do a lot more research.

I wanna find more women painters.

I wanna delve into other types of art.

Video art, music, all this sort of stuff that the browser is making it easier,

easier with time to create.

You know we got the web audio API, which I'm like super stoked to play around with

lately and I've seen really awesome stuff come from a lot of companies out of it.

And really just continue working on writing and feeling better, not only

about myself creating art, but also seeing everybody else create art using code.

And sharing it, and telling stories about themselves and

just, I just feel like the more that we talk about ourselves personally and

our connection to art, the more empathy we all feel for each other.

Which is always a really good thing for the tech community.

[LAUGH].

And also more Dave speaking at jQuery conferences hopefully.

And you know, maybe I'll be there after him.

So thank you very much.

You can see everything at vart.institute.

That's a real domain name.

I'm on Twitter at jennschiffer, jennmoney.biz, real domain name.

My email, that's real.

And I'm on IRC on freenode, jennmoneydollars.

So if you create anything with these tools or if you want to show me stuff that

you've made, I would love to see it and post it online for other people to see.

So thank you.

[APPLAUSE] [MUSIC]