p5.js 2.0 with Kit Kuksenok

Press this. Oh, shoot. Oh, I'm not muted. I think people can hear me. Can you hear me, people? I forgot to start the timer on the screen. Here it goes. And now I'm muting myself. Well, this is a good audio check. If you're in the chat, let me know how my audio is. But I'm muting myself now. I'll be back in a second as we wait to get started. Heat. All right, everyone. I'm just doing a quick audio check. You should hear me now. Um, Julian in the chat writes, "The Discord announcement gave the starting time in the local time zone. " And I just want to say thank you. I got to find this person in Discord who taught me how to do this. There's a special way. Uh, I can't find if I go here. Um, yes. Thank you to Draanite. And apologies, by the way, if I know I'm talking over the music, which tends to be a little bit loud compared to my voice. The music will end once we officially get started, but uh Draenite wrote to me yesterday and said, "Yesterday at 8:32 p. m. Eastern time, New York City said, "If you haven't seen it, you can generate timestamps that show in everyone's local time zone using sites like discord-instamps. com. " So, thank you for that uh excellent tip, uh Dragonite. That's how I was able to do that. Alcoa writes, "I like to use Hammer Time. hammertime. cu. " I'll put this on screen. So, one thing you might notice, uh, I also have a new system where during this, uh, kind of waiting time before I officially start, I can put your chat comments on screen. So, I don't know if you have something to say that's interesting, put it in there. I'll put it on the screen. We have people watching from all over the world. Uh I see in the chat Iraq, Northern Germany. Amazing. Happy Friday, August 15th. Well, this song is much longer than I remember. South Africa. Flat battery from South Africa. Hello to you. Ah, United States of A. Andy A. Hello from Minnesota. Minnesota if I perhaps we've got Denmark. We've got Rugabit in Germany. And you think the song's over, but it's not. Keeps going. Ah, hello from Greece. Yasus. I was in Greece this summer. I wish I was there right now. Okay.

I think. Let's see if this plays. Yeah. All right, we're really getting started now. Here I come on screen. Hello everybody. Um, hold on. Press this button. Hide comment. Oh, hello from Greece is just permanently locked onto the screen now. Hi everyone. Welcome to another live stream from the coding train. That's me. I had I'm so unprepared that I don't even know where my train whistle is. Oh, there it is. Hold on. Oh boy. It this is not the good one. But hope maybe you heard that. I don't know if noise cancellation is taking off. I don't know why this comment. It's fine. Uh let's try adding another one. Nor from Morocco. Okay. Let's see if I can get this comment to go away. Yes. Okay. No comments on the screen. It's just me, Dan. Uh welcome. You might be surprised to see me so soon given that the time between my previous last two streams was I don't know six months to a year and now the last time I streamed was like I don't know a week ago and here I am again. Um now if you missed my first of all if you're totally new to the channel, hello everyone. My name is Dan. This is the coding train where I tend to uh what do I tend to that's a weird thing to say but I um I produce I create I broadcast live sessions about coding creativity art technology mostly using a library called p5 js which is the entire subject of today's live stream. Um I also upload uh you know standalone videos which are tutorials or coding challenges. Sometimes I'll even do something. I'm looking over in the corner of this room here. I've got an old Apple 2 Plus computer. So, uh I have been kind of not very much on YouTube in the last year. Smattering a petering a little blip here and there, but I'm kind of working uh my way towards more active presence of live streams and video uploads starting in September. So, if you missed my previous live stream, which was maybe about a week ago or so, you can go back and find it. Archives. I kind of went through my schedule and plan. And during that session, in fact, I can kind of see if this works. I kind of I used this I have this new Smartboard thing here. And I talked about how uh ah yes, one of the things that I want to do, and I sorry the the lighting in here is a little bit dark. I've got to work on that, but I want you to be able to see this. Um is that I want to focus some of my energy this fall on covering what are some new features about uh of in the p5s library. You might not even be aware that there as of today and as of you know a while now there is a beta p5gs 2. 0 which has a bunch of new things. I made a list of them here. There's variable fonts and some shader stuff and new shape geometry. But you don't need to hear about that from me. I'm just a you know whackadoodle guy on the internet talking about coding. So before I get to the fall where um where I'm going to start to go through some of those features myself in uh tutorial form, I wanted to invite on to the show. Is this a show? I don't know. That's a little bit maybe too much to say to the stream to the coding train to the YouTube channel um representatives from P5S the processing foundation. Um if you're not aware the processing foundation was formed in 2012. I was part of the creation of the processing foundation uh nonprofit here in the US to maintain the software and community for processing. Uh which you know I got to watch the time here. If I start talking about what processing is I'll be here for another half an hour. Uh shortly thereafter Lauren Lee McCarthy created p5 js and joined the processing foundation. The processing foundation has gone through many changes over the years expanded new programs. Um, I uh I'm not going to pull up the website right now and get lost into that, but um uh so but you should check out the Processing Foundation's website, but today the focus is and I actually am going to bring up I'm going to introduce our guest because I have a problem where like I have a guest and if I'm not careful, I talk for like an hour and we're just gonna be here for like an hour. So, uh, I'm going to switch over to this screen here, um, which, uh, I'm standing in front of, uh, Kit here. So

