Golan Levin: Char Stiles is an artist, educator, and programmer based in Brooklyn, New York and the creator of the collaborative Shader.Place arts-programming environment. She works creatively in the lower levels of computational systems to bring to light how computers work. Char works and collaborates cross media such as interactive installation, video, performance, and the Web. She’s a part of the Livecode.nyc collective, where she organizes shows and livecodes music and visuals. She has livecoded for Alexander Wang, VIA Festival, and the School for Poetic Computation, among others. 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 happy to be here. So, hi everyone. That was a great intro Golan. It honestly made me sound really awesome, 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 livecoder and an online workshop teacher. Those are the two identities I’m taking on for this talk, because it’s very contained. Just gonna talk about those two parts of my work.

[difficulties getting audio of video clip to share ~1:30–2:15]

Livecoding is where two programmers, one to create music and one to create visuals, will be on stage or livestreaming code that will create music and code that will create visuals alongside it. And as you can see on the screen we will also display the code as what it is compiled to is creating the sound of the music. So it creates this one-to-one transparency of like, the code that you’re seeing is exactly what you’re experiencing. So it’s presented as something that is entertaining, in performances called algoraves, which is a portmanteau of “algorithm” and “rave.”

When I recently described it to someone who was interviewing me, he said “That sounds like something a Hollywood director would make up that programmers do but they don’t actually do it.” And that is very…there’s a good reason why one would think that. It’s because it seems like a logistical nightmare—and it is. Because as a lot of programmers here know, and other folks who work with technology in general, tech just does not want to play nice live. Especially when you have multiple types op inputs with like experimental tools—exactly what livecoding is. It sounds cool on paper but when you actually do it there’s just a ton of problems and mistakes, and that’s just like, part of the identity of the livecoding community.

I did not make up livecoding. There is a community all over the world. It’s mostly in Europe, but we also have our small community in New York. And we have a web site. This is our web site livecode.nyc where we are put on shows. And we have a Discord that you can join. All of our meetups are virtual, but we are very welcoming to newcomers and anyone who wants to dabble in anything that’s kind of like live compiling code. So it doesn’t necessarily have to be continually live compiling code, but if it’s something that’s kind of on a computer that makes sound or music, we accept you.

So. Now you know what livecoding is. I want to talk about the next part of my identity, which is a workshop teacher. So, I love to teach all of the things that I do on stage, because naturally the questions are— When I’m coding there are a lot of questions of like how I’m doing it, what are you doing, and so I love explaining it. So I started teaching these workshops. Especially during the pandemic I started teaching them online, and a lot of folks from all over the world were able to come and join in and learn about what livecoding is.

Specifically, a technique that I like to teach is a process called ray marching, which is what you saw in the last video. A lot of the shapes that you saw were ray marching. And Reza briefly mentioned ray marching in Satin. So it’s a way to create a 3D scene in just one fragment shader. It teaches programming concepts like signal processing as well as functional programming because you’re basically writing code for every single pixel on the screen that’s being rendered all at once.

I also love it because it’s kind of like—I like to call it pseudo physically-based rendering. Because it follows the ray or light similar to how photons bounce around in the real world. These are just images that I made for the workshop. I teach a workshop on ray marching specifically, like I said. So the ray of light follows the path that a photon would bounce around in the real world because there’s already these kind of formulas that physics has given us to calculate what a color should be when the light hits it a certain way.

But, instead of actually working like photons… So photons, the ray comes from the light source, bounces around, and hits our eyes. Ray marching works that the ray comes from the viewer, bounces around, and hits something. And then it returns the color of that something.

I mention this because this is actually how Plato thought vision worked. It’s called emissive theory, and they thought that eye feelers 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 probably take us a while for our eye feelers to go to the stars and we wouldn’t see the stars right away if we closed our eyes and opened our eyes. Our eye feelers would have to travel a little ways before hitting the stars. So he concluded that it is light, photons, emitting from a light source coming into our eyes.

So that’s a little reason why I love ray marching. Because it’s sort of physically-based, you can make things look like they’re gonna go physically-based but you can totally veer off into a bush and really mess with folks’ perceptions. That’s another reason why I love performing with ray marching.

