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://codingtrain.storenvy.com
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


Emanuele Lillo says:

This dot… He was born and he will never dies

Mouhcine says:

yes !

shoutlike says:

Why is it then when I create an attribute in Java which is not private everyone is screaming at my face – how dare I create a public attribute! … that goes against encapsulation and information hiding, you are only allowed to access information of an object from the outside via getter and setter functions …. but in JavaScript no one seems to give a shit^^ am i the only one that finds this curious?

SciPsyche says:

Hope u come to India,
We really want teachers like u!

flyercow says:

Majestic! Thanks c:

Michael Scofield says:

You remind me of Hernando from sense8

Victor Ferreira da Silva says:

Nice !!!!


you ate the best

Duddits says:

Wow this video inspired me and confused me at the same time, coming from c# guess I just need some practice

ArnoldsK says:

Woah, this is like php in javascript with this syntax.

Kaushik Sriram says:

Hey Dan I was just now trying ur first program in p5 with brackets but, when I pressed the live preview the chrome is just blank without anything. Hope u will help me:D

Elijah Winterton says:

Along with extends of a class could you do a video about mixin’s added to a class

Sagar Mali says:

Do we have any other OOPS besides using something called ‘Classes’ ?

Praveen Chakravarthy says:


Mijesh Deuja says:

When are neural network videos coming ?

zseven says:

3:05 wheres your hand? 😀

Tate Carson says:

Love your videos! I’m so glad you’re doing classes. Shouldn’t you be using const instead of let when defining bubble since you aren’t reassigning it? I don’t think it’s a huge deal but probably better to teach new people since many other examples will use const always unless they’re reassigning the variable. Here’s a really concise explaination of all the differences if anyone is interested: https://github.com/mbeaudru/modern-js-cheatsheet?utm_source=hackernewsletter&utm_medium=email&utm_term=code#variable-declaration-var-const-let

Aragorn says:

When are you going to continue machine learning and neural networks?

faisal taher says:

thx you so much

Ibakon Ferba says:

So… Can/should you still use Bubble.prototype to declare a function or is writing a function in a class basically the same?

Greencat says:

So classes are just constructor functions with a different name and no need to write ‘function’ when defining a function in it? am i getting this right? So basically this tutorial is the same as this one /watch?v=F3GeM_KrGjI but with classes?

Shaniel Samadhan says:

Please continue the neural nets series…..pleeaaaaaaaassssseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Mehedi Abdullah says:

(7.4: The Constructor Function in JavaScript)-in this video there is also a constructor function and here is also an constructor function but they are different.. I can’t figure this out and also feel uncomfortable. Can you please make me clear about these two constructors?

Debanjan Karmakar says:

You are awesome..love all your videos..
How can we create a new bubble every time when the mouse is clicked (at the position of the mouse)?

Guilherme Moresco says:

I had no idea Javascript supported classes. What a newb

3ddy says:

Is there an advantage to using this over this other method i know?

var Bubble = function(x,y) {
    this.x = x;
    this.y = y; 

Bubble.prototype.move = function() {


class Bubble {
    constuctor(x,y) {
        this.x = x;
        this.y = y;
    move() {

because these two would do the same, right? or is it like the differecne between

var something = function() {}


function something() {}


Bulwa says:

14:34 captions as always perfect.

muhammad furqan says:

I couldn’t get the same result(circles) as I copied the same code as in the video,how can I get the same result???I’m not good in JavaScript but I’m starting to learn js,anyone plz help me?

Leo Spinoza says:

always loved the way you write codes. so clean and efficient…..

 Write a comment


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!