okay. So, a couple things. Let me just mention a couple things. One is bear with us. Give us some grace here. This is the first time I'm using this setup with a guest coming onto the coding train. Uh, we tested the setup earlier this morning, at least my time this morning. It might be whatever time it is for you. Um, and things worked, but I won't wouldn't be surprised if things go wrong. So, just bear with us. This is going to be super informal, friendly. If we have to pause and fix something, we'll do that. Um, etc. Um, so a couple things. Um, if, uh, so this is the p5gs website. Um, you can read all about there are various links to GitHub issues and a discord post where you can read all about p5s 2. 0. If you're watching this later, look in the video description. I if it's not there now, but after this is over, I will put all sorts of links to all the reference material and examples, the p5s 2. 0 website, etc. there. So, but without further ado, let me introduce um Kit. So, first let me go to the p5. js about page and I'm just going to move my window over here. Oh. Oh, you're seeing my like oh, you're seeing all sorts of other things behind there. Okay. So, um, one of the things I encourage you to do if you haven't, if you've used p5 js, if you've watched any of my tutorials but never taken the time to click on the about page of p5 js, I highly encourage you to do so. You can learn a little bit more about what is p5. js, the community statement, but here's what I'm here to focus on people. So, one of the things you might not be aware of is that p5 js has well, first of all, there's a team of many people who work on it, but it has a unique model in open source which is a rotating project lead. Lauren Lee McCarthy created P5JS um and uh was the lead uh between 2013 and 2020. There were uh there then there have been a rotating uh set of leads. Most recently was uh Q Chen Yi who was the P5 lead starting in 2021. And just almost a year ago, I think in November 2024, uh Kit Ken um joined as the P5 jazz lead. So, Kit is a Berlin-based artist, writer, and coder. Um, they have a PhD in computer science and engineering from the University of Washington. Uh, I was lucky enough to get to meet Kit in person on a brief visit to New York City and learn all about their work and their goals and desires and hopes and dreams and fears for P5JS. And so we're going to learn I'm going to bring Kit on um now and I'm going to let Kit introduce themselves uh say hello and then I'm going to kind of turn over the stream to them to do a bit uh to talk about P5GS 2. 0 show you some code stuff. I'm going to follow the chat. I'll be favoring your if there's an kind of important relevant question I might pop in and ask it during Kit's I don't want to say presentation sounds too formal but during Kit's time but towards the end we'll do a Q& A. Um, so let me see here. I'm going to press my first guest button, which is going to put us both on

screen. Uh, hi Kit, you're on screen now. Oh, and there's a comment from earlier, which I'm going to remove. Kit, welcome. Welcome to the coding train. Thanks so much for being here. How are you doing? — Hi, thanks so much for hosting this. Um, I'm doing pretty well. I'm in Berlin now, so it is 5:00 p. m. So, I'm glad the timing worked out. And thanks for this amazing introduction. Actually, for those of you who are going to the processingfoundation. org page, uh if you look at one page on that site, you should look at the fellowships um because we've been running a fellows program for a number of years and there's some really interesting projects there. — Great. And — yeah, happy to be here. — Yeah. And so the fellowship, it's something that I have definitely talked about before. There's, you know, many opportunities for people who are watching if you want to get involved in open source in community and the processing foundation. There's the fellowship program. There's also, I mean, uh Google summer of code is happening this summer. Is that I guess wrapping up soon? Are there students working on p5 js 2. 0 even as part of that? — That's a really awesome question. There's folks working on uh three different projects. You can also follow our like we do announcements on Instagram and on the newsletter, but there will definitely be wrap-up posts coming up. There are three projects um part of the Google Summer of Code program. One of them looks at um creating a more friendly kind of p5 js sketch embedter tool. Um because there's many ways to bring p5 sketches into a website or portfolio. Um but these can be a little bit tricky to like really tune to one's particular specific website or portfolio needs. Um so that's one project. Another project is improving uh parts of the p5 js editor and another project is looking at improving the uh experience of a contributing translation. So especially if you're thinking about uh contributing to p5 js there's so many different ways to contribute. Um the contributor model that we use is all contributors which means that it's not just code contributions but all sorts of contributions that are recognized as extremely valuable. Um, so actually maybe if I share this can I share the screen for just a moment without like getting — Yes, go for it. I'm gonna switch you over. There we go. — Okay. So, I just wanted to share uh this uh page. So, this is the read me from GitHub. And here you can see a very long list of people who have contributed to p5. js. There's over 700 people. And these are folks who are contributing to code um by writing features but also by documenting by testing by finding bugs um by hosting events by creating educational materials. So all sorts of things and by translation. So the third uh project on for Google Summer of Code is going to be a translationbased project too. Um so I think that's all really exciting. if you want to get started contributing, this is like there's so many different places to get started and I'm really happy to speak to that um later or you know whenever people ask questions. Okay, you don't have to keep sharing that. — Okay, no go back to it's okay. I'm having so much fun with my new buttons and my new system. This is actually working better than I expected and I see that uh Sable Raph is in the chat. Another um another uh part of the processing foundation I've been working on uh processing um and other community things. Um, and check out uh the creative coding challenge. Is that what it's called? On Twitch, Raphael stream. Anyway, okay. I'm not plug. Um, uh, okay. So, I'm going to turn over here. I guess I want to start with a question which you can if you want just kind I'm sure you're going to talk about anyway but I think what's probably on a lot of people's minds especially you know I talk to I teach so I have fall classes starting in like two weeks and I uh I hear from and work with a lot of teachers in uh universities in the US and K- through2 education. So, if you're

