2.3: JavaScript Objects - p5.js Tutorial

This video introduces the idea of objects in JavaScript using p5.js.
💻 Code: thecodingtrain...
💻 p5.js Web Editor Code: editor.p5js.or...
🎥 Next video: • 2.5: The map() Functio...
🎥 All videos: • Start learning here!
👾 Share Your Creation! thecodingtrain...
🚩 Suggest Topics: github.com/Cod...
🌐 Help translate this video: www.youtube.com...
🚂 Website: thecodingtrain....
💡 GitHub: github.com/Cod...
💬 Discord: / discord
💖 Membership: kzbin.info...
🛒 Store: standard.tv/co...
📚 Books: www.amazon.com...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/Cod...

[@pafou]

Just to let you know that there's now a new built in circle() function in p5.js so that this var declaration DOESN'T WORK anymore. Use any other name than circle when declaring your variable. Example : var c = {x:0,y:200,diameter:100}; ... ellipse(c.x,c.y,c.diameter,c.diameter); c.x+=1;

[@TheCodingTrain]

Thanks, another reason I need to do this video!

[@moonstone0999]

wouldn't it be let

[@pafou]

@@TheCodingTrain Hey you actually replied ! :) I didn't mean to be rude or anything, just wanted to make sure no one else would get confused. I love your videos btw you're a great teacher. Thank you very much

[@sammystakethesnake9631]

LMAO thank you! I have sat here for over half an hour wondering what I am doing wrong //everything 1 by one and then read this comment. also.... in the process i found out if you print() in draw you get stuck in a loop where it brings the printer options up....smh

[@wighty28]

@@pafouThank you for flagging this, because eI was going out of my mind trying to work out why my code wasn't working! Renamed the circle var declaration and it worked.

[@saif_ali_khan]

You start watching just ONE video and then you get hooked to it, like some awesome TV show ;)

[@live_destin-3408]

lol I totaly relate lol

[@warrengeorge7126]

Quite agree. I have other things to do but it is like a box set and binge watching. Such a good teacher...

[@logomoniclearning6680]

He is a great teaher becaause he varies between writing on the board to improve your conceptual understanding in addition to implementing the concept in code. This is very rare!

[@nenenoch]

Daniel, you are the best programming teacher I have ever seen. Thank you

[@parigyantamuly4295]

Your way of teaching way is unparalleled. Explained in such a lucid manner.

[@JuztoKik]

I just have to say your one of the first teachers for programming that I actually find super interesting to listen to. Keep up the great work!

[@RameenFallschirmjager]

Everything should be made as simple as possible, but not simpler. This man is doing it to the utmost!

[@AK-py5kl]

@TheCodingTrain why do you always say "if anyone is actually watching this video" ? I love watching your videos. You're a very good teacher whose made coding so much fun and exciting for me ! I love your positivity. You're also one of the few KZbinrs for whom I have pressed the bell icon because I love watching all your videos ! So keep coding, keep making awesome content and always stay positive !

[@ir2001]

I paused the video there and was about to comment this!

[@n0body-music934]

i think he said that cus i think he did this for a class

[@studyrelated8925]

My friend, Genuinely You are one of the best coding teachers I have ever had.

[@mad1083]

I have just about completed the js lesson in codecademy, watched countless tutorials from instructors and youtube personalities and I have never understood things this clear. You do a great job breaking things down without using "fantasticalness" that only gets in the way. Thank you so much

[@TheCodingTrain]

So glad to hear thank you!

[@zayanwatchel8780]

Marlon Decosta learn native JS too!

[@mad1083]

I have noticed the importance of this. Thank you for your advice. Any advice is well received my friend so again gratitude.

[@zayanwatchel8780]

Marlon Decosta yeah native is love native is life.

[@urgisjot]

oh man, i'm rewatching this after a year, and i still love you!

[@paxthewax4203]

It is insane how amazingly talented you are at explaining and your amazing and positive energy... we need more professors and overall people like you in this world... wow

[@kamalbhatnagar5247]

Thank you Daniel!! For existing!!!!! You're awesome

[@hellbenthorse]

