# new p5.js 2 functions: textWeight, textContours, textModel

## Метаданные

- **Канал:** The Coding Train
- **YouTube:** https://www.youtube.com/watch?v=_bCx__Kczp4
- **Источник:** https://ekstraktznaniy.ru/video/20663

## Транскрипт

### Segment 1 (00:00 - 05:00) []

Heat. All right, check one, two. This is just a quick audio check. I'll be getting started in a few minutes. Uh there is a poll up in the chat if you haven't seen it. I mean, I'm uh notoriously known for not following what the poll votes for, but I'm curious just what people's interest is. Uh today, um I can't seem to find the poll, but um I'll take a look at it myself. Anyway, let me know if the audio is fine. I'll be honest. Heat. N.

### Segment 2 (05:00 - 10:00) [5:00]

Hi everybody. Here we are again on the coding train on a Monday, which I do sort of feel like might be I don't know whether it's the literal worst choice of a day, but one of the worst days I could probably pick to live stream in terms of um audience. Um I see folks are in the chat chatting up with suggestions. Let's bring up this comment from um Stig. Uh Stig, thanks for always being here. You I' I feel like I've seen you every Monday for the last few weeks, which is so lovely. Have to see you someday in person again uh in Copenhagen. Um but maybe a session about using P5 serial with Arduinos. Yes. So, this is something I very much would like to do at some point in the future. unrealistic that I would get to it this fall semester, but you know, if the universe of people who watch the coding train can help keep me accountable here, this is something you should bug me about for 2026. Um there's a longer story to this, but um I am hoping to be moving to a new recording studio where doing some tabletop stuff uh might be more uh might work better and would be and also like a room that I have like much more like regular access to where I could start to do I want to do physical stuff. That's like my plan, but I've got to get to my next location. the you know uh if anyone's really interested in this I currently live stream from uh a garage in upstate New York and I've been sort of moving back and forth between living in the city and living upstate and I'm kind of in an in between phase but uh in 2026 I should be full-time in the city with hopefully a little a small little basement room. It won't be as big as the space that I'm in now, but I think it might be better. We'll see. Stay tuned. I this is there's a lot of roadblocks to this happening. Um Derek says already used your video on async. That is lovely. Fiora says I'm working here. I feel so loud. There's nobody around for m miles. I mean not literal miles but nobody nearby but I feel like I'm shouting and I don't know disturbing somebody. Um okay. Uh, so first of all, hello. My name is Dan Schiffman. This is the coding train. It is a YouTube channel that once was very popular. Oh, those were the good old days, 2018, 2019. I spent way too much like looking at my YouTube analytics and like sulking because like it's just nowhere near what it once was. But maybe it will come back. We'll see. It's fine. Is I'm fine. Everything's fine. Um, but I I'm trying to just get the engines running here on the coding train. And I, you know, I had some false starts. I've had some difficulties, but things are going pretty well. So, um, this is a channel where I have a very large back catalog of videos. If you're totally new here, um why don't I just introduce you to since this was asked in a couple recent comments, why don't I introduce you to the coding train universe which you can find here on the codingrain. com if you want to uh get started. I highly recommend this get started button which will take you to uh my uh beginner course in processing my playlist of videos with P5. These are for total beginners. Um there's some other stuff on here. Um, but that's what this channel is. So, um, uh, Vincent, uh, if you wanna if anybody wants to pop into the Discord, I'm happy to chat more about my move, but I don't want to lose too much time today. Uh, but the coding train discord, I'll just mention, uh, is a server that I am spending a lot more time in these days trying to at least check in once a day to answer some questions, chat with folks. So, come on in. The water is warm, although it's getting cold. Oh, the fall. The fall in New York City, especially in like the Hudson Valley, is just beautiful. But also, I find this a very hard time of year. The days are getting shorter. In a month, we're going to roll those clocks back an hour and it's just dark at 4:00 and cold and I just wait and wait for the next summer. But anyway, um, so let me start with a few plugs here because I as I've been a little bit more active, I get the question, oh, I would like to support the coding train. How can I do that? First of all, you don't need to. I have a lot of support in my life. I have been working for 20 years and I have a full uh at NYU. I have a full-time teaching job there. That job really supports me and allows me to do this work. In fact, take this Monday every

### Segment 3 (10:00 - 15:00) [10:00]

week to uh be with all of you here. So, not required. That said, um there are ways that you can also support the coding train if you're interested and able. Uh one would be the nature of code book. Um I mentioned this before. I don't mean like let me talk about how my views are down, my sales are down. No, the sales of the book have actually been terrific. But um that's you know slowed down and um you know most people are not finding it through the website but if you are in the US uh and are interested in the nature of code book um you can get it here. I will say this I think will likely be the one of the focuses if not the focus of this coming spring. So when we get to 2026 or I mean spring semester which really starts in January uh January for me or early February um I'll be teaching the nature of code class at NYU and I think I have videos that go um that go along with most of the book. So for example if I'm in the forces chapter and I was like oh look there's this section there's this video that goes with it. I can scroll around and read the book. Uh, let's find the next section I think at some point. I'm scrolling. I'm scrolling. You are not watching a glitch. That's me just saying I'm scrolling. I'm really Oh, look at this. Uh, we get to air and fluid resistance. And there's a video. So, um, but I would say probably there's only videos for about 50% of the content of the book. And so, why not? I would like to continue with that. So, that's maybe a focus for this spring. Um, some extra uh questions here. Uh, off topic, do you have any videos on contributing to the p5s web editor? I do not, but you should contribute to the p5s web editor. And I would say head over to the p5 js uh github, p5s discord. Um, there's lots of places where you can uh say hello and get involved. I see Deep is here in the chat and Kathy, we got some moderators here today, which is wonderful. Things are looking up and I I remember I have my like new favorite sound effect. I mean, this is how immature can I be? I am uh by the way, if anybody's wondering, I am 52 years old and still doing this somehow. Although, you know, I will say it's kind of interesting like I did not start the coding train until I was basically 40. Like, what was I doing my whole life? I had a whole life before I did this. I don't know. Is this winding down? Is this ramping up? I'm not really sure, but I'm uh I'm doing it. Oh, and Math Blank is in the chat. Everyone should say uh a hello to Mathlank because and a thank you uh because especially some of the videos that will be coming out like if anybody tuned into my Basian text classification live stream uh and then as you will see maybe later this week there will be a edited version of the live stream which might be somewhat watchable and the only reason it's even vaguely close to watchable is because the work that Matia does. Okay, what else do I want? So, I wanted to plug the coding trade. The other thing you can do is um I uh all of my videos and sometimes early access and exclusives are on um uh Nebula. So, Nebula, if you're not familiar with Nebula is a uh creator owned and operated um collective, if you will, uh um of uh streaming service. So, you know, just like Netflix or name your other I don't did I just plug somebody else's corporate entity by accident? I just did. But um uh anyway, Nebula is a place uh where all of my videos also appear and they're fully adree. There is also no um massive algorithm and uh you know it's a little harder to find. Look, I love YouTube. Far be it from me. YouTube has given me so much in my life and it's an incredible place. The world of online video is a tricky somewhat sometimes uncomfortable place to navigate. I don't know if any of you have tried rhymes with Bora. And I don't know, are we all going to have to just stop in like 45 minutes? Isn't like isn't it uh rhymes with phobin AI? This is really not working. my rhymes with to like refuse to plug other corporate entities. But um I think it's uh their dev day today and there's a big stream happening. I don't know. I guess I could like I could pivot and be like a commentary like I could be like oh I'm going to watch other tech streams and comment on them or something like that. But that's not what I do. Anyway, if you want um to watch the videos ad free to be on a place a curated place of uh a creator curated uh platform um you know I'm trying not to talk about