like a teacher and you've been teaching your high school class with P5 for the last one year, two year, three years, four years, five, what what's happening now? Should you be uh should you just be teaching as you normally would with 1. 0? Should you be switching to 2. 0? I mean, this is a big question, but I guess that's this is the question that I get. You're like, oh, uh, what do I need to worry about? think about as the fall semester is approaching? And spoiler alert, my hope is to on the coding trend help people figure this out this fall as I'll be figuring out for myself, but I wanted to hear from you Kit um maybe what you have to say in terms of the timeline. — Well, to start with the most important thing is that whatever your experience with it or your questions or thoughts about it are, please feel free to get in touch on many of the different ways that you can. ly you can email me, you can uh find open hours like office hours, a calendar booking link, there's discord, there's discourse um with 2. 0 it is now live and you can use it. You can try it out. I can show a few things with it, but it will not be the default in the p5. js editor for at least a year. Um, and when I say at least a year, I mean that if there are specific things that the community needs more of or done differently in the package that this is a timeline that is meant to support the community. Um, so this is one of those things where there are so many improvements under the hood in 2. 0 that make so many things possible that it would be really great to make it more and more widely available but not at the expense of all the resources that people have already created. Um, and so if you're teaching now, then certainly not you don't need to change anything for at least a year. So nothing it's an option, but it's an opt-in kind of option on the editor. And it's something that um if you do look into updating your materials, then it would be really great to hear from you, to hear your experience, what we can do to make that smoother, what kind of resources we can put out more of because we are developing more and more resources like you know basically each month. Um, so there'll be a couple of new tutorials available. There was another one that just published um earlier this week uh as part of another kind of um tutorial related to the shader authoring part of 2. 0. So there's a lot of different aspects of 2. 0 that might be that will require um changing materials, but this does not need to be um something that you know just happens to you. I mean the the ethos of the project is very much building the tools that we use and so making the 2. 0 available is an invitation for you to use the tool and to participate in the process of making decisions about it. — Wonderful. Thank you. Yeah. And so for me like I just so people are if people are curious I am planning to in my classes this fall switch over to P5 2. 0 you know, to learn and, you know, about how it works, to learn some of the new features, to hopefully find some things that, you know, maybe I could report back to the P5 Jazz team that maybe students got confused by or didn't work. So, and I will be um uh in addition to teaching my classes at NYU, I'll be recording and having sessions where I'll be going through that stuff here on the channel. So, if you want to follow more about P5 2. 0, hopefully I can be a resource and this channel for you as well. Okay. So, I think what I want to do now that we've kind of gotten started, had a little introduction is I'm going to switch over. I'm going to put your screen share on uh Kit. Um so, I'm and I'm going to fade into the background here and follow the chat um and let you Kit, you take it over and present what you want to talk about with P52. And then, uh as you're wrapping up, I'll have collected hopefully some questions and we can switch to a bit of Q& A mode. So, without uh further I keep saying without further ado, that's like the second or third time. further ado, I'll pass it on to you. You're you're on SC. Kit can't see what I brought what I The one thing I haven't figured out is how to show Kit what scene is actually being shown to you, the audience. But so I'm just telling them you're on screen with

your uh with your screen share. — Okay, thanks so much. Okay, so um to start with, if you go to the p5 js editor, um there is a new part of the UI where you can change the library that you're using. So uh just to point out kind of what's happening with 2. 0 which is you can select the new library. Also want to point out a few resources that are available. So for example you can review what all was in the release. Um we've had minor releases and patches since then but what was the or in the original release. So that could be give you a good overview of what were the new things. I won't go through all of it today. Um but there's also compatibility and transition resources. So for example if there's a feature in 2. 0 to that you want to use and you don't want to change your code from 1. x, you can use compatibility add-on libraries. So if you switch if you toggle these on, then you will be able to use most of the code from 1. x with 2. 0 features. Again, if you find issues with this, please report them. Um, and for most of the po for most part, most things don't need to change, but there's a few things that do, and this page lists all of them. So this is what's linked under library management and compatibility and transition resources. So this is — sorry to interrupt you kit. I'm getting a couple comments that maybe that's still a little bit small. So if we want to just zoom into the screen a little bit. I think that settings page is a little small that obviously the code font size I think it's good but sorry to interrupt. That's great. Yeah. — Okay cool. Um I'll zoom back out in a moment for code but I just want to make sure that this is like this is your sort of one point of information. So, if you're trying to use a something from a 2. 0 sketch in your 1. x sketch and you're not sure what's going on, like you know how to connect those two things, this is kind of the resource that you can use. But for today, I'll show you one thing that I don't know if uh those of you who do work with P5 whether you worked with much with text. So, I'll just make a

little um small sketch with a text on it and I'll go through it from the start. So, I've switched the version to 2. 0. Um, I'll make the background white. And I'll just print out something really simple in the center of the screen. Okay. So, so far so good. One of the things um that's new in 2. 0 uh is a lot of improvements to the typography part of it. So writing text working with interesting fonts. So one of the things that um that we now support directly is variable fonts. Uh so if you don't work with fonts this might be also a little bit new but there's a type of font and this is just an example where uh you there's a smooth variation of some variable in this case weight. It's often weight but it's not always weight. Um, so I'll give an example with this particular font. So if I went through the whole flow of like getting the font or I can download it from a TTF or F file from somewhere else. Um, I can actually let's see. I can load that font directly from the URL. So I can download it, but I don't have to. And then I look at this, I'm like, hm, something's not quite working. So I what I want to do is I want to create the canvas, wait for the f font to load, and then draw it. So this is something

