5.4: Functions Inside of Objects – p5.js Tutorial

This video dips a toe into the topic of object-oriented programming and looks at what happens when a function is embedded inside a JavaScript object.

Next video: https

Support this channel on Patreon:


Send me your questions and coding challenges!:

Link to code on Github:


For More p5.js Videos:

Help us caption & translate this video!






21 responses to “5.4: Functions Inside of Objects – p5.js Tutorial”

  1. test1 test1 Avatar

    Extremely good teaching, thank you very much !

  2. Nuno Palma Avatar

    Watching all your tutorials, just wanted to say thank you!! 😀

  3. Rubel Hossain Avatar

    Nice and very helpful video, thanks.

  4. LVjp Avatar

    I'm from VietNam and I'm 19. So wonderful to see you. I'll comment here and 1 year later I will come back.
    Thanks for all videos so much.. =)))
    Hope you make a lot of tutorials about games programing. I want to see my friends play my game hihiihi

  5. Oscar Mejia Avatar

    Best explanations! There's nothing like this on youtube and the whole internet for that matter.

  6. ICall Avatar

    have you make video oop for ps.js? like oop for processing..

  7. Tushar Sadhwani Avatar

    this dot! this dot!
    you gotta put this dot!

    this dot! this dot!
    you gotta put this dot!

    this dot! this dot!
    you gotta put this dot!

    this dot! this dot!
    you gotta put this dot!

    this dot! this dot!
    you gotta put this dot!

  8. Đặng Quốc Vương Avatar

    Can you teach me how to have colorful text in p5 editor?

  9. The Shroud Avatar

    I really liked the vid and you explained everything so well, but I didn't really get 4:50 when you said you can't use x and y…. why not? wouldn't the program just begin looking outside of the scope of the function/method and find them in it's containing object?
    Thanks again, I sense a binge watch of your vids coming on.

  10. LEWWI Avatar

    Awesome Video! Coding is so great with the help of your tutorials. Greetings from Germany! 🙂

  11. tomilo Avatar

    try this one this is nice.¨

    use your arrow keys

  12. San San Avatar

    awesome…this is the best videos i ever encountered related to programming …even i got into programming because of you …you are just awesome ..

  13. Mehr Rajput Avatar

    Is it necessary to rename bubble.x to this.x ? Can't we just leave it at bubble.x?

  14. William Davis Avatar

    Danial doesn't mess around with silly outros, "annndd I'm gonna stop now." I love it!

  15. Steven Wheeler Avatar

    Hey Daniel, I'm really confused about something. I'm trying to make a small little program where you click the mouse and it randomly places a ball object on the screen. I use x: random(1,100) with my Ball object defined before setup, draw etc. However, the console says "random is not defined". I'm not sure why this is as you have done the same thing (x: this.x += random(-1,1 )).

    Any ideas? I thought random() was a JS thing in general, not a p5 thing!

    var Ball = {
    x: random(100,200),
    y: 100,
    speed: 5,
    draw: function() {
    ellipse(this.x, this.y, 10,10);
    move: function() {
    if(this.y < height – 10) {
    this.y += this.speed;
    } else {

  16. John Mitchell Avatar


  17. Alex Peña Avatar

    Hey Daniel! You're videos are some of the coolest and most useful things ever, literally. I'm trying to find the time to watch them all. My question regards objects. In p5, we create sprites using var p = createSprite(). Then we can change attributes to our Sprite such as speed, (p.setSpeed()), or width (p.width = 5), right? So if I make a constructor, enemies, which is intended to create an enemy, and make an array of those enemies, but then wish to alter their speed, am I allowed to use those properties with my own object I made?

    I assume no because I didn't add those properties to my object, those properties are only apart of group() or createSprite(), but I don't know for sure.

  18. ivTube2008 Avatar

    O! It's new for me, thanks

  19. sofia garcia Avatar

    this video.

    hell yes.

  20. Ian Smith Avatar

    Hey Daniel, your videos are a life-saver!
    I've been trying to put a "boundry" method into this jittery circle object, but when I use "windowWidth" (etc) within the constructor/function(?) It doesn't seem to recognize it as the special variable like it does when I use it outside of it.
    I had the same issue when I was trying to start my little circle in the exact center of the window like this:
    var bubble = {
    x: windowWidth/2,
    y: windowHeight/2,

    I tried a few convoluted ways to get around this with no avail,
    It's probably something simple and obvious. If you can see what going on let me know! Much appreciated!

  21. cyrstem Avatar

    what's the difference between objects and functions ?

Leave a Reply

Your email address will not be published. Required fields are marked *