I want to show you some work that my students have made throughout the pandemic. This is a wonderful, wonderful show in newart.city where all of these shaders are running real-time in my browser. I’m laughing because I’m running Zoom and I’m running all these shaders and I have another shader running in another tab. And let’s pray for my computer.

But all of these are examples of work that my students have made throughout the work, and I’m so proud of them. You can see in the bottom right corner the credit. So this is by Adelle Lin. And we have shaders from 2D shaders—so right here it’s a from a 2D shader workshop.

To 3D shaders. This one looks like a beautiful ocean. I wish that my talk could just be annotating and going through all of the students’ works. Because I love it all so much There’s a lot of really great expression coming from just like an hours’ workshop of really beautiful work.

And I love being able to kind of teach these workshops haphazardly, or just from whoever’s online. Because everyone comes with a different base of knowledge that they bring to the workshop. So for example I didn’t teach any kind of algorithm like this but maybe Kirit had an idea of an algorithm that they wanted to use in their shader and they’re able to apply that. so I’m just all for one-room schoolhouses.

And there’s another video of just some of the work that students have done. It’s been just really amazing to be able to meet everyone who is interested in coding shaders and where they come from, and to be able to kind of teach the little bit that I know to them.

We even had a show in Minecraft. It’s less exciting because the shaders were not able to live compile, but I wanted to show it regardless because you know. It’s in Minecraft and it has that going for it.

[demonstration runs ~10:40–12:52 of recording]

Okay, so now you know a little bit of my background. Let’s talk about Shader.Place. So Shader.Place, I’m actually just gonna show you a demo. I’m going to go right in it. It is a livecoding editor, so to prove it if I go here and I have this piece of code that I’ve prepared and I uncomment it back in—that’s how a lot of livecoding works sometimes–we have this shader updated automagically in the background.

And so this can be used as a performance tool, but the thing that is unique about it is if someone were to log on on another computer, say a computer right here [turns to access a different computer] using the same room name, which I’m not going to say until a little bit later, they can also go in and…

Let’s say I wanted to make the sphere up here, so you see this user mouse? [indicating a yellow highlighted area in the code editor] That’s me, that’s another Char. That’s another Char that’s right here, on this computer. I can make the sphere bigger by simply changing the code. Let’s make it like nine…oh, that’s way too big…six.

Then the sphere is gigantic. And this is all happening real-time. And if anyone wants to come in now that I’ve proofed it, the password is “ossta.” You can go to Shader.Place and you can enter the room name, which is “ossta” all lower case, and you can have at it. I’ll leave this shader tab open and I’ll see if anyone changes anything at the end. I see folks in there already.

There we go another, another user.

There’s a lot that I want to work on this app. I started creating this app actually just at the beginning of the residency. I was obviously very motivated by—

Yes. Oh my gosh. It’s happening. Collaboration’s happening.

But anyways. Let’s continue my presentation and then we’ll come back to it.

So yeah. Why did I do this? Why another shader editor? And Reza actually also touched on this in his last talk, and I’m really surprised that he was saying that he was reinventing the wheel. Because I think that what he’s doing is very different. But maybe I guess that’s just how we all feel when we’re making 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 amazing). There’s glslViewer by Patricio. So why another shader place?

Well, I think there’s something nice to buildings something that’s a perfect tool for you and your own circle. So Eliza, who is host for a Twitch stream called Curiously Minded where Eliza and Ilithya, who are two programmers on the top and the bottom, create a shader together live on Twitch. And they invited me to show Shader.Place as they used it to create a shader together.

Eliza made a really nice video. I’m just gonna show a little clip of it. I’m sad that the sizzle reel of the of the workshop didn’t make it in my presentation. But basically it was a really special moment for me. And it was so far my favorite moment of creating Shader.Place, because Ilithya and Eliza had met at one of my workshops. And it is kind of like a whole circle moment where then we all got together just as friends to create something together. We never met in real life; it’s very much like a pandemic friendship. I’m laughing because I’m looking at Shader.Place as it’s happening.