that it's new in 2. 0, which is support for asynchronous um processing. So here I use the keywords async, which are also part of the um new documentation on the beta. js. org um site. So you can go there to reference, you can go to examples, and those have been updated to work with 2. 0 know um and they demonstrate all the changes and here I want to use this font and I want to set the weight and there's a couple of things here in the URL like okay well the weight can be between 100 and 900 so I'll just make it something okay well that's not big enough to see at all so I'll make it a lot larger and what if I make it much heavier here. That's not the weight. That's the size. So, I change it here. All right. Well, that's nice. But what why don't we use something that actually takes advantage of the draw loop that is being rendered every single time that we're running a frame. So, maybe I can create some sort of pacing of this weight that's based maybe on frame count. And it's a little bit slowed down. So by dividing it by 100, I'm slowing it down a little bit relative to the frame count. And by using a sign function, I'm making it um the pacing go up and down kind of. And then rather than 800, I can use the pacing, but not directly because that's going to be a number fromgative -1 to one. So rather I can use map from and take that number which should be from one negative 1 to one if it's a sign function and make it go from 100 to 900 which is what we know the variable font can be because that's what we've seen in the UI. That's what's part of the font information. And so then we can see how that like it animates smoothly in and out. And that's something that we can start to work with. Okay. So, what else? Um, as you as we've mentioned, P5JS is the core library. Um, but there's also a lot of resources that are developed by the community. There's a there many of the libraries work uh out of the box with 2. 0. Uh, for example, uh I'm going to share a library that's was made for 2. 0 for as part of the text, which is p5. waf WAFT 2, which helps to do some a little bit more advanced stuff with fonts. But also, if you're getting started with P5 and you know, you're wondering like how do I capture how do I how do I make videos, there's also a library for that. And there's a lot of different libraries that are listed on the community page. So, the functionality of the core library itself is something that is used by many add-ons um and that can provide a lot of really interesting possibilities, too. So, I'm going to go ahead and add that library. Oh, actually I did before. I just commented it out. But there you go. And what can I do with that next? Okay, so it's just kind of like looping the um text, but what I'd rather do is I want to create some sort of shape um around each letter. And this is something that

I can create a new function for. So that's going to that function is going to look a lot like the function that we have for um drawing the text. So I'll just try and replace it and I'll try and do something slightly different. Um so there's a new part of the 2. 0 API called text to contours. So if you've used text to points before, it's similar to that, but it creates points um ba for each word for each letter in the word or the text that you give it. So, it looks and feels in many ways similar, but it's text to contours. And I'm going to sample it really, really low. So, what that's going to do is it's going to pick a couple of points along each letter. Um, and before I do anything else, I'm just going to draw what those points are. And this is one of those things where if you're looking at example code or if you're reading this code, if you are familiar with the syntax, then um that's one thing. But if you're not familiar with the syntax, what I would really encourage you to do is treat this as a language. Programming language is also language. Meaning that if you try to read it um read it through, it does try to sort of explain what it's doing. Um, so I you know a lot of APIs were written as a result of people talking about what does it sound like? What do people think it's going to be like? So as a point of history, the 2. 0 project started at the end of 2023. So it's over a year old which means that since 2000 the end of 2023 the community particularly the contributors active on GitHub but also anyone who participated um as a result of like the newsletter uh requests for comment and feedback specifically discussed what do we add that people can understand intuitively. So this idea of like what does it sound like what is it what would you think it would do based on reading it that is how people discuss what to add. Um and that is something that so if it's not if it doesn't meet that um idea if it's something that's confusing in that way that is something that we want to know in like a conversation of how the API can improve in the future. So let's say in this case okay so we have contours and so intuitively what's happening with text to contours what have I tried to describe that it has it that gives you points per letter in the whole text. Okay, so that means that there's going to be a list of letters and inside each letter points. And so that's what I'm going to try to do here. So even if this is like different like new syntax for you, what I would encourage you to do is like uh take this and modify it in your own ways. Change parts of it. So for example, if you were if you're following along, change this 10 to something else. See what that's going to do. Um and so then I have this sort of slightly more abstract representation of this text. So, anytime that you encounter code that you have don't have no idea what it does, um I think one of the things I like to do with in like exploring code is like change whatever number you see in there. So, let's say I see this 10. I can make this 10 smaller or bigger and see what happens. What else can I change? What other numbers are here? Okay, there's a sample factor. What does that do? Ah, that changes the number of times that a point is sampled uh along each letter. So, I'm going to make that smaller again because I want to continue to be a little abstract. What other numbers are there? Okay. Well, there's this text size. Maybe I can make it a little bit bigger. Sure. And then there's this background. So, I can also make it into a particular color. So now we've created a circle along each um point and rather than just having

this like individual circles, I'm going to connect them to some sort of shape. And so rather than drawing individual circles, I'm going to use the sort of bookending logic of beginning a shape and ending a shape and starting a contour and ending a contour here. And I'll sample it a little lower. And then it becomes extremely abstract. and unreadable. Um, but that all depends on what you create. So, okay. So, I've created sort of a 2D shape. I could also try to um make it a little bit smoother, but one thing that maybe could be interesting to do is to take it into 3D. And before I do that, um, uh, Dan, is either any like comments or questions, um, from you or from the folks in the chat? Uh, there's been a lovely discussion in the chat about, uh, frame uh, frame count and delta time, which by the way, uh, so there was a question, I guess I it's I can bring some of these up onto the screen. Um, there was a question that was asked, is there any global

