🎞️ Videos → Sparking Curiosity: The Power of Creative Coding

Introduction and What is Coding?0:00

Okay. Hi everyone.

I'm super excited to be here. Thank you so much for joining my session. My name is Patt and I'm a content creator. I make creative coding content on YouTube and the mission of my channel is to inspire people

to explore their creative potential through code.

The Power of Creative Coding0:35

Today though, I'm going to be talking to you about the power of creative coding. But before we get there, I would like to ask you a quick question. What comes to mind when you think of the word coding? I'll give you a few seconds.

Maybe it's writing a piece of code to tell the computer to do something. Maybe it's a person sitting at a desk trying to write this piece of instructions to create a functional software. Or maybe it is that very same person staring at a computer screen trying to figure out what is wrong with these piece of instructions. And these images don't really scream creativity or spark any joy, at least for me.

Coding can feel like such a technical thing. And if this what you're feeling right now, in the next 25 minutes, I'm hoping to convince you that coding is not just a technical skill. In fact, it is a really good tool

for creative expression.

Patt's Creative Coding Journey1:45

I'm going to be sharing with you my creative coding journey and how it has impacted my way of approach learning. Also, how it can foster a mindset of exploration and experimentation.

Early Coding Experiences and Discovering Interactive Art2:01

Let's start with a little bit of a backstory. Back in 2010, that was when I first discovered programming. That was when I took an introductory class in programming called 15110. And I still remember this number because it was such a memorable experience, not in a good way, in a bad way. I was struggling so much in this class. I remember sitting in the class thinking that coding is such a cold, difficult thing. It is a skill that I needed to overcome, something that I wasn't really able to do. Coding was a series of problem to solve, something that was very difficult. But luckily and thankfully, I passed the class, but barely. But I wasn't drawn to take any more coding classes. I just thought that coding was just not for me. But a few years later, I stumbled upon this other class called Interactive Art and Computational Design. I was a mechanical engineering student and I was very interested in art and design.

And so this name really intrigued me. I knew that it had to do with coding, but what is this Interactive Art and Computational Design all about? I was so curious, so I gave it a try.

Text Rain Project and Other Creative Coding Assignments3:17

And this class flipped the script for me.

One of the very first assignments that we had to do was to recreate this piece called Text Rain. We were tasked to make it using an open source Java application called Processing. So as you can see here, Text Rain is this now classic interactive art piece that is done back in 1999

by Camille Utterback and Romy Achituv. And so as you can see, it's these random pieces of letters that are falling on the screen and then you as a viewer can interact with it. We were tasked to do the exact same thing, but instead of using random pieces of letter, you were supposed to use your name. And it was super fun. Was I struggle to code this? Probably and most likely, but I pushed through because I was so amazed by the final output. This is such a simple program, but it was so interactive and it was so fun, and I was hooked. So this was the very first assignment, but I was also doing other assignments for this class. This one using a face tracker to generate some random recipes.

And as I smiled, then you get the recipe. And then this is another project that I did. I believe we were using the Kinect to track our body and then we use it to generate some piece of music.

The Impact of Creative Coding on Patt's Learning Approach4:48

This class, along with all of these assignments, really opened my eyes to the creative potential of things that you can do with code. And it also showed me that if I got really good at coding, I can make all of these amazing things.

Coding become less about overcoming challenges, but it became more about bringing ideas to life. And trust me, I had a lot of ideas.

Slices of Beijing: A Physical Computing Project5:15

And so I started to brainstorm a bunch of ideas, starting with this first capstone project. So I named it Slices of Beijing. Back in 2013, I took a trip to Beijing with a group of friends and it was such a fun time, and so I wanted to document it in a memorable way. And as a mechanical engineering student, I wanted to create a project that doesn't only live on the screen, but has some of the physical component added to it. So I decided to make this interactive map.

It's a project that explore the concept of physical

