Canvas Sketch Applications

[00:00:00]
>> Mathew DesLauriers: And then in the terms of the tool we're using, you might be wondering so far why we´re using canvasSketch and what´s the purpose. Well one thing you can do if you select your canvas, maybe just click on the canvas just to make sure it´s in focus, just clicking on it once, and then hit command S, or if you´re in Windows you can hit control S.

[00:00:23]
And what's gonna happen is you should actually have a little message in your console, in your dev tools console. And it should say that it's exported an image. And if the tool that I created works properly then it should export an image in your downloads folder. And you'll notice that the image that's been exported is exactly 248 pixels by 248 pixels.

[00:00:46]
And it's exactly, basically what you're seeing in your code. And so far, we're still maybe thinking okay, that's okay, but like what's the real point? And this is where it starts to get a bit more interesting, this tool. So instead of saying 2048 by 2048 pixels, we can use a paper size preset, like A4.

[00:01:09]
And this will change the dimensions and aspect ratio. And A4 is sort of a standard paper size, preset. I think in the states you guys uses letter paper. You can use letter, you can also use A3, there's postcard, there's some other paper sizes as well. I'm going to just stay with A4 because that's a very common print size for doing a posters and stuff like that, as well as small art that you might want to hang on wall.

[00:01:36]
And that's just going to set the dimensions. And now, when we export, if you see the save dialogue, it just means the canvas. Isn't in focus so just click the canvas before you hit command S or control S. But now when we export we should see an image that's a bit more sized correctly.

[00:01:57]
One other thing though to keep in mind is that, if we're doing a print artwork and we try and print this image it's gonna end up really blurry. And that's because the resolution by default is 72 cause by default we assumed that we're just doing some visual stuff for the web or for digital screens.

[00:02:15]
So we're gonna wanna maybe exploit at a higher resolution. So here's where you can say pixels per inch is 300 and it's a very common size. For print artworks or for print design, just to make sure that you get all the right stuff on that screen, and it ends up looking much better.

[00:02:35]
And now you'll notice this new file that's exported is much larger. And it's actually sized exactly so that if you were bring this file into a PDF or use Photoshop or something like that and you try and send that to a print studio. They will give you back the exact a for print exactly as you see on screen.

[00:02:54]
So that's kind of my motivation for building these tools is cuz I started doing a lot more print and I started doing a lot more stuff. That wasn't just working on the web. But also I wanted my code to. Work across the web as well as print, and this is where it starts to, you start to need a bit of a tool around that kind of work flow.

[00:03:15]
Just a couple other things before we get into sorta doing our own art, around this tool. So, so far you'll notice, you'll probably notice that the circle's been changing sizes every time we change the resolutions and stuff like that. And that's not really good because, let's say a client asks for you to change the size of your artwork, you wanna make sure that it looks the same regardless of the size, so instead of using pixel sizes here in our circle radius.

[00:03:44]
We can change this to be relative to the width of the screen for example. Let's say width times 0.2 and the same with the line width. So you can say width times 0.05 or something like that and then no matter what the resolution is, whether it's 72 or whether it's 300 the circle should look the same.

[00:04:04]
So that's one way of making sure that we have resolution-independent shapes and outputs and stuff like that. And then another thing here is that we're still working in pixel units. And that's fine if you're doing resolution-independent fractions like this, like fractions of the width or height of the surface.

[00:04:25]
But let's say we wanted to make a certain circle exactly one centimeter wide. Or let's say we wanted to create a margin around the page that's two inches exactly. How do we get from pixels to inches? And so, one way of doing that is to use different units in our settings.

[00:04:44]
And so here we can say units. And the units can be in inches, in, or it can be in centimeters, cm, or other units as well like ft for feet and so on. And now we can use this unit, centimeters, through our entire code. So actually just to prove what's going on is I'm just gonna console.log the width and the height.

[00:05:11]
And you'll see that instead of giving us a pixel value, it's giving us a very small value of 21 and 29.7. And if you're actually to look up the size of an A4 print, it's gonna be 21 centimeters by 29.7 centimeters. So the idea is that all of the units you would be using in your render function, including things like a radius, instead of being in pixels it's going to be in centimeters.

[00:05:38]
So when we say two, where as before two pixels would be really small, now two centimeters is a pretty big circle on our art work. So that's some of the benefits of CanvasSketch and why we are using it. For this workshop. And there's a lot of other things too around animation and around exploiting MP4s, and GIFs, and stuff like that that we're gonna get into in the afternoon.

[00:06:02]
>> Speaker 2: There's a question from online. Can you change the orientation?
>> Mathew DesLauriers: Yes. Sorry, I forgot to mention that. It's a good question though. You would specify orientation and then a string which is either landscape or portrait, and that's gonna flip this dimension. So you can say landscape here for orientation, and you should end up with a wide artwork.

[00:06:28]
And then here the other thing to mention is that right now we're doing A4, but let's say you wanted something that's exactly 16 centimeters by 10 centimeters. 16 centimeters wide by 10 centimeters. That's gonna just use an array where the first thing in the array is the width and the second thing is the height.

[00:06:46]
And just to keep in mind, these values are in centimeters because we said our units for artwork is in centimeters. And so that´s kind of the work space units that we´re gonna be working with in our dimensions, but also in all of our artwork code. Yeah, so. I like to generally work with digital sizes first when I'm doing my stuff, so I can, just generally, I comment everything out.

[00:07:13]
And I work usually with like a square, or with some sort of thing in this kind of size range of 2048 by 2048, especially for Instagram. If your goal is to make like an Instagram gallery of interesting stuff, I find the square works really well. Whereas different sort of portrait sizes don´t always work as well.