variable like frame time instead of frame count? I'd prefer the time for a physics simulation. Of course, Sable Rough chimed in and referenced that there is a p5 function called delta time, which uh I realize I'm not on screen here. Let me press a little button here so I appear. Oh, we lost the comment. It's fine. I can bring it back. Okay, everything's good now. Um, I didn't know that delta time existed. So today I learned there is a p5 function called delta time. What um what is what does that function do? And um if you know kit and also I don't know if you know this but uh people were also asking and wondering if the draw loop is actually just implemented with request uh animation frame. — Uh yeah so I mean it's it's tied very much to like just the way that the canvas is implemented. Um, so I pulled up the uh delta time here. And so I'm to be honest, I'm not sure how different it is from Milliey's. Um, I guess it's just a number. — Yeah. — That's slight to the same but slightly different range, — right? Without reading the reference page, which is the thing I should do. My speculation is and milliseconds is the amount of milliseconds that's passed since you pressed play, since you started the sketch. Um, and so if you wanted to know how much time passed from one frame to another, you'd have to save milliseconds and do your own comparison. So my guess is delta time is doing that. It's maybe telling you how long it's been since the previous frame. But that's just total speculation, but is this is like it's actually a really great question. This comes up a lot. You know, I have my nature of code book in materials with this question of trying to do physics simulation and like am I thinking about like how fast this is moving according to like real physical like time or according to you know animation time which is like how many frames and theory it's 30 frames per second but it's not exactly that. So anyway, we're a little bit into the weeds off topic here, but — yeah, I was going to say the main reason that like I use frame count is primarily because I like to be able to slow things down and speed things up um occasionally. Yeah, I als I also noticed that I think I'm not able to like share my video simultaneously as sharing screen simultaneously as running that sketch on my giant monitor. Um, so I'm going to change the — dimensions of the because it's one of those things where it's just like, you know, it's like a pick two out of three kind of situation. — Yeah. Yeah. I noticed your video was starting to um — Yeah. Please let me know when that happens because it's one of those things like the monitor is very nice and large, but it's really a large number of pixels. — And while we're here, okay, uh Okay, so I um delta time there's some other comments. But this is actually a really interesting question which um — does uh which um so Ahmed asks does this contouring code uh work for other languages for example Arabic? Um and I

think I kind of have an answer of my speculation here but I don't know if Kit if — please speculate. — Oh well okay so my assumption here and I'll go back to this screen. I'm sorry I'm pre I'm doing trying to do too many things at once here. So there's sort of this question of what does P5's codebase support? Um, which is where the question starts and I think is the right question to ask and I think it's a really important question and especially like people like me who is a kind of like just your run of the day like you know mediocre American guy. uh I you know it's get very self sort of self-centered and focused on like the English language and there are so many other languages that people speak um as well as character sets and alphabets and all sorts of stuff. So I really appreciate you asking the question to think about it. So my speculation here is that P5 is adding features to be able to manage, manipulate, control the underlying font rendering of the browser itself. So if the browser and canvas supports um you know the Arabic characters or um then uh through a font then all of this variable weight contours should also work as well. That's my kind of yeah uh guess here. So the things that's needed for this. So there's a couple things that I'm going to point out which is to do v the variable font stuff. All it needs to do to have is like the font needs to support that technology. Like that's a type of technology. Am I still lagging? — Uh no you're good now I think. Yeah. — Okay. I'm just going to stop preemptively though. But um yeah. So that here whatever you load and load font doesn't have to be a link. It can also be something that you're hosting like an OTF file or TTF file. If that has um character sets for Arabic, for cerillic, um for Chinese, for you know traditional or simplified or any other language um any other character set then that can be usable in the sketch assuming that it can also be rendered like in the browser. So with any other character set there's also a question of like what's the encoding of the file and so on. So that might need a little bit of debugging, but the loading of the font is the important part. Um, and yeah, so 2. 0 introduced a lot of improvements to how to like what is able to be loaded. So like loading from a URL and being able to use that um is a part of it. The one thing that I will really point out and encourage you to get involved with if you're interested in working with fonts is this w 2 library. Um so some so for example the cont you you'll you might have noticed that when I went from just animating with variable um weight uh to using contours I needed glyph data that I would not have been able to get from that URL from Google fonts without using this additional library. So this additional library um runs underneath overloads what happens with load font and makes those glyphs available. Now, one thing I will say about like additional fonts and other charact and character sets that are not English is that like I think it's also really an important and interesting aspect that I'd really like to look into um of how to kind of create more resources of how to work with those fonts because everything I just mentioned is like oh load this and load that and also check the file encodings. This is something that like um as a like English is I have a native level English now I use it all the time but it's not my first language um and my first language does not use the like the Latin character set and so like the amount of like intuitive debugging of file encodings that I just do on a regular basis um you know if I'm trying to work with like non-English language is like really high and so I think it would be really nice to make to like use these new typography features um to like make those languages more available for people's sketches. — Yeah. And this is actually this is uh really resonates with me because for me, you know, I teach classes at NYU and many of the students are um from other countries and speak other languages. And so I what's the most wonderful experience that I have is like I made this example. I made this thing. and we showed it in class and I can't really anticipate or understand how it's going to be used by people who come from different perspectives and other cultures. Then they go and try that and maybe something breaks or something changes or they discover something new and I get that feedback. It's a wonderful circle cycle. So I think um that that same thing could apply here. So I you know to the audience like try all this stuff out with your own native language, your own native ideas uh and share that back with the — Yeah. Please tell me how that goes like we're very a actively uh seeking people to try this out with other languages um and you know both to find you know interesting possibilities to share. So for example, sharing examples, sharing tutorials and so on. If you have created something that is really um that like might be inspiring to others, but also finding problems um because I think this is one of those things like yes, it's true that most of the tutorials start in English and then are translated to other languages, which I think is kind of the other thing that I would be really excited about is having a lot more um education resources that are primarily in non-English languages first and then maybe get translated back to English. Um and you know, I think that the typography improvements in 2. 0 you know, kind of make some of that a little bit more possible. But I think that there's like there's definitely still space for feedback, for ideas, for growth. Um, so I really hope that like if you're interested in it, you try to use it. — Okay, — great. Yeah, I'm keeping track of some other questions. Ah, this is actually a good one here that's some of them I'm just saving for later, but here's a good one that's on topic for what we're talking about now. Um, oh

