This video introduces Object-Oriented Programming in JavaScript with ES6 classes and the p5.js library.
Next Video: https://youtu.be/rHiSsgFRgx4
Support this channel on Patreon: https://patreon.com/codingtrain
To buy Coding Train merchandise: https://www.designbyhumans.com/shop/codingtrain/
To Support the Processing Foundation: https://processingfoundation.org/support
Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics
Contact:
Twitter: https://twitter.com/shiffman
The Coding Train website: http://thecodingtrain.com/
Links discussed in this video:
ES6 playlist: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YgpA3Oht-7B4NBQwFVe3pr
Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code
p5.js: https://p5js.org/
Processing: https://processing.org
For an Intro to Programming using p5.js: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
For Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Help us caption & translate this video!
https://amara.org/v/dXlY/
Original source
34 responses to “6.2: Classes in JavaScript with ES6 – p5.js Tutorial”
Watching this while listening to Kroyclub's album "Raw Rave 89" in the background just makes this epic.
A coder with 661k subs, that is awesome.
i'am now obsessed with the coding istead of saying hey stop i'am saying hey no loop()
Yes he never forget dance while teaching and I never forget what he teaching😁
You are such a great teacher!!
https://editor.p5js.org/sauhard.eg@gmail.com/sketches/ry-UxED6m
you should have been an artist: a painter or a sculptor or something 🙂 I mean this in a good way, not like you are bad at programming or something. It's just – our job sometimes is considered boring but your passionate speech about moving bubbles and shining rainbows somehow kept me watching till the end, and I am doing OOP all my life.
He makes coding so fun 🙂
Is it possible to add a pre-defined function like mouseReleased to a class?
What technology is being used to create this video? Specifically, how is he interacting with his computer's view of the code?
Very well done, good example of JS and OOP. "this. is the bane of your existence now", so true.
so ive noticed people are using 'let' instead of 'var'. It must have more use so can 'let' be used instead of 'var' in every instance or should I continue to use var until I get to the point of learning what the features of 'let' are
Can someone elaborate why do you need a function named Constructor inside the object. Why not just put the variables on their own inside the bubble object.
God bless you..
Not a bad video but this guy is highly animated.
Dude, you have a very unique method of teaching! Thank you for going into such detail and the repetition, it was very helpful.
Super clear!
Note that classes always start with a Capital letter.
dude you're awesome
Good Fun to watch and helped me to make sense of Class, thank you.
You are so funny hahahahha love your videos man
When I did mine it works for one bubble but not 2. The canvas still looks like it only has one bubble bouncing around…
OMG! Thank you SOOO much for the video! You explained it so well!
I couldn't a find video that you made but is there a way to use VSCode with the p5 libraries? I have looked at some videos and tutorials but I have been able to get it to work properly.
I watched hundreds of programming videos had six years of programming in school and your videos is the first thing where I really understand coding <3 much love from Germany
what a fun guy!
Thank you so much. Team Treehouse confuses the crap out of me sometimes. This really helped. Can't wait to see more videos and explanations. You sir are a blessing.
What does it mean to be a bubble?
this was fun
Such amazing presentation skills :'D
I want Dan to be my boss, it's got all it's needed for it: he's smart and knows a lot about JS, yet acts humble about it; he's a great teacher, he's humble, understands how easy it is to make mistakes… and makes great vids, which has nothing to do with being a boss, but hey!
poor whiteboard…
You've said something like a class is a blueprint for objects , so what about making a function that act the same way?
An example:
function bubble(x, y) {
return {
x, y,
move: function () {
this.x = this.x + random(-5, 5)
this.y = this.y + random(-5, 5)
},
show: function () {
ellipse( this.x , this.y , 24, 24)
}
}
}
const b1 = bubble(200, 150)
b1.move()
b1.show()
This is possible because the this keyword in a function always refer to the owner of that function (in this case the return object from the bubble function).
As you can see it is shorter and cleaner than defining a class (at least in my opinion).
It also supports composition 😉
"There are 15 different ways to do everything in JavaScript and also this video will be out of date by the time you watch it because there will be a new way which peopel are doing now, I am just trying to keep with the times."
Me too train man. Me too.