### Segment 4 (15:00 - 20:00) [15:00]

like AI generated video and all of my various complex feelings about it you know that run a giant range of excitement and awe to like horror horrific horror. Horror is the word. Abject horror. So, um, but Nebula is a place. Okay, that's enough. Check. Okay, let's take a minute for me to let you know what's been recently on the coding train in case you haven't been paying close attention and want to catch up on some of the videos. I don't know, right now if you don't feel like watching me live or later today. I'm going to go to the channel. I'm going to click on uh videos. I'm not signed into YouTube here. So, just want to let you know. So, one of the things that I'm doing is I am and this might be a topic for today. I'm sort of still undecided. I am covering new features of P52. Um async and await is covered in this video. Um so, check that out. Um uh I also made a second video that just goes through some additional scenarios relating to loading data. Um and um so you know if it's confusing which it is but while I'm here while I have you as a somewhat captive audience you're not at all you're nowhere near captive. These videos a this one down here and the one up to the right they have redundant content in them. Um the one down here is meant for you've been already using P51 maybe for six months maybe for a year maybe for 10 years and you want to understand how the new way of loading in P52 works. This video walks through that transition. The other video on the top right just explains how loading data works without all of the baggage of p51. So it just starts right fresh. This is how you load data. So if you I made these both because I feel like people use my videos in different curriculum and uh depending on who your students are and what the context is, you might want one or the other. That said, uh if you only watch this one, what you would want to do is go to the second one and uh — we're going to have to watch an ad. I forget that there's ads on the videos because I have YouTube Premium and I never see them. But um — we're going to skip it — and I'm going to look here — and uh where's the time codes? JSON file. — Um, you can go to — basically here somewhere around here. I don't, now I'm confused, but um, somewhere around here, the middle of the video, somewhere around video are examples that are a little bit more sophisticated and go beyond what's in this video. Okay, by the way, I just can't. No matter what I do, no matter how I try to time it, the lawnmowing happens during my live streams. The good news is it's happening right now, which means it's going to be done in the hopefully the next 10 or 15 minutes. The loud part right around my little my garage here. So, um, that's okay. And I know you can't hear it, but it really does bother me. So, just bear with me. All right. So, the other video that's on the channel is this what's next video. And I didn't mean to I don't know what I just did here, I guess. Oh, okay. Um, let's go here because this is going to be a nice segue into today. Um, so let's see. Can I get to the end? There we go. This is where I want to be. Let's go here. Uh, there we go. Pause. Okay, let's look at this. So, this is um something from one of my recent live streams where I talked through what my plans are for the fall. And really, I should be bringing it up over here, but I screwed up and I like created this whiteboard um map in a while not logged into my Vibe board system. So, I can't like get it back now. So I just have to look at it this way. So I thought that today So I one plan for today that I was thinking of doing is one from each of these categories. So maybe I'll look at uh fonts, the new font features in P52. Maybe I'll just try to like really quickly make a like what is an array video for be beginner P5 like just to kind of like see how these go. And when I say make a video in CA this is the other thing that you might not be aware of um the the

### Segment 5 (20:00 - 25:00) [20:00]

workflow that I'm trying right now which I've always done but never been as sort of committed to is recording if you will the um seg taking segments from these live streams and sectioning them out as separate videos that get uploaded. So, and that's um everything that you've seen, you know, that p5 async and await those videos, the planning video, the what's next on the coding train videos, those are just edited segments from live streams. So, when I say I'm going to record a video today, that means like with you right here live, I'm going to go into talking about variable fonts and then that will be edited and uploaded separately. Although I would really like to today try to dial back the and now uh the sort of per not that I don't want to be energetic and enthusiastic but if I can just keep the live streaming vibe a little bit more and let the editing do its work later rather than as you know trying to like oh let me say this perfectly that kind of thing. I need to get there. Okay. Um, these are all great suggestions in the chat for different topics. Okay, so that's what I'm thinking. Now I'm looking at the poll in amazing. So earlier today, so now I'm trying to think of what to do uh with the So I'm trying to I guess it's I should probably just get started. I I have um I'm frozen. I'm like decision frozen. I can't even talk anymore. Um I really have to I really just I what I really should do is make a schedule of and which topics I'm doing, which days, and just commit to that because what happens is I really just walk in here and I turn my equipment on, I start streaming. I made like a couple notes, but they were just like mention nature of code, mention the previous videos, talk about what I'm going to do today. So now I feel like stuck like what am I doing? I made this poll in the chat. Earlier it was like the conversational chatbot was like way to the top. Now people are kind of interested in the ML vision topic it looks like. Um, but maybe as a warm-up I've got until about 1:00, which is like an hour and 40 minutes from now. And I probably will trail over a little bit later. Maybe as a warm-up I should do a investigate P52. Uh, I want to make my own P5 Jarvis. Yes, this is what I was going to look at. Um, this is sort of a plan that I have. um a possible a possibility for today. Um okay, what do you all think? What just tell me your thoughts more? Yeah. So, yeah, I uh you know these uh I really want to do more uh retro coding. I have a um Commodore 64 sitting over there in a box. Uh right now I'm kind of committed to this stuff. I feel like before I can I don't know why, but I mean I know why kind of All right, I'm just gonna I'm gonna pause and take a look at the uh chat. Um where there's really not so much going on right now. Let's put on some music to Oh, I should read some random numbers. So, while you're thinking, yeah, I think I should do this conversational chatbot coding challenge. I feel like I need to get it out of my system. Um So, what I'm looking for right now, I mean, you I feedback and comments in the chat are fantastic always. Um, but um, oh, I guess I should leave myself here for right now. But unlike at this point, I'm not going to schedule topics to help navigate which days to tune in, says Stig. See, that is like what's wrong with me that I'm not thinking of this? That is like this so obvious. And yet, what's I Yeah. Uh, I'm confused by this comment. Honestly, prefer watching the behind the scenes of making the videos because they stay more on topic. That seems very counterintuitive to me. I feel like the behind the scenes is

