7.4: The Constructor Function in JavaScript - p5.js Tutorial

[@zachjones7337]

All I did was search for Javascript constructor, instead KZbin gave me the best coding teacher.

[@CreapFreek]

No shit. This guy is amazing.

[@zachjones7337]

@Thiago Heath 15 minutes to hack someone's account? Those are rookie numbers. I'd report your comment for being an utter failure, but since that option doesn't exist, I'll just have to settle for spam. Also lol @ "I will try it out right now, seems to be working." If you haven't tried it out yet, then you don't know if it's working or not. Also pretty interesting how a comment that I made 2 years ago is getting 2 "different" people talking to each other within a 15 minute timespan. Also reported.

[@rohannaam6329]

yes man. best teacher

[@mabehal-zuqyadeek8593]

Wow, you are an amazing teacher. Very fun, high energy and mastery of the subject.

[@TheCodingTrain]

thanks for watching!

[@zayanwatchel8780]

Mabeh Al-Zuq Yadeek and REALLY ADHD

[@zayanwatchel8780]

Mabeh Al-Zuq Yadeek sorry I know that was a mean joke :D

[@AiTech014]

From Javascript constructor Google search to the best teacher you could ever get. This was fun. Thank you.

[@maxcherkasskikh5960]

Seriously... U did an amazing job at explaining this. It is an incredibly difficult concept to grasp if ur just searching around for the answer aimlessly and having to sort through a million different results. But u said something that set off a lightbulb in my mind and made it make more sense. They way I see it now is that a literal object is kind of like a "hard coded" object that gets used once. The way I see the constructor function is that it's a template that can be reused. One is a "use once" scenario. And the other one is a "multi use" scenario where u can plug stuff in. I could never understand why anyone would put a constructor function inside classes and now this clarified it a lot more than anyone was able to do for me before. So thank u!

[@shawnsouthwell5632]

You are an excellent teacher. Thanks for all of your videos!

[@TheCodingTrain]

+Shawn Southwell Thanks for the nice feedback!

[@marialilokyee2949]

You are an amazing teacher! You have the magical power to make coding energetic, fun and easy to understand. I particularly love how you use concept diagram/ drawing to explain the javascript concept instead of just simply typing the code. Thank you so much!

[@andideveloper8345]

evey tutorial you make is full with energy and passion.its nice to see a person who are explain things with love.Nice Job!

[@maybit9091]

I decided to use the idea from the purple rain video to make a rain program with objects and arrays. Right now, it's a really basic program, but it works and I'm making it more complex and better organized the more I watch these videos. The videos help a ton, I hope I have a professor like this next year lol

[@TheCodingTrain]

Glad to hear, thank you!

[@williambillemeyling5647]

Awesome so good!!! I watched all the tutorials for p5.js since I am working on a game and every time I needed something you had the answer in the next video! Thanks so much. Very inspiring and keep up! :)

[@elementallobsterx]

Daniel Shiffman. You are a great teacher and a awesome programmer. I love this new coding train thing you are doing. It's teaching lots of people to achieve what they want with their coding. I've seen you come so far. Peace.✌️

[@rajaaekant]

I am having so much trouble with concepts of this language and finally I'm seeing hope. Thank you so much for these amazing free lectures. You are doing a lot for everyone.

[@kostyalucker2139]

i am from Russia and my English not to strong, but that man teach better than more peoples. Thanks. I go to subscribe!

[@CarlosAyalaTheJukeBoxHero]

Thanks man! really Thank you!! I was struggling to understand function and create new object part of javascript. Liked and subscribed, i needed it for something completely different but now i get it thanks to you! BIG HUG!!

[@TheCodingTrain]

+Carlos Ayala so glad to hear it! Motivates me to make more videos.

[@nerosy7983]

2021 and it istill is the best video i've ever seen so far explaning coding this way .

[@csrfoo]

