# What's new in p5.js 2!

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

- **Канал:** The Coding Train
- **YouTube:** https://www.youtube.com/watch?v=0Ad5Frf8NBM

## Содержание

### [0:00](https://www.youtube.com/watch?v=0Ad5Frf8NBM) Segment 1 (00:00 - 05:00)

Hi everyone. This is the first video that I'm making uh in a series about P5GS 2. 0. What? Did you know there's a P5 2. 0? Now, don't worry. If you are in the P5 editor, which I currently am, this is an example I'm going to talk about. If you don't know what version you're using, good news for you, the P5 web editor now has this lovely little, I don't know, call this chip up in the top right that shows you the P5 version. So, in a minute I'm going to click on this, which will allow me to change the version. But I just want to talk about like as far as I know where we are in the picture of the transition from P51 to 2. And by the way, this video is going to tackle probably one of the bigger topics and question marks around P52 is like, oh my goodness, I have to use async and await now. Well, I'm going to make it not scary for you and make it fun and interesting and hopefully by the end of this video be like, oh, that makes sense. I'm excited to use async and aait. That's my goal. But let me show you if you've never heard of P5 2. 0. Let me talk to you a little bit about that so you can get some background. So I recently did a live stream with the current um P5 lead uh Kit Ken. That's a couple hours long and they did a wonderful presentation about in particular the variable font weight and talked about P52. Um that's on my channel on the coding train website link in the description. But if you're on this page, I think the thing to focus on here is under references. So, the p5 2. 0 reference, if you're looking for that, currently at the present time, uh, at the time of this recording, which is September 2025, is at beta. p5js. org. So, if you're just on the regular p5js website, you'll still be looking at the documentation for p51. Um, and then you can also find some of these nice posts. There's a discourse thread, a GitHub issue. The main thing I think you want to focus on, let me click on this one, which is the you are here. This is where we are. Uh, we're somewhere in between. Well, when this image was made, you were here, but we're somewhere in here now. So, P5 2. 0 has been released, and that is why I'm starting to make videos about it and how to use it. But the switch to it as the default will not happen till next summer. So, I'm hoping this video there will be another. By the way, you could also just go straight to my other video that's going to follow this one, which is going to just go through how to load data into p5 with the 2. 0 async and08 keywords and is I'm going to go through a lot of examples there. Here, this video is about the transition from 1. 0 to 2. 0. So if you're a teacher or a student who's used to P51 and wants to understand what's changing to anticipate it when if and when you go and use it and I think if I were you if I were a teacher I would plan to try to make that transition for next academic year and again almost nothing has changed for the beginner and the end user of P5 but there there are some things I'm talking too much let me get to the important stuff so first things first if you want to switch one of your sketches to P52 As I mentioned before, I can go over here to the corner. I can click this and I have this new modal window and it's going to show me a bunch of things. The most important thing here is the p5 version. So, I'm going to click this and I'm going to change it to whatever the latest 2. 0 release is. So, I'm going to switch it. Look at that beautiful animation. The other thing I should point out is this is not magic, right? The version of p5 that you're using is specified here in index. h. HTML and you can see it here. It's being hosted on a cloud server and the version is noted here. So if I were to run this sketch now, it doesn't work. It doesn't work because the way you load images has changed. And I'm going to show you how to fix that. However, if you just want to be using 2. 0 know for some of the other features or aspects but don't want to rewrite your loading code, you have another option. Right now, I'm going to go back to this and I'm going to go look at this. There is the P5 1. x compatibility add-on library. So, if I click this to on, and there's other compatibility libraries for other things that I'm going to look at in future videos, but if I click this to on, now this sketch runs again. I'm using p5 2. 0, but I have added, and you'll see it here, it is loading a special compatibility library. And I'm really going to take off the 0's here because the version could be anything. We're talking about anything that's 1. x or 2. x. index and this applies to any kind of data that you might be loading with load image, load strings, load table, load JSON, etc. But I'm just going to show you load image only right now. The two ways to load data with p51 are using preload and two is using a callback.

### [5:00](https://www.youtube.com/watch?v=0Ad5Frf8NBM&t=300s) Segment 2 (05:00 - 10:00)