Just started getting into JS and p5, it has been fun so far, thanks for your awesome series! Some random plotting fun: var windowW = window.innerWidth; var windowH = window.innerHeight; var moveX; var moveY; var firstLX; var firstLY; var secondLX; var secondLY; function setup() { createCanvas(window.innerWidth, window.innerHeight); background(60); frameRate(30); moveX = windowW * 0.10; moveY = windowH / 2; } function draw() { fill(rColour(), rColour(), rColour()); if (moveX 0 && moveY

[@noahpayne8035]

I know these videos are from a while ago but very informative and the best ones I have found. Thanks Daniel!

[@TheCodingTrain]

So nice to hear, thank you!

[@fabianvasquez3585]

This gentleman and Barnacules (Codegasm) are the best programing teachers I've ever come across on the internet. They make things feel elementary and fun.

[@delahogue]

This is how a teacher is supposed to be :)

[@droneexpress6333]

Thank you so much Coding train i have been watching these videos for the past few days and i have learned so much. From knowing nothing to now writing my own program. Keep it up ! i know this video was made ages ago it is still perfect to use and learn so thank you so much for inspiring me to keep on coding.

[@mishu13]

Hey, I actually watch your videos for javascript, and I just love the simplicity of your teaching, it really gives a nice feeling like a real class, please keep doing such amazing videos. Helps beginners like me !!! :)

[@jerriktorp8709]

UPDATE!!! instead of circle you need to write circl

[@frederikbuur]

omg thank u so much!

[@ansadutoit6765]

Thanks!!!

[@Shamysoza92]

I made it work using "let" instead of "var", however I'm still not quite sure what the difference is between var and let

[@tienne_k]

Thank you so much!

[@developerway9180]

Thanks a lot !

[@heajincha]

Thank you so sososos much for your detailed tutorials. Finally someone skilled enough to teach step by step (for dummies like me haha). I CAN ACTUALLY UNDERSTAND.

[@TheCodingTrain]

I'm so glad to hear, thank you!

[@mad1083]

same!!

[@htruth1785]

Thank you. Was completely baffled reading about objects on a JavaScript textbook and this has cleared it up. In fact.

[@Polly90Anca]

I needed this quick refresh - thanks for this quick video!

[@johnvu3410]

I am some what new to programming ,and have been bouncing around websites such as khan academy and code academy to learn the basics. But I have found that your videos are by far the most helpful and useful :) keep making more!

[@ahmedr.]

the concept of object . You nailed it in 5 min !

[@epicclutchers233]

the best explained class ive experienced

[@Hiatuz4]

got a udemy course and you explained it a lot better

[@eti313]

What's the course?

[@nathen1778]

THIS DUDE ACTUALLY HELPS!!!

[@bondies777]

In under 10mins I finally understand why JSON is how it is

[@goldthumb]

Other than JavaScript and p5js, I learned tons of "enthusiasm" from Daniel.

[@dukewright327]

@TheCodingTrain I’m very new to coding and you make it easy to learn.

[@ivanpetrovic-poljak6411]

I know this is a late comment but from watching your coding challenges I actually managed to reset the circleX variable to 0 when it hits the edge of the screen and also do the same thing with the mousePressed function!

[@wubbawubster3611]

you are awesome, never stop !

[@256beans]

I'm enjoying your videos. You're a really good teacher!

[@TheCodingTrain]

+256beans Thanks so much!

[@mayurahuja817]

you are the best Teacher Dan !!!!!

[@vitoremanuel3429]

If you're following along with the editor, use "let" instead of "var" to declare the circle object .

[@terkuz103]

Thank You.

[@vitoremanuel3429]

;)

[@slinderdub9586]

so if i use "let" is it ezer then "var"

[@vitoremanuel3429]

@@slinderdub9586 nope. I'm not sure why, but I believe it's just because in the video the editor is probably using a "version" of JS that didn't have "let" established as a new way to declare an object or a variable (pre es6 maybe). While following the tutorial, I tried using "var" on the p5.js web editor just like Dan did, and the code wouldn't run, but when I changed it to "let", it did.

[@redrunn3388]

The best thing about this is that you can use ONE let (var) function to create variables that you can use for several shapes at once. It's very neat and saves u tons of space if you use it that way.

[@migueltejeda3869]

it's like I am doing some javascript and then forget how, in this case, Objects worked, so i get on youtube and search your name so that you can remind me. it's been the same for a lot more. THAK YOU!

[@abohnsack21]

Great videos! You are actually easy to listen to and you make the videos enjoyable. I'm on ground zero with this stuff and you make it interesting.

[@zuggrr]

thank you so much. great videos you are awesome and funny :)

