This week I got to speak with Ilithya, who put together some favorite Pens, some of which we actually manage to get to during the show 😂. Like our chat with Lea Rosema, we really get into the magic of Shaders. Shaders are certainly of the web, but often feel extraordinary, giving off a “the web can do that?” kind of feeling. Check out: personal website, collaboration with Eliza Struthers-Jobin, shaders tutorial video with Alex Trost, NFTs.
Time Jumps
- 00:25 Guest introduction
- 02:13 How did you get into shaders?
- 06:57 Where does a shader come in?
- 10:18 Sponsor: Memberful
- 11:29 The roar typo Pen
- 16:20 3D polaroid Pen
- 23:03 Collaborating on a Pen
- 28:41 Thinking in layers
- 31:04 The fear of coding and math
- 36:45 What’s the minimum amount of code needed to start
Sponsor: Memberful
Memberful is easy to use, best-in-class membership software for independent creators, publishers, podcasters, educators, and more. We take care of the hard stuff so you can focus on what you do best, while earning revenue quickly. With Memberful, you have full control and ownership of all things related to your brand, your audience, and your finances.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello, everybody. Time for another CodePen Radio. I have a special guest who just makes absolutely incredible art and teaches it and all sorts of things. We're going to get into all that. It's Ilithya. Hi, Ilithya. How are you? Thanks for joining me on CodePen Radio.
Ilithya: Hi, Chris. Thank you so much. It's an honor to be here with you today, so thanks for the invitation.
Chris: Yeah, my pleasure. Where to start, really. I think there's plenty.
I was like, "Do I have your name right, Ilithya?" You're like, "Yeah. Who knows. It's like a Greek name," but then I notice when you introduce yourself generally online, it's that you're from Mexico and living in Germany, so a Greek name from Mexico living in Germany - Amazing! Here we are together in a tiny little digital chatroom.
Ilithya: Yeah. My name is my mom, basically, so I don't know. She just picked it out from a book, and she told me it's Greek.
Chris: [Laughter]
Ilithya: But it comes together with Diana, you know, Diana Ilithya, so--
Chris: Right. Yeah. Yeah, yeah. It comes off nicely. Ilithya.rocks, excellent TLD, and amazing personal website. Congratulations for that. It really showcases what you can do, you know, meanwhile making us all very jealous that you had the time and wherewithal to put together a really cool website.
Right away what you see when you go to your personal website is a bunch of donuts flying in the air, you know, pinks and purples and blues and cubes and things. It's just very fun and different and unusual and gets into that, like, what can you do with 3D on the Web.
Then the thing that we're going to end up probably spending a good bit of time talking about is this whole concept of shaders, which you'd think that I would know a little something about being that they show up on CodePen once in a while, but I know so precious little.
I wonder if we could start in the middle and then see what happens, you know, on either side of it, going backwards or forwards in your life or interests. But I just have to ask you about the whole idea of shaders and where it came from.
On the show, I'm interested in what you're interested in. You know? [Laughter] How did you land there?
When I find somebody like you so into this one piece of technology, there's got to be a reason why. You know? What is it? What is a shader and why do you love them so much - if you do?
Ilithya: Yeah, sure. So, I got into shaders around two, three years ago - not too long ago, actually. I discovered them as I was trying to learn WebGL, and I got started with Three.js, like I guess many people.
Then I saw that you could do so much, and I was learning that the material that you use in a lot of this 3D stuff, it's done with something called shaders.
Chris: Mm-hmm.
Ilithya: Then as I was learning that, at the same time, I think it was 2019, I was learning about the world of creative coding, which I wasn't aware previously. I mean I've known CodePen, for example, for a long time, and I knew about making creative coding with JavaScript, CSS, HTML, but I didn't know about this other spectrum of doing digital art with it.
As I was learning that, and I already knew some artists from that area and learning about new ones, I learned that they were saying that they were using shaders in a lot of these installations, huge installations that they would do with the visual art.
Chris: Hmm.
Ilithya: I kept hearing that shaders were great, especially if you wanted to become a digital artist doing installation work because of the precision that they have and as well because you can escalate them as big -- not only in your screen, as we see in websites that have WebGL, and so those are kind of like the two reasons because I was still doing front-end development and wanted to do the jump as a creative developer on WebGL, so I thought I should learn shaders so that I can manage to get more creative with WebGL if I do front-end work.
Chris: Mm-hmm.
Ilithya: And also, because I want to step in and do digital art, like one day in the scale of an installation and explore visual art with that. Those are the two reasons why I got started with that.
Chris: Right. Okay. So, an installation, although that does really sound like a dream, right? We're talking huge screens, right? Many, like a billboard almost size, right? If that's the technology that you're up against - I don't know - that's a lot of pixels is the point, right? The technology needs to be up for the job?
Ilithya: Yeah, exactly. Shaders are super strong because a lot of video games, too, are based and created with shaders. Basically, I guess, the power is that you work with a GPU, and I really like an analogy that I've seen on YouTube. I think it's from the MythBusters that, for example, let's say that you have the Mona Lisa. If you compare shaders into making art with another technological tool (like let's say pure JavaScript, for example) and you would like to draw that, doing it with something that is not shaders would be like when you paint with a pencil, a canvas, like step-by-step.
But if you use shaders, you have the power that is like a stamp, like in one print, boom, you can put colors in each of those pixels at the same time, so it's much faster.
Chris: Wow. That's interesting. Like drawing with a stamp. I like it.
Ilithya: Exactly, drawing with a stamp instead of a pencil - or I don't know how to call this.
Chris: Yeah. Yeah. A pencil, brush, or pen. So, just to layer up the technology a little bit because even this is just helpful for me, you start with kind of like -- we're talking about the canvas element in HTML, right? There's no special element for a shader or WebGL or anything. It's just canvas, right?
Ilithya: Mm-hmm.
Chris: Then WebGL is a technology that you can use on the canvas that's just good, that's particularly good, for 3D. Is that right? Then Three.js is like a library that you can use to help you with WebGL, like, "I want to draw a box," or whatever. Three.js will help you do that, but Three.js won't let you - I don't know. Maybe you need--
Let's say I have this 3D box and it's sitting on a canvas. Maybe I can even move it around and stuff. If I want to make it look watery or something, that's where the shader comes in, right? Do I have that--?
Ilithya: Exactly. It's a material. That's why it's called, I suppose--
Chris: The material. Okay.
Ilithya: The material that you want to kind of use in your 3D object, whether it's like a cube or a sphere or also it could be a plane, right?
Chris: Right.
Ilithya: So that if you see it a cross-view, you might think it's 2D. But if you move it, it's actually a 3D thing.
Chris: 3D.
Ilithya: When we render shaders as visual art, for example, one of the things that I do the most -- and if I want to render them like on the browser -- I basically make a plane and then render what I do with the fragment shader in that plane. But it could be a cube, like you said, if I would like it to be 3D - the same art.
Chris: I see. Then once you've made the shader, the material, is it easy or complicated or somewhere in the middle to pick it up and then use it on something else? Like if you made it on the plane, can you use it on a sphere?
Ilithya: Yeah. Yeah, that is very easy once you create it. The way that you work with the shader, too, is you have the vertex and the fragment. There are two of them that you combine them to create that material. The vertex kind of takes the shapes or calls in the shapes of those planes that you created, the little triangles, because the plane is basically, as well, created by little triangles.
Chris: Oh...
Ilithya: Then the fragment shader is what takes care of the color of that material. This is what most people doing visual art, you use the fragment shader and not the vertex shader. When you want to do distortion, for example, on a plane, we see these examples on the Web often like photography that maybe you see that is distorted with some melting effect. Then you might tweak, as well, the vertex, which is those little triangles you wanted to form it. You play with these two shaders inside the shader.
Chris: Yeah, fragment and what's the other one?
Ilithya: And vertex. Vertex.
Chris: Vertex.
Ilithya: Fragment is the colors, RGB, and then the vertex when you want to manipulate or if you want to play with particles, too. And the other thing that I could say is that if you're using, for example, Three.js, sometimes you don't have to code your own shaders because they have a lot of shaders already, like already pre-created for you to use.
Chris: I see. Yeah.
Ilithya: So, you don't have to code them yourself.
Chris: Yeah. But clearly, there's some creativity and things to be found while you do it yourself.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Memberful. Memberful is the easiest way to sell memberships to your audience. Used by the biggest creators on the Web.
It handles all this hard stuff, so you can focus on what you do best while earning revenue quickly. If you're looking to add membership to your existing business, which is a great business model -- it's kind how CodePen works -- if you want a solution that works with your existing technology so that you can launch a new revenue stream without rebuilding your entire tech stack, meaning they have APIs for this stuff. They've got a full-featured GraphQL API, webhooks, OAuth, single sign-on, all that stuff to make integrating seamless with any Web stack. And it already works with the tools you already use, like if you have a WordPress website, it works great with that. First-class plugin experience for that.
Mailchimp to send your newsletter. Maybe it's a paid newsletter. Memberful handles that.
A Discord integration, so your members can have access to a community as part of their membership.
You can use a totally custom domain name. Everything is fully branded under your name. It connects with your Stripe for all the money stuff. It handles all the transactional emails, which is a whole bag of peanuts. It's probably worth it just for that - so great.
It integrates into all those tools that you already use, so you have full control over your brand, your audience, your membership, everything. Get started for free, no credit card required. Follow the link in the show notes. That's Memberful. Thanks so much for the support.
[Guitar music ends]
Chris: You know, help me out. We'll put a link to this collection of Pens in the podcast. You have creative work all over the place, but you know it's nice to be able to poke around on CodePen as well.
Starting from the back, the first one you have in there is like pink with some horizontal stripes on it. It's called the "Roar Typo" and it says the word "roar" right in the middle of it. Typical to Three.js, it seems like you can move your mouse around and the word "roar" is kind of rotating in 3D space kind of pinned in the middle. But it's almost like, you know, you can read the word "roar" but almost just barely because the colors of the stripes and the colors that you've used, I guess, in the fragment shader are the same.
Ilithya: Mm-hmm.
Chris: So, the only way you can read that it's a word at all is that, you know, sometimes the blobs and stuff that are part of the shader get cut off by the letter form. It's kind of like a brain trick. It lets your brain kind of figure out, "Oh, I see. That's loosely making the shape of this word." Such a beautiful thing.
Do I have that right that that's a fragment shader on top of the word "roar"?
Ilithya: Yes. Correctly, yeah. I created my own material, and I was using it in Three.js to do those 3D typography.
Chris: Yeah.
Ilithya: Then instead of using a material that was already available, I wanted to practice, and I created my own shader with those blocks. Like you said, yeah, I used the same color inside the fragment shader that is RGB-based. When you code with fragment shaders, you always have to think RGB instead of hex values in JavaScript or CSS that you can use in shader land.
Chris: Oh, sure.
Ilithya: Always think RGB, and one thing that I love about doing visual art is I play a lot with op-art. There's something about optical illusions that I find, as a viewer, very entertaining, like you were just saying. I really like that sometimes maybe you can find a different interpretation that it was supposed to mean or a little bit like a challenge that you kind of need to complete this thing because it's not completed there, so you have to think as you're looking at it. That's why, as well, I chose that.
Chris: Right. It's just a beautiful optical illusion. That's a good way of putting it. It's like you're letting your brain kind of finish the shapes, and it's a miracle that it works at all, but it does somehow. It feels just like very modern art to me, the blobs and the movement.
It's interesting to me that it would work. I feel like if you just stopped it at one frame, you could find the perfect frame that would look cool as album art or something. But the fact that it moves is so of the Web. It's so digital and cool that it's much more interesting to watch it move.
There's just a lot to love here. Very cool. Good job. [Laughter]
Ilithya: Yeah. Thank you. And I did that one, by the way, like the shader word that you see there, which is just asterisk blobs. It's one of the first exercises that I got to do when I was learning how to draw with shaders.
Chris: Yeah, it looks like it's a couple of years old.
Ilithya: It's one of the first things, like either draw lines, make a grid, make a blob.
Chris: Yeah. [Laughter] Well, it turned out great, and there's kind of a funny and somewhat kind of wholesome comment thread attached to it on CodePen where somebody was like, "I can't read the text very well," essentially, and you're like, "It's actually part of the artwork that it's like that, you know." [Laughter] I understand that if this was text that was meant to be read because it's important content on a website that maybe it shouldn't be an optical illusion.
Ilithya: Yeah, of course.
Chris: Yeah.
Ilithya: I wouldn't do it, yeah, especially if you need some kind of accessibility on a website.
Chris: Right.
Ilithya: But this was meant to be like art.
Chris: Yeah.
Ilithya: Not science.
Chris: It's a piece of art. Then they were like, "Oh, I get it." [Laughter] You know? I like it when people are -- you know. They speak up but it's not like they're close-minded to what's going on.
Ilithya: Mm-hmm. Mm-hmm.
Chris: Let's just do another one because it's kind of fun. It looks like maybe this 3D Polaroid World one is about the same time period.
Ilithya: Mm-hmm.
Chris: You can tell it's one of yours, right? It's the exact same pink. I love that type of thing. But it involves some multimedia, and there's a sound cloud that plays that's kind of a part of the experience. I could see this being--
You used the word "installation" when you're talking about this. I don't know if this was bound for an installation or not, but it certainly could have been, especially with the music being involved. Can you tell me about it?
Ilithya: Yeah. This was basically an inspiration. I was dreaming of maybe someday having a physical installation. Actually, I was walking around the city where I live and, in a gallery, I saw there was a photography exhibition, and they had these huge Polaroids. Those photographs were in the gallery display, but they were huge.
I got the idea, and I was like, "Oh, that would be awesome to make them even thicker so that they can be in the ground. And instead of photograph, having visual art moving somewhere.
Then I started to prototype as well just because I wanted to continue learning Three.js and how it works, so I created this tiny gallery with four pieces in there. And it was, as well, one of the basic shaders when I was learning it. It was just pure geometry, and I was learning shaders with The Book of Shaders.
Chris: Mm-hmm.
Ilithya: This is a resource used by probably many that if you ask them how did you get started, maybe they got started with The Book of Shaders, which I can totally recommend (if someone is listening). It's a wonderful online book created by Patricio Gonzalez Vivo and his wife Jen Lowe. It's available in different languages. It's a great way to get started because there are exercises in there, so a lot of that art that you see in this 3D Polaroid World are from those exercises from this book to get started.
Chris: Oh, neat! Yeah.
Ilithya: Speaking about the pink, I was using a lot of pink in the beginning because, when I started to do more art, I kind of wanted to limit myself and not make decisions into colors. So, I figure, I'm going to limit myself, and I'm going to try to make everything that I do pink, which I no longer do now. I have more flexibility from that. But in the beginning, it was good so that I didn't have to, as well, spend time thinking, "Oh, what color should I use?" which sometime could take so long as well when you're designing something.
Chris: I get it. I get it. I mean you're learning, and maybe it's -- I couldn't tell you why. You explicitly said it was to limit yourself, but I could imagine being like, "All right. I'm learning about 100 new things here. Can I take one away, please?" [Laughter] You know?
I know in my own personality, if I were to get one of these working, just in a flat plane, I would have been like, "Oh, my God! I did it!" and I probably would have made the whole screen of the Pen that shader. Then if I was going to do a different one, I would have probably made a new Pen or something. It would have been boring compared to this.
I always think of these little moments where people, like you, just take things not only one step further but so many steps further. Not only did you make four of these beautiful things together -- and I know they're riffs on exercises from the book, but they're still cool. You still did it. Then placed them in a virtual gallery and then add movement to it that works naturally and then add color variations to it and then add music to it. It's like you kept upping the ante over and over, and that's just such a wonderful thing.
Ilithya: Yeah, I guess. I really like to engage as well, you know, people when they see experiences, so I really like to get people to say, "Oh, wow," kind of like that surprise reaction, so always thinking, "What can I add? What can I add here so they can get this reaction?"
Chris: Yeah. The thickness is cool, too. You're right that that adds something to the installation feel to it. They feel like this big beefy Stonehenge kind of things rotating in the world.
You've only been doing this for--
You know a lot of these Pens started in about 2020, so pretty quick leveling up of that world, and you're still at it. So, maybe we could touch on that a little bit that, like, you've found enough interest in doing this and some success, I think, that you've just found your medium, in a way.
Ilithya: I did. I did. Honestly, that's probably why I'm still -- I've been able maybe to level up fast, but I don't think so. Sometimes, I see other people, like, even leveling up in shaders faster than I, so I think it's very relative to the person and the kind of experience that you have when you learn things.
Chris: Mm-hmm.
Ilithya: But I stick with it because I discovered that this is really something that I truly love and that I probably was looking for or, even before looking for it, I didn't even know that it was there for me to kind of have that click with this tool. I love it as a medium of expression nowadays, so I'm doing it literally, the past year, more like full time.
And I created, as well, a challenge for myself back then in 2020 to learn them. Now, I can find myself sometimes almost every day sitting at least for an hour to practice and do a shader.
Chris: Nice!
Ilithya: Like everything else in life, really if you practice, you can -- the more you practice, you can see yourself leveling up faster.
Chris: Right. Right. Right. That makes sense. You've taken--
There are probably some artists who, despite their medium, they are into the artwork, and they just do that only. That would be impressive enough if you found your thing and you worked on it every day and got better at it. But so many people, creative people, I've talked to on this show, you don't just-just do it. You also help teach it and talk about it and all these other different mediums and stuff.
Looking at some of your Pens, the first one in the collection right now is titled Curiouslyminded, from a live shader coding session, so it's like you've gotten into the streaming thing a little bit, too, where you literally will show people, live, you working on a shader, and you're doing it collaboratively, too, with Elisa, right?
Ilithya: This collaboration that I started with Elisa started around the pandemic, so in 2020. We met in an online shader workshop, in fact, as we both were learning. Then we started talking online. I guess this happened a lot, I would say, when we were in the pandemic that you would start talking maybe more than usual with people online that you would meet.
Then we decided to do a little collaboration where we would practice, and we did it for a few months. We would just sit and chat and try to do a shader together in CodePen because you can code at the same time, which I love.
Chris: Nice.
Ilithya: In the collab mode.
Chris: Mm-hmm.
Ilithya: Then you get to see what you're doing right away. I mean there are other tools to do that, but I don't know if I really like using this in CodePen.
Then, after a few months, we decided, "Hey, why don't we give it a try and do like a streaming, like on Twitch?"
Chris: Yeah.
Ilithya: I think, around that time, a lot of creative coders started to create their own Twitch channels, and we gave it a try because we talked a lot about what we wanted to do or what we were looking for work to have from the creative coding world. We had similar goals, and Elisa and I are self-taught, so we were talking a lot about that and of our own experiences, how it has been.
We decided that we wanted to inspire other people like us that maybe they didn't come from computer science or a math degree.
Chris: Yeah.
Ilithya: I was telling Elisa (when I met her) that I was so intimidated by shaders, the very first time that somebody sent me The Book of Shaders, that I couldn't understand anything, actually. I remember the first time that I browsed it. Then I just dropped it.
After half a year, I took it back. I was like, "No, I have to try harder." [Laughter] I really have to try. This cannot be impossible.
Then with more patience for myself, then slowly I could see that I was actually learning.
Chris: Mm-hmm.
Ilithya: We talked about this because we said that I could see other people that maybe they had these degrees that they would browse The Book of Shaders and they could right away get started with creating their first shader. And so, that's why, yeah, Elisa and I said that it would be cool to just put ourselves out there and code together live so that if there are viewers that were coming like us, and that they might feel intimidated by such language, and maybe they wanted as well to do digital art with it, that they could be inspired to be patient with themselves and see the learnings as opposed to sometimes there are other creative coders, streamers, that have those backgrounds. When you see them, they are, for example, much, much faster when they are coding.
Chris: Hmm.
Ilithya: Like if I compare myself with those people, I'm much slower. But that's okay too.
Chris: Certainly.
Ilithya: That was the whole idea why we started Curiouslyminded.
Chris: Yeah.
Ilithya: Now it's been a year and a half.
Chris: So cool. Yeah, it seems like -- I mean I'm definitely at that moment where looking at the code seems very intimidating because it doesn't--
One of the aspects that I find funny about it is how I guess it looks a little bit like JavaScript, but JavaScript doesn't have types, for example. I look through some of this shader code that you post on CodePen, and it's like, "Oh, there's floats and things," and the way you define a constant is very different than how you would do that in JavaScript. It's kind of a language all unto itself. Pretty interesting.
Ilithya: Yeah, it's C-based, I believe. I don't know C, but I know that....
Chris: You do now.
Ilithya: --C-based, which is a type language, so yeah. But there are similarities once you start. I guess, with any language, when you're a programmer, once you learn one language and then you try to learn, there are a few things that each language has, right? So, kind of like when you talk a language, like not speaking about programming but just speaking a language and you start learning more than one, you start finding these patterns. It's the same between GLSL and JavaScript.
Chris: Nice. Maybe we'll have to see if we can get a better syntax highlighter in there. It kind of works in CodePen, but I'm sure there are better syntax highlighters for it that would do good in there.
If we're looking at just this one, this first one in your collection (it's with the yellows and the pinks and everything), part of me thinks, is that a whole bunch of squares and then you attached one shader to each square with different timing or is the whole thing one big shader?
Ilithya: It's one big shader, but we were drawing, for example, a grid inside that one shader.
Chris: Right. Mm-hmm. Okay. That makes sense.
Ilithya: That's the trick. That's why you see these kind of like diamonds in there because you can -- yeah, just as you would do it, I suppose as well with either CSS or JavaScript, if we're speaking about Web to just draw the grid. Then on top of the grid, we start adding those colors. You can decide if you want to add them on top of that grid or in some of those slots inside the grid.
Chris: Right.
Ilithya: Then you can layer up things. As you see, as well, there are these distorted dots, kind of light at the top.
Chris: Right.
Ilithya: When you write shaders, too, I always think a little bit of like Photoshop and how, like in Illustrator of Photoshop, you add layers. Or a lot of this software, when you're designing and you're creating things, you create a layer for one thing and then you add another layer so that you don't put everything in one layer (in case you want to move them up).
When you're working with a fragment shader, you can do the same, you can start painting these layers and then put them on top of each other in case you want to get rid of one of them or not or just to have that effect.
Chris: Right. Right. Right. So, the little light, the white light source kind of things, they look like they distort, to me. Does that instantly make it a vertex shader instead, or is it because they're colored that it's still a fragment shader?
Ilithya: No. Actually, you can still do some distortion like that inside within the fragment shader with a little bit of noise.
Chris: Hmm.
Ilithya: That's not necessarily the vertex shader, especially because you can see it inside the dots. You would manipulate the vertex shader maybe if you want to move or distort the full plane where we have everything rendered. But when it was just, as you see here, that it's not those diamonds that you have in the background but only the dots, you can use it. You can do it by using noise. Then you can distort any shape.
Chris: Fascinating. Fascinating. Yeah, and there's this combination. I think you probably have to level up to the point where you're at to feel comfortable, like a musician does - or whatever. I imagine when they're playing a song or writing a song or thinking about a new song, they might think a little bit about music theory and stuff. But it's much more artistic and natural than that.
It's like, when you're building these really beautiful pieces of art, it's not like that you aren't thinking about the number Pi or sine waves, but you need to know them because you need the tool in your toolbox to make the art. But I think the distinction is so interesting in shaders when it's like, "This is literally complex math, and the result is literally beautiful artwork." They just seem like, whoosh, worlds apart, but they have to beautifully come together to make art.
Ilithya: Well, that's the thing which I find interesting about shaders, I suppose, and another reason why we do this live coding in front of people as well because, for some people, sometimes it's the scare of learning to code because they think that they might need to know a lot of math. Just to get started, you actually don't need any math.
Chris: Oh, really?
Ilithya: Just to lose that fear of coding. Even with shaders, for example, there's no need to worry about math in the beginning to learn the basics and to put the first things because, I mean, we all know a little bit of math, you know, the basic kind of math.
Chris: Right.
Ilithya: Like you know--
Chris: Mm-hmm.
Ilithya: Subtract, divide, multiply. You use that little math in the beginning. Once you get comfortable, like you were saying--
Chris: Right.
Ilithya: --if you want to get then kind of level up yourself and maybe try to do more complex stuff, then you get to learn a little bit more complex math. But what I discovered with shaders is that it's a wonderful way to actually learn that complex math because you have that visual that you are painting as your--
Chris: Mm-hmm.
Ilithya: Maybe, for example, like you were saying, maybe using a sine wave or using Pi or doing an angle with ... so it's just a wonderful way to try and see, "Oh, so what happens if I do an angle in shaders?" and then to see visually what it is. So, I would say that I think, for people that maybe are more visual, it's a wonderful way to learn math and to skill and level up your mathematics by using shaders, for example, because then you get to see and try these equations. Then maybe if you would have learned an equation by itself, it wouldn't stick in your head. But once you see the visual, then you know why we do need it.
Chris: Right. Okay. That really tracks with me. I loosely understand what a sine wave is. It oscillates between zero and one - or whatever - as X goes up - or something. [Laughter] I know there's some truth to that. I have never reached for a sine wave ever in my programming career. Maybe partially because that's not in CSS and I've spent so much time with that. Maybe. I don't know.
But even in JavaScript, not that I'm some big visual artist or anything, but I definitely don't think of it. But I could see. I could see if I had some idea and I wanted some curvy-like aspect to it that I'd be like, "Hmm. Sine is just sitting right here. Maybe I should try to feed it some values and see what I get out of it," or something. You know? I'm still scared of it, but I could see that being a little level up moment.
Ilithya: Yeah, you should totally try it. I mean you were saying that -- but come on. You do, as well, wonderful visual art yourself as a front-end developer. I really love your designs of websites and little experiments that sometimes you do as well yourself in CodePen.
Chris: [Laughter]
Ilithya: With CSS and JavaScript, so yeah, you should give it a try. And I would say that for people that are scared, just sit there and try some equations. Don't think about the math, even. Maybe focus on what you want to paint. Then you will see that suddenly you're learning math. You're like, "Oh, I'm learning. Now I know what this is when I'm doing something visually that speaks more to me."
Chris: Yeah. That's great advice. I'm always astounded by the performance of them, too. Rarely have I ever seen a WebGL or a shader-driven thing feel slow. You mentioned that at the beginning. Not only are they fast on your computer screen, but they can be fast in very large displays and things like that as well. That is appealing, isn't it, knowing that these creations you built are just so smooth?
Ilithya: Well, that's the thing. I keep thinking that that's the difference probably now, so it's not like -- it's like all the pixels are like a stamp, at the moment, instead of painting each of them. It's like at the same time, so that's why it makes it look so smooth.
Definitely, I think the support as well of Web browsers have improved so much - so much.
Chris: Yeah.
Ilithya: Like in the past years, like even on mobile. Nowadays, you can see a beautiful shader in there too.
Chris: Yeah. What's the minimum amount of code, you'd say, to get this going? Is Three.js kind of an automatic, that's the one library you need?
Ilithya: Not necessarily. In all my Pens, I'm using, yes, Three.js just because I fear that it's kind of like the popular one and there's a lot of documentation to start.
Even in The Book of Shaders, by the way, they teach you how to run your shader in several different tools. If you want to do it in the browser, Patricio suggests Three.js, too, so you have a template that he gives as well. That's the reason why I have it there. But there are other ways.
For example, if you are more prone to WebGL, you could do it natively with WebGL, too. In fact, in the Mozilla Web docs that I love, there is a very good template in there that you can as well grab with pure WebGL when you want to run a shader without any library.
Chris: Oh, nice.
Ilithya: Then there are other WebGL libraries where you can do shaders. OpenGL -- no, OpenGL. What is it? OGL, sorry. OGL is a little library. It's very lightweight, and that one, if you don't need something 3D like a cube or typography or more stuff that Three.js comes with, then you could just use something like that. Probably there are more that I cannot even remember at the moment, but it's not only Three.js.
Chris: It's just one of those astounding things. I'm looking at OGL now. Eight kilobytes. You know very, very small.
Ilithya: Yeah.
Chris: And then whatever you write as a shader. I'm sure shaders get pretty complicated, but the ones I generally see, there's so much interesting stuff that you can do in dozens, maybe a few hundred lines of code. You know? Does that seem about right to you, or do you see a lot of multi-thousand-line shaders?
Ilithya: Yeah, I've seen it. I've seen it, but definitely, I was going to say that I can recommend if you were looking at OGL, like for people that maybe just want to render maybe a shader in full screen, for example, which is basically a plane--
Chris: Right.
Ilithya: --OGL is perfect because then you don't have -- you don't need all these kilobytes extra that, for example, Three.js really has much more, right? If you are only using one plane, then OGL makes more sense.
Chris: Right. I mean eight kilobytes, that's astounding, and the demos are really cool. I don't know. It opens your mind. As much as--
They almost seem underused to me with how small it is, how interesting they can be, how beautiful they can be. It's one thing to look at a full page of it, but it's like a lot of us do a little bit more boring, maybe, of front-end work where it's just like, "Ah, this is a website we've got to build for this conference," or this event, or this blog, or this landing page - or something. To add something like really beautiful particles flying around for some part of that website, you're not talking about a megabyte of additional JavaScript or some heavy video file or something. it could just be a couple of kilobytes, which is just yet another really cool thing about shaders.
Ilithya: Mm-hmm. Yeah. Yeah.
Chris: Yeah, fantastic. Anyway, we've gone a little over half an hour, so I hate to hold you. I just have so many questions that's so beautiful about this. We didn't even get a chance to talk about some of the cool stuff you did with Frontend Horse and all that stuff, or your NTFs that are available. I'll put in links to some of that stuff in the show notes, but I really appreciate getting the chance to talk with you and having you help level me up a little bit about all this shader stuff. Thanks, Ilithya.
Ilithya: No, thank you. Thanks for having me, and it was my hope to maybe inspire some people to get started with shaders who might feel intimidated about them. So, just go ahead and give it a try.
Maybe in the beginning, of course, like when you learn everything, you might be very, very far from what is in your mind. That's very frustrating. But I always encourage people to just be patient, even myself--
[Laughter]
Ilithya: --that I have to be patient when I'm learning a new thing because I want to just get there already. But I know that it takes some time.
Chris: Yeah. Yeah, yeah. There's that classic Ira Glass thing where he says that to be in the creative profession, you're basically constantly in this state where you're unhappy with your work. I forget the exact quote exactly, but especially in the beginning, there's a big disconnect between the taste that you have and your ability to build things that are up to that taste.
Ilithya: Yes.
Chris: Yeah.
Ilithya: Yes, exactly. But better.
Chris: Better. Yeah. [Laughter] Okay. Take care. Bye-bye.
Ilithya: Thank you.
[Radio channel adjustment]