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.

Make This not interactive, we'll change this back to 50. And. 50. And. Then we hit play. Again we don't and. It. Says saved 35, seconds, ago but if we wait eventually. It will say save just now and the. Web editor saves about every, 30 seconds or so so. If we wait and. Wait for it Oh save. Just now great, and now. You, can also change, the title of your sketch so it generates a title for you in this case it's called wrong. Oil, let's change it to something that's more descriptive. For us so let's call it p5.js. /. Editor. Overview. Video. Oh, missing, an e here, great. So, now, it's saved and you can change this title as much, as you want so, maybe, we could put in at the end so. Cool. Because. It's so cool and you'll. See the, little thing comes up that says it's, saved again. So. Maybe now you're ready to like show this off you're feeling confident, about it and can go to file share and. So, you'll see three different links that you can share this, first one is an iframe, link which allows you to embed it in a website or, a blog or, anything you might want the, second link is a full-screen. View so if we open a new tab paste, that Lincoln will. See our sketch without the editing, environment and this is also the version that, is included, if you. Copy that iframe, link. The. Third one is the edit and so. We'll see that that is just the, same, as what we had before our sketch. Lastly. Let's, say, you. Want to make a copy, of this sketch you're happy with it but you want to add more features and, you want to keep this version then. You'll, go to file. Duplicate. And this makes a new version of the sketch you'll, see our title, of the sketch was changed to p5.js. / video p5.js. Editor, overview. Video so cool copy it's a little, bit of a long title and. It's. Also saved. And. So you can also, duplicate. Other. People's, sketches, so say you're on your. Teacher, sketch, or a friend's sketch you can go to file, duplicate. And it will create a version of theirs as well. Now. I'm going to talk about a feature of the editor called the console you. May have been looking at it in the low left-hand corner I've been wondering what it is it's. A console, that allows you to see output, from the JavaScript code it's, different, from the. Sketch. Over here and this is this is on the HTML. Html5. Canvas, and, this. Is just, output, from the JavaScript and you can send stuff. To it by using a p5, function, called print, and. You could do something like hello. World, rate. And, then. Let's hit play again and. We'll see now in our console, it says hello, world and. So we could print a bunch of different things like let's, say we want to print. Hello. Mars. Like, we really want to say hi to all of our planets. I'll see it's this hello world and the hello Mars we could also put this print statement in the draw loop and then it would print a lot so we could say print, hello. Saturn. Right. And then it would be printing every frame will probably see like a lot oh yeah, hello Saturn very, many another, cool thing about the console, is that allows us to see errors, in our sketches so. Let's purposefully.

Let's Delete this and let's purposefully. Create, a syntax, error so if we hit play, we'll, see that the console, has now stood out uncaught. Syntax, error missing, close parentheses, after argument list sketch line four so it's highlighted, line four and is telling us that we're missing a close parentheses, well because. We aren't so if we add that back in we'll, see no. More error just our print statements, as we, expect, it, another. Cool feature of, p5. Which, is utilized, in the web editor is this friendly area system so, let's. Purposefully. Create a scenario, that will, cause. A friendly, error to be output so if we hit play, we'll. See this thing in the console I'm gonna stop it so it doesn't keep keep. Printing it it says. P5.js. Says, ellipse. Is expecting, a number four parameter, to zero based index received, an empty variable, instead right so ellipse needs at least three parameters. And this is a friendly error telling us about that so, a pretty nifty. Another. Feature of the editor, is that it will catch infinite, loops for us if we accidentally, create one so we don't crash, the editor. So. Let's add that, back, in and. Then, let's do. Wael. True. Right, let's create an infinite loop don't. Really need to put anything in the body if, we just hit play oh and. It says, exiting. Potential, infinite loop at line five to disable loop protection, add slash, slash no protected, to your code right so would add that in if we, had created it if we hadn't created an infinite loop let's say a block. Of code was taking, a while to run and we, know it was not an infinite loop this happens a lot with really, big. Big. For loops like as for I less, than ten. 50,000, or something, that, happens a lot but we know this is an infinite loop so let's not add it but it would look something like, no. Protect. Great, but, let's not play it because then the web editor will crash and we don't want that the. Last thing I'll talk about is the linting, errors, and warnings, so you. May have noticed that when I created, the syntax, error highlighted. A few lines this, is because there's linting, which analyzes, the, JavaScript, statically, and tries to find errors if, there are any and point us to them so we don't. Run. Broken, code and so if we highlight over this will see it says expected, closed parenthesis and saw closed curly brace and so right we need a closed parenthesis it's, letting us know that we need one we, close it and then we hit play, and our, code works. Another. Feature of the web editor I use a lot is the keyboard, shortcuts so say, you're, you're.

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.