### Segment 6 (25:00 - 30:00) [25:00]

where I get way off topic. The edited videos, they're edited and they're forcing me on topic. Okay, let's read a couple random numbers. I think I'm going to do the conversational chatbot. That's what I'm feeling right I don't know. Maybe the numbers will somehow tell me. Thought I had some like quiet music that I play with the numbers, but I seem to have 31182. I have all these like weird sound effects. 22363 92922 662721512469312. Okay. Video planning tool. That's what I should build. Yeah. All right. Um, let's do let me do what I'm gonna do my original plan. Okay. So, all right. Is the chatbot not just the GPT wrapper? No. So, this is the whole thing. What I was going what I'm I could just show you what I'm going to build. I already made it as example for my class. Let's take a look at it. Uh, but All right, let's run this. See if it works. I think I don't have a console log that says everything's loaded. Okay. Uh, unfortunately the audio Oh, you know what? A reason not to do this is I don't have the audio going to the live stream. It's got to just come in through my mic. So let's see how well this works. What is the coding train? Oh, allow. Okay, hold on. Why did that fail? Okay. Oops. — The coding train is a popular high-speed and reliable transportation system for coding and software development. It's a network of computers and servers that connect developers, software engineers, and IT professionals to access, share, and collaborate on code, software, and other digital projects. The coding train is a self-service platform that provides a suite of tools, services, and resources to help developers, teams, and organizations build, develop, and deploy. — That was awkward sound there. Oh, I'm pretty sure it's a YouTube channel. — The coding train is more accurately described as a YouTube channel. Specifically, a YouTube channel that focuses on coding, software development, and technology. It's a platform for sharing, learning, and showcasing coding projects, tutorials, and expertise. The coding train is not a traditional physical train, but rather a digital platform that provides a unique and user-friendly experience for developers, coders, and tech enthusiasts. It's a place to share knowledge. So the thing that I should mention about this is that um the reason one of the reasons why this example is so interesting to me is that it is happening entirely in the browser. So there is no um the listening to your microphone, the transcribing what you're saying, the generating the response through a language model and then using a voice model to uh play back that response. All of that is happening with local models running in the browser itself with web GPU and transformers. js. So um that yeah and these are uh soulkiller asks is this an onyx model. So this was I think there's a there's several components to this project which are um interesting learning how to do speechtoext text to speech and learning how to work with an LLM to generate and process the input to generate an output. Um, so that's kind of that's what I'm sort of leaning towards doing today because it's what I'm covering in my class. Um

### Segment 7 (30:00 - 35:00) [30:00]

so I think I might just go ahead and make this as a coding challenge. What do you all think? As the poll moves in a different direction, I'm gonna end this poll. The other thing that I would was thinking of looking at is uh um there are uh if I go to um let me look at the ML5 project um I think it would be here. Um, there are some new models. Did this get merged or is it not here? I'm confused. Uh, no. Oh, well, that's the blog. I'm confused where this lives. Is it in here? Oh, I'm in the wrong. That's why I'm in the wrong I meant to be here. Yeah. Um there is uh later this week and certainly by the time this video gets out the um depth estimation model. Let's look at this. Um let's allow this is a model that is doing uh depth estimation and um I could show and talk about this particular model um and some of its interesting examples um like uh how to use it to I should redo the poll now. how to um make a point cloud uh with a um in 3D. This is something that I could look at and this is also a nice segue to looking at how this compares to Transformers. js. So, um and then Rod is asking about the Oregon Trail. I guess I kind of gave that up which is a little bit sad. Um, yeah. So, Stig, um, Stig, this is actually a really good point. I know I'm just always pulling up all of Stig's com comments. A better approach would be to purposely make a chatbot that is providing purposely incorrect answers. Yeah. So the thing that gives me the most pause here and that I'm trying to figure out is I am covering topics in machine learning and AI um for two for you know two primary with a with two primary uh sort of core uh with two primary core principles in my mind. One is I would like to offer material that demystifies the technology and helps people understand how it works. Not at not and so uh and the other component of that is what can and in order to understand machine learning and AI to understand how it works and to think critically about it. What does it mean to use it as a creative material for making art, for making satire, for making um social commentary? Uh that's what I'm trying to encourage. Um and so saying something about that I feel like is important. It's also like it's just a lot to sort of think about and um cover effectively part of the channel. Okay. Um, so now that I've shown you I don't know why I mean this is first of all you're all the truest of the true fans of the coding train if you're watching this right now because you're with me on a Monday at like 11:30 a. m. Eastern um just like uh going along with me just rambling and talking through my angst. But um let's go here to the And thank you for there was a super chat I just missed. Uh, and I think it said do what you want, which I think is great. Um, so I'm going to put one more poll because I'm just curious. And I'm going to uh Oh, this is the keyboard I need. Uh, I'm going to say uh chatbot depth estimation. I mean, the thing is I would like to do an entire stream. Why I don't want to do the depth estimation today, but it could be random number text to speech. Yeah, I was going to So, one thing do is actually do a number a guessing game because I was actually going to use RIScript. I was going to make the chatbot actually have nothing to do with like a language model, but fold that in later. Um, but

### Segment 8 (35:00 - 40:00) [35:00]