The only way to load data with p5 2. 0 and it's good that there's only one way. It's one way that's very flexible and that's what I'm going to show you is with something called a promise. Let's talk about why preload exists in the first place. Let's say I've got some variable that's going to be holding the image that I want to load and I have setup. What do I do in setup? I create a canvas. Maybe I set some variables, other variables, etc. Maybe I draw something. Maybe I load that image and then oh maybe I have a variable that I want to be equal to the width of that image. This would be very reasonable normal code for you to write. So we're writing this code in JavaScript. So if we're in JavaScript, we have to ask the question, is this line of code? Is this call to this function synchronous or asynchronous? Synchronous. Synchronous. Asynchronous. What do those terms mean? Synchronous means all of the instructions, all of the work that needs to be done to create the canvas will be completed before moving on to the next line of code. Asynchronous means a process is going to start to perform the action of this function load image asynchronously, separately as a side project happening in parallel. But this code is going to continue. Now, why do we have this distinction? which ones of these are synchronous or asynchronous. It's not some kind of like pre-ordained thing. You know, the decisions like the designers of the p5 library, the designers and architects of the JavaScript programming language and its specification for browsers are making decisions about what functions what parts of the API should be synchronous or asynchronous. And if something like loading an image has to go and make a network call and then wait for that, then collect some data if it takes a really long time, you don't want to block the code from running and have a system freeze up. So it is set up to be asynchronous. The problem is this creates for some awkwardness because what if what I want to do is get the width of this image and use it in the next line of code. This is why preload exists in p5 to simplify the question. Just remove the variable declaration even though we do need it. If we need to use the image in setup, we can have a separate event that loads the image and guarantees that it is finished loading. All of the data is inside this variable before setup even happens itself. This is the primary way to load external data into p51. Have a preload event, if you will, where everything is loaded and setup is guaranteed not to start until that's finished. And we can use all of the data that we loaded in preload in anything in setup. That is the preload method of p51. So how is that replaced with this concept of a promise? Promises in JavaScript have been around for quite a long time. And in fact, I have a whole set of videos about the lower level details about how promises work and how you can write your own code making use of them in JavaScript. But those details aren't actually important for the context here. The only thing important for you to realize is that in the new p5 2. 0, No, instead of load image, loading the image and putting it in the variable itself, what the load image function actually does is return this thing called a promise. A promise is an object that can exist in three states, pending, fulfilled, or rejected. So you might be wondering, oh, I got to write some more code to like check if it's pending and then I need like a call back for when it's fulfilled and I have to catch the error if it's rejected. All this is true again if you are working with the lower level details of handling promises. But the beautiful thing about what JavaScript allows you to do with promises, you can just any function that returns a promise. Basically, that promise is at some point in the future, I will have the data for you that you're waiting for. That's what the promise says. And with the keyword await

### [10:00](https://www.youtube.com/watch?v=0Ad5Frf8NBM&t=600s) Segment 3 (10:00 - 15:00)

if you add this keyword here, what that means is this line of code will wait for the promise to be fulfilled before it goes on to the next line. So this is actually the entire story in essence, which is that you no longer need a separate preload function to make sure the data is loaded before you get to setup because there's no way to sit and wait during setup for the data to be loaded. Now there is a way for this code to essentially act as if it's synchronous. This is now like a synchronous line of code. it will not go to the next line until the data has been finished loading. However, one more step here. If a function like this setup function uses the await keyword to stop lines of code essentially from moving on until a promise has been fulfilled, you need to in advance tell JavaScript that this function is handling asynchronous events. And so a modifier for the function has to be involved as sync. So for these loading functions to be inside of setup, you need to make sure you proceed them with the await keyword and that you modify the setup function with the async keyword. So let's make those changes to this sketch. I'm just going to move this into setup. I'm going to delete preload. I'm going to add a weight here and I'm going to And this is giving me that clue, right? What's missing is the async modifier. And now the sketch works again. Now, let me show you one of the most important gotchas because I think this is a thing that if you're a teacher, your students are going to have this issue. If you're a student, you're I see it all the time. If I forget the async keyword, no big deal. It's going to kind of give me this nice error message saying await is only valid in async functions. So that's like a reminder. Oh, I need to put the async keyword. But what's more common, and I do this all the time, is to forget the await keyword now. Oh, look at this. Well, look at this. So, this you would not see in normal JavaScript. This is one of the reasons why we love P5. It was smart enough. And it a it says here, "Oh, did you mean to put await before a loading function? An unexpected promise was found. " Just for your edification, I behind the scenes disabled the friendly error system. And you can see this is the error you would get if you forget the await keyword. It's going to start the loading process immediately. Go to draw. The image is not loading yet because we didn't wait for it and it can't draw anything that hasn't been loaded yet. If I add a console log here, what we'll see is aha, it's a pending promise. I don't want a pending promise. A pending promise is not something I can draw. I want a fulfilled promise. So, I will add back in the await keyword. And we can see now it's waited to finish loading. It logged the image. Right? This is the image object that we're seeing here. And now it's drawing the image again. Now there is one more thing though that we have to ask. What if you actually wanted draw to start immediately? What if Choo Choobbot that image was 100 megabytes and I wanted to show a loading bar happening in draw while I'm waiting to load the image and then the image appears once it's loaded. This is where in p51 I would have used a callback. Let's look at how that works. In p51, I can call load image, not setting the result back to any variable. I could just start the process of loading an image and give it a name of a method that will be executed when the image is finished loading. This is the epitome of asynchronous code. We start a process. The code continues and then we write a function. That name has to match. When the image is loaded, it comes in the argument to the function. The image data is there in this variable data. I can set image equal to that data. So this is the asynchronous way without preload. I declare a variable. I start the process in setup. Now draw immediately starts. So draw is going and then at some point the image is loading. Draw pauses for a second. The call back happens. The data comes in. The variable

### [15:00](https://www.youtube.com/watch?v=0Ad5Frf8NBM&t=900s) Segment 4 (15:00 - 20:00)

