• Wednesday , 27 May 2020

6.2: Classes in JavaScript with ES6 – p5.js Tutorial

Code Canyon

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

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!


Original source

3d Ocean

Related Posts


  1. Daedalus The Cunning
    December 1, 2018 at 12:13

    Watching this while listening to Kroyclub's album "Raw Rave 89" in the background just makes this epic.

  2. Snax
    December 1, 2018 at 12:13

    A coder with 661k subs, that is awesome.

    December 1, 2018 at 12:13

    i'am now obsessed with the coding istead of saying hey stop i'am saying hey no loop()

  4. vikas s
    December 1, 2018 at 12:13

    Yes he never forget dance while teaching and I never forget what he teaching😁

  5. juliana ferreira
    December 1, 2018 at 12:13

    You are such a great teacher!!

  6. Kemo Hay
    December 1, 2018 at 12:13

    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.

  7. Jiwon Kim
    December 1, 2018 at 12:13

    He makes coding so fun 🙂

  8. Joseph Wilson
    December 1, 2018 at 12:13

    Is it possible to add a pre-defined function like mouseReleased to a class?

  9. David Nowak
    December 1, 2018 at 12:13

    What technology is being used to create this video? Specifically, how is he interacting with his computer's view of the code?

  10. Marcell Watson
    December 1, 2018 at 12:13

    Very well done, good example of JS and OOP. "this. is the bane of your existence now", so true.

  11. Mystery Bag
    December 1, 2018 at 12:13

    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

  12. Michael Kinnas
    December 1, 2018 at 12:13

    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.

  13. Jyothi K
    December 1, 2018 at 12:13

    God bless you..

  14. Rashid Omar
    December 1, 2018 at 12:13

    Not a bad video but this guy is highly animated.

  15. Alston C
    December 1, 2018 at 12:13

    Dude, you have a very unique method of teaching! Thank you for going into such detail and the repetition, it was very helpful.

  16. Goede Bekende Data Design
    December 1, 2018 at 12:13

    Super clear!

  17. Maarten
    December 1, 2018 at 12:13

    Note that classes always start with a Capital letter.

  18. Loïc Reichenbach
    December 1, 2018 at 12:13

    dude you're awesome

  19. Desmond Krummeck
    December 1, 2018 at 12:13

    Good Fun to watch and helped me to make sense of Class, thank you.

  20. Caio Monteiro
    December 1, 2018 at 12:13

    You are so funny hahahahha love your videos man

  21. L borate
    December 1, 2018 at 12:13

    When I did mine it works for one bubble but not 2. The canvas still looks like it only has one bubble bouncing around…

  22. Volha Shaukavets
    December 1, 2018 at 12:13

    OMG! Thank you SOOO much for the video! You explained it so well!

  23. Jose Barajas
    December 1, 2018 at 12:13

    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.

  24. JAkob
    December 1, 2018 at 12:13

    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

  25. Karina Azarian
    December 1, 2018 at 12:13

    what a fun guy!

  26. Jeremy Logan Codes
    December 1, 2018 at 12:13

    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.

  27. rafa fauzi
    December 1, 2018 at 12:13

    What does it mean to be a bubble?

  28. Carlos Murray
    December 1, 2018 at 12:13

    this was fun

  29. amanakeet
    December 1, 2018 at 12:13

    Such amazing presentation skills :'D

  30. adrian5b
    December 1, 2018 at 12:13

    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!

  31. RioT_CS
    December 1, 2018 at 12:13

    poor whiteboard…

  32. Fredo Corleone
    December 1, 2018 at 12:13

    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)

    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 😉

  33. Vendavalez
    December 1, 2018 at 12:13

    "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.

Leave A Comment

You must be logged in to post a comment.