um it's kind of uh so I don't know why I'm doing another poll. I'm just like I'm desperately curious. So, I put one more poll. If I were to cover an ML model, would you rather see the speech to text, text to speech stuff or the depth estimation stuff today? Um, yeah, and Rod is asking about um replicating your voice. This is something that I have done and there are models that do this. Uh, even local open source models that can do like a oneshot voice clone meaning you know with a single example. um if you uh 11 Labs which is a commercial product a cloud-based service um is excellent for voice cloning if you wanted to explore that. Okay. Uh okay. So I have to uh end this me just trying to figure out what I'm going to do. I'm gonna let this poll run. I think maybe I like um I'm going to let this poll run for a minute and I'm going to just get the whiteboard going for a second here. Uh make sure this is working. New canvas. Infinite canvas. I've got the one with the button on it again. I put a new uh tip on it. Like checking my hair. How do I look? I'm wearing shorts today. Okay. Well, okay. Uh, let's just make sure this is working. And it is. And I press this button and it turns Nope. into an eraser. And the other thing that I realized there's like a full screen thing that I wasn't using. Let me just name this. I think I'll just name it for the date. Uh, what's today's date? It is October 6. What? What the October six? Great. Okay. Oh, it's close. The chatbot is currently winning. Um. All right. Okay. How is the focus on the whiteboard? I think it's fine, I guess. Um, okay. Let's close out some stuff. All right. I think I should continue my P52. So, while we're thinking about that, let's give myself Wow, time flies when you're having fun. Oh, I'm in the wrong place. I know Okay. Um, let's log in as the coding train. Let's switch to P52. Let's do another in my series of um what am I looking for? Oh yeah, two Okay. Um, let's go here. And oh, I also wanted to look at Oh, you know what I wanted to mention? There's another thing I want to mention here while we're here. So, this part the these um uh this video included a demonstration of how to load from this particular API. So uh I just want to mention this here um also so this um this particular API just gives me a URL to it's hosting a whole bunch of you know open source dog images. So if I were to take this URL I would then see a photo this particular photo and uh when I made the video this worked to then get the message from the API into the image and draw the image. Let's see what's happening today. Yeah. So, now it doesn't work because I'm

### Segment 9 (40:00 - 45:00) [40:00]

getting blocked by corores, which stands for cross origin resource sharing. So, I don't know if it was me who caused this, but this API is no longer serving up the images of the dogs with um a cores enabled, meaning you need to like access the images from like server side code. So, I um in uh I thought this might just be a coincidence or an in innocent sort of change or an accidental change. Um, so I went to the dog CEO API GitHub. I'm just checking it now and I filed this issue, but I have not received a response yet. So, it's really unfortunate, but if you do are watching those videos and looking at those examples and wondering why they're not working, um, this is the reason why. Hopefully, I can, uh, figure it out. Okay. Uh, wow, webdev story, you've been here a long time. What happened to the big button to change camera? You know what happened to it? Uh, I now have a stream deck. Okay. My New Year's resolution, it's not New Year's, is to schedule the topics in advance and then label the streams with the Would it be better? It's probably better for me to schedule the streams with the topic in advance and then just change the time last minute if I need to, like by a half an hour or an hour, than just I haven't been scheduling them in advance because I like I don't know what time of day I'm going to be able to do it. Um, so yeah. Uh, yeah. So, I should put this stuff in the I should put a um I should put this in the code examples. Let me put this in here. Uh what are the other um I think this is also one. Oh no, that's what I just did. And then if I go to this video um all of these three use the Okay, I'm just putting this. This one's fine. Yeah, I think it's just two. I get it. It's two examples are broken. Okay. All right. Um, let me just I'm gonna I don't know if you could all hear that. I'm going to shut off my Discord, but first let me just make sure that's not like a critical message. Okay, let me close this and let me um quit Discord here. I'll leave it here and I'm just kind of turning off the audio. Okay. Um, wow. The poll really just like landed on like 5050 with a little bit. Okay. You know what? You know what my plan? My original plan was three segments. That's what I'm going to do. Segment one, fonts in p52. Segment two, just to get back into it, I'm going to do a quick like 10-minute total beginner tutorial uh to like see how that goes. Swapping it into my playlist. segment three looking at a new feature of ML5 and talking about how that uh is going how that can be expanded by working with transformers. js. That was my original plan. Uh okay. So I'm going to end this poll here because it's sort of irrelevant right now. So I think this was really good. Like this was a good discussion to have. I have really made a great improvement in that I'm actually here every Monday live streaming. So that's great. Like big thumbs up for that. The next thing that I really need to do is just schedule the topics in advance because it's fine to have this like bit of chitchat at the beginning of the live stream and like let me show you a couple things from the last video. Let me answer a question here and there. Um, but I just spent 45 minutes um agonizing over what topic I'm going to do, which isn't useful. So, that is something that's going to uh have to change. Okay.

### Segment 10 (45:00 - 50:00) [45:00]

Um, now the other thing that I'm really going to try to do for today is um I'm sorry, I'm looking at my notifications. is be a little less like worried about the edit later. Okay. Oh, while we're here, I guess I'll try to come back to this at the end, but since I have you all glued with attention clearly, um there will be no live stream next Monday because it is a holiday and I have family things happening that day, but I think I'm going to be able to do it on Tuesday. So, I will not be missing next week, but it will be next Tuesday. So, put that in your mental calendar um if you like. And then, uh we'll see. Two weeks from now, I actually have a conflict on the Monday. So, I I'm going to miss one of one week in the next couple weeks. But, um yeah. Um okay. Uh make sure this camera is working here. Gonna have a little sip of something. Where did I Where is the Discord? Oh, this is the Okay, I have to quit Discord, I think. Or how do I mute Discord sound effects? Definen, will that work? Yeah, somebody notify me in Discord right now. Let's see if I don't get the get it doesn't play a sound. Oh, but you know what? This has the echo reduction on, so that's fine. Actually, it's fine. I'll just leave it. It's fine. Uh, okay. I think I don't know. Let's try this. Okay. Sorry, everybody. All right. So, ah, okay. Let me go back to here and let me go to here. Uh, okay. This is uh I'm looking for Here we go. Okay, great. And now reference. Yeah. Okay. Um, I don't know that I'm going to need the whiteboard. I'm going to try to just spend spend about um just say 20 minutes. Let's see. Okay. Hi everyone. Um, see, see this is the thing like I guess I am still going to take a deep breath and start as if I am recording a new and I know it's going to be a separate video that's going to get uploaded. See, the way I imagined kind of doing this was not doing that and then coming back and later recording different intros for things. I I I I I have to just not worry so much. I'm going to do it the way I'm doing it. Hi everybody. Welcome to another video where I am looking at new features of P5 2. 0. And today I'm going to look at new features related to text. So there are variable fonts, text to contours, text to model, text weight. All sorts of things are described on this forum post related to p52. And I've got a track on my website where the only thing that I've really covered so far is async and08. Now I want to look at stuff with text and fonts. So

### Segment 11 (50:00 - 55:00) [50:00]

