Golan Levin: Char Stiles is an artist, edu­ca­tor, and pro­gram­mer based in Brooklyn, New York and the cre­ator of the col­lab­o­ra­tive Shader​.Place arts-programming envi­ron­ment. She works cre­ative­ly in the low­er lev­els of com­pu­ta­tion­al sys­tems to bring to light how com­put­ers work. Char works and col­lab­o­rates cross media such as inter­ac­tive instal­la­tion, video, per­for­mance, and the Web. She’s a part of the Livecode​.nyc col­lec­tive, where she orga­nizes shows and live­codes music and visu­als. She has live­cod­ed for Alexander Wang, VIA Festival, and the School for Poetic Computation, among oth­ers. She holds a hybrid Bachelor of Computer Science and Art from Carnegie Mellon University, and she can be found online at charstiles​.com. Char Stiles. 

Char Stiles: Hi! I’m so hap­py to be here. So, hi every­one. That was a great intro Golan. It hon­est­ly made me sound real­ly awe­some, so it made me feel like maybe this talk is going to be nice. 

Okay, cool. So, hi. I’m Char. I am an avid live­coder and an online work­shop teacher. Those are the two iden­ti­ties I’m tak­ing on for this talk, because it’s very con­tained. Just gonna talk about those two parts of my work. 

[dif­fi­cul­ties get­ting audio of video clip to share ~1:30–2:15]

Livecoding is where two pro­gram­mers, one to cre­ate music and one to cre­ate visu­als, will be on stage or livestream­ing code that will cre­ate music and code that will cre­ate visu­als along­side it. And as you can see on the screen we will also dis­play the code as what it is com­piled to is cre­at­ing the sound of the music. So it cre­ates this one-to-one trans­paren­cy of like, the code that you’re see­ing is exact­ly what you’re expe­ri­enc­ing. So it’s pre­sent­ed as some­thing that is enter­tain­ing, in per­for­mances called algo­raves, which is a port­man­teau of ​“algo­rithm” and ​“rave.”

When I recent­ly described it to some­one who was inter­view­ing me, he said ​“That sounds like some­thing a Hollywood direc­tor would make up that pro­gram­mers do but they don’t actu­al­ly do it.” And that is very…there’s a good rea­son why one would think that. It’s because it seems like a logis­ti­cal nightmare—and it is. Because as a lot of pro­gram­mers here know, and oth­er folks who work with tech­nol­o­gy in gen­er­al, tech just does not want to play nice live. Especially when you have mul­ti­ple types op inputs with like exper­i­men­tal tools—exactly what live­cod­ing is. It sounds cool on paper but when you actu­al­ly do it there’s just a ton of prob­lems and mis­takes, and that’s just like, part of the iden­ti­ty of the live­cod­ing community. 

I did not make up live­cod­ing. There is a com­mu­ni­ty all over the world. It’s most­ly in Europe, but we also have our small com­mu­ni­ty in New York. And we have a web site. This is our web site live​code​.nyc where we are put on shows. And we have a Discord that you can join. All of our mee­tups are vir­tu­al, but we are very wel­com­ing to new­com­ers and any­one who wants to dab­ble in any­thing that’s kind of like live com­pil­ing code. So it does­n’t nec­es­sar­i­ly have to be con­tin­u­al­ly live com­pil­ing code, but if it’s some­thing that’s kind of on a com­put­er that makes sound or music, we accept you. 

So. Now you know what live­cod­ing is. I want to talk about the next part of my iden­ti­ty, which is a work­shop teacher. So, I love to teach all of the things that I do on stage, because nat­u­ral­ly the ques­tions are— When I’m cod­ing there are a lot of ques­tions of like how I’m doing it, what are you doing, and so I love explain­ing it. So I start­ed teach­ing these work­shops. Especially dur­ing the pan­dem­ic I start­ed teach­ing them online, and a lot of folks from all over the world were able to come and join in and learn about what live­cod­ing is. 

Specifically, a tech­nique that I like to teach is a process called ray march­ing, which is what you saw in the last video. A lot of the shapes that you saw were ray march­ing. And Reza briefly men­tioned ray march­ing in Satin. So it’s a way to cre­ate a 3D scene in just one frag­ment shad­er. It teach­es pro­gram­ming con­cepts like sig­nal pro­cess­ing as well as func­tion­al pro­gram­ming because you’re basi­cal­ly writ­ing code for every sin­gle pix­el on the screen that’s being ren­dered all at once. 

