How to Comment Your Code in p5.js (1.6)

[@NatetheAceOfficial]

Thank you for dedicating a whole episode to comments. Some people think it's cool to obfuscate your convoluted code. It also shows understanding of the principals of the code. Very important not just for others, but when you come back to you code later, who knows what you were thinking back when it was written.

[@cainthunan3370]

You can also use /* ... */ for multiple lines comment

[@something269]

You can also use /* ... */ for less than one line comments

[@idealid1414]

So that you know that its multiple lines its helpful

[@thelavagod]

@임성훈 so that you wont waste line of code

[@angelcaru]

@@something269 stroke(255 /* This is the red value */, 0/* This is the blue value */, 200/* This is the green value */);

[@shekhawat5917]

Just watched the last video , I am having fun learning p5 ☺☺☺

[@angladephil]

+T LOVE In fact you learn JavaScript with the P5 librairy...

[@shekhawat5917]

@@angladephil true

[@hartsgrace1205]

thank you. thank you... thank you. I think you may have just set the course of me being able to change my life. I am truly grateful and will always remember these beginners tutorials, as being riddled with mental health issues, adhd, ect. learning was never something I was able to do and definitely not something I would choose to do nor ever even joy. I could go on and on but my point is although you may not even realize it you make a difference. even if its just for me I sincerely thank you. I'm on the train my friend next stop is to greatness

[@ShaunDreclin]

A note about using "// todo: blah blah blah" comments, some code editors will automatically generate a list of everywhere in your project that has a todo note on it, so it's easier to go back and find them later. Even if the code editor you're using doesn't have that feature, you can usually search the text of every file in a directory for "// todo:" and that will show you all the places you put it as well.

[@KZ-ui5yo]

now this and the error messages i have learned when i was learning scripting in roblox

[@reubencf]

// nice

[@65FM1Edits]

Hello from Japan!!!!!!!!!!!!!!! I LOVE your videos!!!! Make them for another 100000 years!!!

[@chrisjustin4115]

i feel like am in class, best learning videos ever

[@clipsus_clips]

This tutorial is 2 years late for me :) But it doesnt matter since i learnt most of the things from your other videos ;) Keep it up Dan!

[@EricJost]

Dan it would probably be a good idea to tell people about how different file formats comment differently (ie. the index HTML, or the style.css, or even for JSON files). As always love your enthusiasm and humor in your videos.

[@TheCodingTrain]

Great poiint!

[@b_3_boys921]

I thought he said he wouldn't be reviewing HTML.

[@sumbalkhan6816]

Your all videos are excellent!

[@nixpix19]

For learning to code, I really like the view: you are writing code to explain the comments to the computer, not to explain the code to the programmer. You can get in to thinking in terms of coding instructions by writing explicit comments first and fill in the exact instructions and functions later.

[@LogicalBeatss]

I want to say a neat feature of the console that I use in almost every project. Sometimes, i need to see what pixel my mouse is positioned at when drawing. At the bottom of my draw loop, i love to put the line "console.log(mouseX + ", " + mouseY);" It just tells you the mouses location every frame in the console

[@TheCodingTrain]

Thank you for sharing!

[@LogicalBeatss]

@@TheCodingTrain do you mind making a tutorial on how to import p5.js into webstorm. I've been trying for weeks and I can't get it to work

[@OonHan]

Magnificent! Very useful information that is helping me a lot! Choo choo!

[@icebird-v7j]

thank you for all of the coding lessons they are very helpful

[@jesseanakku]

Thanks for giving this easy to use with interactive presentation. Really appreciate it

[@harshsrivastava9570]

I am only watching this to give you views

[@gamingzone2114]

I have learnt a lot of from your videos.

[@doksc]

alert("Thanks for the tutorial");

[@neelakshbhatt2074]

he discribes all thing better than my computer teacher

[@eirikreiestad3682]

I have a problem with the Windows keyboard, because I don't know how to mark and put / in front of many lines at one time. 3:10 in the video. (Norwegian keyboard)

