Creative Coding with Canvas & WebGL Introduction
Transcript from the "Introduction" Lesson
>> Mathew DesLauriers: So hello. Welcome to creative coding. My name is Matt. I'm a creative coder and a generative artist, living in London right now, but I'm from Canada. And yeah, I'm really excited to be here giving this workshop. So just a bit about what we're gonna be doing. Today is about creative coding, but also it's about generative art, and we're gonna get into what that is but it's a passion of mine.
[00:00:25] And it's how I thought could be interesting to make this workshop all about generative art, and creative coding both together. The idea of this workshop is that it's designed for beginners but also if you're experienced, even if you do this for living, you should hopefully gain a lot of the process and workflow that I've been building myself for the last two years basically.
[00:00:50] And if we're gonna talk about these tools and what kind of tools we can use to really create high quality, production ready generative art or creative code for whatever the application is that we wanna talk about. In the morning, it's gonna be more around 2D, [COUGH] and more about creating print artworks.
[00:01:07] And then in the afternoon, we're gonna be talking more about 3GS, WebGL, 3D, and more [INAUDIBLE] stuff. So I keep saying generative art and I keep saying creative coding, I just wanna give us a sense of what those things are. So creative coding is a really broad term and it's basically just using code to create something expressive, artistic, or creative really, rather than just functional.
[00:01:35] And so that's really broad, it compasses a whole bunch of different types of fields. And really today we are gonna focus more on the web and focus more on how do we use this kind of expressive stuff to create web experiences or experiences that can be created with web technology, like a print artwork or an animation or a video or something like that.
[00:01:56] And then generative art, this is just how I wanted to look at today. It's sort of a subset of creative coding, and it's creating artworks with an emergent system or autonomous system. A system that sort of acts on its own, and so as the artist, you're not just creating the art yourself but you're also sort of dancing and playing with this machine.
[00:02:18] And the machine is creating the art as well as you are. So you sort of feed these instructions or rules to a machine, and it goes on its own and creates the artwork, along with your own input. And so before we get into coding things, and before we get into actually doing some exercises and stuff like that, just wanted to run through a few examples that inspired me.
[00:02:42] Some different artworks and some different projects, and hopefully it will give you a better sense of all the different types of things you can do with creative code. So this one is an app that I thought was really cool. It's by Zach Lieberman and Zach Lieberman is definitely somebody worth checking out.
[00:03:02] He does a lot of really cool, creative code projects. He's a co-founder of open frameworks which is a library for creative coding. And he's also a co-founder for the school for poetic computation in New York which is a school that really focuses on creative computing and creative coding.
[00:03:19] And he created this app that's an augmented reality app where you just sort of play with typography in weird and funky ways. You can share videos, you can share images, and so on and so forth. And I think this is a really good example, the kind of stuff you can do if you, after maybe today, we'll start to know a bit more about 3D and about shaders and things like that.
[00:03:42] And those kind of concepts, even though we're gonna be looking at it through a generative art, they can be applied to create something like this, which is like a little for fun. But then, also there's other artists that are working more in traditional sort of sense. In the sense that they're creating art that you hang on a wall, or something like that.
[00:04:01] And they're still creating it with code. So this is Anders Hoff also known as inconvergent, and he creates these very complex emergent systems that sometimes simulate nature like differential growth or something like that. And then he quite often sends the output of these programs. He sends these to a mechanical pen plotter.
[00:04:22] This is something that I'm also really inspired by. And something that I've experimented with as well. So this is a project that is using the mechanical pen plotter, which is that device that you can see in the top left. And a mechanical pen plotter is basically just a device that you send it commands, movement commands, and you attach a pen to the end of it.
[00:04:43] And then it will move exactly as you programmed it to move. And so it's a really cool way to take your code and actually produce a physical output. And the physical output is sort of, it's robotic, and it's exact and accurate because it's clearly done by a robot, but it has these sort of imperfections where sometimes the pen will dry up where the pinwheel caption adds or something like that.
[00:05:06] And so yeah, so inconvergent definitely is one of the coders that sort of really started this movement of using but there have been coders in the 60s, and a long time ago that have been doing the same sort of stuff just in different ways. So this isn't exactly new or anything like that, but it's one exciting way of bringing your code into a physical space.
[00:05:30] And then you can also create physical installations with the same concepts that we're talking about today. So this is a really cool one, I thought, just cuz it's so simple and so fun and playful. And, yeah, so it's basically, I'll just skip forward a bit. Basically you just pick up this ball, and immediately the user or the audience understands that they're sort of holding the sun.
[00:05:59] And on the left, the projected image could very much be like a shader or something, something that we're gonna be talking about later in the second part of the workshop. And inside the ball, it could just be some specific hardware that sends commands, accelerometer data, or something like that to the visual system.
[00:06:18] And so, yeah, this is one application of creative coding. We can totally make these cool, interactive experiences, sometimes for museums or for galleries or art installations, sometimes for events, like parties or a fundraiser event for a big company, and so on and so forth.
>> Mathew DesLauriers: And then this one I thought was a nice one to talk about as well. This is more of a commercial work, so so far I've been talking a lot about artsy projects. And you might get the sense that you can only do artsy projects with this kind of stuff but you can also really apply this to commercial work.
[00:06:58] This is a project by Active Theory, and I think California they work out of. And it's a WebGL project and they partnered with Google basically. Google was their client. And so they created this experience where you send a virtual airplane using your phone, and you send it to this sort of virtual 3D world.
[00:07:17] It's using WebGL, it's using all the same stuff we're gonna be talking about today. And then they actually also had at the launch party for whatever the keynote was for Google. They had everyone actually interacting with the experience, and so this is just to show that it's not all about creating art.
[00:07:32] If you wanted to make more of a living out of it, there's a lot of commercial applications as well for brands, and so on and so forth. And then, one last little thing would be this company nervous system. And I just wanted to highlight them because, so far, I've been talking about digital experiences.
[00:07:51] But, this is creating more of a product with code. And nervous system, they create a lot of different things like sometimes ceramics or jewelry or items for your house, or puzzles in this case, and quite often it's generative. It's using sometimes inspired by natural things, like differential growth, just like inconvergent and Anders Hoff, but applying it to 3D printing or CNC.
[00:08:18] Or sort of injection moulding type stuff, and fabricating actual products out of the code that they write. And so that's just to say that creative code doesn't need to be digital. It could also be physical. And there's a lot of different applications.