[00:00:05] SY: Welcome to the CodeNewbie Podcast where we talk to people on their coding journey in hopes of helping you on yours. I’m your host, Saron. And today, we’re talking about creative coding and generative art with Varun Vachhar, Developer Experience Engineer at Chromatic.
[00:00:20] VV: And because you write code, you can sort of create algorithms that evolve over time or can interact with things like music or the user’s input and based on that change the image that’s being displayed to the user.
[00:00:31] SY: If you have a question for Varun after listening, don’t miss The Ask Me Anything Session he’s hosting on the CodeNewbie Community Forum. Just head to community.codenewbie.org, and you’ll find his thread on our homepage and he’ll answer you directly in the comments. That’s community.codenewbie.org. In this episode, Varun talks about what his role as a developer experience engineer looks like, how he got his start in coding with generative art, what it is and some of his favorite tools and resources to do it after this.
[MUSIC BREAK]
[AD]
[00:01:10] Hey codenewbies, are you ready to take your skillset to the next level? Maybe you want to learn SQL or interested in building a new app. Sometimes taking that next step can be intimidating, but we have good news for you. Cockroach university is a free online learning platform that teaches you the core concepts behind SQL databases and how to build a sample application there's quizzes, tutorials, and prizes along the way.
Get started for free today@cockroachlabs.com slash COVID. Twilio quest is a desktop role-playing game for Mac, windows, and Linux. To teach you real world developer skills. Take up the tools of software development. Become an operator. Save the cloud, download and play Twilio quest for free at twilio.com/score.
Career karma helps code newbies with free career coaching and a community of peers and mentors. To help you learn to code and find a high paying job in tech in less than a year. Download the clear karma app and get started in live audio rooms, hosted by bootcamp grads who landed coveted jobs in tech like Netflix, Tesla, Twitter, and YouTube.
Be one of the over 300,000 people they've helped get started. Visit careerkarma.com/
[AD ENDS]
[00:02:28] SY: Thanks so much for being here.
[00:02:29] VV: You’re welcome.
[00:02:30] SY: So Varun, you have a really very technical background. Can you talk about how you got into tech and what led you to development?
[00:02:38] VV: So I actually started off as a mechanical engineer with the hope of going into industrial design at some point, but ended up in a program called Interactive Media Design, where I basically just got to try out a bunch of different things. And one of them was programming. I got introduced to programming through generative art in particular to what we call processing. And that’s kind of how it clicked for me, where I could write code and stuff happens on the screen. That was super exciting to me and got going and eventually sort of landed in the web development world.
[00:03:07] SY: Very, very cool. So what was the driving factor from going from mechanical engineering to design school?
[00:03:14] VV: I always kind of wanted to do industrial design. I grew up in India, so I wasn’t aware of design as an option, especially industrial design being a thing, but I was kind of aware that I could go through engineering and then like that was a path that people had done before. That was sort of the obvious choice for me.
[00:03:32] SY: And what was your first interaction with code? What was that like?
[00:03:35] VV: I think my first interaction was like sometime in high school, we had like a course on basic where it was just 10 PRINT, whatever, and got to make some images with just ASCII art using basic and that was my first thing.
[00:03:49] SY: So you kind of made like three hops in a way, right? Started in mechanical engineering then moved to design and ended up at programming. What was it about coding that resonated with you that got you excited enough to make that final jump?
[00:04:02] VV: I’ve always interacted with coding throughout my life. It just never quite seemed the most interesting thing because I think for most of my interactions with coding, it used to be text in, text out, and it wasn’t until I did processing where text in but visuals ad and that was the thing for me. And similarly sort of web development was really interesting to me because I liked building the UI piece and actually creating something that was interactive. I was good with like the math side of things and like the logic side of things, and connecting that to something visual, that was the aha moment for me where it felt like that is something I want to do.
[00:04:37] SY: So tell me a little bit about your experience between being a designer and a web developer, because those are distinct skill sets, right? Designing and coding feel very separate, but in reality, they kind of overlap, right? A lot of designers know how to code. A lot of web developers try to design. I don’t know if they’re actually good at it, but they tried to design. What was that interaction like for you? Was there an overlap period?
[00:04:59] VV: To be honest, I would say I jumped into programming right away at the development side of things, but you’re totally right. There’s a big overlap there, especially when it comes to front-end development. Like when it comes to UI, as a developer, you’d start to develop a little bit of design intuition, and designers definitely need to understand the medium that they’re working in. So even if they’re not coding on a daily basis, they still end up having to understand how the web works so that they can design for it. And there’s like totally a lot of overlap that happens there where I find that more and more designers are sort of moving into the front-end space, especially when it comes to design systems. It’s a very collaborative space between designers and developers.
[00:05:36] SY: Tell me a little bit about what you do now. What is it at Chromatic that you are working on, and especially your job title, developer experience engineer sounds so unique? Tell me a little more about that.
[00:05:46] VV: Yeah. I’m part of the DX Team at Chromatic. So essentially the way I like to describe that is it’s part engineering, part advocacy. We work on Chromatic, the product itself, and then also we help maintain storybook, which is sort of a popular tool to build, develop components in the front end space. So as a developer experience engineer, on the engineering side, I get to sort of build out platforms for sort of the content that we’re sharing with our audience, or do research into possible integrations we can have with other libraries or other tools in the JavaScript ecosystem. And on the advocacy side, it’s things like creating guides or examples for people to understand how the tool works and how to use it more effectively and just really connect a really highly technical user base that we have to our product team.
[00:06:37] SY: And what kind of specific projects do you get to work on?
[00:06:40] VV: One thing I did initially as soon as I joined Chromatic was actually build out our blogging platform so that then we could write more consistently and share sort of the work that the storybook team is doing or the work that we’re doing at Chromatic. And then more recently, I’m actually getting to write some of the contents. So for example, I recently wrote a guide for “How to build add-ons for a storybook”. And that was a really interesting experience where I wrote it out as a bunch of different blog posts, assembled that into a guide and then realized that actually a lot of this work could be automated away by giving folks a template to start off to the add-on and got to do a little bit of engineering work again and build out that template.
[00:07:20] SY: So I feel like I’ve been seeing more of this developer experience engineer role. It feels kind of related to developer advocate, developer evangelist, and it kind of feels like it’s occupying similar spaces. Have you seen that in your experience? Are there more of these DX engineers popping up or is that just me?
[00:07:40] VV: Yeah, totally. Sort of the big obvious example I have is Netlify, and Sarah Drasner wrote a really good blog post sort of explaining why Netlify set up a DX team over a developer advocacy team. Yeah, I don’t have the developer advocacy background, never got to do that job, but yeah, I definitely see a lot of value in the DX engineer role where you’re not just talking about the product, but you also get to use it. You get to do a bit of engineering work. For me, it’s just a little bit more of a holistic role, I would say.
[00:08:10] SY: So I haven’t read that blog post and I think it’d be great for us to put that in the show notes, but just a little bit of background on the developer advocate in the DX. How do you understand the difference between those roles? You kind of touched on it a little bit with developer advocate maybe being a little bit more talking, DX being a little bit more engineering. Can you get into those differences a little bit more?
[00:08:29] VV: Sure. I mean, I do have like fairly limited understanding of the developer advocacy world, but from what I gathered, I think a lot of it came down to talking about the tools that your team might be building, creating guides for maintaining documentation, going to conferences and giving talks. With the DX team, I feel like it’s a bit more of a spectrum of work. So you might be partly responsible for the documentation, partly responsible for creating content that makes it easier for people to use your tool, and then also that the last piece is the engineering work where it might not just be engineering work on the product that you’re building, but also how does it integrate with other parts of the ecosystem that that product’s being used in.
[00:09:12] SY: So I want to get to generative art and creative coding. I think that category of development is just so fascinating. Can you dive deeper into what generative art actually is?
[00:09:24] VV: I think most folks have kind of interacted with some kind of illustration tool like Illustrator or Figma or Sketch at some point. So generative art is a lot like that, but instead of going and drawing a circle on the screen in a rectangle, and then slowly composing on an image, you actually write code that does that for you. And because you write code, you can sort of create algorithms that evolve over time or can interact with things like music or the user’s input and based on that change the image that’s being displayed to the user.
[00:09:55] SY: So tell me more about what kinds of things you can make with generative art. What kinds of things are possible? And then tell me about things that you’ve done.
[00:10:03] VV: I mean, there’s stuff you can do, like create visualizations for music. You can create looping GIFs that are just animations that are fully baked in code, or it might be sort of a mix of illustration that you create in an SVG tool and then animate pieces of it. The cool part for me is that there’s always like a system behind the image that’s being generated. So particle effects tend to be like a really common generative technique, let’s say, where you have a bunch of particles moving around and that there’s sort of some kind of behavior baked into them and the way they interact with each other.
[00:10:36] SY: It kind of reminds me of game physics and Flash back in the day when you’re connecting coding to different images. Is that kind of what you’d expect with generative art?
[00:10:46] VV: Totally, totally. A lot of the theory behind it is definitely similar to what you do for game development and definitely a lot of that Flash community has moved to the web now and using tools like P5.js Three.js to create those images.
[00:11:02] SY: So tell me a little bit more about the differences between kind of old school game physics and Flash and what people are using and creating today.
[00:11:10] VV: I think Flash was a really sort of unique way to build stuff where it was a timeline and you could drop pieces of code on the timeline, and then it was sort of tween in between those two. So it was like part animation tool, part coding tool, whereas stuff you do now in the browser is a lot more similar to game development where there is no UI to it. Largely you just write code and you have to sort of do everything from scratch. But the nice thing is it makes it really easy to share stuff because you can just build a website, then you can put it up there and you can share it with whatever you want.
[MUSIC BREAK]
[AD]
[00:12:01] Explore the mysteries of the Python temple, the OSS Elfa pant and the flame of opensource all. While learning the tools, uh, software development with Twilio quest become an operator. Save the cloud, download and play Twilio quest for free at twilio.com/quest. Career karma helps code newbies with free career coaching and a community of peers and mentors.
To help you learn to code and find a high paying job. In less than a year, download the clear karma app and get started in live audio rooms, hosted by bootcamp grads who landed coveted jobs in tech like Netflix, Tesla, Twitter, and YouTube. Be one of the over 300,000 people they've helped get started.
Visit careerkarma.com.
[AD ENDS]
[00:12:48] SY: Tell me about something you’ve made that you’re particularly proud of.
[00:12:53] VV: So I like to use a lot of web-based tools. Right now I tend to use a tool called Canvas Sketch and create either like little looping GIFs or interactive pieces with it. So one project I did was called “A Triangle Everyday” where essentially I just created some kind of image based out of a triangle every day for a month. So there was stuff like a triangle that was just like flying through space, looked like a little spaceship with stars in the background. And if you moved your mouse around, it changed the direction and impacted sort of the parallax animation. And then there was another one that I did that was kind of inspired by the Fruit Ninja game a few years ago, where you could drag your mouse across the triangle and it would split into two.
[00:13:34] SY: Oh, cool!
[00:13:35] VV: So doing stuff like that.
[00:13:37] SY: Very cool. And where do you get your inspiration from? Where do these ideas come from?
[00:13:41] VV: I follow a lot of sort of visual accounts on Twitter that just like pure aesthetic stuff. And Tumblr used to be a big one I used to. I actually still use a lot of Tumblr. And the community is really supportive and they share a lot of their work on Twitter. CodePen is sort of another place for sharing work.
[00:13:58] SY: That’s a great one. Yeah. I don’t remember the account’s name, but there’s this one account I love and they just have the most beautiful abstract generative art, and it’s all these little shapes and just really cool effects that happen. And it’s so mesmerizing just to watch what people can create with art. It’s really incredible.
[00:14:15] VV: Yeah, totally.
[00:14:17] SY: What have you seen other people create that really impressed you? What are some kind of really awesome things that you’ve seen out there?
[00:14:24] VV: One of my favorite artists I would say is Matt DesLauriers. He does a really cool, often like 3D-based work and he created this little game called Bellwoods where it was part of the challenge to build like something in just like one kilobyte of JavaScript or something like that. So it was like building a 3D engine from scratch, everything. But the output was this really beautiful little game where you’re scrolling through a minimal three-dimensional landscape that changes and there’s like grass waving around and it’s all like really minimal graphics, but there was like a lot of emotion behind it, which is kind of interesting. I find that folks who are really good at it, they’re able to capture that. They embed a lot of emotion into something that can be otherwise very sort of technology and very cold. There’s also another trend that I had discovered fairly recently in the last year or so where people use a tool called a pen plotter where essentially they create generative images. I put it out as an SVG and then use a little sort of robotic arm, kind of like a 3D printer to then draw it out on paper with a real pen or pencil or whatever you want. And there’s some really, really interesting work that’s happening in that space too.
[00:15:34] SY: So how do you actually get into creative coding? What are the tools that you use? What’s the knowledge that you need to have? Tell me a little bit about how I can actually get started doing this kind of thing.
[00:15:45] VV: There’s a lot of really great resources to get started with a creative coding. One of my sort of favorite places is this YouTube channel called Coding Train. It’s run by Daniel Shiffman.
[00:15:56] SY: Such a good channel. Such a good channel. Yeah.
[00:15:59] VV: Agree. It’s super interesting to watch but then also you get to learn all this really amazing stuff out of it. And the tools are fairly approachable too. So P5.js is sort of an all in one solution that just gives you everything you need to get started and it makes it easy for people to get into the generative part. But really with the web, we’re kind of spoiled for choice. You can use SVGs, you can use Canvas, you can use WebGL, and they all kind of use kind of the same techniques. The way you draw stuff is very similar across all of them. So pick the one that you are the most familiar with and get started. And you’ll find that as you start sort of building stuff out, you’ll understand sort of what goes into creating an image and it’s just like anything else, write them or you build stuff. The more you can learn, the more you get comfortable with it.
[00:16:43] SY: So you already know mechanical engineering, you know design before getting into coding. So what is the barrier to entry like? Do you find yourself using those skills? Are those skills relevant or helpful in this type of generative art work? Or is this something that just a regular developer can pick up?
[00:17:03] VV: I would say there is no barrier to entry to it. I definitely get to use some of those skills I’ve picked up. So a lot of sort of math that you use for generative art is stuff that you learn in high school.
[00:17:15] SY: Oh, okay.
[00:17:15] VV: So it’s fairly approachable, I would say. It’s a lot of like trigonometry. And then the design piece, it helps you like create compositions or pick a color palette. But again, that the cool part is you don’t have to make choices for that. You can actually find libraries that let you create color palettes that are very aesthetically pleasing and even turn that part into generative. So there wasn’t really a barrier to entry, especially for web developers. A lot of the work that they do applies right away to sort of the generative world.
[00:17:45] SY: So what’s interesting about generative art is it kind of combines a bunch of things. It combines the arch part, obviously, a little bit of the design part, kind of putting together these artistic ideas and then the coding part. So I’m wondering, you mentioned the color palettes are available to you, which is very helpful. I knew there’s tons of color palette tools, and then really beautiful, really easy to use. But in terms of coming up with the ideas or executing on an idea you have, it feels like you kind of need to be an artist a little bit, like you kind of need to be a little creative to get started. Is that true? Or what are your thoughts on having that artistic skill or maybe instinct in order to do generative art?
[00:18:29] VV: Yeah. I would say one approach I’ve taken in the past is you kind of get stuck in a struggle like, “I don’t have an idea. What will I do now?” And replicating stuff you find in the wild, I find that that’s a really great way to approach stuff. So go on Dribbble. Find things that you find inspiring and then try to replicate them in code. And just the act of doing that, you’ll realize you actually end up with something that might not be exactly the same. You’ll have your own sort of imprint on it. That’s how it starts. And the more you do that, then suddenly you get comfortable with the medium and then those ideas start flowing.
[00:19:04] SY: How much overlap is there between the kind of coding you do when you’re doing creative coding, you’re doing generative art, and the kind of coding you would do as an actual developer? Right? Well, maybe web developer, middle developer. How much overlap is there between those two?
[00:19:20] VV: There is a bit, especially when it comes to sort of UI animation. I find a lot of the concepts are very similar. So transitions and animations, as you build them out, you know the way you pick an easing or how you sort of morph elements as they’re being animated on the screen, there’s a lot of similar concepts that go into that.
[00:19:38] SY: How long did it take you to feel more comfortable in a professional developer job with the skills that you had doing generative art? Did you find that the generative art component helped you with the professional developer job?
[00:19:50] VV: I would say it kind of helped me get into it initially. I understand sort of coding so I can maybe acquire this new skill that’s tangentially related, but I feel like that comfort has kind of like assigned me, right? Like sometimes I feel comfortable and then I discover something new and that confidence just totally evaporates. You have to rebuild it again.
[00:20:11] SY: The roller coaster of coding, for sure. For sure. Absolutely. Coming up next, Varun talks about his biggest piece of advice for those who want to get into creative coding and generative art after this.
[MUSIC BREAK]
[AD]
[00:20:44] Hey codenewbies. Did you know that all apps need databases? Take a look at your phone and see what apps you have. Instagram door dash, Venmo, Lyft. They all use databases, databases make up the software layer that power our apps and most databases you sequel for writing and querying data. So once you master coding, you're going to want to start to consider the tools you need to create your app, including the data.
The expert, the couple flaps, the company behind the leading database solution. Cockroach DB offer free courses for all skill levels taught by in-house experts. You'll learn about SQL databases and building applications with quizzes, tutorials, and prizes along the way. Visit dot com slash to take your coding skills to the next level and get one step closer to becoming a software developer.
[AD ENDS]
[00:21:36] SY: So we touched on some of the resources you mentioned earlier. Is there kind of your go-to step one that you recommend for people who might be interested in getting into creative coding?
[00:21:47] VV: Yeah. I’ll give a shout out to Daniel Shiffman again. He has a really wonderful book called Nature of Code that essentially it just introduces you to all of those concepts that go into creative coding or generative art and teaches you how to use tools like processing at the same time. I would say anyone’s interested, that’s a fantastic way to get into it.
[00:22:06] SY: What’s your biggest piece of advice for people who want to get started with creative coding projects?
[00:22:11] VV: I feel like it can be a little bit overwhelming when you see the stuff that people do, but just remember that like their first attempt didn’t lead to that result. They kind of build, start with something small and then iteratively make it more complex. So it’s totally okay to get started, replicate stuff that other people are doing just to get your head around to some of those concepts. And then the more you build stuff, the easier it gets.
[00:22:35] SY: So I know that you got into coding by way of design and getting started in generative art. Would you recommend that path? Do you feel like getting into generative art, creative coding is a good way to start on the journey of learning to code?
[00:22:49] VV: I would say it’s one approach. There are many different paths to come to coding. I feel like some people are more visual and if you’re a more visual person, then yeah, that is totally a great way to get into coding, for sure. I also find that it’s a really good way to teach kids about math and physics.
[00:23:06] SY: Interesting.
[00:23:07] VV: Khan Academy does that a lot. There’s a bunch of little courses that introduce physics concepts by actually getting kids to write code.
[00:23:20] SY: Now at the end of every episode, we ask our guests to fill in the blanks of some very important questions. Varun, are you ready to fill in the blanks?
[00:23:27] VV: Absolutely.
[00:23:28] SY: Number one, worst advice I’ve ever received is?
[00:23:31] VV: That you need to learn the basics first before you can start building stuff. I feel that do whatever works for you. I like to learn by building. So I’ll do that first and then maybe go back and revisit the concepts behind whatever I’m trying to learn.
[00:23:45] SY: Number two, best advice I’ve ever received is?
[00:23:48] VV: advocate for yourself. I find that people are hesitant to talk about their achievements and sometimes that gets lost, especially in a bigger company. So it’s totally okay to talk about awesome stuff you’ve done. And if you feel like you’re ready for a promotion or need to ask for a raise, definitely do that because if you don’t then no one else is.
[00:24:08] SY: Yup. I love that advice. Number three, my first coding project was about?
[00:24:13] VV: It was an interactive installation where it was just a set of creative boxes on a wall and we used tiny bit of computer vision to track where someone was in front of the wall and it would just sort of take away the boxes and just highlight their silhouette around it.
[00:24:28] SY: Oh, cool! Very neat. Number four, one thing I wish I knew when I first started to code is?
[00:24:34] VV: That experience is not the same thing as knowing everything. You’re just not going to know everything as a developer and you need to get comfortable with that.
[00:24:42] SY: Yeah, that’s a great one. Well, thanks again so much for joining us, Varun.
[00:24:46] VV: No problem. It was really fun talking to you.
[00:24:55] SY: This show is produced and mixed by Levi Sharpe. You can reach out to us on Twitter at CodeNewbies or send me an email, hello@codenewbie.org. Join us for our weekly Twitter chats. We’ve got our Wednesday chats at 9 P.M. Eastern Time and our weekly coding check-in every Sunday at 2 P.M. Eastern Time. For more info on the podcast, check out www.codenewbie.org/podcast. Thanks for listening. See you next week.
Copyright © Dev Community Inc.