7.3: Arrays of Objects - p5.js Tutorial

  • Published on Oct 2, 2015
  • How can you duplicate a single object and make many of them in an array? This video looks at doing this with "literal" objects, with an eye towards using the constructor function next.
    Next video:thexvid.com/video/F3GeM_KrGjI/video.html
    Support this channel on Patreon: patreon.com/codingtrain
    Contact: shiffman
    Send me your questions and coding challenges!: github.com/CodingTrain/Rainbow-Topics
    Link to code on Github: github.com/CodingTrain/Rainbow-Code
    p5.js: p5js.org
    For More p5.js Videos: thexvid.com/p/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
    Help us caption & translate this video!
    馃搫 Code of Conduct: github.com/CodingTrain/Code-of-Conduct

Comments • 82

  • Aar贸n Argotte L贸pez


  • Ulrik Isdahl
    Ulrik Isdahl 5 months ago

    I dont understand, what is the point of using classes if you are doing this?

  • Cap. Blue-97 Sama

    Shipman!lol thanks for amazing tutorials

  • Code Slurpie
    Code Slurpie Year ago

    var bubbles = [];
    function setup() {
    createCanvas(600, 600);
    for (var i = 0; i < 40; i++) {
    bubbles[0] = {
    x: random(1, 600),
    y: random(1, 600),
    display: function() {
    ellipse(this.x, this.y, 100);
    function draw() {
    Why does this not work???

    • LyGr
      LyGr 9 months ago

      you shoukld put [i] rather then [0] after bubbles

  • 脴ath betrayer
    脴ath betrayer Year ago

    I like the way you take your time with the videos and not rush anything, the huge text helps too. Also relating it to something really allows me to grasp things better.

  • AudacityTunesE.T.C

    you are a cool guy, i feel sketch provides a playground for our mind's to mess around with

  • Fijian Patriot
    Fijian Patriot Year ago +1


  • Landon Hughes
    Landon Hughes Year ago

    I am SO beyond excited right now! Thank you so much!!!!!!! Daniel, I CANNOT I repeat CANNOT thank you enough!!! Everything makes SO much more sense! This skill/gift you have given me brings me tears of joy! Thank you times a million!!!
    This gift you have given me is something I鈥檝e wanted to understand since the age that gameboys were invented. That gift is the ability to think abstractly!

  • Mariel Quezada
    Mariel Quezada Year ago

    thank you for the video, it was helpfull c:

  • Daniel Montilla
    Daniel Montilla Year ago

    p5.js doesn't let me call functions like 'random()' outside of the draw/setup... Why is it working for you and not for me?

    • The Coding Train
      The Coding Train  Year ago

      setup is like window.onload so the p5.js library is not available until setup() has happened.

    • Daniel Montilla
      Daniel Montilla Year ago

      why! why would you use a framework to teach javascript!?

  • Jeremy Lindsay
    Jeremy Lindsay Year ago

    I get the error "random is not defined" whenever I try to use random() inside an object property...? It's fine if I use it inside an object function for some reason.

  • Adam Jeziorski
    Adam Jeziorski Year ago +2

    man i just love your energy..and dedication that you put into this videos... thanks !

  • Tim Adamczyk
    Tim Adamczyk Year ago

    "hi blue blob"

  • Trap or Doom
    Trap or Doom Year ago

    LMFAO @ the blob! dude you killed it. thank you!

  • Bunglay
    Bunglay 2 years ago

    idk why it freaks out when i use the println thing :(..... and then stroke is not a valid variable? .... idk what happening!!!!!! :((((( i usually find the problem in my syntax but this time I'm just lost.

    • Bunglay
      Bunglay 2 years ago

      NVM... IM BLIND

  • Ali Ghali
    Ali Ghali 2 years ago

    thank you but can you please mention here what do you use if* there is a framework you use, and please the live javascript editor

    • The Coding Train
      The Coding Train  2 years ago

      This workflow video might help:

  • Joseph Fernandez
    Joseph Fernandez 2 years ago

    You are awesome!! my whole class is now watching your videos

  • Araf Rahman
    Araf Rahman 2 years ago

    I don't understand what the this. Thingy is for

  • Josue Avila
    Josue Avila 2 years ago +1

    that mid-moment crisis in 5:09 lol

  • chakrum82
    chakrum82 2 years ago +2

    You sir are the most amazing teacher ive encountered and im addicted to watching your tutorials馃憤

  • seccopower
    seccopower 2 years ago

    You are the Bob Ross of code!!!

  • Newday
    Newday 2 years ago

    You are the best coding instructor, keep gold and thanks

  • john vu
    john vu 2 years ago

    watching your videos has increased my attention span its like 12 minutes is 2 !! so interesting keep making these videos!

  • Karen Burns
    Karen Burns 2 years ago

    why did you put the bubble object in function setup()

  • John Glen Baldomero
    John Glen Baldomero 2 years ago +1

    I salute you

  • toonz
    toonz 2 years ago

    since your almost always on a green screen i know recognize you the little man who live's in the computer

  • Engineer Passion
    Engineer Passion 2 years ago

    I'm very thankful for this series I like your way of teaching
    I have one question
    why you put "var" before the "i"
    why " for (var i = 0; i < 4; i++) "
    instead of "for ( i = 0; i < 4; i++) "

    • Danny Bee
      Danny Bee 2 years ago +1

      Two words, local variable. A local variable can't be messed with outside of its "container". In this example he has created a local variable called i. The loop can access it and change it as it pleases. If you wanted a variable that was accessible by all of your code you have to create the variable outside of any "container" and use a while loop if you wanted to replicate what is done here. However in this video he talks a lot about objects and how they can start to have their own "personalities". If you use a global variable this under minds that because all those objects will now share that variable. Local and Global variables are one of those fundamental concepts that almost any coder needs in their arsenal.

  • Maria Vit贸ria
    Maria Vit贸ria 2 years ago

    Thank you for being such a great instructor. I own you A LOT of my programming knowledge.

  • Rolando Niub贸
    Rolando Niub贸 2 years ago

    i love this dude.. haha lol

  • sol0matrix
    sol0matrix 2 years ago

    anyone else thing the blue blob reminds you of ghostbusters ? arrays are my weak points in javascript

  • sol0matrix
    sol0matrix 2 years ago

    anyone else thing the blue blob reminds you of ghostbusters ? arrays are my weak points in javascript.

  • Hiko
    Hiko 2 years ago +21

    Same jokes every video, from you;
    Same smile every video, from me.

  • Bryan
    Bryan 2 years ago

    Your enthusiasm is contagious. I can tell you love what you do. I only hope to be as good as you one day.

  • Shehzad Baloch
    Shehzad Baloch 2 years ago


  • chrononaute
    chrononaute 3 years ago

    why is bubble[i] is defined in the setup function? isn't it supposed to be above the setup function?

    BABLU KUMAR 3 years ago

    Hi Dan, how and why did you call 'println()' method at 5:16 in JavaScript if it does not exist in the p5.js reference? But I remember that print() exists in Javascript and 'println()' in Java.

      BABLU KUMAR 3 years ago

      Oh, I see! Thanks for the clarification.

    • The Coding Train
      The Coding Train  3 years ago

      println() used to exist in p5 but it got changed to just print().

  • quantumnate foss
    quantumnate foss 3 years ago

    i usually use a vector to store my x,y positions and i mess up with
    this.x and this.pos.x or this.vel.x

  • Master Paper
    Master Paper 3 years ago

    awesome! will it still work if you use a for loop and push new objects to the array?

    KRANTHI KUTTI 3 years ago

    Uncaught ReferenceError: println is not defined (sketch: line 18)

    • Manan Karnik
      Manan Karnik 3 years ago +1

      KRANTHI KUTTI use console.log(Ur variable here);
      or print(Ur variable here);

  • Texplanations
    Texplanations 3 years ago

    This script doesn't seem to be working... The print functions are for debugging. Can you help PLEASE!!! I dont know whats wrong. The first time the script goes till "Yep drawing lines :P" but the very moment I use my mouse to draw a line that gets stored in the array... it stops working
    function prevLines(){
    print("Yeah Im here");
    if (activeLine >= 0) {
    print("Yeah more than or equal to 0");
    for (var i = 0 ; i == activeLine ; i++) {
    print("Yep drawing lines :P");
    line(lines.x1[i] , lines.y1[i] , lines.x2[i] , lines.y2[i]);

  • D谩vid Elek
    D谩vid Elek 3 years ago

    very nice tutorial :) i have a question... what if i want put objects on exactly place by arrays for examples if i want create maze game , how can i do that ?

  • Pranavjeet Mishra
    Pranavjeet Mishra 3 years ago +1

    U r Awesome !

  • John Mitchell
    John Mitchell 3 years ago

    how come you use Println and not Print?

    • The Coding Train
      The Coding Train  3 years ago +1

      +I'm Squanching In Here! Old habits from Processing!

  • Avinash Diwakar
    Avinash Diwakar 3 years ago +1

    your video is easily understandable and the way u explain :)

  • victoria ordway
    victoria ordway 3 years ago

    you are fucking hilarious and a joy to learn from Daniel

  • Mr. Clown
    Mr. Clown 3 years ago


  • imconfusednow
    imconfusednow 3 years ago

    I'm getting confused about the difference between an object and a function.
    Maybe they're very different, but they both seem to contain commands and variables that can be called later?
    But then you put a function inside an object, which is called inside a function. They all contain variables, but objects are variables themselves....
    Sorry my username is describing me right now...maybe I watch these videos too late at night >_

    • Texplanations
      Texplanations 3 years ago +1

      A function can do stuff to variables... It can edit things.. An object can only store them... You cant use an object to edit a value... You can use a function to edit the value of a variable IN an Object... Hope that cleared it up a bit.... still this is a 4 month old comment... so I dunno how much I helped :P

  • elementallobster x
    elementallobster x 3 years ago

    im trying to add enemies 2 my game and i have too ask you: how do i put my objects in multiple places that i choose? thx.

  • elementallobster x
    elementallobster x 3 years ago +4

    ur a boss m8.

  • Dane Filipczak
    Dane Filipczak 3 years ago +1

    thank you! keep trucking forward, it's much appreciated.

  • Jose Flores
    Jose Flores 3 years ago +33

    You are a great instructor! Thank you very much for making these videos.

    KARTIK JADHAV 3 years ago

    is 'object' similar to 'class' in processing? .. or is it too early to ask this question :P

    • Julian Puppo
      Julian Puppo 3 years ago

      Oh, well , it麓s not a propper class. Sorry for that. My mistake

    • The Coding Train
      The Coding Train  3 years ago

      there are no classes in JavaScript only objects, but you can use a constructor function to make objects and this is just like how a class acts as a template in Java.

    • Julian Puppo
      Julian Puppo 3 years ago

      Actually yes. In processing you also have objects. An object is always instanciated in a class.
      Javascript seems to be more flexible about defining clases and objects. Its a different sintax, but the logic is the same.

  • Martin Rivera
    Martin Rivera 3 years ago +6

    Please DO continue to make more awesome videos!

  • Truu Mann
    Truu Mann 3 years ago +6

    Great teacher.

  • Ryan Scharfer
    Ryan Scharfer 4 years ago +3

    great video! I am ready for your in-person course ; )

  • Kurt Strong
    Kurt Strong 4 years ago +18

    How do you code the blue blob?

    • Jordicutie iz tha best
      Jordicutie iz tha best 3 years ago +1

      you make the best vids on youtube for coding, cool production, great content!!!!!!!!!!!!, but the level of fun is the best asset

    • The Coding Train
      The Coding Train  4 years ago

      +Kurt Strong ah, yes, this is an aspect that's quite different between environments give that p5.js renders to a browser and Processing to a native OS window. Let me know if I can help more!

    • Kurt Strong
      Kurt Strong 4 years ago +1

      +Daniel Shiffman Think I watched a few too many videos in a row and got your Processing 3 Getting Ready video mixed up with p5.js window resize.

      Not having to hard code size(x,y) values and using fullscreen() instead (+width and height).
      Mixed in with...
      windowWidth, windowHeight vs canvasWidth, CanvasHeight vs Width, Height.

      It all got a little confusing.

    • The Coding Train
      The Coding Train  4 years ago

      +Kurt Strong can you remind me more specifically what you are referring to? Feel free to link to video timecode.

    • Kurt Strong
      Kurt Strong 4 years ago +1

      +Daniel Shiffman did you ever cover the fullscreen wrangling you talked about in an earlier video?

  • Mesa Lang
    Mesa Lang 4 years ago +5

    Daniel :D You are so lovely!! Thanks for sharing these videossss.... It is fun to learn and see you talking