This helped me FINALLY understand constructor functions. I used to dread that word so much and fub my way thru but I GEDDIT NOW. I CANT THANK U ENOUGH DANIEL! 🙏🏻👏🏻

[@TheCodingTrain]

I'm so glad to hear this, thank you thank you!

[@bsummer]

Many a times I do not understand a subject/concept at its first watch or glance but researching here and there, i come back to where i first sought that knowledge. This seems amazing but I'm a bit lost, however I will be back to comment again.

[@josharpe]

I'm only 13 and want to program when i'm older and out of any tutorials this one is the best. Dan Shiffman is so awesome and can't wait to see more videos in the future!

[@CameronChardukian]

Keep going. My biggest regret is I gave up programming at 13 and am only now learning it at age 21/22. If you keep at it, you'll be amazing at programming, making tons of $$$, and living a dream life by the time you're my age.

[@diastrus1236]

This was direct and to the point, easy to follow, and informative. Great job!

[@tanish2204-p9o]

You really are an amazing teacher. If possible, please try making an in depth paid course on any online platform particularly on udemy on Node.js and MongoDB. Your teaching style will make us understand tricky stuff with ease. Thank you.

[@NickCarboneDrum]

YOU ARE THE BEST INSTRUCTOR ON THE INTERNET!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@goldthumb]

"constructor" without mentioning a word about "class", that's new to me. I love it.

[@geoffwagner4935]

constructors are in more than just a classes, constructors are in everything such as an ellipse(constructor, constructor, constructor, constructor). it's constructors are it's values. it would be silly to just state it as a class reference.

[@EmilianoCarrillo]

AWESOME TEACHER, AWESOME "COURSE". I watch it in 2x and you look too funny, like a crazy code wizard haha. Keep it up!

[@AdityaArya93]

You are an amazing teacher. Your gestures and way teaching is very similar to one of my fav. teacher, Gaurang Sir, he is a physics teacher.

[@the-web-scraping-guy]

Dude these videos are great. Anytime I need to look up something about js, I always go to your videos. Thanks for making these.

[@stevenreinart9719]

you're a great teacher! I always look for your videos first because of how well you explain everything! Thank you for the knowledge! you're amazing and keep up the videos!

[@TimeTourst]

Great energy, very straight forward teaching style. I like how you move back and forth between the white board and the real code. Could use a bit of editing though. ThumbsUp!

[@geoffwagner4935]

this is an amazing video, these are all absolutely amazing works of art each time, a second at a time. it's like 30min in 10 min xD BUT, lol i came here for what function.length was, and this got me where i needed. but i you redo it, may want to mention anything.length is to use "length" as is the maximum value of the string or number value of the function. i really hope i got that before i said that xD

[@semacame]

Hello thanks. you are a very good teacher. I never get bored. with you. I learn and have fun.

[@TheCodingTrain]

+sergio menegassi thank you so much!

[@ousmaneyadely]

My Gosh! You're great teacher. That summary in min 10.10 was genius

[@rohannaam6329]

one of the best teacher i know

[@s.k.7834]

Amazing explanation thank you for making this area more comprehendible!

[@edbrooks1314]

Very clear, no need to redo this video. Extremely helpful!

[@TheCodingTrain]

thank you!

[@victorialeigh2726]

You are amazing!! The best constructor instructor!!

[@TheCodingTrain]

You’re a poet and you didn’t know it! Or did you?

[@victorialeigh2726]

@@TheCodingTrain You've got a very fine-tune sense to catch that! I think I am, but people seldom recognise it, and on top of that, amongst the handful only few have the soul to say it :D !!!

[@victorialeigh2726]

@@TheCodingTrain And you are a dancer and you didn't know it! Or did you? (referring to your dancing in the purple rain)

[@marianaperez3124]

You helped me understand constructors more! Thank you!!

[@TheCodingTrain]

Glad to hear, thanks for watching!

[@HeroesOfAesthetics]

Amazing video!! Just what I needed

[@uhN0id]