So that’s the reason why I wanted to make Shader.Place. And also, making a tool and reinventing the wheel…making a tool that only works for you and your friends, and you know that it will work for you, that’s really the only way to start making tools. Before you can make tools for anyone else you have to know what it’s like to be the person who is receiving the tool that is being made. So this is one of my first open source tools that I’m creating. And so it’s been a very… Well, I’ve made some other stuff but it’s the tool that I really want to… That I’m making it nice so that other people can be able to contribute to it.

Another tool that I co-created with Chirag Davé, we created a tool together called CARL, which stands for Code Augmented Reality Live. So basically how this works is that you code and then the code gets broadcast to everyone who connects to the server on their phone. And then they can see the updates to the shader live in AR.

And so I like how when you start just making tools for yourself, they kind of roll into each other and they inspire each other to become bigger and better. So, it’s the kind of toolchains of tools.

Oh, and I have an upcoming class. I don’t have the link minified 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 fundamentals of 2D shader programming. It is recommended that you have some programming experience, but some folks have gotten through the workshop with having no programming experience and it’s been okay. But recommended that you have some programming experience. It’s on June 5th, and maybe I’ll put the link… I was debating if I should even put this in, but I guess. So that’s a link to sign up for the workshop.

And this presentation wasn’t a whole ruse to get everyone to sign up for my workshop. Anyways, thank you so much to the STUDIO for Creative Inquiry for having me. And thank you to the other residents for being so inspiring.

Golan Levin: Charlotte, thank you so much for this presentation. I’m immensely proud as someone 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 continue your work beyond school.

I have a question, which is… You like teaching, I know. And you work in several different artist collectives, including several you didn’t even mention here.

Char Stiles: Yeah.

Levin: And you’ve made a collaborative shader editor. You were for a while at The Recurse Center, and I don’t know if you had a chance there to experience pair coding.

Stiles: Right.

Levin: I wonder if you could talk about your relationship to the social dimension of computing. Of like thinking through code with other people, at the same time.

Stiles: Right. So, all code when you’re coding is thinking through code with other people. The only skills different is time. Perhaps you’re thinking through code with someone who created the email protocol in 1971. But you’re still thinking… I’m just trying to say that all code is a product 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 reason why SMTP is like that is because it’s like a law of physics or something like that. But it’s not. It’s because a lot of people ten, twenty years ago made a decision like that. And I bet a lot of web programmers agree with me because I think a lot of the Web is that you’re working with code that people have made that’s just grandfathered in.

And so I think all coding is pair programming, even if you’re coding by yourself. I think that if we start treating it that way, it will make coding a little easier. And also I wanted to quote, or loosely quote, a tweet that I saw the other day by Emma Ray Norton. And they tweeted what if anyone was able to create their own programming language, and they could have the print function be called something like…why is it like this? Or what the fuck? And if someone was able to create a print statement with a function that just makes sense to them, they understand that it doesn’t have to console.log, you know. It doesn’t have to be c_out.

So, I think that the exploration of learning how to code is continually just learning how to code the environment around you in general. Just to kind of long-windedly answer your question.

Levin: There’s another question from the YouTube chat. I even remember when you first took a class with me years and years and years ago. You had not yet learned to code. And the question that someone asks is, what was the biggest challenge that you faced while learning to code for creative projects?

I mean, you were always going for creative projects. Your baptism in coding was in creative coding.

Stiles: Mm hm.

Levin: But what was the challenges that you faced as a beginning programmer?

Stiles: Oh, as a beginning programmer, the challenge that I faced was figuring out what belonged to the computer what belonged to variables that we would make. And like, what levels of that. Because it’s like we have different levels of what belongs to the computer. So we have system variables, and then we have from the whatever API or wrapper you’re using, and then from the variables that you define yourself. Or maybe you’re using another library. Like what belongs to who. Because the truth is that it’s all murky and nothing really belongs to anyone, but we create these boundaries to I guess create meaning out of complexity. So that was something that was really difficult for me.

And also just remembering to put the semicolon down.