actually well so this is actually well it's on topic and it extends beyond but I'll ask it anyway because I said so uh this question says do you know if there are any plans to make p5 woof work as a node module? I think this is a bigger question in terms of and may again we could easily get lost into the technical weeds here but uh I guess that's sort of an interesting question to think about to what extent and and I also you know I'm not able to finish the question got to keep putting caveats here I my understanding of the audience and most of the people that I work with who are learning p5 they're really focused on the client side JavaScript the drawing animation media making in the browser but there is a world of JavaScript develop velment, web development, project build systems, project development that uses NodeJet. js as kind of like the foundational platform. Does p5 2. 0 work with node? Do some of the libraries is there a short answer to this like bigger question or what direction we — I don't know if I'm going to do super short answer. Um the folks who are interested in that, I'd really encourage you to check the release notes uh for the last 2. x patches. There's a couple of improvements um for like the ESM file that comes with it. There's like a new template for add-on libraries. Um and so there's just a bunch of things that like make it possible to do that with 2. 0. Um but this is one of those things where if you either want to get involved or request particular directions, it would be good to have that input. There's a particular issue um I forget the number off the top of my head but um it's one of the recent ones where we're discussing uh kind of how to make a more modular kind of version of p5 js which again is still really focused on this like client side use that Dan described but I hope can also like address some of the other uses. Um, yeah. — Yeah. And I just want to highlight, uh, Shin from the Processing Foundation mentioned if you are making sketches, tutorials, or other resources of P5 2. 0, use the hashtag, and I've put this on screen, uh, P5V2, and that the team can find your work. — Can I actually read it read aloud and answer one of the questions like just above that, which is, um, I'm wondering from Kathy, I'm wondering whether extrusion would work the same for foreign fonts. Yes. Um so I think uh we got more into the discussion which I love but like the next step of that would have been to use text to model. Um and this code the exact code that I showed with text to model with like a lot of um like within WebGL it will extrude it um and you can work with text as a 3D object. Um so we can definitely try that out. Should I Should I do that now or would — that be fun? — Yeah, why not? I guess I don't have a

Oh, you know. So, yeah. Well, we have time. So, whatever you want to show is great. I'm like looking at five different things at once and pressing buttons. Uh while you're getting that set up, uh I'll just like a control room sensor there. Raphael says there's also a new community curation coming up that will show a lot of multilingual examples in p5 2. 0. So be on the lookout uh for that. — All right, you are full screen you and your screen share again. — All right, cool. So I'll copy paste rather than type actually no I will go through it step by step. Okay. So, what I've created here is, and ple please stop me if I start lagging again. Um, so this is once again our familiar sketch where we're in canvas mode. Uh, we're using text to contours to create these shapes. Okay. So, we're going to work with 3D in a second in WebGL, which means that we're also going to place the text in the middle of the screen. And just you know if this is a little bit confusing it's because the um coordinates of the canvas start in a different place than in WebGL. So this will place it in the same spot. Um and rather than creating the contours I'm going to use text to model really similar syntax. So I have word position sample factor and extrude. And let's say okay, cool. Wow. Tada. — So, the features of the font itself work. I mean, again, it's really down sampled. Um, — but yeah, — and I think you are frozen. I think you're frozen again, but we can hear you just fine. And I see the image, but I think you're Yeah, — I've stopped it. Yeah, I think we didn't catch some of the ro rotation maybe that you were trying to do, but — but we get the idea. And we can also what we can do is um I can put the link like uh we can share these sketches. Obviously, I can share them in the coding train discord and on social media or whatever. But what I can do is any sketches that you make here, I can put a link to them in the video description so that when people come back to it afterwards, they can find and run them. — Yeah, I I'll sh I'll share the links with uh with you of those. But yeah, so I think this is one of those things where like it'll be really exciting to see what people do with these basic building tools. Like basic in the sense of like they're foundational. There's this is not a complete work. This is something for you to take as a little brick um in your process. Yeah. — Okay. Anything any other kind of questions or topics that we should touch on, do you think? Um I So did you have other things you want to cover in sort of about P5 2. 0? I have some questions that I've noted down that are kind of off to other sort of other things slash like more wrapping up questions, but I just want to um — I guess I'll quickly do a very very quick like non-demo rundown of what else is in 2. 0 in case people are — Okay, that was going to be that's one of my questions. And in fact, I think one thing that's helpful also if you could note is and I think this was asked I think Ala had asked earlier uh just curious about what if any things are breaking changes um in 2. 0 versus new — phenomenal question. Okay. — Yeah. — Um are is my screen being shared at the moment? Is that happening? — It's quite small so you'll need to zoom in quite a bit to that for — Oh yeah. Okay. Thank you for reminding me about that. — Yeah. — Once again I'm I am um spoiled by my monitor. Um, okay. So, uh, couple of different things. So, when we released 2. 0. 0 in April, um, this is kind of the notes and this is the main source of like truth of what like what is there or not there. So, if you're interested in what exactly is or isn't there, the release notes are a really good resource. Um, so I walked through some of the text related stuff, but a lot of other stuff I didn't mention. For example, color modes. Um there's a few updates to shapes. I did sort of touch on briefly if you um but you know not extensively and let's see there's also a functionality for authoring shaders with JavaScript and that's covered under tutorials. So these are all resources that are um useful. Now when it comes to the idea of breaking changes so when we released this uh library in even start for in this or this version even in starting planning 2. 0 know um that team which at that time I wasn't part of uh processing foundation yet um even at that time the idea was to use semantic versioning which means that each of these three numbers means something in particular when the third number uh is increased it's mostly small improvements documentation improvements and bug fixes so that's a patch then the middle number is a minor release that's like something is added without any breaking changes to the API um the fact that there is a vert major version release is what allows to create space um for like pretty potentially large changes to the API. So the breaking changes that are that you