let's start with text weight. The text weight function is used to specify the weight or thickness of the text. All right, let's make a simp simple sketch with some text in it. To draw text in a p5 js sketch, you just need the text you want to draw on a string and an x and y position. You've always been able to increase the size as well as specify a font. And maybe in a minute I can talk about where you can find the list of fonts and get other fonts to try. What's new? Oh, I'm in P51. The whole point of this video. So, let's keep this in p51 for right now. I think before in p51, you could say, was it like text style? Yeah, look, I made the text bold itallic. That's exciting. Let's update the sketch to P52. I guess still works. But now we have a function called text weight that I can give it a specific thickness value in pixels. Set font weight to 400. Ah, it is working. Let's create a value where I take the mouse X position between zero and width and map that to a font weight from let's try like something very small like 100 to 1200. Now why is it not being variable? Is this font does it not support? Ah, I see. It has to be a variable font. Only variable fonts can have variable weights. This is why. So I mean this is the whole this is the central quandry of the coding train right now. Is this I mean this is what the live stream is for sure. What should the edited video be? be I mean if

### Segment 12 (55:00 - 60:00) [55:00]

it's a the thing is when it's a coding challenge I feel much more clear like this is me struggling through but I feel this responsibility. I'm making a tutorial. I should know how it works before I make the tutorial. So let me start this over. So we have to get a font. So, I think this needs So, I'm working this out here. Um, uh, so I need to find a font that, uh, supports variable font weights. Um, and so, um, if we go here, got it. Uh, this sort of like explains what I'm trying to do here. Um, I have to get it. I see. Yeah, great point to show. Okay. So, let me figure let So, let me back up and I'm just kind of in the figuring it out point. So, let's see. So, if I were to get a font, let's say I pick, okay, I'll come back to this in a second. Let's say I was like, oh, I like Robboato. Let's pick that. And now, if I want to get the font, if I get the embed code here. Ah, it's actually giving it to me already with the um with what do I need the display equals swap? What does that do? Um, you can filter out variable fonts. Okay, hold on. So, how do I do that? feeling. How do I Where's the filter for that? technology variable. Okay, got it. Halloween. There we go. Okay. All right. Okay. I think I've got it now. Technology. Okay. All right. Let's So, I'm working through something clearly. Let's um let's uh let's go back to this. Okay, I got it. Okay, got it. Exam. Oh, and so text style has changed. So it was text style I'm guessing in uh right it was text style. And now if I'm in the new reference, this text weight and text style. Oh, text style is still there. It's still there, but it doesn't affect fonts loaded with load font. Okay. I see. So this is just I just want to but I think I understand enough. Okay. Let's learn together are better than tutorials. Yeah, maybe I just need to rebrand what I'm doing and think of it more as like let's learn together. I mean, that's what the other thing is like I could just only do these live streams. Okay, that's what the coding challenge is. That's why I like the coding challenge format. That's let's build this together is really kind of how I'm doing it. I should do the chatbot thing. I should put this away and just do the chatbot thing. That's what I want to do. Let me do this though cuz this we're going to make this like what's wrong with having a five minute video that just explains that there's variable fonts in p5. Like why can't I just do that? Well, I don't need

### Segment 13 (60:00 - 65:00) [1:00:00]

a 30 minute video where I like give you the whole history of typography. Okay. All right. 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. Um, so here's an oldfashioned P51 sketch where I draw some text at an X and Y position with a given size. Now you can specify a font with for example the text font function and now I am seeing this in font Georgia. How do I get a list of all the fonts? uh fonts in browser? Window query local fonts. This is an AI overview though, which I'm highly skeptical of. Let's fact check. Yes, this looks right. This is failing miserably. All right. So any font that's installed as part of your system, you can reference just with the text font function. However, you can load fonts from other sources. For example, Google fonts is one option. So here I am. I could just pick the first one here. Robboto. Mr. Robboto to you. I can click get font. Get embed code. And here this is giving me the URL to load that font which I can actually put directly into a p5 function. Oh, shoot. I need to start this whole thing again. This is the problem. I had async in there by accident. We'll just fake taking that out. Um, see, why do I make things so hard? See if Okay, last time. No more after this. Okay. Ready? As I went down like let me get the list of fonts. Why did I do that? Okay. Very last dive. Actually, let me just come over to here. The whatever I said at the beginning was fine. So, I'm just going to come back to over here. Okay. Yeah, I'm gonna No, it's fine. I'm going to change the font. Yeah, I'll just I can change the font by calling text

### Segment 14 (65:00 - 70:00) [1:05:00]

and any font that is locally installed as part of my system I can use there. Uh and now you see Chuchu in Georgia or in Courier. Now if I want to go further than this, where do I find other fonts? I'm sure many of you will have great suggestions. Please put them in the comments. But fonts. google. com is probably a good starter place to find a wide selection of different fonts um that you can load into your p5. js sketch. So, for example, if I were to click on Robboto and then click uh get font, then click get embed code. I actually have the URL here for 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 would have then gone to the preload function and put load font in preload. But we're here in p52. If you watched my video about async and await in p52, you might know that I can load the font asynchronously. See, 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. Mr. Wheels, do you mind if that ends up in the final video? So, you used to have to do that in p51. And in fact, um, 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. And I think that's what 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. And this is nice for the sort of beginner creative coder who's just playing around here. Now, the feature I want to demonstrate is called uh variable fonts. So, when picking a font, one thing I'm going to want to do here is filter by under technology variable. And I don't know, it's October. Let's pick a spooky font like Genzish.

### Segment 15 (70:00 - 75:00) [1:10:00]

Why am I not seeing that font? What did I miss? Oh, it still says Robato. Well, I see. Hold on. Grenotes. So, I'm gonna copy this, paste it in here, and there we go. While we're here, a couple other things to note. I can change text align and make it center. Can center it horizontally and vertically. And then put it in the center. and one thing you might notice in the URL it has this property weight between 100 and 900. That means what I've loaded 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 I actually have a live stream with Kit Kenok who I forgot to mention that I also made a live stream. 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 make a variable called angle just started at zero. Um, I'm going to say the weight is the result of s 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. Now just to be sure about let's okay let's push it a little. Let's see what we can get. How big of a weight can we try? How small of a weight and how big of a weight can we attempt? Can I go from one to 5,000? So, this is not working because even though the value of d w is going between 1 and 5,000, I didn't load the font at that possible weight. Maybe you can't. I was just going to try between one and 5,000, not 50,000. Uh, failed to fetch. I guess the fonts have a limit. What did I do? 900. So 99. No. 100. Uhhuh. 901. No. Okay. Never mind about that. It