is set. So in draw, what would I want to do? Since draw has already started, I have to do my own check. I have to check and see does the image exist already. In JavaScript any variable can be interpreted as true or false and the variable image is initially undefined and it doesn't get defined until it's set equal to the data that comes in. So this will evaluate to false while it's undefined and then eventually when the data comes in draw is looping it will not be false and it will draw it. I could put an else and draw a loading bar etc. So this is the methodology for doing that. So this is that code for 1. 0 but without the if statement. If I run it, it's giving me an error that it cannot draw this undefined image because remember it went straight from line five to the draw loop. But the callback hasn't happened yet. So I can add my if statement and there we go. Let me make a red background here. Let's see if we see that red background just for a blip before the image loads. There we did. A better way to write this might be with an else and this could be an animation. I could make, you know, a spinning wheel that says loading. You might be thinking, well, this is fine. Why? This is a good pattern. Why not just do it this way? Why switch over to async and await? So even though this looks good and callbacks have their place and and are useful a useful tool in programming with asynchronous events, what if what you were loading was not the image, but you were asking some other service to give you the URL for an image. Then when you got that URL from that service, you then need to ask for the image. If you want to sequence two things happening in a row, this is what's known as call back helm. You would first load the image, which then at some point would trigger this call back. And then inside of this call back, I'd have to write some code that calls another line that has another call back. And then I put the call back somewhere else. And if I want to have three things in a row, four sequence stuff, it becomes a nightmare. Dan from the editing booth here. I just want to cut in and let you know that during the live recording session for this video, I did a whole bunch of demonstrations out of order. And I think it would be good to show you right now what actually happens in p51 when you try to sequence a bunch of loading calls versus how clean and nice that is in p52. So there's this uh lovely API called the dog API dog. CEOd dog-appi. You go to this URL and you get a message back with a URL for an uh an image of a dog. So essentially what I want to do in this sketch is load the JSON and then get the message to load the image. But I can't do that in preload because preload doesn't work that way. Preload doesn't actually wait for the things one at a time. Preload only waits as a whole before setup is executed. So then you could say like, oh, I could use the callback for the load image because what I need to do is load the JSON in preload and then load the image with the JSON's message uh and got data. But this is really clunky. So this would work. Let's let me put the code in and make sure it works. Okay, let's run this. I got my image of a dog. But look how convoluted this is. I got to load the JSON and preload. Then I have to do a call back and setup and I got to have an if statement. I just want to like load these things one at a time in setup and then draw the image and draw. And you might be thinking, well, what if I didn't use preload? Like I definitely have to use the callback for the second step. What if I use two callbacks? Well, then I have an even worse problem. I have to load the JSON with a call back and then I have to call load image with another call back. So this also works but I have so much to keep track of the sequence. I first load the JSON then I have got data. Oh, and then in got data the data comes in. I call load image and then got image is the next callback. And I just can't keep track of what's happening where. And I've got like four different functions in this code. Guess what? Let me switch to p52 and use async and await. I'm going to make setup async. I'm only going to draw the image and draw. I don't need any of this. And I can just say let JSON equals await load the JSON. No call back. And it's going to wait to go to the next line of code. So I can say image equals await load image the message from the JSON. And I only need the image as the global variable. I can run this and I'm loading a doc. Look at that. Oh my go Oh my goodness.

### [20:00](https://www.youtube.com/watch?v=0Ad5Frf8NBM&t=1200s) Segment 5 (20:00 - 23:00)

It's so much nicer. I could just load things in sequence in setup with a wait and then wait for draw to run. Okay, now I'm going to go back to looking at how I could load an image in setup but not have that code be blocking and allow draw to begin immediately. So this was something that in p51 I achieved with a callback. And now how do I do that with async and await? All right. So, this is what we had before with async and a wait, but draw has to wait. How do I make draw not wait? Here's how you do this. What if I made my own function, right? I don't want setup to be a blocking function. No async property for setup. Instead, I want a separate asynchronous function. I'm going to call this function load stuff. I'm going to put this line of code here. I now have an asynchronous function that uses the await keyword to load the image from this file into this variable. I can now put load stuff here in setup. But now I can start the process, the asynchronous process of waiting for the image to be loaded with my load stuff call and have an if statement in draw where I checked to see if the image is loaded. There we go. — I want to pause and point out a very crucial detail here. Notice how I'm calling load stuff without the await keyword in front of it. That is why the code just moves immediately to draw. So I could put await in front of load stuff. The takeaway here is that if you want to load everything in setup before you get to draw, you use an async setup with await throughout setup. If you want setup to move directly to draw, you take out everything that's asynchronous from setup and put it into a separate async function and then use a regular setup. This way that separate function is loading the assets in the background while p5 moves directly to draw. All right, so this was admittedly a bit in the weeds and kind of long, but hopefully you got a sense of ah what is p52? How do I switch from one to two? and how do the patterns of preload and callbacks change to async and await? If you want to learn more or want to watch a tutorial that never refers to p51, just shows you all the steps and details about loading data in p52 with some extra things like loading in a sequence. And I'll also show something called promise. all. Um that's in the next video that you can find uh linked in this video's description. And uh you know thanks for watching.

---
*Источник: https://ekstraktznaniy.ru/video/20666*