D4mations.com

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



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

d4mer

, , , , , , , , , , , ,

34 responses to “6.2: Classes in JavaScript with ES6 – p5.js Tutorial”

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

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

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

  31. 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!

  33. 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 😉

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