Drawing with Text Characters

[00:00:00]
>> Mathew DesLauriers: Just scroll down. Here's our circles. We're just gonna comment those out for now. And instead of circles we're gonna just try and draw a text item at each of those positions. So we're gonna use context.fillStyle is equal to color, just like we did before. And then we just need to write context.fillText.

[00:00:19]
And you can pass a string and an x and y coordinate and that's how this function works as you pass a string. Which is, it doesn't need to be a single character. It could be a full string but we're just gonna draw the letter A for now and then an x and y coordinate of where we're drawing the text.

[00:00:38]
And before we draw the text, we wanna make the text much bigger because if you're on your screen, you might see little tiny pixels. It's cuz they're quite small. So we're gonna use context.font, and let's say we're gonna use 100 pixels, and then you have to specify a font family string.

[00:00:56]
So it looks like this. So 100 pixels is the size of the font, and then in quotes Ariel is the font family, and you can tweak that font family to something else like Helvetica, or something, whatever you want. And so, now we have some text drawing and like we did before we wanna make it so that all of these are different sizes.

[00:01:18]
So instead of using a string, I'm gonna use a template string here, yes 6 feature and I'm gonna replace 100 with radius and probably won't see anything yet but that's because our radius is actually very small, we had to do radius times width. So now if you do that you should start to see the letter A a whole bunch of times in a grid.

[00:01:42]
And it might be very small, if it's very small go back up to your data here and make it bit bigger.
>> Mathew DesLauriers: And now instead of using the letter A. Let's just try and use an equal sign and that's gonna make it a bit more artistic looking rather than a bunch of random letters.

[00:02:07]
Now, we're starting to get something more interesting. And one last thing we can do is we can try and rotate this text before we drive. And so right now all of them are being drawn just using normal rotation. But if we, let's say try and rotate the canvas before drawing, so there's this method called rotate, and you pass in a number, so let's just pass in the number 1 for now.

[00:02:37]
It's gonna produce some weirdness. And that's because remember that Canvas is a state-based API, so when you change something, it's just gonna remember that same thing until you change it back. So right now what's happening is every time we draw something, we're rotating the canvas additionally one extra degree or one extra radiant I think is the value actually, not degrees.

[00:02:59]
And so what we need to do is either rotate it backwards. So you can do rotate -1, so that's one way of doing things. Another way I'm gonna do things is, instead of doing that, I'll delete that, I'm gonna say, before I draw my text, and before I rotate I'm gonna say context.save and then after I draw it I'm gonna do context.restore.

[00:03:25]
And that's just gonna save the transformation state. And then I'm gonna draw stuff and then once it's done drawing I'm gonna restore it back to how it was before. We're still not quite there yet we just need one more thing. Which is that we're rotating the canvas by one radian here.

[00:03:40]
You can tweak this value and you can start to see that it's gonna look a little wonky. That's because we're rotating everything from the top left point. And so what we actually wanna do is we wanna rotate everything from the grid coordinate. Before drawing your text. So what we're gonna do is do context.translate[x, y], and then we have to, so it's translate, then rotate, then fillText, at 0.0.

[00:04:12]
So we've translated to the grid coordinate, we've rotated the context by 7 degrees. And then we're filling the text and because we use translate we can use 0.0 because the new origin point for our context is x,y. And then if you wanted something just quick and easy instead of using the same rotation for all of them.

[00:04:34]
You can use some value. Ideally what we want is we want a different value from our data structure both let's call it rotation.
>> Mathew DesLauriers: And I'm just gonna de-structure that, and I'm gonna add it to my object here. So we have rotation, we're adding it to the same grid of points, objects.

[00:04:58]
And then here we're de-structuring it again, just like we did with the color and the position. And we're using that in our rotate function. And up here now, we can either give it an entirely different value, we can randomize it, we can use noise. Or we can make it based on the randomness as well.

[00:05:18]
The same randomness that we're using, the same noise randomness that we're using for the size of the damage. And so if you're getting this far then you should already pretty much be in a state where we can create pretty much the image that we were looking at earlier.

[00:05:39]
It's pretty close, it's maybe not exact, but with a bit more tweaking we can definitely get there. And you can imagine by using different symbols, such as instead of a circle you might use a dash symbol or a period symbol. You can also imagine using unicode symbols like an arrow symbol might be kinda cool.

[00:05:59]
Or even taking random singles. So just like we're de-structuring the color, and the radius and the position, you can de-structure the single up here, maybe choosing from the random list of different characters or something like that. And that's how I ended up producing those images I've shown earlier.

[00:06:21]
>> Mathew DesLauriers: And again you can tweak all these values cuz right now maybe it's a bit too small you can make the grid a bit less dense, you can make the sizes a bit more pronounced. You can also multiply the rotation here by some other value. If you multiply it by 0.5, it's gonna rotate each thing less.

[00:06:42]
>> Mathew DesLauriers: So that's kind of, I wanted to just give that whole workflow for how to create an image like that, because now we've introduced a whole bunch of different topics, like noise, randomness, using different color pallets. And as well as just using canvas and create a stuff like that.