Subtitles section Play video Print subtitles OK, here I am. So in this video, I'm going to talk to you about code comments and how you can write comments in your code for just you or your friend and the human beings who are looking at your code to read, or actually, to like quickly disable and re-enable certain lines of code, all sorts of exciting things you could do with code comments. I'm going to show you how to do that in the p5 web editor, but this is a universal concept. Any programming language or environment that you choose to work in will have a feature of a way of writing stuff in your code that is ignored by the computer that's executing the instructions and is just there for you to review if you like. Take a break for a year and you come back and remind yourself of something, so let's look at that. So anything that I write into the p5 web editor with a slash slash, immediately, that line becomes what's known as a comment. So let's look. Like what if I were to write something-- OK, so this is the green rectangle in the center. So the idea of a code comment-- and you can see that it is highlighted, it is gray, it does not have the syntax highlighting of the executed-- this means that when the computer is executing the instructions. And I never explicitly said this, but it's important-- line by line, one after another, it ignores this. That is just there for me the human being to read. So this can be useful. If you were doing a self-portrait, you might say, like, this is where I'm worked on my nose. And this is where-- this is the code for drawing my chin. And this is the code for drawing my ears. And you don't even have to do it as a sentence. So I could just say, like, you know, red, red circle. You might also write a note to yourself like later, I want to make this circle animate. And actually, a convention inserting this to write TODO, but that doesn't mean anything. But so, there's all sorts of things you could write in the code comment. So I encourage you, easier said than done, and I don't necessarily follow my own advice, but I encourage you to get in the habit of writing code comments. Your future self will thank you. It's certainly something that as a teacher I try to do as much as possible, because I want to explain the code in line so people can-- looking at it, can follow what certain pieces are doing. And typically, I put the comment that's describing what's happening after it. OK, so that's how code comments work. But there's another sort of neat trick to code comments that I'm not mentioning. Before, when I was showing you, what if I wanted to use noStroke instead of stroke? What I actually did was I deleted stroke, and then wrote noStroke in there. And I was able to sort of like undo my way back. But often, what I want to do-- and I'm going to do that right now-- often what I want to do is say like, let me quickly disable the stroke. And then show you noStroke. So here I'm kind of saving what I had before, because I might want to re-enable it. And then, and adding in something new. And then now, if I want to put the stroke back, I can delete that and I can delete the slash slash, and now the stroke is back. So and, I can even do things like, I can like highlight this whole section and I can say command slash and the whole thing is like commented out. I could say command slash again, and the whole thing comes back. So this is a really just useful technique while you're working to kind of speed up your workflow. You can kind of leave some stuff in your code that you don't want to see, but you might want to pull back, come back later. And you'll sort of figure out how to manage this best. But the primary reason for comments is to add things in your code about what you're doing. And this could be for teaching or could be notes to your future self. And I might say that things that you might want to consider doing is, you know, code, example, by Daniel Shiffman. You can do things like this. The Coding Train, maybe you put like a URL in here. Like this is the kind of thing maybe you have some information like, and it's what your license is, like please share and use. You know, there's-- technically, you can add a software license that's part of the comments. And I don't want to get too far down that whole like just explain to people what they can use it for, but this is the kind of thing that you can also use code comments for to put something at the top that's kind of announcing what it is, credits. And usually, I would do things like this code is based on everything I learned from Lauren McCarthy and Cassie Tarakajian, creator of the editor. You know, I would really often like-- I'm always crediting where I got my-- or got-- because much about coding is finding examples and changing something in the example, learning to code is doing that. And so I always like to try to give credit. You know sometimes they're saying, is there a legal requirement to give credit? With p5, everything is open source and licensed in such a way that all the examples that you do are not required under any legal anything to give credit. But it's nice to give credit when you can. I always try to. And if I forget to, if you see something I've made and I forgot to give credit, please let me know so I can add it. OK. OK, there's some more stuff. There's other fancier ways you can add comments, but I'm not going to go into that right now. I'm just noticing in the chat. So you know, all in good time. I can't get to everything in every video. So that's code comments. You are ready. If you are taking this somehow as a course, this would kind of be the end of the first module. You've learned a little bit about what p5 is, what JavaScript is, how to sign up for an editor account, how to draw shapes, how to set colors, and how to read error messages and add comments. So make a sketch, save it, share it, share it with me in the comments, share it on Twitter. Let's talk about ways that we can share these things with each other and I look forward to seeing what you make. And if you continue watching this series, the next step that is to come is going to show you about how to animate the stuff and interact with it with the mouse. OK, I will see you soon, and hope you enjoyed these videos. [BELL RINGS] [MUSIC PLAYING]
A2 p5 stroke slash credit editor write 1.6: Code Comments - p5.js Tutorial 6 0 林宜悉 posted on 2020/03/28 More Share Save Report Video vocabulary