Thank you for this video! I understood the constructor's purpose but didn't fully understand a constructor and its use. I appreciate it! Sub'd!

[@Hydr312]

sorry Daniel Shiffman... but i must say... you teach damn good. love your videos!

[@shubhamkothari2709]

After going through do many sources finally found the best one. Thank you for your knowledge & time ♥ It was very helpful.

[@LGLPBiH]

Thanks Dan a lot for this p5.js videos. You are Best teacher I ever seen. Im from your The Constructor Function made Star Wars ships flying; var ships = []; var timer = 0; var x = 0; function setup() { createCanvas(400, 400); for (var i = 0; i < 100; i++) { ships[i] = new Ship(); } } function draw() { background(0); timer += 1; if(timer > 200) { timer = 0; x += 5; }else{ for (var i = 0; i < 5 + x; i++) { ships[i].display(); ships[i].move(); } } } function Ship() { this.x = random(0, width); this.y = 450; this.s = random(0, 15); this.speed = random(0, 3); this.display = function() { rectMode(CENTER); strokeWeight(3); fill(170); rect(this.x, this.y, 50 + this.s, 25 - this.s); rect(this.x, this.y, 25 - this.s, 100 - this.s); rect(this.x - 30, this.y, 20 - this.s, 50 - this.s); rect(this.x + 30, this.y, 20 - this.s, 50 - this.s); } this.move = function() { this.y -= 1 + this.speed; } } btw. im 12 years old, sorry for grammar.

[@sohail24x7]

Great tut Daniel, thanks so much!, honestly one of the best Constructor function tut I've come across. LIKED AND SUBSCRIBED!

[@TheCodingTrain]

+Sohail Momin Thanks for the nice feedback!

[@amanyelseheily]

i really thank u r an amazing teacher, you make it so simple to me

[@danielorlandopena7551]

Cool videos!! I have been learning a lot, Greetings from Colombia

[@limitless1692]

Wow pretty good explication of Constructor Thanks :)

[@niveshproag8660]

Subscribed. Was struggling with this and you made it so simple I feel like an idiot for not getting it before.

[@TheCodingTrain]

+Nivesh Proag so glad to hear, thank you!

[@markstockdale]

Love your videos! You are a fantastic teacher! Thank you for all you do!

[@TheCodingTrain]

Thanks for the nice feedback!

[@sabrin3981]

Your videos are so awesome, I learn so much and am entertained ...lol

[@adlerpazhouhan7416]

Thank you soooooooooo much for all the content you are an amazing professor :)

[@stevenreinart9719]

p.s. if you could throw a previous video link in the description that would be awesome!

[@maxtanie12]

This guy is just amazing!!! an Amazing developper!

[@waiyip4427]

Big thanks ! You explained it so good , liked and subscribed! Btw, will you make videos about php programming in the future? Because it is so confusing to me XD

[@TheCodingTrain]

I'm not planning on php but am planning on more node.js videos.

[@truumann199]

you are doing a very okay job. Thank you.

[@TheCodingTrain]

+Truu Mann appreciate it, thank you!

[@user_16309]

Thanks, Dan. This helped a bit.

[@blockchaincesar7601]

You're a great marketer.

[@anujlahoty8022]

It is the most amazing and super simplifies video i can ever get.

[@TheInspirationNest95]

Hello sir, I love your method of teaching and its clicking in mind easily.I want that you teach me javascript.

[@scoop9887]

awesome Teacher... What's the editor you use ?!

[@pravinkolambkar3595]

You are simply great

[@josejuliopl2140]

So a constructor function in P5 it's like a class in java, isn't it?

[@oo0O08]

Yeah its seems that its not just the constructor as it would be in Java or C++, its the whole object. Pretty confusing.

[@hammer158]

It's just a syntactic sugar for hiding the "return this" line.

[@ismaelcebrianmarco7288]

Yes, the role of a constructor in javascript is similar to the rol of a class in java. This is a general javascript topic, not particular to P5.