[@TheCodingTrain]

Thanks for watching!

[@andonandonov7793]

This guy is unique, love it xD

[@mauisurfer3]

Thanks for all your work! I am just learning this stuff for fun and these vids are awesome!

[@kijekori2385]

Hey Dan, you made learning coding is very interesting. Keep this up bro, thanks a lot!

[@osamagamal495]

first video to watch. And I like the way you teach.

[@johnbreechvillaverde7189]

I really learn al lot from you thanks man

[@tarekmustafa2525]

Amazing videos about JS and p5. Great work!

[@Hurriicane89]

i started watching these videos because i want to create some confetti and i'm really hoping these will help me understand how!!

[@berylsam889]

why didn't i discover p5.js earlier ?? found you through your p5.js video gamin tutorials !! looks pretty fun and logical so i found my interest in p5.js !! love your videos !! great teacher for a beginner ( although i am familiar with the coding world)

[@caparag1114]

your videos are very interestng. i dont get bored. instead i feel to see whats next whats next

[@harrisgagnon2228]

Amazing tutorials you make coding fun!!

[@aniprice86]

Just saying that they have made a update and you can’t use the word circle because it’s in the reference I needed to change it to circl

[@marwa-zr8vk]

thank you

[@aniprice86]

Pleasure ❤️❤️❤️

[@MoizQazi]

You are awesome..I love how you get excited about silly things in your code.. Goes on to show how much you like teaching code.. Kudos !!!

[@zayanwatchel8780]

Abdul Moiz I legged someth by OMFG

[@Steve01ification]

var circleX = 20; var circleY = 20; var circleW = 20; var circleH = 20; function setup() { createCanvas(640, 360); background(200,100,150); } function draw() { ellipse(circleX,circleY,circleW,circleH) circleX = circleX + 2; circleY = circleY + 1; circleW = circleW + 1; circleH = circleH + 1; }

[@steveholcomb4080]

Such an awesome video. He's the best online in my opinion. .

[@youvnasalian2224]

how can I ever thank you enough:)

[@lindavasquez5736]

THANK YOU!! I totally understand objects now :)

[@daanbrocatus9340]

I love your videos, I've learned a lot!

[@milehiaviation]

I wish you taught just plain Java. I'm in AP Computer Science right now with a below average teacher and I'm so beyond lost. No one else on KZbin teaches code as well as you.

[@TheCodingTrain]

This playlist is actually Java using the Processing IDE (and any challenges using Processing are also Java): kzbin.infoplaylists?view=50&shelf_id=2&sort=dd

[@terribleshorts5598]

so far out of all of this i have made this var circleX = 0; function setup() { createCanvas(600, 400); background(207, 0, 0); } function draw() { fill(circleX, 0, circleX); noStroke() ellipse(mouseX, mouseY, 50, 50); circleX = circleX + 0.1; } function mousePressed() { background(207, 0, 0); var circleX = 0; fill(circleX, circleX, circleX); noStroke() ellipse(mouseX, mouseY, 50, 50); circleX = circleX + 0.1; } and i have managed to make some cool artwork

[@toastyPredicament]

dan you're cool keep it up thank you have a blessed day

[@pkmarsden]

They have updated p5.js since then and it now has a circle function so if you call circle it doesn't work. You need myCircle or similar.

[@luisfernandoyupanquitaco8630]

You save my life

[@aaronhyrne9811]

this video should be updated the current version of p5 editor in the browser dosent let you use circle as a variable because its a 2d shape input now

[@taihatranduc8613]

thank you, you are an awesome person

[@Tsskyx]

I'm used to processing OOP, where you first put data into constructor, which then passes that data to the actual object. Is this the same thing? It looks too simple to be an object, without all that class and constructor stuff.

[@TheCodingTrain]

+Tsskyx This is somewhat different b/c there is no "class" here. Just a literal object. However, something more similar to what happens in Processing is creating a JS object with a constructor function. This comes in 6.4 kzbin.info/www/bejne/fGSqloCVgNd6oKs

[@BrettClimb]

+Tsskyx Using a javaScript constructor might look like this: function MakeCircle(xPos,yPos,diameter) { this.x = xPos; this.y = yPos; this.d = diameter; } var circle = new MakeCircle(300,200,20); This would create a circle object that looks like this: { x: 300, y: 200, d: 20 }, and that constructor could be used to make other similar objects as well.

