canvas-sketch Overview & Settings

[00:00:00]
>> So, we just installed canvas-sketch, and we should just run this. If you had problems, a couple of things to do. One would just simply be to try installing it again, making sure that you're installing it globally. And also making sure that you're installing the command line interface.

[00:00:17]
So, this little -cli. And then another thing that might happen is you might need to, once it's installed, just quit and reopen your terminal if you're having trouble. Or if you having EACCESS issues, you can go to this Node and npm guide, and go into the troubleshooting here.

[00:00:33]
Hopefully that will cover all the problems. Worst case scenario, you can just uninstall and reinstall Node, and it should all be good. Yeah, question?
>> You said one other thing I wanted to mention, some browser extensions, your browser settings might prevent this too. I know I have trouble in Firefox with my normal settings.

[00:00:50]
So, I just opened up a Google Chrome fresh installation and it works fine.
>> Cool, okay. Good to know. Yeah, the tool itself, canva-sketch, is a bit experimental, because I've been just building it myself. So, it's not going to be perfect, there might be some bugs here and there.

[00:01:07]
The nice thing is that once you get familiar with how to use three.js, and once you get familiar with how to use 3dstuff, you can actually work without canva-sketch. Canvas-sketch is just there to create this little structure for us, especially for today as we go. But it's not at all necessary to do 3D programming or anything like that.

[00:01:26]
So, if you've got it running and you open up localhost:9966, you should see this red wireframe sphere. And just to test, before I get too far into things, we'll open this up in our code editor. I like to use Visual Studio Code. And typically I place my windows so that my code's on one side and the visuals are on the other.

[00:01:48]
And now what should happen is when we change our code, it should automatically reload the browser. And a simple way to just test this out, it's just to scroll down, look at setClearColor, and change this to a different color, so maybe blue. And when we reload the page, making sure that the server is running.

[00:02:12]
I just killed the server, so I'm gonna run it again by just doing canvas-sketch sketch.js. You don't need those extra flags once the file exists. And so, once the server is running, and once you've reloaded the page, you should be able to change the code, save the code, and it should just update the visuals automatically.

[00:02:35]
So, as long as that all works, we should be good to go. And so, you can also go through and start to try and wrap your head around some of what's happening here. So, canvas-sketch gives us these two concepts. One of them is settings and one of them is a sketch function.

[00:02:52]
And so, the settings allows us to set up the way that the artwork, or the demo, or the project is gonna look. So, we can add in things like dimensions here. And we can change it to a specific canvas size, rather than doing full screen. So, right now I've just changed it to 512 by 512 pixels.

[00:03:11]
We can turn on and off the render loop by setting animate to false. And now it's just a static artwork. This is really useful when you're on the train and you don't have a plug in and you want to save some battery. You can just turn off your render loop and keep iterating.

[00:03:28]
You can also use presets here instead of always choosing pixel sizes for width and height. You can use a preset for paper size. So for example letter, which is US letter size, or A4, A3. So, A4 would be a more UK or EU sizing for papers. And it's going to size this canvas correctly for that paper size.

[00:03:52]
And now when we're editing, we're going through and developing our sketches. One of the things to keep in mind is that if you ever see something you like, you can hit Command + S, once you've made sure that the canvas is in focus. So, you might have to click the canvas just wants to make sure it's in focus.

[00:04:08]
Hit Command + S or Ctrl + S depending on whether you're on Windows or Mac. If you have the console open, it should just print a little message saying that you've exported the file. And when you open up your Downloads folder, that file should be there as a PNG.

[00:04:25]
And so, this is another one of these benefits of canvas-sketches, just quick file exporting within the browser as we're iterating. And so, this is gonna be really great through the day is whenever you get something you like, you just pop that command in, Command + S or Control + S and you get a file.

[00:04:42]
Now, one of the things you'll notice with this file, even though I said I wanted and A4 or a letter size for a paper, for a print. If I look the resolution is quite low, it's 595 by 842 pixels. And if we tried to send that to a print studio, it would come out pretty pixelated and kinda blurry and it wouldn't look very good.