[@eboubaker3722]

!java==javascript

[@synthopia2]

Great explanation, thank you very much!

[@md.mohiulislam6516]

best explanation.

[@gregorydixon569]

Quick question do you have a video on object interactions?

[@TheCodingTrain]

kzbin.info/www/bejne/enarpKVqjc6WhJo kzbin.info/www/bejne/q3LJqGChpJieeJo

[@KinglingOsu]

When I create a function "move" in my object bubbles and then try to use it in draw it says move is not a function, any help?

[@natarrlie]

did you use the bubble.move? I think that's the problem but i don't know because i'm new to this too.

[@pauliussulcas]

Man you Rock! Superb tutorial... Keep up the good work :)

[@TheCodingTrain]

Thank you!

[@natarrlie]

when i use the "this.display": this.display = function(){ rect(this.x,this.y,10,10) }; nothing happens. I am very confused, help.

[@cea_tide417]

If you want to call a function: this.display()

[@abdussamad9399]

Very very helpful. Thanks

[@jefferybaggins2786]

is this constructor function the same as the class function he went through in another vid?

[@TheCodingTrain]

Ah, great question! It has the same result but classes are now the preferred (or at least my preferred) way of doing it with JavaScript ES6. This video is 1-2 years older than the classes one.

[@jefferybaggins2786]

@@TheCodingTrain Thank you for explaining that I was quite confused. I have been binge watching this during the weekend and after school so I wasn't very sure on the time frame.

[@aarshshah484]

are you using brackets or p5 editor or processing

[@TheCodingTrain]

This video is using the p5 editor, however, I would recommend brackets at the moment until the new p5 web editor is released.

[@aarshshah484]

so how do you make a new tab in brackets.can I do this all in processing

[@tasneemalam1359]

thank you for making video ...

[@deepafricalimited7469]

THANK YOU SO MUCH.

[@abhikan7654]

Great Video!

[@kikesitosk8xoxtla]

So, can we say that " var vm = {};" and "vm.Summary = function( ) { } " Summary is a function constructor? what I want to do is to create within a object more reusable objects (contrsuctors), I am not sure if I am right, what do you think?

[@its_me_izy6436]

do we need to download a specific constructor function to use it

[@kocaksaid]

arguments and parameters should also work with this constructor, right ? like in the processing creating class?

[@SamChaneyProductions]

This is a great video but I have a question. How do you know that the 'this' keyword at ''this.x, this.y' which are arguments in ellipse inside the this.display method in your constructor are going to use the context of the Bubble object constructor and and not some other context (like the global context)? I am having an issue in my javascript program (making it in Google Application Scripts) where when I use the 'this' keyword inside of a function that is inside one of my constructor's methods, it points to the wrong context (I expect 'this' to still be the object constructor but it is instead using the global context). How do I fix this issue? I've tried using call() and bind() but to no avail. Currently I just started defining properties in my constructor as IIFE functions where I pass this.property as arguments but this seems like a bad workaround. Thanks!

[@emilymalecbrown7551]

Did you mean to put semicolons after the key value pairs in the constructor function? Is that another syntactic difference?

[@TheCodingTrain]

semi-colons in javascript can be optional, but i like to use them for clarity.

[@emilymalecbrown7551]

+Daniel Shiffman but if you use them in basic object construction they throw an error (unlike using ",")

[@TheCodingTrain]

Oh yes you are right! Literal objects have a different syntax. It's all quite confusing: kzbin.info/www/bejne/Y5aYmWd_fLCNiLs

[@bloom6874]

which IDE you have used here in this video to run js code?

[@TheCodingTrain]

I am using an old deprecated IDE, this is my current workflow: kzbin.info/www/bejne/fouXdWatebeUm8U

[@bloom6874]

Thanks. I got it. :)

[@MuhammadTajammulZia]

What is the difference between a class with constructor function and this function you made?

[@codingnoob5946]