I also love it because it’s kind of like—I like to call it pseu­do physically-based ren­der­ing. Because it fol­lows the ray or light sim­i­lar to how pho­tons bounce around in the real world. These are just images that I made for the work­shop. I teach a work­shop on ray march­ing specif­i­cal­ly, like I said. So the ray of light fol­lows the path that a pho­ton would bounce around in the real world because there’s already these kind of for­mu­las that physics has giv­en us to cal­cu­late what a col­or should be when the light hits it a cer­tain way. 

But, instead of actu­al­ly work­ing like pho­tons… So pho­tons, the ray comes from the light source, bounces around, and hits our eyes. Ray march­ing works that the ray comes from the view­er, bounces around, and hits some­thing. And then it returns the col­or of that something. 

I men­tion this because this is actu­al­ly how Plato thought vision worked. It’s called emis­sive the­o­ry, and they thought that eye feel­ers would come out of your eyes and bounce around, and then tell your brain what was in front of you because of your eye feelers. 

Euclid came around and thought hmm. You know, if that was true it would prob­a­bly take us a while for our eye feel­ers to go to the stars and we would­n’t see the stars right away if we closed our eyes and opened our eyes. Our eye feel­ers would have to trav­el a lit­tle ways before hit­ting the stars. So he con­clud­ed that it is light, pho­tons, emit­ting from a light source com­ing into our eyes. 

So that’s a lit­tle rea­son why I love ray march­ing. Because it’s sort of physically-based, you can make things look like they’re gonna go physically-based but you can total­ly veer off into a bush and real­ly mess with folks’ per­cep­tions. That’s anoth­er rea­son why I love per­form­ing with ray marching. 

I want to show you some work that my stu­dents have made through­out the pan­dem­ic. This is a won­der­ful, won­der­ful show in newart​.city where all of these shaders are run­ning real-time in my brows­er. I’m laugh­ing because I’m run­ning Zoom and I’m run­ning all these shaders and I have anoth­er shad­er run­ning in anoth­er tab. And let’s pray for my computer. 

But all of these are exam­ples of work that my stu­dents have made through­out the work, and I’m so proud of them. You can see in the bot­tom right cor­ner the cred­it. So this is by Adelle Lin. And we have shaders from 2D shaders—so right here it’s a from a 2D shad­er workshop. 

To 3D shaders. This one looks like a beau­ti­ful ocean. I wish that my talk could just be anno­tat­ing and going through all of the stu­dents’ works. Because I love it all so much There’s a lot of real­ly great expres­sion com­ing from just like an hours’ work­shop of real­ly beau­ti­ful work. 

And I love being able to kind of teach these work­shops hap­haz­ard­ly, or just from who­ev­er’s online. Because every­one comes with a dif­fer­ent base of knowl­edge that they bring to the work­shop. So for exam­ple I did­n’t teach any kind of algo­rithm like this but maybe Kirit had an idea of an algo­rithm that they want­ed to use in their shad­er and they’re able to apply that. so I’m just all for one-room schoolhouses. 

And there’s anoth­er video of just some of the work that stu­dents have done. It’s been just real­ly amaz­ing to be able to meet every­one who is inter­est­ed in cod­ing shaders and where they come from, and to be able to kind of teach the lit­tle bit that I know to them. 

We even had a show in Minecraft. It’s less excit­ing because the shaders were not able to live com­pile, but I want­ed to show it regard­less because you know. It’s in Minecraft and it has that going for it. 

[demon­stra­tion runs ~10:40–12:52 of recording]

Okay, so now you know a lit­tle bit of my back­ground. Let’s talk about Shader​.Place. So Shader​.Place, I’m actu­al­ly just gonna show you a demo. I’m going to go right in it. It is a live­cod­ing edi­tor, so to prove it if I go here and I have this piece of code that I’ve pre­pared and I uncom­ment it back in—that’s how a lot of live­cod­ing works sometimes–we have this shad­er updat­ed automag­i­cal­ly in the background.

And so this can be used as a per­for­mance tool, but the thing that is unique about it is if some­one were to log on on anoth­er com­put­er, say a com­put­er right here [turns to access a dif­fer­ent com­put­er] using the same room name, which I’m not going to say until a lit­tle bit lat­er, they can also go in and… 

