# What the font?!?! ## Метаданные - **Канал:** The Coding Train - **YouTube:** https://www.youtube.com/watch?v=d0GgzjCFWq0 - **Дата:** 30.03.2026 - **Длительность:** 20:52 - **Просмотры:** 18,033 - **Источник:** https://ekstraktznaniy.ru/video/49384 ## Описание Let's explore new typography features in p5.js 2.0! In this video, I cover how to work with variable fonts, convert text to 3D models with textModel(), extract contours with textContours(), and control the detail of your typography with sampleFactor and simplifyThreshold. Code: https://thecodingtrain.com/tracks/p5js-2.0/p5js-2.0/typography 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-what-the-font p5.js Web Editor Sketches: 🕹️ Variable Font Weights: https://editor.p5js.org/codingtrain/sketches/9SZYb2vX3 🕹️ textContours(): https://editor.p5js.org/codingtrain/sketches/ffDf3LmKi 🕹️ textModel() - 3D Text: https://editor.p5js.org/codingtrain/sketches/Z4DkmlvyM 🕹️ Coding Challenge 59 - p5.js 2.0: https://editor.p5js.org/codingtrain/sketches/cetWD9rvY 🕹️ One Letter, Two Contours: https://editor.p5js.org/codingtrain/sketches/2xr1TAmXK 🕹️ sampleFactor Diagram: https://editor.p5js.org/codingtrain/sketches/c23YgfIhC 🕹️ simplifyThreshold Demo: https://editor.p5js.org ## Транскрипт ### Welcome! [] Hi everybody. In today's video, I'm showing you another feature of P5 2. 0. If you're looking for all of my P5 2. 0 videos, they're here on this track on the Coding Train website. If you want to read more about P5 2. 0, I would suggest this post on the processing forums. Today, I want to look at some new features for drawing text, in particular, text to contours, text to model, and text weight. I don't really know these things, so I'm going to be kind of figuring it out as I go in this video. Here's an oldfashioned P51 sketch where I draw some text at an X and Y position with a given size. I can change the font by calling text font and any font that is locally installed as part of my system I can use. And now I see Chuchu in Georgia or in Courier. If I want to go further than this, where do I find other fonts? I'm sure many of you ### Finding Fonts (Google Fonts) [0:49] will have great suggestions. Please put them in the comments, but fonts. google. com google. com is probably a good starter place to find a wide selection of different fonts that you can load into your p5 js sketch. So for ### Loading Fonts with Async/Await [1:01] example, if I were to click on robboto and then click get font, click get embed code, I actually have the URL here from which I can load that font. So I'm going to go and copy this and put that in my sketch. Now, in olden times, I might have gone and added a preload function to load the font. But let's look at the reference for load font in p52. Fonts can take time to load. Await the result of load font in setup before using the result. And I just made a whole video all about await. So, if that's unfamiliar to you, you can go and watch that. But right here, I'm just going to add let font equals await load font from that URL. If I'm going to use a weight in setup, I've got to flag that with the async keyword. And then I should be able to say text font font. Aha. So why am I getting unsupported open type signature? Guess what I forgot to do? I forgot to update my sketch to p52. Now that that's done. There we go. Does that look like the robboto font to you? Mr. Wheels asks, "The font URL doesn't go into index. html. " So, yes, this is what this code is showing you to do. It's telling you to put the font into your HTML. And I'm sure it would be possible to do that. ### Variable Fonts [2:30] You had to do in p51 if you wanted to use a web font like that. This is what is new and different and kind of exciting about p52 is the load font function supports it directly. So, you can avoid touching the HTML if you don't want to. Now, the feature I want to demonstrate is called variable fonts. So, when picking a font, one thing I'm going to want to do here is filter by under technology variable. And let's pick a spooky font like Gen Goes. So, I'm going to copy this, paste it in here, and there we go. Can center it horizontally and vertically. And one thing you might notice in the URL, it has this property weight between 100 and 900. That means what I've loaded ### textWeight() [3:17] is the font with a variable weight between a value of 100 and 900. So normally you think of the weight as just is it bold, is it medium bold, light bold, normal, but now we can assign a numeric value to the weight of the font. This is all covered here in the p5 reference under text weight. So let's add that. Let's try 100. Let's try 900. Let's map it to the mouse location. Spooky. I forgot to mention that during a recent live stream, Kit Kenok, the P5S lead, came on the coding train to talk about variable fonts and did a really nice demonstration of this. And what they did is they assigned the weight to a sine wave. So let me try that. I'm going to ### Animated Text Weight [4:03] make a variable called angle just started at zero. I'm going to say the weight is the result of sign of that angle which has a value between -1 and one. And then now if I increase that angle every frame by a small amount, we can see choo is expanding and contracting autonomously. Many years ago, a much younger man made a video about steering behaviors. And it looks ### Coding Challenge 59 - Steering Behaviors [4:31] like this person over here uh traced the contours of a of letter forms as targets for agents to steer towards. Let's take a look at this example. Beautiful. So, this example was made with p5 1. 5. Let's update that to 1. 11. still works. Just out of curiosity, let's update it to two. No, it's broken. So, how does this work now in p52? It looks like in p51, we use this function text to points to somehow trace the contours of a font. How do we do that in p52? Okay, I simplified this ### textContours() Introduction [5:15] example back down. The new function is text to contours. Text to points still exists in p52. It just does something a little different. I'll put information in the video description. Returns an array of arrays of points outlining a string of text written using the font. Each point in the contour array has three properties. X, a Y, that's its location, and its orientation. Alpha, it's path angle. That's interesting. We're going to have to come to that. — The alpha property is actually going to be called angle in 2. 0, and I'll be showing how that works later in this video. The fourth parameter options is also optional, but we can do a sample factor and a simplify threshold. Okay ### sampleFactor and simplifyThreshold [6:00] let's explore this for now. Let's keep everything in setup. I'm just going to give it a 0 0. Oh, no font data available for Grenzigot. So this particular font for some reason doesn't have any data available for it. Let's try downloading this font. Google fonts are served in a format called WAFT 2 which p5 doesn't support out of the box for text to contours. That's why I'm downloading the font in a different format that p5 does support. Now there is a waft 2 add-on for p5 that you can use. And this might actually also change in the future in p5. I'll include more information in the video description. So, I think that if you want to do text to contours, you need to use a nonvariable weight version of the font. Let me just use regular for right now. So, I'm going to upload the regular version of the font. And then instead of loading this URL, let's load the font. Aha, I have an array of arrays. So, inside this is all of the points. I think these must be all the points for this C and then the H and then the O. So now I can iterate over all of the points. Let's call this all points and get each array of individual points for each letter. And now I should have each point here. And let's just see what happens now if I do point draw a point at the X and the Y. Look, they're all up here. So, I said 0 for where I want the text to be. Let's actually put it at 200 200. And let's not draw the text here. Do you see? Does that say Does this say choo choo? Getting closer. Let's make it bigger. Ah, I'm starting to see it now. Now, let's look at what we've missed in the call to text to contours. This fourth parameter options has two properties, sample factor and simplify threshold. So, I can make an object with those two properties and I can pass them in as the last argument to the text to contours function. But it gave me an error. Collinear is not defined. Did we find a bug in p5 2. 0 that exists at the time of this recording? — Yes, we did. And it's since been fixed. — Let's get rid of the simplify threshold. Okay. Ah, look at that. Sample factor one. Now, I don't know what the number one means. Let's go look that up. Is the ratio of the text path length to the number of samples. It defaults to 0. 1. ### sampleFactor Explained [9:00] Higher values produce more points along the path. There's an inconsistency in how the reference is written here. See if you can spot it. It trips me up as I try to give you my explanation and I'll reveal the correct way to think about it after I'm done. Let's say I have the letter H or let's do I cuz it's a simple letter. So we have the concepts of sample factor and simplify threshold. sample factor. Let's just say we have between 0. 1 and 1. 0. And let's just look at just this segment. So if we have the sample factor set to one, it's going to give me points like every single point essentially all the way along. If we have the sample factor of 0. 1, it's going to give me the points uh 10% of the way. So in other words, I believe if we're going from here to here, we're essentially going 0 1 2 3 4 5 6 7 8 9 10. I think that was 11. But it's doing that for the entire letter form. So it's not like I'm getting more points along the top because it's a shorter segment. It's for the entire letter form. It's like how frequently are we sampling? Are we sampling every 10% or is it inverted? In my mind, it's inverted. — Remember when I read the reference, it said that sample factor is the ratio of the path length to the number of samples. Well, now you see that that's actually incorrect. It's inverted and I've already filed a GitHub issue and that's being corrected with new language. I also don't think it's exactly right to talk about it as a percentage of points. There's a really easy way to think about the math. The number of sampled points is approximately equal to the path length times sample factor. So if you have a path length of 100 and a sample factor of 0. 1 about 10 points sample factor of 02 about 20 points I'll include this p5 sketch in the video description so you can play around with the math itself. So in fact if we put this back in draw and make font a global variable. All I've done is put everything back into draw. I've made sample factor a variable which actually could just be mouse x divided by the width to go from 0 to one. And now we can see uh as I move my mouse up I get more and more points. And I guess once we're getting even to like you know 04 so this is where map comes in handy. Mouse X to go between zero and width to between like zero and maybe point 4. I can now slowly see it. See what that looks like. Let's try simplify threshold again. Not sure why that didn't work. Removes collinear points if it's set to a number other than zero. ### simplifyThreshold Explained [12:00] The value represents the threshold angle to use. Oh. Oh, it's just that bug again. Check the video description for an example with simplify threshold that does work. So, I'm not sure why I can't get simplify threshold to work, but just to think about what it would do is imagine if I had this I and I have all of these points. What does it mean for a point to be co-inear? Well, we need more than two points. Now, any two points are collinear. That's the definition of a line. But these three points here are collinear. If I was drawing some kind of path, my own path, I don't really need that one in the center because I could just connect those two points and it's the same as having one in the center. So simplify threshold removes extra points that are collinear along the path according to some threshold angle. So even if my points were like this, maybe this angle, the change in the angle here is so small or so big that this point could be considered collinear. Well, it's not actually colinear, but it could be considered a point to remove to simplify the path. I think that's beyond what I need to worry about or do in any demonstrations I'm doing right now, but that's what simplify threshold could do for you. So, let's see if we can fix this sketch from my coding challenge 59 to work with p52. First, we'll take the font and load it with async. Okay, I don't know what's going on there. Then, we're going to change font text to points to the new text to contours. And we don't give it the size of the font here. Instead, we have to make sure we specify the font and the size. Why is this still not working? Aha. The points previously came back as one big ### Updating Challenge 59 to p5.js 2.0 [14:00] array, but now you get them as individual letters. So, we'll add a nested loop. Oh, whoops. J is wrong. So with all of that new knowledge, I can update the coding challenge I showed you earlier to p52, add loading the font with async and await and then use the new text to contours function instead of the old text to points one. Let's look at one more thing about text to contours. I'm going to go back to a fixed sample factor and make the all points array global. So I see choo there on all of the points. For every point I don't just have the x and the y. I also have an angle. What can I do with that angle or alpha which ### Angle Property of Contours [15:00] um I'm not sure why there's two properties here. Let's just use the property called angle. So first of all I could note that I can also say begin shape end shape and change point to vertex change stroke weight to one. And you can see now I'm actually starting to draw the letter forms themselves by connecting those dots. Of course it's a little bit off in my sample factor but just in terms of the possibilities of what you might want to do that's an important point. But I'm more curious about this angle. So for example, what if I were to draw a rectangle for each one of these points? And let's do a single character. Let's just do the O, capital O, and let's make it much bigger. Let's change the sample factor down to a little bit smaller. Now I'm going to try to draw a thin rectangle for each one of these points. You might be wondering why are there two arrays for the single letter O? Well, this can happen with text to contours if the design of a single letter has two separate contours, which it does with this letter O. I have a thin vertical rectangle for every single one of those points. What if I were to try to rotate that rectangle by whatever angle property I've got for each point? So, if I'm going to rotate those rectangles, I need to also use translate and push and pop. See my videos all about transformations in p5. Same result. Let's try adding the rotate method. Well, this is interesting. This is not exactly what I expected, but it's doing the right thing. I drew my rectangles vertically and I want to see them rotated by the angle of the contour of ### textModel() for 3D Text [17:00] the letter form. So I need to draw them horizontally so that they rotate with the right orientation. Look at that. Text to contours doesn't just offer you the individual points for every letter form. It actually gives you the angle along the path there. There's so much you could do with that. So that's text weight and that's text to contours. What about text to model? Let's try that one. So, I've simplified this sketch back to just drawing the text. Choo choo. And text to model requires us to use the 3D renderer, WebGL. All right. So, the text is now in the wrong place because in WebGL 00 is the center of the canvas. And just out of curiosity, let's add the orbit control so I can move around this 3D space with the mouse. So there we can see the text has been rendered in 3D in a flat plane. Let's try to change it to a model. I'll call it uh text geome for text geometry. Text geome equals font. ext2 model. The text I want choo choo. The x and y position let's just give it 0 0. The width I don't know what that's going to do. Let's just give it something. And let's now see instead of drawing the text, I'm now going to draw the model text. Okay. Ah, there it is. So, I guess 100 kept it wrapped. Like if I give it 600, right? It's fitting it. It's fitting it into some sort of box. So, this doesn't look that different. Uh, if I put a fill, does it color it in? Yes. Okay. So, it created the model based off of all the properties that I'm putting beforehand. But it's not that different ### Extrude Option [19:00] than just drawing it onto a flat plane. However, it really is because there's all sorts of 3D functionality that you could apply to it if it's a model. And we can now look at the properties, the options that we could add here. one of which is called extrude for extrusion. And let's just try giving it that. Now you can see, look, it's thick. Let's give that a 50. And maybe let's fill it with an alpha and give it a stroke. Oh, that's super fun. Okay. Well, now you could go so much further with this just by having access to the 3D model made out of your text. And then I should also point out there's one the other property here. You can also add in sample factor. So if I made that one, we can see the level of detail now in terms of the letter form is much higher than if I were to make this 0. 1 which I guess was the default. That's looks like what I had before. But if I went like 0. 03, 03. We can see the geometry has become much more uh primitive here. Okay. So, you've learned ### Goodbye! [20:11] how to load a font from Google Fonts, adjust its variable weight with text weight, sample the points along the outline, the contours, the paths of the letter forms with text contours, as well as turn your text into a 3D model. So, I hope that you will take all of these options and make something creative with it. And if you do, please share it with me on the coding train website in the passenger showcase link in the description.