To Load it we need to change that name so you changed this source just sketch underscore. Cool is. And then it would actually work so if we left it in. Momentarily. Just, leave that out right and then it doesn't load but. If we. Add an underscore, cool again then, it works and if we save it then. It saves all the. File. Titles, tool and this this works really just like a file system on your, as you would expect. Now. I'm going to talk about some other things you can do with the sidebar you can create, new files so let's say we want to create another JavaScript. File we. Go click on this this carrot, here and we do add file, and let's call it um hello. Hello. Dot. J s let, me click Add file, and we'll see that it created another, file down in this list over here and. Then if we click on it we can edit it and let's just add, some. JavaScript in, here we could do console, dot log which. Is actually, the. Same as. Print. In p5.js. If you do console.log. Hello. From. Hello. Dot, j s right, because that's where we are and. Then uhm if we hit play we won't, see that because we didn't add it to the HTML, file so we got to go back at HTML. We can use our nifty, sublime, text keyboard, shortcuts, and Bo shift command D chef. Candy right, that peers and we can do. Hello. DJ, s and then we should see it in the console right it says hello. From hello, dot J s. You. Can also delete, files you could go to hello. Click, it and then do you actually don't have to be selected, on to delete oh no you do have to be select on to delete it you can highlight. It and then click delete, and that's it are you sure you want to do it and you're like, absolutely. So, you delete it ah, go, back to index.html. Delete. This from here. And. Then your sketch will be as it. Was before. You're. Also able to add different files science, JavaScript, files to your sketch this includes, CSS. JSON. Files CSV. And other other text, files but you can also use media like images, videos. Fonts, and now I'm going to show you how you would upload images, to your sketch. So. If you click on this arrow here, and you click Add file. Then. You'll see this section here it's, as drag. Files here, to upload or click to use the file browser so I could click to use the file browser I'll see them good click, one of these or upload it but let's drag. One in so if I go to downloads. I can use this unicorn image, I had downloaded already, and, then we'll see it got added to the sidebar over here so. Now we can use it in our sketch and, if you're familiar with p5, you know how to load and use an image probably. Seeing this before you, depart image, use. The preload, function. To, load it before your sketch runs you're going to image. Equals load. Image. You, just put the name of the sketch this works exactly like the. File browser in your computer just put the name. Since it's in the root of the, folder, and then, in draw. You, would do image. Choose the p5 function, image the. Name of the image and the position right 0 0. Right. And. Then our unicorn appears, it's kind of off because our the size of our canvas is weird but it's there and we can use it and. So. What. If. Let's. Let's show off using folders. With this you let's say like you maybe have like 10 images and this list, is getting pretty long and you want to like organize, your sketch a little bit you, create you could create a folder. Let's, call this, assets. Add. Folder. Then. You select it and you click Add. File. And. Let's. Add. This other file to our sketch which is a cat. That. I downloaded ahead of time and. Then. Let's. Use it in our sketch so we'll add it use it in the same way as the unicorn so, we'd do far. Image. 2. Then. When we're loading it we need to put in the full path which includes the folder. And. So, we could do image, 2, equals. Load, image. Asks. About the, e here image. And. Then assets. Slash, cat. Dot, PNG this, is case-sensitive, also. And. Then in draw. We, would do. Image. Image. Two. Zero. Zero. And. There. We have it this beautiful composition. Of the unicorn, coming, out behind a cat so, so, beautiful. The. Web editor is also fully accessible to folks with low vision or blindness who don't use the mouse or who use a keyboard for navigating, through the website and then I'm gonna talk through a bit of these features, just just a little bit and we have a, another. Video that explains, in depth the accessibility. Features of the website and that will be that. Video is made by the creators. Of those features so let, me just show these off super. Quickly if, I click on this. And then you'll see that you know under themes there's another theme called high contrast, which is a little bit, easier. To read a little little brighter. And. There's. Also another tab called, accessibility. And this, has a, lint. Warning sound which you can turn on which will have, a little ping, anytime. There's linting, errors and there's also a section, called accessible.

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.

2018-09-08 22:58

Other news