well shit, Subbed...going to have to add your videos to my studys. Currently use Sololearn and freeCodecamp...ill watch your vids while i workout or tired of my phone lol.. You are a very good teacher.

[@sailorwinkelman8139]

Hello! We found this because we are making an Angular2 application and want to use the p5js library. We need instance mode to be able to use the library inside our components. Thanks! 🎨

[@amberweeks8262]

Thank you so much!

[@TheJordon125]

5:21-5:22

[@TheJordon125]

5:22

[@thisguymartin]

Great man!! Thank you!

[@TheCodingTrain]

+Martin Patino thanks for watching!

[@thisguymartin]

Serious your explanation was much clearer then pluaralsights course

[@TheCodingTrain]

+Martin Patino so glad to hear!

[@rbjassoc6]

You should have mentioned the fact that when you go from an object syntax to a constructor syntax the ":" (colon) needs to be changed to an "=" sign and the "commas" ending all information in the object needs to be changed to a ";" semicolon

[@S197Bryan]

can we use factory functions rather than constructor in p5.js?

[@TheTomorrowMakers]

is p5.js the same as just javascript? i have been watching coding train for years but am just now getting into learning to code. would watching these videos be applicable? or only if i was focused on p5.js?

[@zachjones7337]

I just thought of something. Would it be better performance-wise to create a global function for the constructor's display property, and have the property's function pass its parameters through the global function, so you're not defining a new set of routines for each new object? (though I seem to remember in the past I'd pass certain parameters through another function within a loop, and they'd all get overwritten to the last one)

[@SlahsVurdonski]

Did you upload the code for this video somewhere?

[@ritual_guava5927]

They are all here: github.com/CodingTrain/Rainbow-Code/tree/master/p5.js

[@RC-bg3wy]

Thanks for this vid!!

[@randmorf]

This appears to be a pre-"ES6" syntax for creating an object class & constructor, am I right?

[@randmorf]

As an example of what I mean by "ES6" class/constructor syntax, look at my version of this program that uses the ES6 method of declaring constructors within classes along with member data and member functions (methods): Present: editor.p5js.org/randmor/present/MF9V4sJ25 View/Edit Source: editor.p5js.org/randmor/sketches/MF9V4sJ25

[@reham8471]

Thanks

[@AHRienks]

I try to follow this series in sequence, but it is confusing, to say the least. A few lessons ago you introduced classes and es6. Now you back using somewhat older concepts. Okay; it might be good to see that there are multiple ways 'how to skin the cat' ;-)

[@bantinggamer4962]

ahhhhhhhhhhhhhhhhhhh. thanks for explaining it to me so well! now i get it.

[@herrjose]

I've never understud coding, now i do, well sort of but thanks thought!

[@Randreas_]

Can you show an object from the constructor function, without making an array? something like with classes, where if you just want one, you could just say var car; car = new Car(); the thing I'm doing right now, is making an array, of just one object, but it's pretty confusing, and I feel like it's more work than it needs to be. thanks

[@adriadi4986]

the program that i used to write the code? what is its name? can anyone tell me more about it?

[@ulaptoptrekker]

adri adi javascript. with the p5js library. from p5js.org. it adds functions to javascript. sorta shortcuts

[@fakefarm]

Great video! Thank you for making it. I found you by searching for techniques how to test Constructors using Jasmine. I haven't been able to find any posts/videos that effectively teach TDD dealing with DOM Manipulation or AJAX using Constructors. Anyone have a suggestion? Thanks!

[@techtravel4756]

LOve this channel

[@VasuVanka]

nice video Daniel .. it helps well to understand JS. Why can't you show your twitter handler in the video.if anybody stuck they will just tweet.its easy to reach you.i think it will help many.

[@eboubaker3722]

7:10 so you can see now ... camera goes off lol

[@obreaker8993]

Am i the only one that literally was up from 2am - 7am watching these?

[@kocaksaid]

nope same here