Let’s say I want­ed to make the sphere up here, so you see this user mouse? [indi­cat­ing a yel­low high­light­ed area in the code edi­tor] That’s me, that’s anoth­er Char. That’s anoth­er Char that’s right here, on this com­put­er. I can make the sphere big­ger by sim­ply chang­ing the code. Let’s make it like nine…oh, that’s way too big…six.

Then the sphere is gigan­tic. And this is all hap­pen­ing real-time. And if any­one wants to come in now that I’ve proofed it, the pass­word is ​“oss­ta.” You can go to Shader​.Place and you can enter the room name, which is ​“oss­ta” all low­er case, and you can have at it. I’ll leave this shad­er tab open and I’ll see if any­one changes any­thing at the end. I see folks in there already.

There we go anoth­er, anoth­er user.

There’s a lot that I want to work on this app. I start­ed cre­at­ing this app actu­al­ly just at the begin­ning of the res­i­den­cy. I was obvi­ous­ly very moti­vat­ed by— 

Yes. Oh my gosh. It’s hap­pen­ing. Collaboration’s happening.

But any­ways. Let’s con­tin­ue my pre­sen­ta­tion and then we’ll come back to it. 

So yeah. Why did I do this? Why anoth­er shad­er edi­tor? And Reza actu­al­ly also touched on this in his last talk, and I’m real­ly sur­prised that he was say­ing that he was rein­vent­ing the wheel. Because I think that what he’s doing is very dif­fer­ent. But maybe I guess that’s just how we all feel when we’re mak­ing tools. You know, there are already tools that are out there, but why do you make your own tool? Because there’s the Shadertoy by Inigo Quilez. Ghere’s Shaderboth by Max Bittker (which is amaz­ing). There’s glslViewer by Patricio. So why anoth­er shad­er place? 

Well, I think there’s some­thing nice to build­ings some­thing that’s a per­fect tool for you and your own cir­cle. So Eliza, who is host for a Twitch stream called Curiously Minded where Eliza and Ilithya, who are two pro­gram­mers on the top and the bot­tom, cre­ate a shad­er togeth­er live on Twitch. And they invit­ed me to show Shader​.Place as they used it to cre­ate a shad­er together. 

Eliza made a real­ly nice video. I’m just gonna show a lit­tle clip of it. I’m sad that the siz­zle reel of the of the work­shop did­n’t make it in my pre­sen­ta­tion. But basi­cal­ly it was a real­ly spe­cial moment for me. And it was so far my favorite moment of cre­at­ing Shader​.Place, because Ilithya and Eliza had met at one of my work­shops. And it is kind of like a whole cir­cle moment where then we all got togeth­er just as friends to cre­ate some­thing togeth­er. We nev­er met in real life; it’s very much like a pan­dem­ic friend­ship. I’m laugh­ing because I’m look­ing at Shader​.Place as it’s happening.

So that’s the rea­son why I want­ed to make Shader​.Place. And also, mak­ing a tool and rein­vent­ing the wheel…making a tool that only works for you and your friends, and you know that it will work for you, that’s real­ly the only way to start mak­ing tools. Before you can make tools for any­one else you have to know what it’s like to be the per­son who is receiv­ing the tool that is being made. So this is one of my first open source tools that I’m cre­at­ing. And so it’s been a very… Well, I’ve made some oth­er stuff but it’s the tool that I real­ly want to… That I’m mak­ing it nice so that oth­er peo­ple can be able to con­tribute to it. 

Another tool that I co-created with Chirag Davé, we cre­at­ed a tool togeth­er called CARL, which stands for Code Augmented Reality Live. So basi­cal­ly how this works is that you code and then the code gets broad­cast to every­one who con­nects to the serv­er on their phone. And then they can see the updates to the shad­er live in AR.

And so I like how when you start just mak­ing tools for your­self, they kind of roll into each oth­er and they inspire each oth­er to become big­ger and bet­ter. So, it’s the kind of tool­chains of tools. 