installation, projection mapping, and interactivity. So the whole idea is to create these small pieces, small slices of the map, and then write a piece of software that can detect each specific piece and then illustrate some image and project onto it. But what makes this project more special for me was what I required to do to complete the project. Not only that I had to learn how to code, I also had to pick up a whole set of other skills. In terms of coding, I had to learn how to detect each specific piece and then project some image onto it. But at the same time, I had to learn how to use a laser cutter to create the physical elements. And on top of that, I learned the design side of things to create some illustrations that are aesthetics,

but at the same time, present it in a way to my audience in a meaningful way.

Code allows me to create all of this, but it was the idea that drove the project forward. Code just became a bridge between my imagination and the final output.

So as you can see here, this project, Slices of Beijing, I had the final vision of what I wanted to make, and then I broke it down into little steps and then try to take those steps and complete the project.

Exploration and Experimentation in Creative Coding7:21

But what's amazing about reframing code as a medium to create something was that it allows me to approach learning how to code through the lens of exploration and experimentation.

Finding Inspiration and the Sound Mini Series7:37

So by this point, it's been over a year since I started

my YouTube channel. And I've made over a hundred coding tutorials. And one of the questions that people ask me the most is that, where do I get my ideas from? And I get my ideas from all sorts of places. I believe that clarity comes from taking action, and inspiration emerges from working on an idea.

Experimenting with Sound Libraries and Techniques8:06

Let's take this project for example, the sound mini series. So by this point, I have made a bunch of different videos that ranges from all sorts of categories, from generative art to typography to interactivity. And so I was trying to find a new path for me to explore. And one of my subscribers emailed me and said, why don't you look into sound? And so I did.

And so this is the first piece that I did.

It's called Rotating Polygons.

And as you can see here, this is just one shape of a polygon, but what it does is that I can create this piece, set it to a specific speed, and then let it play a musical, some sound as you can hear. But with this specific sketch, what I had to do was that I had to go on a different website to download all of the different notes, upload them onto the sketch, and then play this, and then write the software.

And so it was fine,

but then if I wanted to change it to a different octave, what I had to do was that I had to go back to that website again and download a whole set of musical notes. It was quite redundant, but I really didn't know a better way. And so I stuck with it for a few videos. But then I asked myself, there must be an easier way. And so I decided to look into the sound library

within the JavaScript library that I use, and then I found this class called oscillator. And that's exactly what it allow me to do. It allow me to generate some musical notes in a much easier way, so I don't have to go through that hassle of going to the website, download the files, and do all that. And so I stuck with this technique for a few more videos. And then I was like, okay, Pat, what if you want to get some more sophisticated sound?

And so I went back to the sound library and then looked some more. And then I found this class called ADSR, which allow me to do exactly that. It allows me to separate the notes into four different stages, and then just add a little bit more volume and stuff like that, and create some more sophistication to the sound. So the more I worked on the idea, the more I posed questions to myself, and then the more I discovered and I experimented with the idea.

And by this point, I already made 11 videos, and I explore all of the different classes within the sound library. And I also added to some physical simulations, and this is actually one of my most proud sketch that I made. It's called Pendulum Wave.

As a mechanical engineer, I really love this one that I can actually simulate it with code.

The Pendulum Wave Project and Curiosity-Driven Exploration11:01

And so, the Sound Money series is just one example of me allowing myself to let my curiosity lead the path. And time and time again, it leads me to some very interesting places.

Creative Coding Across Disciplines11:17

So as you can see from the different examples that I've shown you until now, creative coding is not only limited to one field. It actually transcends disciplines. Whether you're an artist, a designer, a musician, a scientist, creative coding can be an incredibly powerful tool. An artist can use it to create some dynamic, interactive piece of art. A musician can use it to be a visual representation of sound. Designer can explore using creative coding to create some nice graphics or animations. And a scientist can use it to visualize some pieces of data in a more digestible way.

The fact that this is such an interdisciplinary thing is such a good aspect about creative coding because it opens up a whole new world of exploration and innovation, which is a skill that is valuable in any profession.

Challenges of Interdisciplinary Coding and Overcoming the Fear of Starting New12:18