[@nicob8782]

Sir you are best

[@maryfiore5905]

Is there a way to make a grid so that it is easier to find the x and y coordinates desired?

[@goldthumb]

My dad, nearly 90 and not living with me, plays with interesting math problems every day. I wish he could follow Daniel and play with p5js. He might feel like being 19 again.

[@GabrielKakeKake]

In non-English keyboards, ctrl + / shortcut for Comment/Uncomment doesn't work... can you fix that???? Thank you

[@hakanatas]

did you solve it?

[@midnightrizer]

Code by comment is a Good coding Practice It saves much time later should you wish to create a function.

[@iainmacdonald7843]

where is the 1.7 tutorial? btw I'm really enjyoying the series keep it up :)

[@II-lw3rs]

Looking for the next video after this one. The one shown in the playlist is an older video (from five years back). Wondering if I’m missing something? Can anyone please help?

[@mer4801]

--->command slash is done using ctrl followed with +/ edit: done using my basic keyboard :)

[@mer4801]

@CartoonKanal ctrl and + and /

[@6stringcuber683]

This is really cool

[@wenlo6573]

Thank you. You are a teacher I appreciate. :) One question. When the comments are too long, how can I change the line automatically?

[@tobias5696]

Love these tutorials! One question: how to "command - slash" after marking multiple lines? Is that an apple thing or just possible on an american keyboard (layout)?

[@TheCodingTrain]

Is it perhaps CNTRL-SLASH on windows?

[@tobias5696]

@@TheCodingTrain Unfortunately not, Slash itself is written by pressing two keys . Thanks anyway :)

[@umayoq]

@@TheCodingTrain STRG+NumpadSlash (Windows)

[@Uttarayan]

I guess you got a french or czech keyboard, or any other langage using diacritics. As a french i got the same problem on azerty (you need shift for the slash and if you do shift+cmd+/ it triggers a finder shortcut :/ ) I have not tried yet but i bet the only solution is to switch your keyboard to qwerty

[@Driver_12T]

// It is very fun for me to learn p5!

[@badhairballer23]

Hey maybe someone can help me. The high lighting and than pushing "comment slash" doesn't work for me. If I do that the whole high lighted code gets deleted and I end up with one "/" . Am I doing something wrong? Thanks

[@angladephil]

I'm far away ahead of this (thx to you !), but d'u mean u recommend us to use the P5 editor ? (From France, poor English, excuse me).

[@rodrigocid8742]

How can we amplify all the parts of the image? I tried resizeCanvas, but it didn't work.

[@followthetrawler]

enjoying these Daniel - but are we now meant to be looking at 2.1 from a few years back? Or are you redoing some of these older videos using the web editor?

[@TheCodingTrain]

I may redo the 2.x videos and beyond as well, but I am not able to get to it now. For my students at NYU I'm having them continue onto the videos I made previously. If you notice anything very out of date, please let me know!

[@trowpaw]

How would I go about hiding a word, then showing an animation? I have tried every "hide" / "show" function that p5 offers. I know how to do it on normal html, but it keeps giving me an undefined problem. It definitely is defined.

[@luckywinner2517]

Where are 1.7,1.8,1.9,2.0

[@RonaldColeman990]

Hey, im pretty new to programming. I already started learning some java script, and then I came across your videos. Would I just confuse myself if I learned p5.js and java script at the same time? Should I finish that java script course doin on code academy first?

[@TheCodingTrain]

I think it's ok to do both!

[@YuvanshVarshney-i8k]

function setup() { createCanvas(400, 400); } function draw() { background(200,60,0); rect(50,60,100,100,) rect(250,60,100,100,) fill(200,0,0) rect(125,300,150,10,) fill(200,200,0)} this is it a geometry dash block

[@herrjose]

thank you!!!

[@mralcina8726]

How do you comment out multiple lines at once on Windows like Dan did at 3:08

[@ahmadyogi1340]