[@Stuff_And_Things_0]

Hi, great videos. Working my way through hoping to create a simple game of my own at the end! I was wondering about doing things in the object variables such as: var ball = { pos: createVector(25,25), height: random(0, 100) } It says that these things are undefined. I'm sure the problem is glaringly obvious but I thought it would be useful to define these variables like this in the object. Cheers!

[@xelacrypt]

avoid using "circle" as an object name - it conflicts with p5 and makes values inside it undefined, use smth like ball, krug or any other unused name!

[@TheCodingTrain]

Ah, great point!! circle() didn't exist when I made this video, but it's definitely a problem now that it does!

[@luantingxian7812]

Thank you for pointing it out! I got stuck when using "circle" as object name: exactly the same code as in the video, but nothing happened in my editor. Now fixed it using a different name.

[@aryaz]

thanks !

[@PeterRigert]

Thaaaank you!

[@simontewolde3616]

Is the video about adding functionality to objects coming any time soon? I'm really interested in knowing how to do that.

[@YataVSTheWorld]

weird: If I turn r,g,b into a color object it will simply make the background to the same color of the circle (also if the circle is filled with another set of number). If I made a cast like r=color.r and then i use r in the background function everything is fine...but if I try to call the function as Background(color.r,color.g,color.b) the same original problem (background and circle of the same color). Notice that the background is actual made of the same color of circle and not simply not called...because the circle doesn't leave a trace behind when it moves.

[@stoenchu122]

Interesting, funny and simple explained.

[@srthinktank7739]

Thank you! you are just AWESOME!!!!!!!!!!!!!

[@TheCodingTrain]

Thank you!

[@PixelDolphin]

I don't understand why can my variable test.x work, but my circle.x is coming out undefined. Please help :< var circle = { x: 200, y: 200, size: 22 } var test = { x: 200, y: 200, size: 22 } function setup() { createCanvas(400, 400); background(220); } function draw() { background(220); //circle.x += 5 //circle.y += 5 //circle.size += 1 fill(22) ellipse(circle.x,200,22,1) print("circle var: " + circle.x) print("test var: "+ test.x) }

[@PixelDolphin]

Watched further on. Later video helps understand the issue. Basically have to change the name of the variable because some names have conflicts with the p5 library. I’m guessing this issue could come up in other languages, good lesson to learn!

[@OctoBirb8Claws]

I made an in app purchase (Add Mode) for p5.js and it opened my program's IP Address When I ran my program. (1st time it just read p5.js as a JS file)

[@7hourslater]

loving your videos ! also when do you go live? is there a certain time you like to go live ?

[@JurajPecháč]

Sign up for live stream notifications via e-mail on shiffman.net

[@kristinatumbles1764]

Hey, so I did a code to move with up down left right and it said there was something wrong when i had space between: If(keyIsDown(DOWN_ARROW)) (here was the error) { y = y + 2 } Do you know how to make the error go away?

[@braeden9971]

you helped me so much love you

[@lomzart]

Thank you! You are really good!

[@TheCodingTrain]

+Vukasin Stancevic (Lomz) thanks for watching!

[@isaacvargas412]

Great Vids!! I have a quick question. I want to set up an object to use in both setup function and in the draw function but It seems to only work if I make two separate objects written inside the functions. (these objects are identical) Is there a way to only have to write the object once and use it anytime in the code?

[@bigsmokeutube]

Let’s give him 2 million subscribers. I don’t know how 🤷‍♂️.

[@vanmustang1119]

You are funny teacher, i like this king of teacher. THANKS FOR THIS

[@Soulixs]

what is the difference of having the x = x +1 on top of ellipse function rather than the bottom of the function??

[@vxcvbzn]

Making circles with Jason! :)

[@TheCodingTrain]

hah!

[@eniocc]

Thank you sir.

[@nicolasmarinoparra9107]

OBSERVATION: The name of the variable "circle" is already a name of a library function. Thus, the program will get stuck. TRY TO CHANGE THE NAME of the variable, in order to get the dot notation functionality. (Maybe this program worked in this video beacause this library is a old p5.js version, which could mean that the "circle" function had not been created at that time)

[@TheCodingTrain]

Indeed! I would recommend using something else like "bubble"!

[@coelan5683]