But looking at approaching, learning how to code through the lens of this interdisciplinary can come with a set of challenges. And that is because you're constantly a beginner. Trying to work on an idea that combine a few or many different disciplines means that you're most likely are not an expert in any of them or all of them. And that means that you're faced with new challenges all the time, and that is not always easy. And so, how do I overcome the fear of starting something new? It's still a work in progress, but I try to do it so often that it becomes easy, or at least less

difficult. You get better at the things that you do often. Things become easier because you also gain the confidence of your own skills and your ability to tackle new problems. Why? It is because you have tackled so many different kinds of problems successfully previously. And so your circle of competence and confidence grows over time.

Treating Learning Like a Video Game13:32

And I also treat learning new skills like playing a video game. When you play a video game and then your character dies, what do you say to yourself? Oh my god, I'm such a failure, and then you quit. No, you never do that. You hit the reset button. You figure out what you did wrong in the last round, and then you do it again and try a new strategy. And if you treat learning new skills like playing a video game, you look at obstacles instead of

as setback. You're faced with obstacles, but instead of looking at them as setbacks, you actually look at them as data points that show you what direction to take next. And as you level up, you collect more coins, and in real life, you collect more experiences and you gain more confidence.

You don't have to know everything from the start, but you really have to have the willingness to try new things, test things out, and just see what's going to happen. And as you view all of those setbacks as a key data point for what to do next, it always leads you somewhere good.

The Quadtree and Flocking Simulation Project14:51

So this is another project that I want to share with you that at first felt really difficult. But as I take the first step and then the next steps, I expanded my technical abilities, and it also shows me the new opportunities that this can create in that this can turn into something beautiful. So what this is is a data structure called

the quadtree, that I use to optimize a flocking simulation. So what is a quadtree and what is a flocking simulation? A quadtree is a data structure. It's a way for you to organize some data by subdividing a space into subsections such that it is easy to locate and access some data. And then the flocking simulation that you can see here is a model that mimics the way a group of animals behave, like a school of fish or a flock of birds. And so the goal was for me to actually implement the quadtree data structure to optimize the flocking simulation so that it can run smoothly and efficiently. And this project is special for me for many reasons. The first one is because I started out with a very small circle of competence and confidence. I didn't know what a quadtree was. I didn't know how to code that, and I had no idea how to do it. But then I pushed through, and I just figured it out, and I made the first video.

Then I tried to code the flocking simulation, and then that worked as well. Then my circle of competence and confidence grew.

And then the next step that I took was to combine the two things together, and then I made the third video. And by just a span of two videos, this circle expanded significantly,

and I was able to create this.

But here's the kicker. Completing this project not only allows me to gain a new level of confidence, but it actually lets me discover something

that I was scared to do for a long time, which is dive into the world of physical computing.

Venturing into Physical Computing and Future Directions17:07

I was also inspired by this project called Diffusion Choir, done back in 2016 by these firms, Sosolimited, Hypersonic, and Plebian Design. It's a physical installation that uses flocking simulation to control these 400 origami-like wings.

And so physical computing is where hardware combines with software to create projects that are more tactile, dynamic, and grounded in the real world. And so this is the new direction that I'm about to take, and I'm very excited. Am I nervous? A little bit, yes, because it's super new to me, and there are going to be a lot more challenges that come my way, but I'm confident that I will be able to tackle these new challenges.

The Value of Creative Coding and Conclusion18:00

Approaching learning how to code through the lens of curiosity, experimentation, and exploration not only boosts your confidence, but it also encourages you to think critically and to solve problems in a creative way.

It's not just about following instructions.

Creative coding allows you to break complex problems

down into manageable steps and find creative solutions. And when you're faced with setbacks, just look at them as data points to figure out a new direction that you need to take the next step. And so, as we approach the end of the talk, I hope that I have at least convinced you that coding, or learning how to code, is just not a technical thing. It is a tool for creativity, exploration,

and critical thinking.

It is what allows you to turn your ideas into a reality. And that's exactly what I try to do with my channel. My goal is to help people unlock their creative potential through code. And so whether you want to build interactive art installation, or you want to experiment with code or new technology, or you want to integrate coding into your field, I invite you to join me into this journey of discovery. Thank you. Wow, thank you. Thank you. Wow.