Additional Thoughts and Q&A

[00:00:01]
>> Speaker 1: Can you do the exporting GIFs and videos with these shader, with shader templates as well?
>> Mathew DesLauriers: Mm-hm, mm-hm, yeah.
>> Speaker 1: So the main Canvas sketch doesn't change, it's just the template you're using?
>> Mathew DesLauriers: Yeah, the template is really just a copy-pasted sort of preset thing that I've decided on, but all the actual structure is the same.

[00:00:26]
So you can hit Cmd + S to save a PNG from here. You can also change the dimensions just like we were doing before to be like 512 by 512, and all the sudden you get a fixed size every time you export it. And you can even do things like use preset sizes here, pixels per inch, and all of a sudden you're taking a shader and you're exporting it as like a print artwork, which is kinda neat.

[00:00:54]
>> Mathew DesLauriers: And yeah, you can do anime. So it's already animated, animate true. You can just set the duration like 4, and maybe set an FPS as well, which is pretty common when you're doing GIF exporting. So like FPS 24, maybe I'll set these dimensions back to something normal for a GIF like 512 by 512 and remove this, cuz I don't want it to be too big.

[00:01:21]
And now if I was to save this out, it would end up giving me, in whatever folder my output is, it's gonna, like if I hit Cmd Shift + S, it's gonna export hundreds of frames over dozens of frames. And that's why generally whenever I'm doing GIF I just make sure my terminal command is saying output is equal to, and then some temporary folder, just so I'm keeping my folders a big more organized.

[00:01:48]
But yeah, now you can see it's exporting all these frames, and I can create a GIF out of that. And you can actually, cuz you know how earlier we were using time, and that wasn't super helpful for seamless loops? So instead of using time, you can change this uniform to say playhead, and then you just take the playhead prop, you pass the playhead prop down to the uniform.

[00:02:10]
And then here instead of using time you'd use playhead, and you'd multiply it by pi or pi 2 to get those perfect, seamless loops again.
>> Mathew DesLauriers: Yep.
>> Speaker 3: Is there anything else that you would use besides FragColor to manipulate a given pixel?
>> Mathew DesLauriers: There's FragDepth, which is another topic.

[00:02:42]
It's like around the depth buffer and it goes back to that question you had earlier about how do you sort things. But generally speaking in this version of WebGL, in this version of GLSL, the only thing you really need to be concerned with is this GL FragColor. There's other built-in variables depending on what you're using shaders for, cuz something we haven't really talked about is vertex shaders.

[00:03:06]
So there's actually in this I think this shader example here in the repo, custom shaders and three.js. I think it introduces vertex shaders, yeah. And because so far we've just talked about pixel shaders where these are pixel shaders on the surface of a mesh. And then when you actually change the topology of the mesh that's when you start to get into vertex shaders.

[00:03:34]
And it's just another string, another source code just like the ones we've been writing so far, except instead of outputting a FragColor you're outputting a position for each triangle in the mesh. And I didn't want to get far into them cuz it involves a little bit more math, and it involves some other concepts that you have to build your way up to understanding those things.

[00:03:59]
But you can definitely follow this guide and get the same sort of output of these exploding triangles, and it's animated and it's moving and stuff like that. And the same concept is used in this demo that I have here. Just to show you what it looks like when you explode a 3D mesh, or in this case a 2D mesh by its triangles.

[00:04:21]
So when it's filled in you can see that it's just a shape, but when you see it like that, when it's outlined you can really get a sense of the triangles that make up this mesh. And the vertex shader is what's creating this animation. And vertex shaders are really good for doing this kind of stuff because they are really fast and really efficient.

[00:04:39]
If we try to animate each of these individual triangles manually it might be slower. Whereas with the vertex shader you can animate millions of things at the same time, and it's still gonna be running at 60 frames per second.
>> Mathew DesLauriers: And this link is also I think in the modules.

[00:05:06]
And there's a lot of other stuff, too that I hadn't really covered getting in the whole Canvas sketch ecosystem, because so far I've been wanting to to focus more on like Canvas API and are on three.js. But the actual tool that I've been building Canvas sketch, there's things like using a sync and a weight and using asynchronous functions.

[00:05:27]
And this hot loading thing is something that I haven't even really shown, I just showed a very basic example, but you can do some cool stuff with it for sure.
>> Mathew DesLauriers: Yeah, just wondering actually, let's see.
>> Mathew DesLauriers: Yeah, definitely if you're interested in this, just take a look at the Canvas Sketch Repo.

[00:05:51]
One of the things I showed in one of the slides was Pen Plotter artwork, and that looks like this. And this kind of thing is actually exported with Canvas Sketch as well, and so right now in our render functions, so if I was to look at, let's say I go back to my 2D sketch file.

[00:06:19]
>> Mathew DesLauriers: So remember how we have this render function, it returns a render function, and it's just like React where you have those props. And every time the props come in, you give some context settings. You can actually return something at the end of this function. And depending on what you return is gonna change the way that the file exports.

[00:06:38]
So right now if you return the canvas or the context I guess you could say, it's gonna just render a PNG, but if you return an object that says extension is a .txt and data is hello world. And then I was to run this through Canvas Sketch,
>> Mathew DesLauriers: Now it's running, and now when I export, instead of exporting,

[00:07:10]
>> Mathew DesLauriers: Well, I mean, it should, I might have messed something up. But instead of exporting a PNG It will export a txt file. And you can do the same thing to export G code if you're sending something to a CNC or a robotic printer, and you can actually get into pretty complex workflows.

[00:07:28]
One of the things I did, let's see.
>> Mathew DesLauriers: I don't know if I have an image of it, but another example for more advanced print is. Let's say you're doing print that's using risograph or offset printing where you have to send a print to a print studio and they actually ask for three different layers or three different masks.

[00:07:49]
And they say okay, instead of it being in color I want all of the shapes in the background to be black and all of the shapes in the foreground to be black but I want them to be two separate PNGs. And then the print studio will end up doing silkscreen or they'll end up doing some technique that gives it a much more organic print look.

[00:08:06]
And so you can actually code your way through that instead of just rendering a single canvas you can export multiple PNGs and stuff like that. So it's definitely yeah, it's a bit more complex than it looks. We've just been taking some of the basics and making sure that we're focusing on the basic concepts that aren't so specific to Canvas Sketch.

[00:08:27]
Cuz the idea is that you're probably gonna go back to whatever you're doing this stuff on, whether it's or anything else, or Frontend. And you might not be using Canvas Sketch, but the concepts we've talked about are pretty much they apply no matter what. I mean, there's a few specific API things, but they should apply generally across the board, whether you're doing Frontend or three.js or whatever.

[00:08:51]
>> Speaker 3: Have you ever generated like noise, like pixelated noise type stuff or do you know resources for that sort of thing, or-
>> Mathew DesLauriers: Like for what purpose, I guess?
>> Speaker 3: Almost like a speckle noise effect, you know what I'm talking about? Almost like a subtle texture.
>> Mathew DesLauriers: You're getting into a current project?

[00:09:07]
[LAUGH]
>> Speaker 3: [LAUGH] What's that?
>> Mathew DesLauriers: No, just kidding. Yes, so you can actually use noise from a noise function, just like what we were doing with the shader. So here's an example, where's our noise?
>> Mathew DesLauriers: Basically, you just change the frequency to be much more frequent, so here you see,

[00:09:33]
>> Mathew DesLauriers: This is a frequency of 5 versus a frequency of 0.5. And if you were to use noise and you were to use a frequency of 50 or 100 or 5,000, then you can start to get these little speckles and you can start to get that effect like you want.