### Segment 16 (75:00 - 80:00) [1:15:00]

looks like the weight of the font is predetermined based off of that particular font. Maybe it's always just between 100 and 900 for all fonts. I don't know. You look around, poke around Google fonts and let me know. Okay, we'll leave that in. How about that? Okay. Many years ago, a much younger man made a video about steering behaviors. And it looks 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? How do we get the points? 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 example back down. The new function is text to contours returns an array of arrays of points outlining a string of text written using the font. Okay. Each point in the contour array has three properties. An X, a Y. That's its location and its orientation. Alpha, it's path angle. That's interesting. We're gonna have to come to that. The fourth parameter options is also optional, but we can do a sample factor and a simplify threshold. Okay, let's explore this. For now, let's keep everything in setup. Yeah. Okay. text. Okay. What were the arguments again? A string, an x and y, and an optional options. Okay, I'm just gonna give it a zero zero. And I need to make this smaller. This is too big for me to code with. Okay.

### Segment 17 (80:00 - 85:00) [1:20:00]

Oh, no font data available for Grenzotes. Why is there no? So this particular font for some reason doesn't have any data available for it. Let's go back to Robboto. Why? Oh, so these fonts that I'm getting from Google fonts don't actually have the contour data to them. Why not? What if I take all this stuff out? No. Try downloading a local copy of the font file. Yeah, I guess if they have a variable H. Well, this is a confusing point. All right. What if I were to I just download the font, let me get rid of all this for a second. Let's try downloading this font. I've got Oh, I downloaded both of them. It looks like that was weird. So I think that if you want to do text to contours, you need to use a nonvariable weight version of the font. So for example, I could pick just the bold version, for example, or 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.

### Segment 18 (85:00 - 90:00) [1:25:00]

So now I can iterate over all of the points. Let's call this all points and get each individual array and get each array of individual points for each letter. And now I should have each point here. And of course you could do this with a for of loop or a for each loop or some other kind of way of iterating over the uh array of points. But I'm going to do it with this nested loop. 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. 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. Okay. Now, let's look at what we're missing in the text to contours. Now, let's look at what we're Now, let's look at what we've missed in the call to text to contours. This fourth parameter object, 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? 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. Higher values produce more points along the path. I know what simplify threshold is supposed to do now. I just read it. Okay. Oh, this is really cool. Let's use the whiteboard. Yeah, I'm going. This is all going to stay in the video is me figuring this

### Segment 19 (90:00 - 95:00) [1:30:00]

out. That's where this is going. Okay. Oh, let's say I have the letter H or let's do I because it's a simple letter, capital I. So we have the concept of what was it? Sample factor. So we have the concepts of sample factor and simplify threshold. So sample factor let's just say we have between 0. 1 and 1. 0. zero. 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%. What's is it inverted? In my mind, it's inverted. Is 10% the right way to think about it? Well, I'm going to look at the chat here. Uh it says ratio of the text path length to the number of samples. Oh, I get it. So, let's say the length of this is 100. If we give it a sample factor of one, we're going to get 100 points. If we give it a sample factor at 0. 1, we're going to get 10 points. Uh we're getting 100% of the points, 10% of the points, 50% of the points. That if we get 50%, there's got to be many more points. If there's 100% we get all the points. 10% they're more spread out. That's the way to think about it. So in fact, if we put this back in draw, what did I miss here? And make font a global variable.

### Segment 20 (95:00 - 100:00) [1:35:00]

Oh, I'm in the wrong screen. Uh, don't worry. That all got recorded, just not for you all. So, I'll just talk you through it here. Uh, 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 uh the width to go from zero to one. And now we can see as I move my mouse up I get more and more points. And I guess once we're getting even to like, you know, point four. So this is where map comes in handy. Mouse X to go between zero and width to between like zero and maybe 0 4. I can now slowly see it. See what that looks like. It's almost 1:00 already. Okay. Um, now 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. The value represents the threshold angle to use. Oh. All right, I'll come back and All right. I don't know why this is not working but 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. Any two points are collinear. That's the definition of a line. But these three points here are collinear. So, if I wanted to simplify, if I was drawing some kind of path, I was drawing 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 collinear 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 um 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.

### Segment 21 (100:00 - 105:00) [1:40:00]

Ah, and um 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 array, but now you get them as individual letters. Oh, I know why. So, we'll add a nested loop. What am I missing here? all the points. Oh, whoops. J is wrong. Okay. Why better? Something with the steering behaviors is weird now. Okay, let's add no loop. All right, they all start at a random location. What if I actually put them at the point they're supposed to be? Oh, it's working. Something else in this sketch changed so that the steering behaviors don't work so well. Let's see. Max speed, max force arrive. What changed otherwise in P52? Target. Home. What's home used for? No. Home is actually irrelevant. Yeah. Oh, there's a flea behaviors. Yeah. Did I forget? No. But I've got this. Did something change about vectors? No.

### Segment 22 (105:00 - 110:00) [1:45:00]

Okay. They get an initial velocity. target this position. Okay. The flee function is not being used I assume, right? Okay. Let's just uh Where's my arrive example? This is my arrive example. We're going to figure this out. Change this to P52. This works the same. Let me just grab this function. Whoa. Oh, well. Okay, that's called pause. Oh, the same thing is happening. You know what? hold on a sec. Okay, we're gonna I got to figure this out more methodically. Forget about the text. Let vehicle equals a new vehicle at uh two, you know, 100 Yeah, it's not arriving properly. The arrive function is broken. So, let's look at all this code. Uh, let's just in update I'm just going to console log. Oh, wait. Why does it say arrive? Oh, arrive this. target. Okay. Oh, okay. Uh, console log x this. target y. Let's make sure this always working. Okay. So, the target is correct. And if I don't apply this force, doesn't look like maximum speed, maximum speed is not being applied. Did set mag change? I bet you set mag is broken. Okay, hold on. Uh yeah, let's just always have it. Oh, weird. Oh. Oh, no, no, no. That's the new one I pasted in. Oops. Okay.

### Segment 23 (110:00 - 115:00) [1:50:00]

