Setup & Guidebook

[00:00:00]
>> Mathew DesLauriers: So that's sort of the setup of some things that I'm inspired by, hopefully it'll inspire you a bit. And now we wanna get into how do we actually make some art with code? How do we make some cool, creative-looking outputs using just JavaScript and using some of the concepts that you might already be familiar with with frontend.

[00:00:19]
So this is one of the sorta pieces we're gonna try and create in the first part of the workshop. And I call it Unicode compositions because these are all little tiny brush strokes are actually just symbols. They're just like an equal sign, or a plus sign, or a period or a comma, or something like that.

[00:00:37]
So this is what we're gonna be aiming for and we'll talk about how to get there. We'll probably have to work our way up to it starting with something much more basic and then we'll get there in a sec. So for those of you who've already opened the repo, you can open it again.

[00:00:55]
This is the repository for the workshop and it holds basically all of the information we need for today. So it's got some of the tools we're gonna be using. It has links to documentation, all of the prerequisite sorta tools we need. Make sure you're on node eight and npm05 or above.

[00:01:14]
If you are having trouble installing anything, there's a much more in-depth installation guide. And then we're gonna be installing some of these tools, I'm gonna talk about them. If you're new to the command line, I've also included a few tips and suggestions, sometimes you'll see me when I'm using the command line.

[00:01:34]
You'll see me using autocompletion, or the up and down arrows so just be familiar with those. And then we don't need to clone this repo yet. I'm gonna try and have us create it from scratch. So we create our own sorta folder structure and stuff like that. But if you wanted to clone it for whatever reason, you can do that with this link.

[00:01:54]
I've also included a bit of a cheat sheet, cuz when I started doing creative coding, I realized that there's a lot of like, little patterns and recipes that you just have to memorize them. And once you memorized them, you can really reuse them in many different ways. And when I was starting, I kinda wished that I had a cheat sheet to refer to.

[00:02:11]
So I decided to set you guys up with like a cheat sheet. And this talks about a few different tricks that I use in a lot of my different creative coding projects. Whether it's an artwork or whether it's an actual client project, like a webGL experience or something like that, they tend to appear in most of my code.

[00:02:28]
So you can use that as a reference. And then I've included a few of my favorite NPM modules. We're gonna be talking about npm, and how do we bring in some cool code from npm. And some further reading, which includes more details and more advanced stuff. You can use this after the workshop.

[00:02:48]
So in terms of tools, obviously we need a code editor. I'm gonna be using VS code. And it includes some nice extensions, which we'll get into for things like shaders and GLSL within a template stream, kind of things like that. But sublime text also works or whatever you like.

[00:03:06]
Browser, I would say Chrome, and mainly because the tools we're gonna be using are gonna be exporting really high-res images sometimes or exporting hundreds of frames for video. And Chrome, I found, is really good for that. But Firefox should work as well, or Safari, or whatever. Canvas, this is not actually something we need to install, it's just built into browsers, the Canvas tag.

[00:03:30]
You can check out the docs here. And then obviously command line we're gonna be using, hopefully it's Unix compatible. So if you're on Windows, I would suggest commander, but you can also use command.exe. We have node and npm so when you install the latest node, it should come with the latest npm as well, that should be good enough.

[00:03:50]
And then we're gonna get into some of the more core specific tools. So Canvas Sketch is a tool that I've been building and I've been building it now for a while. Really, I started this tool, I guess, years ago technically, because I've been just iterating it on it ever since.

[00:04:07]
And now it's the tool that I use in almost all of my client projects and all of my generative art projects. It's still very experimental and it's still a work in progress. And it might show some bugs today when we go to use it, but hopefully, it'll be stable enough for us to really dive into things.

[00:04:26]
And it's basically, it's a mix of things, it's a development environment. So for those of you who have used BrowserSync or something like that, this is sort of an alternative. It's also an alternative to using Webpack or those kind of tools, like parcel. It is specifically designed for this kind of creative coding and generative art and we'll see why in a little bit.

[00:04:48]
So it is a development environment and a command line interface. It's also a set of a library, like a set of JavaScript libraries to do some common things like manipulating the Canvas, or working with paper sizes like A4, and A3, if you wanted to export or print artwork.

[00:05:05]
And then it's also just a set of resources. I spent a lot of time trying to get the documentation really rich, because I think that's one of the things that is generally lacking in these sort of generative art things, is that there's not always a lot of instruction on how do you go from A to B.

[00:05:20]
And so hopefully, that will be all there. If there's really anything through the workshop where you wanted to dive into something in more depth, you should probably look here. Because this is gonna have a bit more info on things like using physical units like inches and centimeters, which is something that without a tool like this, it might be kinda tricky to use that to create code that is working on centimeters and inches, but this tool makes it pretty easy.

[00:05:46]
So that's that. And then you'll notice in the repo, I have another thing called canvas-sketch-util. That's just a third-party library that includes some really opinionated math functions and pseudorandom number generator functions, as well as some utilities for shaders and stuff like that. And we're gonna install those in a little bit.

[00:06:08]
And then, lastly, in the second part of the workshop we're gonna be talking about three.js. We don't really need to talk about that yet, cuz we're gonna focus on more of the 2D canvas API stuff for the morning.