[00:05:03]
And so, one of the other benefits here of canvas-sketch is that we can say the pixels per inch, and we can increase the resolution to 300 DPI. And that's gonna give us an output that's much larger. So, when we save the file and we look at the file, it's gonna be a much, much larger file.

[00:05:22]
And so, we could actually send this to a print studio and it would actually come out correctly. It wouldn't come out pixelated and blurry. And then you can change the orientation by adding orientation, changing it to landscape or setting it to portrait, either one. And what's more, this might be review if you've already used canvas-sketch, but what's more is you can also specify the units.

[00:05:54]
So, right now we're working in pixels. And If I scroll down, everything's in pixels. But I can also specify units. So, let's say I'm gonna back to 72 pixels per inch, just cuz it's a bit smaller and it's not gonna eat as much of my computer. It's just a bit less intense for the computer to render that.

[00:06:15]
And then let's say instead of it being A4 or instead of it being some pixel size I wanted to make a 12 by 12 inch artwork. So, if I set the dimensions to 12 by 12, that's just gonna be 12 pixels by 12 pixels, which is super tiny.

[00:06:31]
But then if I provide the units and I say, in for inches, or cm for centimeters, or mm for millimeters. Now, I can work in actual physical sizes. And so, now, I'm creating a print that is 12 by 12 inches and 72 DPI, or 72 pixels per inch.

[00:06:52]
And I can hit Command + S, and the actual pixel output, the pixel sizes here will be mapped from the pixels per inch to the proper output size. And so, now if I was to send this to a print studio and tell them they could actually print it at 12 by 12 inches and everything would look as I expect it to.

[00:07:12]
Just make sure if you are printing things you're gonna use high pixels per inch, like 300. And one more little thing here is that when we're running these really large canvases in the browser, our browser's gonna start to slow down. Because we have this huge canvas that's rendering this massive canvas inside of our browser.

[00:07:31]
And so, we can specify this option here, scaleToView, we can say true. And what that's gonna do is that's gonna scale the canvas to the size of the browser when we're editing it, when we're developing, and when we're opening it visually. But when we hit Command + S, it's going to use the true physical size, this large, high-resolution size.

[00:07:54]
And so, that way we're just not going to be crushing our computers with this huge canvas as we're editing and iterating our sketches. And so that's the basics of the canvas-sketch settings for print. Maybe later we'll get into more, like frame rates and exporting MP4s, and exporting GIFs, and things like that.

[00:08:14]
But maybe you can already see why canvas-sketch is useful for this kind of creative coding and generative art, yeah. One other thing here worth mentioning, if you don't include dimensions, it's just going to full screen to the browser size. So, that's just something to keep in mind. The default, if we just don't use dimensions, is gonna just be full screen to the browser size, and so on, and so forth.

[00:08:40]
So, back to WebGL. So, here we have a sphere and there's lots of code that makes this sphere. The basic setup is that we have this settings object, which gives us the settings for the canvas-sketch. But then we also have the sketch function, which is gonna wrap our entire artwork.

[00:08:59]
And so, the sketch function gets passed in some properties of the app. So, the context of the canvas we're working with some. Canvas-sketch gives us a canvas, gives us a context. And we use that to create our WebGL render. And I'm gonna go through these in more detail, but I'll just quickly scroll through there.

[00:09:19]
We're gonna talk about how these all come together to make up a scene, to make up a 3D virtual world,. But within here we have the set up of our scene, and then finally we return an object that includes things like resize handlers, render handlers. And also in some cases, you might want the canvas-sketch to unload cleanly, if you're using it in React or if you're using it in Vue, or something like that.

[00:09:43]
You'll wanna dispose off the WebGL context. And so, the resize handler gets called when the canvas size changes. And so, right now I'm reloading the page, but it might not be calling this function because the canvas size might be the same, if we're using a fixed canvas size.

[00:09:58]
But it will get called whenever the canvas size changes and we need to update the render. And then rendering gets called every frame. If we're using a render loop, it'll be 60 frames a second. If we're using a static image, it's just whenever the canvas size changes. Or if we're using GIF export, it might be more like 24 frames a second or 25 frames a second.