p5.js Web Editor with Cassie Tarakajian
Hey. I'm Cassie cherry Cajun and I'm the creator, and lead developer of the p5.js, web editor, in this, video I'll show you an overview of the basic features of the editor. If. You're not familiar with it the p5.js, web editor is a website, for hosting, and creating, p5 sketches, it's, designed, to be beginner friendly you don't need to download anything, or, configure, anything to get started, just open it and you can go, for. More information, about how the editor got made feel, free to check out the welcome video in the video description also. I'm going to assume a basic familiarity, with p5.js, and web development, if you're, not feeling confident, about that I've linked a few resources, in the video description as well all, right let's get started. The. First thing you'll want to do is navigate, to the website which is that alpha, editor. P5.js. Org, or to, be moved into the future. Adjust. Editor, p5.js. Org, and you'll, see on the left your, code and on the right the preview, of your sketch, and so. In order to see the preview you'll hit play, and then it will render your p5.js, sketch on the right and to, stop it you just hit the stop button, and. So let's. Hit play again so you can we can see our results and let's say we want to change the. Background color, of our sketch from grey. To purple. So. We'd have to change this background function. Right, and add different arguments, so let's change let's make this a three, value color so it's gonna be red to. 2004. The green and 255. For the blue and. You'll. See that nothing's. Changed, and this is because we need to hit the play button again right and now it's purple and, so, if you don't like hitting play. Every, time you want to refresh the sketch you can click this auto refresh button and, then. We'll, see we, delete this and, then it will automatically, reload, as you type which is pretty nifty so. Let's add a little bit more the sketch will do ellipse. Let's. Put it out 5050, with the 50 pixels height of 50 pixels oh I, did, 550. And so. As, we would expect there. Is there's our ellipse and so, let's make it interactive too so, I'll do Mouse X. Mouse. Y. 5050. Great. Say. You're happy with your sketch and you want to save a copy of it so you could access again later or show it off to your friends then, you're gonna need to make an account so we, don't we're not logged in right now so let's create a new one, let's. Call our username. Shiny. Mountain. Just, come up with a shiny. Mountain. At gmail.com. Who, knows that that's a real email address we'll make a password. And. Sign. Up, cool. So now you'll see we're logged in because we, have it says hello shiny mountain in the corner and you'll also see in my account, and so. In that web editor you have all the basic features of logging. In and logging out account, saving, sketches, and all that, jazz. Now. You can, see if your sketch so what you'll need to do is go to file, save. And then you'll see this little thing comes up and it says project, saved and autosave, enabled, so, what's. That autosave, thing what that means is as, you, type and you work on your sketch it will save your changes as you go if you, save the sketch previously. It won't see that if you haven't ever saved, the sketch so, let's say we want to make let's.
Hitting The play button a, lot to refresh, your sketch and you. Don't want to you don't want to use this auto refresh because, you're you're, typing pretty slowly or what-have-you but this. Is getting annoying nothing up here the. Web editor has keyboard, shortcuts, so you could hit command, and enter if you're on Windows, would be control enter but I'm using a Mac so it's command enter and that refresh is the sketch you'll see when I hit that it. Does a little little white screen, thing and so if I hit stop I do shift command, enter this. Is for the stop it'll stop it so command enter start, shift command under stop and if. You're wondering how to figure out what all these keyboard shortcuts are there. In this keyboard shortcuts, pop up and, there are a lot more the. Ones I find really useful or, this tidy and save so, say this. Autosave, is not saving, often enough for you are. You just like literally, want to hit save as I I, do you, know hit command, s or, ctrl, s on Windows and I'll be project, saved. You. Can also use this code tidy, thing so just say like indentation. Is all weird, like, this you hit shift, tab. And, it, will indent, it properly I find that really useful. When. For, a lot of beginner. Coders kind of indenting, as hard and so be, trying to be trying to help someone in their sketches, all like this and I can't really figure out what's going on so use hit that and it's magically. Tidied, for you. Previously. I talked about some basic, things you can do with an account just like create an account log in save sketches, but let's talk a little bit more about, some. Other stuff you can do so, you, can see all the sketches you have saved by going to my account and then, my, sketches, we'll see we have the two ones we created, right the first time we create and then let me duplicate it it and. So, you can also get to the screen, by going to file, open. Right, so we could change back to the original, right. File, open, and go to our copy, just, even cooler. We. Can also, see. A bunch of example, sketches. That. Are included with the editor so we go to examples. If. You're, gonna check out get inspired, we, can do let's go to flocking. It. Hit play and we'll see this cool, flocking. Example. Then, we could we could copy of it right remember, I said we could duplicate, ones that we didn't that we didn't own, so we hit duplicate, right, now we have our own copy and that's saved to our account. Shiny mountain so if I go to my sketches, right, we'll see that in there now so I can go back to the. One I was working with before, the, next thing I'll show you is some basic, editor, settings. We could change pretty, simple but just who could change the theme if we want it to be dark, light. We could change our text size if, you want to be smaller and larger, we. Could also turn autosave, off we could change the indentation amount. Lots. Lots of different things. The. Last thing I'll show you is where, you go to like change your password, or email or whatever you go to my account and then. Settings. And. Right. You change your email here your password, username say, that the, last thing I'll talk about is. Settings. Here see it says login with github you can your are able, to create an account with Google or, github. Another. Feature of the editor is the sidebar which, you can use to access different files in the sketch and edit them so if you click on this arrow here, this, expands, the sidebar, image you'll see a bunch of different files, we've only been editing, sketch j/s which is the p5.js. Sketch, file and so. You could click on the HTML or, the CSS, if you needed to edit, those for any reason so, one reason we need to edit them is let's say we want to change the name of this file, we. Rename, this to sketch, underscore. Cool. Right. And then in order to get our HTML.
Text Based canvas and what this is is, we've. Been we've been looking at outputs, as purely, visual and if you click on any, of these which I won't demonstrate you. Can get some sound feedback as well as well as visual as, well as visual feedback and. Another thing about the. Editor, is that it's fully keyboard, accessible, so you could tap your the website and access. Any anything, on it thanks. For watching this. Video is being made with our first public, release of the web editor, and since, it is a website it is a living, breathing thing and it subjects, to change as we add features, and fix, bugs so, please, if. You would like to give feedback to the web, editor, or, report. Bugs or whatever please, check out in our video description. For how to do that and also. If you'd like to contribute you can check out how to do that in the video description as, well and thanks, for watching.