specifically um can look through and like step through step like point by point are in this compatibility uh resource. So this is going to walk through a couple of different things. First, it provides you a couple of add-ons that are available directly from the editor. So if I open the editor and I see here the compatibility add-ons. I hope you can see this. — Yeah. — Preload shapes and data structures. Those are the three areas of potential compatibility. Those add-ons are in this repository. So this repository provides those add-ons which you can use from the editor. So if you have your 1. x sketch and you want to try a 2. 0 feature without changing anything in your sketch, those add-on libraries are there to help. However, if you want to use the new 2. 0 features, then you can also turn off the compatibility um add-ons and potentially change some of your code. One thing that you might have noticed in this u like in the code that I shared would be async await keyword syntax rather than preload. That's one of them. Again, this is sort of put

back with the preload add-on. Um, then there's a couple of uh points that only affect add-on people who write add-on libraries. So, like if you're a author of an add-on library and you're wondering how should I change this? First of all, try it with 2. 0 and see if it works because actually we've gone through and we've tested all a lot of the community libraries listed on the p5 js. org site and most of them work without any changes. So, it's possible your sketch or your library will just work. uh if it doesn't work because it's loading assets, this is an example of what you would have to do to um update it. Then there's shapes which are now a little bit easier to change between different types of shapes. Um and here we have a bunch of different side by side of what it looks like in 1. x and in 2. x. Um and some descriptions. One thing I don't know how much you've used uh like curve vertex, which is now spline vertex. Um, I don't know how much you've used that, but if you connect it, it it's used to kind of just make this like little loop-de-loop and now it's fully smooth. So, if you — The thing that I always um Let me ask you a question. I So, first of all, this is so great and this is exactly like uh you know what I hope to starting in the fall, I'm going to go through this page and try to like understand it myself and make examples and talk through it on the channel. But one of the things that always um that I always found with curve vertex is because a curve needs a like leading point to tell it where to curve into a lot of examples would sort of duplicate the same point twice at the start and the end. And it looks like to me as part of this like eliminating that need and doing some kind of automagic algorithmic way of understanding how to make a curve without that leading point. Is that right? So, so there are so many things about curves that are much more intuitive now. So, it is like looking at these side by side and switching from one to the other like it's true it's a change. Nevertheless, you don't have to do the weird leading and like trailing point. You can like in order to create this behavior, you do what you think you would do, which is you identify the points, you say that it's going to be a curve and it sorts itself out. Um so that was like a lot of discussion about that um about how to design kind of like the API around these custom shapes. And this is something that like is one of the improvements that like the 2. 0 API is easier to use and to learn in the sense of that there's a lot more consistency between them. So rather than having curved vertex that takes two numbers and then quadratic vertex that takes four numbers and then basier vertex that takes three like six numbers. There's basier vertex you have three of them. Those are the three different points. Those are the anchor points for your curve. It's of order three. That's how you know it has to be in sets of three. And if it's a quadratic vertex, then it's basier 2 with pairs of vertices because it's related. They're not radically different things. Um so uh in this sense, it's trying to kind of uh create a little bit more consistency between the different ways to create shapes. So if you want to maintain the functionality of your older sketches, you can use the uh where's yeah this shapes compatibility add-on. So if you just have your previous 1. x code with shapes and it does exactly how you want it to do and you don't want anything different about it, turn that on and then you can use stuff from the 2. 0 um library. But if you would like to author stuff in the new 2. 0 library, then you can start from scratch with kind of the new spline vertex um and vertex syntax. — Yeah. While we're here, I know we're kind of jumping around a bit, but this is a note that I made to myself that I thought would be really important to address because I've seen uh people encounter this new library management tab and have some confusion around it. So, I wonder if you could briefly explain um what the library management tab does and when you can use it versus when you need to go and manually edit the HTML page and um you know, does do does those ever come in conflict with each other or what kinds of things should users be thinking about between when adding libraries manually versus that tab? — Great question. Um so, let's see. to start with. I hope this is visible, but let me know if I should make it any larger or smaller or anything. Um, — the main thing is that you're going to see the version summarized in the top. — Uh, it will continue to add the new patches from both 1. x and 2. x. So, this is like the main place that you can switch it. This is the thing when we talk about it's not going to be default in the editor until next year. This is the thing when you open the editor, it's 1. x and then you have to proactively switch to it. So there's not supposed to be any surprises. Um these additional libraries, for example, historically, I don't know if you've looked at your like index html uh recently, but his usually the p5 sound add-on library is included by default. And so if you're not using that, you have to like remove it proactively. So this is sort of doing a similar thing, but it's using again a different um part of sound. So, there's also like the newer version of sound, which by the way is actually compatible with both. But just to try and keep this tab a little bit uh clear clearer, um there, this one's going to go into the beta sound reference. So, everything having to do with 2. 0 is going to go into beta. p5js. org. And everything having to do with 1. x is going to go to the main top level p5js. org. So that's like the main thing. And then the compatibility add-on libraries. If you for example try to use your 1. x sketch with like variable fonts, for example, just to name one thing, but you want to keep everything else exactly the same and you've turned all these on and it still does not work, then file an issue in the compatibility library or in the main repository, report that as a problem. because the idea is to make these things um compatible and durable. So the idea is that these compatibility libraries are there if you want to keep 1. x sketch stuff and you and also use some 2. 0 um features. Why do you why wouldn't you want to do that? Like which under which cases would you not just do that? Well, if you prefer to use the 2. 0 syntax. So more intuitive shapes um or you know any of the other aspects of it that you know we didn't go too far into it. So — yeah but just to be clear the so the source of truth like what the sketch is actually using is what is in index. html HTML, you can always manually edit version numbers, library references there. The tab is just doing some kind of automatic parsing of that file for you. And but and it's but it's limited to just like this like selection of like which p5 version and these like compat. It's not like there's a bazillion p5 libraries that you can't add through the library management tab. You still have to do those manually. — Yeah. So you can still add those manually. And let's say we've actually removed like I just I went ahead and I removed the library. So what happens? It says cost temp. And this is a general general, you know, suggestion. If you're not sure what something's going to do, try and break it and see what happens. Um so it's going to say, okay, cool. That's fine. You got this. Um you know, this is you're you're doing your own thing. If you want to uh return back to like having it managed through the tab, you can paste this. But this tab is there as a helpful optional thing to be able to switch to 2. x. If you at any point start to add your own libraries then I mean we like we trust that uh you have some idea of like where you want to take that. — Yeah. There's also a question from the chat uh which I'll read. Has there been any discussion of which p5 libraries are compatible with p52? I guess I'll rephrase that. So, is anybody keeping track? Is there a list of like on the web page like these are 2. 0 compatible, these are 1. 0, these we're not sure about. Uh, I'm actually that's like a huge I don't know how anybody how that could be tracked so easily, but is that something people are Yeah, — in terms of a like list that you can see, I think that would be very hard to maintain. Um, especially right now because many libraries are trying to uh update their functionality