Oh, and I have an upcom­ing class. I don’t have the link mini­fied yet, but if you sign up to my email list I’ll send the Withfriends link to sign up. This is just a class that will go over the fun­da­men­tals of 2D shad­er pro­gram­ming. It is rec­om­mend­ed that you have some pro­gram­ming expe­ri­ence, but some folks have got­ten through the work­shop with hav­ing no pro­gram­ming expe­ri­ence and it’s been okay. But rec­om­mend­ed that you have some pro­gram­ming expe­ri­ence. It’s on June 5^th, and maybe I’ll put the link… I was debat­ing if I should even put this in, but I guess. So that’s a link to sign up for the workshop. 

And this pre­sen­ta­tion was­n’t a whole ruse to get every­one to sign up for my work­shop. Anyways, thank you so much to the STUDIO for Creative Inquiry for hav­ing me. And thank you to the oth­er res­i­dents for being so inspiring. 

Golan Levin: Charlotte, thank you so much for this pre­sen­ta­tion. I’m immense­ly proud as some­one who was your teacher a few years ago, and also it’s just been great to have you back at Carnegie Mellon and back at the STUDIO to kind of con­tin­ue your work beyond school. 

I have a ques­tion, which is… You like teach­ing, I know. And you work in sev­er­al dif­fer­ent artist col­lec­tives, includ­ing sev­er­al you did­n’t even men­tion here.

Char Stiles: Yeah.

Levin: And you’ve made a col­lab­o­ra­tive shad­er edi­tor. You were for a while at The Recurse Center, and I don’t know if you had a chance there to expe­ri­ence pair coding.

Stiles: Right.

Levin: I won­der if you could talk about your rela­tion­ship to the social dimen­sion of com­put­ing. Of like think­ing through code with oth­er peo­ple, at the same time.

Stiles: Right. So, all code when you’re cod­ing is think­ing through code with oth­er peo­ple. The only skills dif­fer­ent is time. Perhaps you’re think­ing through code with some­one who cre­at­ed the email pro­to­col in 1971. But you’re still think­ing… I’m just try­ing to say that all code is a prod­uct of a human thought. And so we think about code as these things that have some sort of like— Related like a law of physics. Like the rea­son why SMTP is like that is because it’s like a law of physics or some­thing like that. But it’s not. It’s because a lot of peo­ple ten, twen­ty years ago made a deci­sion like that. And I bet a lot of web pro­gram­mers agree with me because I think a lot of the Web is that you’re work­ing with code that peo­ple have made that’s just grand­fa­thered in. 

And so I think all cod­ing is pair pro­gram­ming, even if you’re cod­ing by your­self. I think that if we start treat­ing it that way, it will make cod­ing a lit­tle eas­i­er. And also I want­ed to quote, or loose­ly quote, a tweet that I saw the oth­er day by Emma Ray Norton. And they tweet­ed what if any­one was able to cre­ate their own pro­gram­ming lan­guage, and they could have the print func­tion be called some­thing like…why is it like this? Or what the fuck? And if some­one was able to cre­ate a print state­ment with a func­tion that just makes sense to them, they under­stand that it does­n’t have to console.log, you know. It does­n’t have to be c_out. 

So, I think that the explo­ration of learn­ing how to code is con­tin­u­al­ly just learn­ing how to code the envi­ron­ment around you in gen­er­al. Just to kind of long-windedly answer your question. 

Levin: There’s anoth­er ques­tion from the YouTube chat. I even remem­ber when you first took a class with me years and years and years ago. You had not yet learned to code. And the ques­tion that some­one asks is, what was the biggest chal­lenge that you faced while learn­ing to code for cre­ative projects?

I mean, you were always going for cre­ative projects. Your bap­tism in cod­ing was in cre­ative coding.

Stiles: Mm hm.

Levin: But what was the chal­lenges that you faced as a begin­ning programmer?

Stiles: Oh, as a begin­ning pro­gram­mer, the chal­lenge that I faced was fig­ur­ing out what belonged to the com­put­er what belonged to vari­ables that we would make. And like, what lev­els of that. Because it’s like we have dif­fer­ent lev­els of what belongs to the com­put­er. So we have sys­tem vari­ables, and then we have from the what­ev­er API or wrap­per you’re using, and then from the vari­ables that you define your­self. Or maybe you’re using anoth­er library. Like what belongs to who. Because the truth is that it’s all murky and noth­ing real­ly belongs to any­one, but we cre­ate these bound­aries to I guess cre­ate mean­ing out of com­plex­i­ty. So that was some­thing that was real­ly dif­fi­cult for me. 

And also just remem­ber­ing to put the semi­colon down.