The Grid

[00:00:00]
>> Mathew DesLauriers: I was showing this earlier, and we're not there yet [LAUGH]. We're gonna get there, hopefully.
>> Mathew DesLauriers: But what I wanted to say is that today, the theme of all the work we're gonna try and be creating is around this idea of the grid. And so this is one thing I've noticed, when I'm doing my own sort of creative projects, is that sometimes, if I start with an empty canvas or an empty just text file with code, I don't know always where to go.

[00:00:28]
And so something that I've noticed in my own process that's really helpful is to start with a really simple theme that you can apply throughout your project. I like to sometimes start with a basic theme like grid. There's other types of things you can do as well, like circles or something like that.

[00:00:44]
And even though it's really basic and really broad, you can start to create different images from it. And so this would be the most basic thing we're going to start with, just creating a literal grid of circles. And then we are going to start to use a bit of randomness, trying to introduce a little bit more of that generative type of idea.

[00:01:03]
Pulling some circles out and leaving some others in place. And then we're gonna introduce some techniques that I like to use for random color pallets. So this sort of trick that I do in a lot of my own art, and it just gives you a way to get really nice colors through many different images.

[00:01:21]
And we're also going to introduce Gaussian randomness. So I would say this is something that I only sort of started doing more recently, but it's something that's had a big impact on my own outputs. Is instead of just using plain uniform randomness like Math.random in JavaScript, you actually use a gaussian random distribution.

[00:01:40]
And that ends up giving you this more interesting distribution of big numbers, and small numbers, and negative numbers, and stuff like that. And it just ends up creating this sort of nice more artsy stuff, almost like a paintbrush was flicked on the screen. This is sort of a little sketch that I created as I was doing this workshop.

[00:01:59]
I just noticed that instead of drawing circles, you can draw unicode symbols or you can draw just text symbols. So we're gonna talk a little bit about how do we use text in Canvas API to do this kind of artwork. This is a Konami code, up down, BA, whatever it is, up, up, down, down.

[00:02:17]
And then so, hopefully, we'll get here eventually. This is a very similar concept to this, the only difference is that there's a lot more shapes here. There's a lot more randomization and changes in the distribution of how they're laid out. But there's also an affect that you might notice.

[00:02:36]
It's this undulating pattern and it's almost like waves or something like that. And we're gonna achieve that with a noise function. And we're gonna introduce some concepts like noise as well. And then just riffing on the theme of grid. This is another thing that when I was creating these sort of little exercises.

[00:02:56]
I just like ended up saying what would happen if I did 10,000 lines or 10,000 circles instead of just the 100 or whatever, all of a sudden, I started tweaking it with noise functions. It started to look a bit more like fur. So I was like, that's kind of cool.

[00:03:11]
And then some other things that you can do is animation, just like a little simple animation like this. Or a little bit more complex but still basic, still simple, nothing too fancy. And this is more getting into my own sort of print artwork. And the colors on the screen are not doing it justice, I promise you.

[00:03:32]
But it's actually a print artwork that is also based on the grid. Loosely based on the idea of the grid, except it's using golden rations and golden rectangles to create cells of different sizes. And this is, again, this is just using the same tools that we're talking about today, using Canvas Sketch and it's using the Canvas API.

[00:03:51]
Except it's actually a print artwork that I was able to get printed properly with archival ink, big A3 size. And you can hang it up, you can maybe, one day, frame it or have it in some exhibition or something like that. You can imagine, as well, if you're doing something like data visualization, hopefully these techniques would also be applicable.

[00:04:12]
Maybe you could do a cool print series with data visualization or something like that. Let's try and get to this stuff that we're talking about and see how far we can get. But again, we're just gonna start with the grid and then we're gonna work our way up.

[00:04:28]
And you'll see things will start to increase. So if you're feeling bored, hopefully, they will start to increase. And if you're feeling lost, hopefully you'll manage, we'll see.