Okay. Uh oh, it's getting not a number. Well, that's okay. why am I getting not a number just from subtracting target this position? Okay. Oh, hold on. Let's actually also let's start the vehicle at a specific spot. Help. No, I don't want to be in here. Okay. Uh, okay. All right. I'm sort of like we got to figure this out. So, I'm starting the vehicle. Hold on. We're going to also going to go to like frame rate one. We're going to uh make this 200 by 200. Okay. And we are starting the vehicle at 150 100 and the target is 100 100. Okay. So why oh I'm not okay. Let me apply the force now. Okay. No. Oh yeah. But why am I getting this is where we were getting not a number somehow? Right. 50 not a number. Why do I get not a number almost instantly? So, console log uh target. xtarget. y and console log this. p. x this. p. y. Okay, let's look at this. Okay, so somehow when it subtracted these vectors, it got a vector with a magnitude of not a number. Uh, okay. So now so this is right that's the vector that's the magnitude that's the vector that has a magnitude right I and calculate it. It's the square root Like that's the formula. That's the formula for the magnitude. Square the x's, square the y's, add them together, take the square root. My magnitude is correct. P5 is getting not a number. Why? Is there something going on with the Z? I'm not using the Z.

### Segment 24 (115:00 - 120:00) [1:55:00]

No. Okay. So the first values we both got the same magnitude. The Z's are all zeros. I don't know. Yeah, but this seems like some weird bug in P5. Yeah, we have to look at P5's implementation, I guess. But this is not uh we can briefly look to go to source uh math maybe p5 vector I mean this is correct. We go to mag squared. I mean yeah. Uh okay, hold on. Let's peer a little bit further. See if we get something there. not a number. So, mag squared, but this makes no sense. Am I not on 2. 0? Oh, you sure 2. 0 is I have to go to dev 2. 0. Ah, this changed. What the? This hurts me. underscore values. Ah, okay. Why did this Can I do I mean I don't really want to didn't really want to use my time here to figure this out but uh it's too late. Okay. Desired. Okay. I see. Let's look at that. Ah, I found the bug, people. There it is. We found a bug in p52, everybody. Okay, so values never got the Z the default ZV valueue of zero. So where does that supposed to happen? I don't want to um I don't really feel like finding this right now. Uh but I don't know in the subtract function is what I'm calling. Oh, p5 vector. ub.

### Segment 25 (120:00 - 125:00) [2:00:00]

Where's that function definition? Ah, static sub. If no target equals v1 copy target set v1 target subv2 return. Yes. Somehow the non-static sub I could fix this. Do we bother to fix this now? I don't think so. I think we report it and deal with it later. I could um I've lost the plot of whatever I was recording. See, this is what can't go into uh Oh, you think that Okay, it's exactly what Fred mentioned. You mean you think that it's actually my fault by not putting the zero here? Could this fix it? Oh, wait, wait. I'm in like would this actually fix it? Oh, that fixed it. Ah, but so that fixed it. So now I can have the arrive function back um and change these again. Uh, okay. Uh, so this is actually going to require some work on my part. Now I see it's working. Uh, this is going to require some work on my part. Yeah, there we go. with um why are they all Oh. Um, so I fixed it. Um, I don't know why I'm trying to find the right uh size. It was okay. yeah, I think something about somewhere the there's a um so if somebody wants to take it upon themselves to file an issue and um or and or a pull request obviously let me file the issue first and point out what this error is. I'm gonna like put it off to the side and keep going with what I was doing. Um, and I don't remember entirely where I was, but um I think I can get close enough by just saying like I'll just say so now I have updated my coding challenge code to um 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 a weight and then use the new text to contours function instead of the old text to points one. So that is the little segment that will go in the video. Um okay. So that's text weight and that's text to contours. What about text to model? Let's try that one.

### Segment 26 (125:00 - 130:00) [2:05:00]

converts text into a 3D model that can be rendered in WebGL mode. Oh, I realize I forgot actually. Hold on. 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 and all 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 um I'm not sure why there's two properties here, but 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 actually just do the word the let's do a single character. Let's just do the O capital O. And let's make it much bigger. And I think I'll use a simpler font right now. Oh, no. I'll just fine. I'll keep it. Let's change the sample factor down to a little bit smaller. Okay, now I'm going to try to draw a thin rectangle for each one of these points. Okay, 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?

### Segment 27 (130:00 - 135:00) [2:10:00]

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. Okay, 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 the letter form. So I need to draw them horizontally so they rotate with the right orientation. Let's that make that even more extreme. Okay, that was too much. 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. Um, fractal font fractal type face. I want to just let me find it on her website. Is it on her website? Oh, I'll just I was just thinking about this project, but that's fine. This is a perfectly good um This is a p5gs piece called fractal typeface where designer and artist bay who generated uh letter forms with fract like I don't have to say this designer and artist bay who designed this type face this visualization of letter forms with fractal trees growing out of the contours of each letter. We could speculate on exactly how she did this, but certainly you can see how knowing the angles along the contours of a letter would allow you. You can see how knowing the angles of the contours along the path of a letter form would allow you to do different kinds of creative visualizations. You can imagine swirling particles around in a flowfield style. I don't know, but I'm you will what am I saying here? Um I'm just looking at the chat. I don't I just trying to decide if I want to bring in an outside artwork here uh because it's a little bit but I'll just show it to you all. I mean that's sort of what I'm showing to you now. So, um I think that can kind of I I can just sort of put that to the side here, but um I just got excited by thinking about that. So, so what kinds of creative ways could you visualize the letter form knowing not just the points and the angles um and I would love to see your versions. what you think of to-do uh submitted as part of the passenger showcase with this particular video. Okay, then I said the thing about text to model. Let's look at that one last thing and let me go here. Change this to text to model. Um, okay. Let's simplify this.

### Segment 28 (135:00 - 140:00) [2:15:00]

Okay. So, so text to model first requires us to use the WebGL renderer for 3D. All right. So, I've simplified this sketch back to just drawing the text. Choo and text and 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. Orbit controls is not defined. It's orbit control. So there we can see the text has been rendered in 3D in a flat plane. So it looks like I can call text to model and it's got some similar properties as the text to points function or text contours function. That is the string to convert to a model, the x coordinate, the y-coordinate, the width of the text block, the height, and then the options. I think the options is what's going to be the most important here. Um, where are the options described? Where are the options? Oh, what? I don't see an op. Hold on. Sample factor extrude. Do any of these use any other options? sample factor extrude. All right. So, it's missing. This is another bug to that we found. Not bug really, but the option should be listed here. Okay. So, here the text was drawn to 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. ext to model. That's what I do. Font. ext to model. The text I want choo choo. The x and y position. And let's just give it 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 um kept it wrapped like if I give it