to work with 2. 0. Uh what we did before release and shortly after is we went through and we tried all of the community libraries and like but when I say we as like the maintainer team um and like we have so many people working on this who's not just me and you know I'm just here but there's a lot of folks that have been working on this also before I even joined the foundation um but we went through and we checked uh compatibility with every library which means we tried all their examples with switching the version and we saw if it worked out of the box — and most of the time it did. Uh so major ex exceptions would be anything that does loading assets um or working with assets that needs a little bit of adjustment. And in that case there's usually ongoing work in those libraries um or updated versions. So for example, the newer P5 sound library is an example of something that like it's 2. 0 compatible, but because it's 2. 0 compatible, it's also compatible with 1. x. So it's more in that direction. Um, so and this is one of those things another reason that it's still something that we I really hope that you try 2. 0 and report your experience with it and it's still not going to be like the default until next year because it would be really good to develop more resources around it including the community libraries um that provide so much like amazing possibility. — Yeah, great. There's a there's another question from the chat that I I get this question a lot and I don't really have an answer for which is asking about the current state of SVG support in P5 or if there any if that on the horizon SVG support uh as a possible integration for 2. 0. So there's kind of two parts. — I guess that's also on the importing and exporting or like the render. — Yeah, I was say there's like two parts of that in terms of working in SVG directly which is not quite exporting but like im like using an SVG renderer. There's like the p5 SVG community library and there's like very active work to uh support 2. 0 there. Um generally under the hood it's much easier to work with SVG um like more directly and with shapes. um the kind of updates to shape make it very like possible to start importing SVGs. This is something that's like on a future roadmap rather than something that's available right now. But this is one of those things that like it is so much more possible now and that's part of what's really exciting about it. — Great. Um so uh as we're kind of getting first of all we can take more questions. So if people have other questions please um feel free to add them in the chat. that I'm kind of doing my, you know, console management here to kind of keep track of everything. Um, but one thing I would like to, uh, I think would be useful to go over, uh, Kit, as we get close to wrapping up. We've talked a lot about, oh, uh, leave feedback. Uh, you get in touch, try this, let us know how it goes. And I think one of the things that I see especially that becomes a big source of confusion for beginners especially is where okay I know there's GitHub and I could file an issue there's the official forums there's like discourse there's also like a discord um and you know certain spaces can feel kind of intimidating or you feel like am I asking this in the wrong place so you know I don't know uh what can you give a few tips or at least kind of iterate list through what are the different uh platforms for how anyone could share what they're making, give feedback, report a bug, that kind of thing. — Yeah. Um I think that there's like the public forums that you mentioned uh in GitHub, I guess. H I'll send all the links to you afterwards, so you can also include them, but there's the 2. 0 uh 2. x status board. That's a good overview of what's happening. Um you can also file issues. you can the there's a p5 js discord and then there's a processing discourse. Um and so those are all public places that you can leave things. You can email uh you know we're happy to answer. So you can email hellop5js. org. You can email kitproingfoundation. org. Um, you know, so I think this is one of those things where if you really want to participate, want to share your thoughts and you're like, particularly if you're feeling especially if you're feeling intimidated, but you know, for any other reason, please rather reach out than not. Um, so, you know, especially if you run into an issue. I see already a few things um that people mentioned that are an issue, but like yeah, please get in touch um because I may or may not already be aware of some of those things or the particular details that you're running into them. Um on the discourse I've also shared like an office hours link. So if you're more of like chatting rather than emailing or text um kind of person. So there's like a weekly there's a couple of hours where you can um drop in and like chat with me for a few minutes and just like ask like oh I have