Course Code & Setup canvas-sketch

[00:00:00]
>> And now we're gonna actually dive into the repository start to get familiar with some of these tools. And so this is the sort of workshop home base for today. It's under my GitHub, mattdesl/workshop-webgl-glsl. And so if we open it up, mostly this repo is just a collection of resources, collection links.

[00:00:21]
You don't have to clone this repo, there's not much that you're gonna gain by cloning this repo and trying to run things locally here. We're gonna start to work locally more in our desktop or something like that, just starting from scratch rather than starting from a cloned repo.

[00:00:38]
But it goes through some guides, so if you're not comfortable yet with command line, you can always go through this guide and just sort of refresh yourself. It also includes some sort of Quick Start commands that we're going to be using here and there just to sort of use as a review.

[00:00:56]
Another intro is to note in npm, so if you haven't used Node and npm before, we're gonna be using that a fair bit today. You wanna make sure that you have recent version of both so version 8 or above of Node, version 6 and above of npm. Another thing that comes up quite often is when we try to install some modules, sometimes we're gonna get this little error that will pop up, especially if you've just installed Node, you might see some sort of access errors.

[00:01:26]
And in this guide, there's a few suggestions on how to troubleshoot that. So if you do run into that during the workshop, to check out this guide, go to the troubleshooting, and maybe try to follow some of those steps. There's also a little intro to Canvas sketch and we'll be talking a bit more about Canvas sketch throughout the day.

[00:01:46]
But for those who have never heard of it or never used it, the main purpose is right here. The main idea of Canvas sketch is to set up our work in a consistent structure so that all the demos are gonna be really easy to reason about. We can say, okay, this is where the renderings happen, this is where the setup's happening.

[00:02:05]
This is where the settings for the dimensions and the frame rate and those kind of things is gonna happen. It also allows us to do required statements from npm. And it includes support for GLSL, which is gonna be really important today. And then also, it's really good for exporting PNGs and MP4s and GIFs and things like that.

[00:02:25]
And so if you've already got it installed, I would suggest reinstalling it because I've made some updates in the last week or two that you might not have. And you can reinstall it here as we're talking or we'll have some time to go through and actually install these dependencies as well.

[00:02:42]
But if you want, you can start reinstalling it now might take a few minutes. Another guide here would be the GLSL syntax. This will be here as sort of a cheat sheet so we can refer to this later, but we don't need to worry about that right now.

[00:02:57]
Once we learn about GLSL and some of the syntax, we can start to learn about glsify, which is gonna allow us to bring in modules of code from npm and use those directly in our shaders which is really powerful. Way of doing things like noise functions and randomness within our shaders.

[00:03:16]
And so you'll also see a lot of other links. One of the things I'm gonna be walking through this morning is this interactive book. It's kind of like a guidebook, but it's also mostly just slides for me to show certain concepts. And so it's these fullscreen slides and I'll pull them up on the screen here, I'll walk them through.

[00:03:34]
But you can walk through this guidebook on your own laptop as I'm explaining it. And you can work with these interactive demos yourself and just try and understand interactively how these concepts come together. And then there's tons of demos, so there's a few different types of demos. There's some demos on glitch so for example, here's a Canvas sketch demo.

[00:03:57]
This is the most basic thing we can do with Canvas sketch is just to draw a rectangle, and this is all using Canvas 2D. So if you haven't used Canvas sketch, you might wanna just pop this open and try to wrap your head around this. I'll be talking a bit more about how this works and the idea of this, but this is the bare bones Canvas 2D version.

[00:04:17]
But we're gonna be using Canvas sketch more for, for three js demos. So this other link here, this is gonna show us quite a few different demos around three js. And the nice thing here is because this is using glitch, you can open up any of these links here and then you'll be able to see the code, see it running.

[00:04:39]
So let's say you open up a link like this and glitch, you can then click the Show button and click Next the code and all of a sudden you can have something that should show on the right here once it loads. There we go. So yeah, you can click Show next to the code or in a new window and then you can also remix this on your own account.

[00:05:10]
So you can just click the link at the top left remix projects or there might be a button here to remix the project and you can edit it, tweak it. We're gonna be mostly using this as a sort of reference, so it'll be there if you need to remind yourself of how to do certain things.

[00:05:29]
It'll be here as the way of copy paste some certain functionality into our own work. Occasionally, I'll go in and I'll actually edit some of these files, but mostly, I'd like to work with the local code. So stuff that's running through terminal, stuff that's running through Canvas sketch locally, because that will allow us to do things like exporting PNGs and MP4s.

[00:05:49]
You can't really do that on the web so easily. And it'll also allow us to import things from npm, which we can't really do here. But yeah, these are some of the demos, we'll sort of walk through them as we go. We might not get through each and every single one individually, but some of the concepts we're gonna be talking about, we'll cover many of these types of things.

[00:06:11]
So we'll hopefully get through almost all of it. There's some other demos here in the repo, and these are again, more reference. So this is here as a reference, but we're gonna be trying to create some of these from scratch. In the tools and prerequisites section, you can see this link.

[00:06:32]
See here on how to install it, it’s also the same link up here, intro to Canvas sketch. And then running locally are Quick Start. There we go, running locally inside the Canvas sketch guide. And so, if you’re lost you can refer to this. But let’s try and create a very bare bones sketch just to start off and we’re gonna create it on our desktop, or in our Downloads folder or Documents folder, whatever.

[00:06:58]
I’m going to go to my desktop in my terminal. And then I’m going to start by installing the command line globally with the command line tool. So it’s npm install canvas-sketch-cli, make sure the cli is there. And then --global and this might take a couple minutes. And so once it's installed, or as it's installing, you can create a new folder on your desktop.

[00:07:26]
Let's just call this webgl, we can just call it webgl for now. And then we're gonna cd into webgl and so now we're inside this folder. And we're gonna just start with a simple three js scene. Three js setup. So we're gonna write canvas-sketch because now that we've installed it globally, we should be able to just run it.

[00:07:53]
And we're gonna say, canvas-sketch and let's call it our files sketch.js. So the first argument here is the file name that we wanna edit and then we're gonna pass in these arguments here. We're going to say --new space and then --template = 3. And so this is the command that we can use to scaffold out a new three js.

[00:08:18]
Project or new three demo or artwork or whatever you're building the --new is going to create a new file in the --template is going to use the three js template instead of the default 2D template. And so if it runs correctly, you should have this kind of a message and you should be able to open this link or open local host 9966 in your browser.

[00:08:42]
And actually see a 3D object of some kind.