if your text editor is support to do this, just block all the code you want it to comment and type //, it will automatically do to all lines of code you've just blocked(sorry for bad english)

[@ryanrachic5150]

Aye bro question. Trying to get into basic coding, doing a class on it in highschool but want to take it home and work on my own projects. How do I download JavaScript? Is it a simple download and use, do I need a driver, is it an online tool? Have absolutely no idea, but I’ve seen some vids of yours and prob will keep watching them so I figured I would ask

[@TheCodingTrain]

This workflow video might help (although it's a ton of extra stuff): kzbin.info/www/bejne/fouXdWatebeUm8U I have some new ones coming out next week too. And you can use the p5 web editor at home by just going to a web browser!

[@turbles454]

wheres the 1.7 tutoreal? i realy want to animate and all the other tutorials a re way more confusing than yours

[@calituz]

The next video in this serie is 3 years old. Are you going to re-do it?

[@TheCodingTrain]

I am not sure yet. At the moment I don't think I have the time to re-do all of the videos and the concept still apply. Would love feedback for how the transition is from this video to the older ones.

[@mav7677]

could you make a video where you explain why i should start learning coding with p5.js and not for example java/python etc.

[@dannynomadic]

What video comes after this one??

[@brunogarromontenegro6064]

How can you add a textbox so that anyone can input a numeric value and with the pressing of a button perform an equation?

[@lmyers26]

You might check out Java for that use case...

[@wonderinho]

did the series just end?? is there no more parts?

[@TheCodingTrain]

Full playlist: kzbin.info/aero/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

[@mikeystir3333]

//Code project for learning //by Mikeystir //Taught to me by TheCodingTrain function setup() { createCanvas(400, 300); } function draw() { //this is the whole picture on the canvas background(0, 155, 255); rectMode(CENTER); rect(200, 150, 100, 100, 90, 100, 10, 90); fill(255, 125, 50); }

[@mikeystir3333]

//I couldnt add the rotate funtion rotateY(frameCount * .1); //becuase would need to go in and add WEBGL to the Canvas function setup() { createCanvas(400, 300, WEBGL); //because it would cause the rectangle on the canvas to not be center regardless of using rectMode(CENTER); //Code project for learning (error) //by Mikeystir //Taught to me by TheCodingTrain function setup() { createCanvas(400, 300, WEBGL); } function draw() { //this is the whole picture on the canvas background(0, 155, 255); rectMode(CENTER); rotateY(frameCount * 0.01); rect(200, 150, 100, 100, 90, 100, 10, 90); fill(255, 125, 50); }

[@jantheil9239]

Where can we get this wallpaper?

[@Likeaboss-md8vk]

Bro how to make a triangle??

[@alexap1635]

I know I probably sound stupid, but how do you select a line so quick? I think you are using a short cut.

[@wenlo6573]

shift + arrows (mac os)

[@Mkoxc]

SLASH COMMAND IS CTRL+/(numpad slash)

[@aungmyatmin7939]

I think the next usage of the comment is /* * * */ You can write many sentences beside "*".

[@duni7584]

I will pay u to be my teacher please xD

[@EthanJbleethan]

What command slash?

[@luckywinner2517]

Add again these parts bro😊

[@Unlock-o7w]

Hello, where is 1.7?

[@shresthagarwal5103]

How you are zooming

[@6754bettkitty]

There was a time where i did not write comments. I quickly realized how helpful comments were. For example, there is a boolean that is named as a weird acronym in one of my school projects. i wished i would have commented what the acronym meant because i do not remember what it was supposed to mean (exactly). Big OOPS!

[@knowledge_4203]

rect(100,100,100,100,10); ellipse(100,100,100,100,100,); noStroke(); just practicing

[@d_sanu]

Anything enclosed within /* ...*/ also works in p5!

[@JacopoVoltolina]

hey bro when is the new second unit!! not the old...

[@TheCodingTrain]

I don't have time right now to redo part 2 (and it almost all still applies) so I wouldn't wait and just move onto the older videos.

[@JacopoVoltolina]

@@TheCodingTrain k broo

[@eirikreiestad3682]

How to do command slash on pc?

[@luluc1493]

you can't

[@mer4801]

@@luluc1493 you can ctrl followed with +/

[@ritvikgarg7440]

Ctrl + /

[@barbarap.t.2381]

function setup() { createCanvas(400, 400); } function draw() { background(100); stroke(100,1,2); strokeWeight(10); square(121, 14, 12, 121); line(30, 20, 85, 20); stroke(126); line(85, 20, 85, 75); stroke(255); line(85, 75, 30, 75); arc(50, 55, 50, 50, 0, HALF_PI); noFill(); arc(100, 55, 60, 60, HALF_PI, PI); arc(1, 55, 70, 70, PI, PI + QUARTER_PI); arc(200, 55, 80, 80, PI + QUARTER_PI, TWO_PI); line(1221, 21, 12, 121); } try all of that

[@weld3o3]

What's it supposed to be 🤔

[@Unlock-o7w]

Okay...i tryed..🤨

[@yamantarakji]

did you get a new macbook?

[@Flor12344]

yes he did

[@artefakt101]

What about keyboard shortcuts for non-american keyboards? For example, on my Swedish keyboard the keys for "/", "[", and "]" do not have separate keys. To get "/" you need to press "Shift"+"7". For "[", or "]" you need to press "Alt Gr"+"8" or "Alt Gr"+"9". But then the shortcuts don't work. E.g. "Ctrl"+"Shift"+"7" does not "comment" the selected program lines, though this is the equivalent of pressing "Ctrl"+"/" on an american keyboard. It had been better to have shortcuts that use keys that are available on most western keyboards.

[@theodor5098]

I have a norwegian keyboard but to fix it u should just turn ur keyboard language to english. Sorry for bad spelling, im not so good at speaking english.

[@dafreedomfita]

What comes after tutorial 1.6?

[@TheCodingTrain]

here's the full playlist! kzbin.info/aero/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&app=desktop

[@dafreedomfita]

Thanks so much, I have been using your tutorials to achieve one of my lifelong goals, and it was never done before. Thanks champ!

[@maxkrause7678]

Your videos are brain candy.

[@razametaza]

It's documentation :)

[@awalvie1060]

I need them rainbows in my life. Come'on

[@黎阳-g5m]

Hello,shiffman. Now i'm watching the video 2.1 of p5.js serie. However i found all the coding environment has changed, Instead of using the web editor,it seems that you use another tools to run the code. whats that? and how can i get and use the same tools on windows10 platform? thanks a lot.

[@TheCodingTrain]

Unfortunately I haven't had time to redo all of the beginner videos. The concepts should all still apply, however. I suggest using the web editor throughout al the videos. If you want to find out about other tools I am using now: kzbin.info/www/bejne/nXvEZ6qonp2MhLM (Full playlist: kzbin.info/aero/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X)

[@angelcaru]

/* Code Comment */ let val=3; //function(x){return x*x}

[@timduggan4464]

the game is not working

[@gemapamungkas7296]

// i don't know what i am doing. please send help god.

[@foisalahmed07]

Anyone noticed his typing speed???

[@ricoq2008]

command+slash on mac keyboard = ctrl+slash but slash on numbers keyboard....

[@angladephil]

If I don't mistake : function setup() { createCanvas(400, 400); // it's where I draw } This comment at the end of the line is valid too, right ? (from France ... etc ...)

[@ShaunDreclin]

Yep, you can put a comment at the end of a line and everything after the // will be commented out. You can also put a comment anywhere in the middle of a line by doing something like let x /* comment here */ = 5; or doTheThing(/* comment */ 42);

[@shekhawat5917]

Make the RANDOM function video fast

[@sarthakk.c7928]

2020

[@uushk6631]

you so cute!

[@Flor12344]

.

[@mika34512]

Mag ich nicht

[@fabianmarker355]

Ich mag dich nicht