### Segment 29 (140:00 - 145:00) [2:20:00]

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 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. Oo, that's pretty interesting. It's actually like that's pretty interesting. I love that. So now, of course, the world is your oyster, if you will. I don't know what to say. Where else is your oyster? Yeah. So, now you can go so much further with this in terms of Okay. Well, let me actually zoom into it. 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 much more extreme 0. 01 no that's 0. 03 we can see the geometry has become much more uh primitive here. Okay. So, you've learned 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. I'll see you in the next P5 2. 0 video where I will start to look at um custom shapes. How do you draw curves, bezier, splines, how has that changed in P52. So, if there's something in particular you want to see in that video, just let me know also in the comments. See you next time. Goodbye. Okay, I'm not actually leaving live stream. That was me recording and ending. And I think I should mention one other thing maybe which is um uh yes I oh yeah I also want to mention that if you're exploring typography computational typography in p5 I just showed you the core new functionality. new function. functions in p52, but you can actually extend that functionality with the p5 library p5 waft to I don't know what is that asky conversion p5 party. Wait, but what does this library do? I know it does more things. Maybe I won't mention

### Segment 30 (145:00 - 150:00) [2:25:00]

add-on to support WebJL rendering text to points related text method for oh for waft two fonts. That's a particular kind of font. Waft two fonts. What's that? What is that? That's a web open font format. Oh, okay. So, now I get it. Let me just also Huh. Does anybody know like what's but I don't know enough to add this into the video, I guess. So, um Dave, if you're listening, send me a message. Okay. Well, I c I covered one topic today, which maybe is fine because we're way behind on the editing anyway. I kind of want to do the conversational chatbot. It is 1:30 already. Could take a short break. That's going to take a long time though. I think that's unrealistic. Uh yeah. No, I think I've got I guess this is what today was. Um WAT two is a can of worms. Okay, we'll leave that out. Thank you. Um, sorry, I'm looking at my messages. I don't No, this is probably going to be this is okay, right? This is going to get cleaned up and put into like a useful video that'll be useful for people. They'll learn how to do the stuff in P52. That's important. That's meaningful. I've done something today. I didn't get to any of the other stuff. I guess I could do um Oh, yeah. Yeah, yeah. Let me find this. Frank is making a good point. Where was that? Let's see if we can find that. Because let it be nice to feature that. Um there was a whole It was on open processing. Let's find this. Um I don't want to not feature this. Um, where was this? Uh, somebody help me find this. Um, variable font community projects p52 open processing. I don't know. Is it here? Is there a link to it from Um so where Okay. Where was this events? Well, hold Let's go back to here. Maybe it's going to be part of this thread. No. B5. Just No. Where is this? Community sketches. Okay, hold on. Let's go to beta community sketches. Oh, yeah. But wasn't there Oh, yeah. I guess there's just a bunch here. Okay.

### Segment 31 (150:00 - 155:00) [2:30:00]

Yeah. Look at this. I guess I'll also Okay. Yeah. All right. Um Oh, this one's feelings make which one is yours, Frank? Um so lovely to see. Okay, there's also a set of wonderful um on the p5 js website there is a collection of beautiful sketches many of which made with these new 2. 0 you know, features here. Uh, boiling point by Dave Pagarak. Boiling point. Abracadabra. Feelings make us human. And you can see different languages and character sets here as well as this sketch confused which is definitely making use of the angles that we I looked at I looked at uh as a third property beyond just the XY positions of the contours of the letter forms. So, I hope you enjoyed this video. You learned something new about P52, maybe got inspired with an idea. Please, if you make something with any of the new variable fonts and text to contours, text to model functionality that's in p52. You can go to the coding train website, the page for this video, link in the description, and submit your sketch to the passenger showcase. And I'll see you next time in the next p52 video. Maybe I'll cover curves and splines and custom shapes. Is there anything you want to know about or see that's new in P52? Let me know in the comments. Goodbye. Something just dinged. Okay. Um All right. So, I think that's it for today. I um I don't feel great about how I used my time here. Um I'm trying to um let me just turn off this volume here. I can't I don't know. I don't know how I don't know why my do not disturb is not working and the dings are happening, but it's fine. Um, yeah, this whistle I gotta get a better whistle. Um, anyway, um, there's still lots of videos to edit. So, um, I'm going to Here's my resolution for next week. The live stream will likely be Tuesday. And, um, what I'm going to do next Tuesday is plan in advance exactly what I'm going to do. and I will set a time in a YouTube event and I will put the topic and the outline of things I'm going to do in the title and I will kind of prepare um in advance. So, I don't know, you know, each week is a new adventure, a new failure, a new success, a new opportunity to learn, to get better at this. Um, and I'm glad you were with me. I think that there's something here that actually is a simple relatively simple video for Matia to edit that's hopefully not more than I mean the whole thing is like I wanted to just make like a five minute update video be like here are the things but that's just not who I am so we'll see I'm going to go I'm happy to answer a couple questions um I'm not I I'm um guess I've been here now for two and a half hours which is a good limit I mean a part of me is like could I come back very briefly later to do the coding challenge. I don't know. I'll think about it. I think I'm probably done for today and I'm um and we'll see. Okay. Um Yeah. Okay. Um

### Segment 32 (155:00 - 157:00) [2:35:00]

I'll put on some music to say goodbye. See if there's any last questions. so loud. But I don't know where the sound why it won't let me adjust the volume. — I'm gonna say once again, here we go. Sing it with me. — Oh, I see. — There we go. That's better. — Okay. — Well, okay. That I appreciate the comment. Uh, my favorite streams are the chaotic ones. Well, that's good. Um, — auto and the internet will fix that for me. I mean, I think also like maybe I'm being too ambitious. — That — the farmer was replaced. Oh, it's a coding game. Oh, I've heard of this game. — Um, I think so. I've got some emails about it. — Very nice to see the train running smoothly again, says Wave Morph. I don't think it's running smoothly, but it is running. So, that's one thing. I guess the song ended. Um, also maybe I need to be less ambitious and really just have one topic per stream. Um, because that's what I that was the topic for today's stream. It was in looking at the new font and text features of P52. I did that for about an hour and a half to two hours. And there will be a video that gets edited down and uploaded later. And that's a success. All right, everybody. Um, I'm gonna shut this down. So, there will almost definitely not be a stream next Monday, but I think there'll be one uh a week from tomorrow. Um, next Tuesday. Um, and yeah, I'll see you then. Okay, I see everybody's leaving anyway, so I'm gonna go too. Uh, goodbye.