Hello, what a great video !!! I'm french and it's a pleasure to learn coding situ you. I've just a little question, I installed P5 on my mac but I don't have your "play/stop" button to test m'y code, where can i find it please ?

[@zerosandones7547]

So entertaining man 😇

[@nimbus1583]

HELP! several times I've reloaded, saved and opened the canvas using a browser but it never works: I am usin brackets

[@antoniagrosan9504]

it happens the same to me! :(

[@TheMaddestDan]

It does work in brackets, but your code needs to EXACTLY the same on every line. It's been a month since you commented so maybe you sorted it out, but my "circle.x" was "circle. X" and it didn't work for me because it was capitalized. If you can link to your code, if you still have the problem, I'm sure we could figure it out. It definitely is working in Brackets though cause that's what I used.

[@okalaadamabdulmuhsin2276]

I'm facing the same problem. My canvas and work progress doesn't show on my chrome default browser. I use Brackets.

[@TheStormWorm]

Thanks so much for the videos. I had issues with this tutorial. All my syntax lined up just like the video with no errors and I still couldn’t get the circle to display. I changed var circle = to let circle = and the circle popped up on my screen. I am curious as to why this is?

[@chankballyesh3952]

is there spaces also I had the same issue

[@TheStormWorm]

I just used his exact example and just changed the word var to let.

[@chankballyesh3952]

oh ok thx

[@TheCodingTrain]

You can also ask at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

[@santiagorios2969]

what is the difference between var and let ? Hello Daniel from Colombia, you are amazing !

[@zerosandones7547]

Whats the compiler your using?

[@CerebroVasconcelos]

thank you by subtitles

[@meghnasharma7908]

just check the code and let me know what mistake i have done because i think i have done everything the same as you have done but yet it says error: var circle1 = { x: 0, y: 200, daimeter: 50 }; var circle2 = { x: 0, y : 200, daimeter:50 } var r = 218; var g = 160; var b = 221; function setup() { createCanvas(600, 400); } function draw() { //background background(r, g, b); //ellipse fill(250, 200, 200); ellipse(circle.x, circle.y, circle.daimeter,circle.daimeter); circle.x = circle.x + 1; }

[@alexanderkalchev188]

i make my object and there isn any error but it happens anything when i start th e program

[@nimbus1583]

Does this not work In brackets?

[@zayanwatchel8780]

Try atom.

[@kingwindie]

works in atom

[@Es.me44]

Yes. Impor the p5.js cdn into your HTML file, whrite your code and run(ctrl+ alt+p)

[@ahmadhy9542]

I did the syntax dot and everything is right no console errors but the ellipse does not show it's just the black background can any one help me please

[@TheCodingTrain]

Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

[@antoniagrosan9504]

This doesn't work in brakets, please help! Should I use processing?

[@TheCodingTrain]

What error are you getting? Try posting at forum.processing.org? It's easier for me and others to help that way (you can share code there easily!). Feel free to tweet me @shiffman a link so I can follow / contribute!

[@imrozeahmed9082]

hello sir, which programming editor are you using ???

[@parthawari843]

he is using p5 web editor editor.p5js.org/

[@vipuldimri6571]

Where are these object stores. Like we have heap for storing java object. I am a Java guy trying to learn Javascript.

[@maremeaxi3344]

amaizing !!!!!!

[@randmorf]

When I run the demo program in this video, with the 2019 version of P5-JS Editor, I keep getting the following error message repeated over and over again, and I hape to press the stop (square) button to regain control. Error message: p5.js says: ellipse() was expecting at least 3 arguments, but received only 1 at about:srcdoc:80:3. [p5js.org/reference/#p5/ellipse] I think this means that the OOP capabilities ib P5-JS have changed since 2015 or whenever this video was made. Anyone else have this problem. Searching for an answer, I did find an example of a OOP in the P5-JS reference at this URL [ p5js.org/examples/objects-objects.html ] which suggests using a more Java like OOP syntax.

[@randmorf]

Okay, seems another person had this problem, said not to use the reserve 'circle' in your program for your object names. Use anything like "c1" or "c2" or maybe "bug".

[@barickfoster]

HI Dan in the object var circle1{ x:0, y:200, diameter:50

[@TheCodingTrain]

An object is a list of name value pairs separated by commas. It just so happens that when you get to the end you don't need a comma after the last element. If I write it like this it might be more apparent: { x:0,y:0,z:0 }

[@barickfoster]

i got it !!!! thanks