If someone is wondering what's the difference between _parameters_ and _arguments_ : *Parameters are variables declared* within a function definition _function drawCirle(parameter1, parameter2, ...) {...}_ *Arguments are the values passed* when calling an existing function _drawCircle(argument1, argument2, ...)_
Shiffman, u are the best dude, have been subscribing to many youtube channels that teach programming, but for the 1st i hit an amazing channel.The way u make programming so fun with a lot of cool examples. Thanks sir
Is this profile picture from the video of an old song by Mahir Zain, it was probably called "number one for me".. because if this is true, then I would be impressed by my own memory lol
A thing is missing here! *Viewers may wonder why calling functions before their definition works* , the reason is traditional functions are *hoisted* , hoisted means they are raise at the very top of the code by the JavaScript interpreter before running the code. Another thing: in ES6 there is a *shorthand way of defining functions* , the so called *fat arrow* : Traditional function: _function name(parameter1, parameter2, ...) { [Your code here] }_ Fat arrow: _(parameter1, parameter2, ...) => { [Your code here] }_ *NOTE* : There are a couple of *differences between traditional functions and fat arrows* : .1 Traditional functions can use a special keyword _this_ (useful in Object Oriented Programming); .2 Fat arrow are _not_ hoisted (look line #2 for the hoisted meaning).
@@adriansrfr Code always runs in sequence; from top to bottom. The function is defined at the top as it is hoisted to the top even if you have something there. We can't see it but the JavaScript inter[reter reads the functions first.
I literally just emailed my professor asking about this. We've been working on HTML this semester with tags that reference JavaScript or CSS documents, so when he said that HTML reads from top to bottom, I got really confused that we were defining functions after we called them. We didn't do any fat arrow coding this semester (it was a rather basic class, although I'm a dumb-dumb and am struggling with even the easy stuff), but I imagine it'll come up at some point.
as the videos on the playlist go on , yuo become more and more serious lol XD !! love your videos anyways and i am still watching the videos in the playlist in sequence !! love your videos !! hopefully, i wish , i will be finishing the playlist tomorrow or day after and i started just yesterday lol
Was there any significant reason in setting yspeed equal to -3 rather than 3 in the ball object? As long as you multiply it by -1 below, it should net the same result, correct? Or was it more like a habit - and if so, is it a good one? From what I can discern, it just makes the ball start 'upwards' rather than 'downwards'.
Hi there, when doing this tutorial, i get a message in the console that 'move' is a reserved function for p5. i did not see this pop up in your console, maybe it was added after you made the vid? anyway, really great tutorials, thanks for putting in so much effort, much appreciated !
Thank you so much for the videos! Your skills to explain these processes are awesome! One quick question: I do not get the same colors for the different elements of the syntax. Is that customization you did or the P5 editor version? Cheers!
Hello! i am making a whiteboard app so now i am a child so i don't know so much but i want to ask you that how to put button a function that means when i am making a line then i have clicked on button change colour but now line colour is not changing to random so....can you just let me know how to do and also can you tell how can i ask you question frequently because i have started learning just few days back....hope you will reply me soon.... Thank you
Is it generally better practice to call the animation function before the display function (as in this video)? As it goes through draw here I understand that it calls move, bounce and display every frame so swapping the order around doesn't make any difference, but it terms of better practice, does it make much difference? Maybe just choose whether I prefer draw or animate first and then stick with that in future? For example - I would think of the above sketch as drawing it to screen first, then move the ball, then bounce the ball, so display(), move(), bounce(). Again I'm aware that in this case it makes 0 difference to the execution of the code because all three get called before draw 'draws' it to screen, but yeah - in terms of project workflow, is one generally more accepted than the other? Thanks for the help all :-)
draw()/animate() is a special function which is called by p5 automatically, usually javascript wont mind when you call them as functions are all hoisted so you can execute at will! fistPump();
It matters. In one video I remember that Dan said that some functions need to be called first than others. Once I had a program and this program had a particle with a velocity and acceleration and the particle behaved one way when the velocity was calculated before the acceleration and behaved completely different when the acceleration was calculated before the velocity. I think it had to do with the way the physics works but I don't really know. I don't know if you see my point. Hope it was clear enough.
2D movement has an X and Y component. Even vectors with a "single direction" require I and J components. In this example, the X and Y variables will go negative and positive at different times. You could theoretically do this as a function with one speed parameter but it just requires extra work to calculate X and Y directions. It's best to leave them as seperate variables. You also get the added bonus of having those variables already handy if you want to implemement acceleration.
Why the ball is bouncing after passing through the boundary some distance. Like it doesn't bounce right after it touches the boundary, it goes past the boundary and then rebounds. Can someone explain?
you don't have to, it's a just another way you could do it more organized. you could instead just have global variables at the top for each value instead.
Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
can anyone please answer me how to write nested function within a function? I mean in processing you just cancel the void and add a ";" after "()" to write nested functions but what about p5?
P5 is javascript, works more like this function foo(){ //still should work bar(); //do stuff console.log('fist Pump!!') //level 2 function function bar(){ console.log(' fist PUMP!') } //still works bar(); }
I almost never put a semi-colon at the end of the line, usually because I forget too and I'm now in the habit of it, but does it really matter? I don't get any errors, and it has no effect. Should I try harder to put one at the end of a line?
It does, actually. Semicolons may not be very strict here, but many programming languages may drive you crazy by chasing after those darn semicolons. Its a bad habit.
Dernbu is right, Semicolons are included at runtime by the javascript engine which is helpful sometimes, but other times will create lovely bugs for you to untangle. Add those semi-colons to show the javascript engine who's boss.
I'm now fully in the habit of using semi-colons, which has proved very useful, as I'm not starting to code processing a little, since it is more powerful!
Code should be here! github.com/CodingTrain/website/tree/master/Tutorials/P5JS/p5.js/05 If not, file a GitHub issue here! github.com/CodingTrain/website/issues
Can we also have nested functions in p5? BTW I was going through your which is awesome, but there is no link for 2nd week in that page. Parallely I was also going through Nature of Code, which is like bible for physics operations for one who likes processing. Implementing these ideas in p5 will have no effect, I suppose. OR are there any differences?
This will not teach you what function in js is. Forget it. It is too complex and based on a specific p5 librabry shit. It works only if you get a grasp of the the p5 library and wish to do stuff using it. Dont be fooled bro.
If someone is wondering what's the difference between _parameters_ and _arguments_ :
*Parameters are variables declared* within a function definition
_function drawCirle(parameter1, parameter2, ...) {...}_
*Arguments are the values passed* when calling an existing function
_drawCircle(argument1, argument2, ...)_
Thanks bruh
Shiffman, u are the best dude, have been subscribing to many youtube channels that teach programming, but for the 1st i hit an amazing channel.The way u make programming so fun with a lot of cool examples.
Thanks sir
Is this profile picture from the video of an old song by Mahir Zain, it was probably called "number one for me".. because if this is true, then I would be impressed by my own memory lol
A thing is missing here!
*Viewers may wonder why calling functions before their definition works* , the reason is traditional functions are *hoisted* , hoisted means they are raise at the very top of the code by the JavaScript interpreter before running the code.
Another thing: in ES6 there is a *shorthand way of defining functions* , the so called *fat arrow* :
Traditional function:
_function name(parameter1, parameter2, ...) { [Your code here] }_
Fat arrow:
_(parameter1, parameter2, ...) => { [Your code here] }_
*NOTE* :
There are a couple of *differences between traditional functions and fat arrows* :
.1 Traditional functions can use a special keyword _this_ (useful in Object Oriented Programming);
.2 Fat arrow are _not_ hoisted (look line #2 for the hoisted meaning).
Thanks for the excellent info!
You still didn't give the reason. You might as well as just said the reason functions are at the top, top just means not at the bottom.
@@adriansrfr Code always runs in sequence; from top to bottom. The function is defined at the top as it is hoisted to the top even if you have something there. We can't see it but the JavaScript inter[reter reads the functions first.
I literally just emailed my professor asking about this. We've been working on HTML this semester with tags that reference JavaScript or CSS documents, so when he said that HTML reads from top to bottom, I got really confused that we were defining functions after we called them.
We didn't do any fat arrow coding this semester (it was a rather basic class, although I'm a dumb-dumb and am struggling with even the easy stuff), but I imagine it'll come up at some point.
You are the Yoda of P5 and JS! Thanks for doing these videos!
hits the corner!!! 7:52
ball hits the corner :D
And 12:12
ahh yeahhhh
and 5:03
@@miikey_lol and..................?
Bravo!!!! Each explanation is better that one before, it is like starting to fine tuning to your way the present contents. Great!
move() is now a reserved function. Viewers can use moveBall() instead.
thank you so much for the tutorials!
you're welcome!
Love this tutorial series! And I loved this P5 editor. Only thing I missed was code completion.
why do I love u and your videos so much?
I like this guy so joyful makes me wanna learn more things.😊😊😊
Daniel you are the Doctor who of coding... flibidifloo! p.s. love your work
Paused it at the right time. @3:25
a quiz today. hope i can do well. have watched this for many times...
as the videos on the playlist go on , yuo become more and more serious lol XD !! love your videos anyways and i am still watching the videos in the playlist in sequence !! love your videos !! hopefully, i wish , i will be finishing the playlist tomorrow or day after and i started just yesterday lol
wow you are very good at explaining ty for this
100th comment, also watching in seqeunce. Thanks, I learned a lot!!
I am only now learning but I love how short the videos are
Corner shot @ 5:04!!
Ur classes r so intrstng
My ball isn't bouncing, although I've put in the same code as you. Any advice?
Was there any significant reason in setting yspeed equal to -3 rather than 3 in the ball object? As long as you multiply it by -1 below, it should net the same result, correct? Or was it more like a habit - and if so, is it a good one?
From what I can discern, it just makes the ball start 'upwards' rather than 'downwards'.
5:03 Wuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuh
Hi there, when doing this tutorial, i get a message in the console that 'move' is a reserved function for p5. i did not see this pop up in your console, maybe it was added after you made the vid?
anyway, really great tutorials, thanks for putting in so much effort, much appreciated !
Thank you so much for the videos! Your skills to explain these processes are awesome!
One quick question:
I do not get the same colors for the different elements of the syntax. Is that customization you did or the P5 editor version?
Cheers!
Yes, probably the p5 editor version!
awesome teacher
Excellent 😊
8:30 you are welcome
good video. Thank you. You very nice guy
Hello again. This also doesn't work when I do it; the circle appears, but doesn't move! Unknown variables again??
x2
Hello!
i am making a whiteboard app so now i am a child so i don't know so much but i want to ask you that how to put button a function that means when i am making a line then i have clicked on button change colour but now line colour is not changing to random so....can you just let me know how to do and also can you tell how can i ask you question frequently because i have started learning just few days back....hope you will reply me soon....
Thank you
Is it generally better practice to call the animation function before the display function (as in this video)? As it goes through draw here I understand that it calls move, bounce and display every frame so swapping the order around doesn't make any difference, but it terms of better practice, does it make much difference? Maybe just choose whether I prefer draw or animate first and then stick with that in future?
For example - I would think of the above sketch as drawing it to screen first, then move the ball, then bounce the ball, so display(), move(), bounce(). Again I'm aware that in this case it makes 0 difference to the execution of the code because all three get called before draw 'draws' it to screen, but yeah - in terms of project workflow, is one generally more accepted than the other?
Thanks for the help all :-)
draw()/animate() is a special function which is called by p5 automatically, usually javascript wont mind when you call them as functions are all hoisted so you can execute at will!
fistPump();
It matters. In one video I remember that Dan said that some functions need to be called first than others. Once I had a program and this program had a particle with a velocity and acceleration and the particle behaved one way when the velocity was calculated before the acceleration and behaved completely different when the acceleration was calculated before the velocity. I think it had to do with the way the physics works but I don't really know. I don't know if you see my point. Hope it was clear enough.
Could someone please explain to me why it's necessary to have two speed variables? Is it just to give up some variety to the balls movement?
2D movement has an X and Y component. Even vectors with a "single direction" require I and J components. In this example, the X and Y variables will go negative and positive at different times. You could theoretically do this as a function with one speed parameter but it just requires extra work to calculate X and Y directions. It's best to leave them as seperate variables. You also get the added bonus of having those variables already handy if you want to implemement acceleration.
Why the ball is bouncing after passing through the boundary some distance. Like it doesn't bounce right after it touches the boundary, it goes past the boundary and then rebounds. Can someone explain?
The ball bounces when its centre hits the border, not its outline. You can correct by subtracting/adding the circle's radius.
why when I write typeof ellipse(), it returns object?
i need help. it says display() ; not defined when i put it in the draw function 10.34 pls helppp
check the display function to see if it has the right syntax - maybe a curly bracket is missing or something?
This var ball ={} is not working now. Do we need to use class and object?
you don't have to, it's a just another way you could do it more organized. you could instead just have global variables at the top for each value instead.
I can't make the code work on p5.js Web Editor. Why is that? The logic is correct and I've no error messages.
Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
can anyone please answer me how to write nested function within a function? I mean in processing you just cancel the void and add a ";" after "()" to write nested functions but what about p5?
P5 is javascript, works more like this
function foo(){
//still should work
bar();
//do stuff
console.log('fist Pump!!')
//level 2 function
function bar(){
console.log(' fist PUMP!')
}
//still works
bar();
}
function setup (){
ellipse(20, 20, 20, 20)
}
what sort of parameters can Setup and Draw take?
+andrew kim setup() and draw() by definition do not take any parameters.
5:01 The ball hits the corner!!
I almost never put a semi-colon at the end of the line, usually because I forget too and I'm now in the habit of it, but does it really matter? I don't get any errors, and it has no effect. Should I try harder to put one at the end of a line?
It does, actually. Semicolons may not be very strict here, but many programming languages may drive you crazy by chasing after those darn semicolons.
Its a bad habit.
+Dernbu Ok, thanks I'll try to start using them more often now :D
Dernbu is right, Semicolons are included at runtime by the javascript engine which is helpful sometimes, but other times will create lovely bugs for you to untangle. Add those semi-colons to show the javascript engine who's boss.
I'm now fully in the habit of using semi-colons, which has proved very useful, as I'm not starting to code processing a little, since it is more powerful!
Goel lmao same, but semi-colon helps you divide the lines in case the code lines became a single line
Typed the exact same code and it didn’t work for me and the gitnub link just gives you the video information :( I’m stuck
Code should be here! github.com/CodingTrain/website/tree/master/Tutorials/P5JS/p5.js/05 If not, file a GitHub issue here! github.com/CodingTrain/website/issues
put these three user define function into a for loop :)
"Flibidifloo"
Can we also have nested functions in p5?
BTW I was going through your which is awesome, but there is no link for 2nd week in that page. Parallely I was also going through Nature of Code, which is like bible for physics operations for one who likes processing. Implementing these ideas in p5 will have no effect, I suppose. OR are there any differences?
+Daniel Shiffman Thanks for sharing, going through it, enjoying.
deepank verma I m also trying to figure out how nested function works...plz give me the answer if u are able to find it.
God work
why do you always start writing on the top right corner on the white board??
youll think he get it by now right?
Thanks you!
So. Setup and Draw are self-called functions . . ? Cause, you are never calling those functions. YET there they are.
p5.js calls them for you behind the scenes.
It lives somewhat in us ok.
Thanks....
I need a like as well:-P
should I know how to make a bouncing ball
you need......
yes
me this entire video:
/watch?v=RTwvbVbNMNw
Nooooo your beard
Uh is this roblox scripting or...?
That crap, don't do! Hard drives-- are used, by outside systems-- CDs have no, chips for work-- in electricity.
This will not teach you what function in js is. Forget it. It is too complex and based on a specific p5 librabry shit. It works only if you get a grasp of the the p5 library and wish to do stuff using it. Dont be fooled bro.
5.1: Function Basics - p5.js Tutorial ----- "p5.js Tutorial"
Excuse me. The title LITTERALLY SAYS p5.js tutorial. Also, the syntax he is teaching is NOT specific to the library. It is a part of JS.