7.3: Arrays of Objects - p5.js Tutorial

Sharing buttons:

okay so now I've made two videos one

just about what is an array in the

syntax of an array and the other video

looking at how to use a loop to iterate

over every element in that array and in

this video I want to unlock this great

power to you which is how to take an

object and duplicate that object many

times into an array so first this is

viscera again just to revisit this is

what I'm talking about how would you

make an example like this happen and you

know each one of these objects it needs

to have a position on the screen it

needs an X Y it needs to have a speed

like how fast is it moving along the y

axis it needs to have some functionality

like move along the y axis like check if

it hit the bottom so each one of these

needs its own set of properties and its

own set of functionality and that's what

I covered in a previous video how to put

a function into an object and so we have

an example of that here right this is a

bubble object let me just actually take

a moment to review over here just that

syntax so if I have an object like var

bubbled an object is a collection of

name value pairs an object has

properties each property has a name then

there is a colon then there is the value

and typically we think of these all

right you think I think of these as what

do I think of just as like numbers right

it has an X and it's number is 100 and

it has a Y and it's number is 50 but in

addition to having these properties just

be like simple variables with values an

object can have a the name could be a

function like the name can be something

like display sorry and the value can be

a function tripping over my words here

right so in it this is what makes

objects really powerful it's not just a

collection of numbers or data or strings

or colors it's also the ability to use

those properties in execute some code

with those properties so for example if

I want to have a display property I

might want that to be a function now

it's important to us this function is

not being executed this is just the

definition of the bubble object and the

display function is a function that

could be executed

later and if that function were to be

executed it would draw an ellipse act

and this is the tricky thing your

instinct might be to write bubble dot x

right because the way that you access

properties of an object is by the name

of the object dot the name of the

property and then you get the value back

but here because I'm inside the object

there's a special JavaScript keyword

that you can use to refer to the name of

the object the specific object this

object what I want to do is refer to

right here this particular object guess

what the keyword is this might think of

it as me I am the bubble my ex that type

of thing so this X and this Y and this

is probably one of the things it might

mean for me I just forget to type that

all the time and sometimes things don't

work so as like an error message so it's

really important that you remember to

type that so this is the syntax we're

starting with and if you see over here

it's basically exactly the same syntax I

happen to have a bit more sophistication

here I have both a display function and

a move function and then if I come down

here you can see aha in draw the bubble

moves the bubble is displayed so I don't

have any of this code anymore just in

the wind like I don't have variable

flying around and I don't have you know

lots of code and draw I've had bay this

mini program this bubble and now I've

gotten a drop so that was a quick little

couple minute review of objects in

syntax but the point of this is not just

to be happy about this object I want to

make more than one so obvious certainly

a strategy to make more than one would

be copy-paste this whole thing but this

is not good strategy and I could change

the number and change something this is

not going to sustain you very long it's

not the worst thing to practice with

when you're first getting started make a

couple objects instead what I want to do

is I want to say var bubbles equals

bracket bracket I want to have an array

of bubbles and I want to put objects in

those bubbles so now one thing I didn't

actually mention in my previous video is

normally not normally but in the

previous example I said make an array

and put these numbers in it put this

text in it

this is actually an empty array so I'm

starting the array is empty one of the

interesting is about

script is if the array is empty and you

just assign something to the first spot

and then assign swing to the second spot

then just sciencing the third spot

javascript will just like I'm going to

figure out what you're doing I'll just

make the array the right size for what

you're putting in it so I could quickly

do something like this bring this object

definition into setup and say bubbles

index 0 equals that object so now oh my

god the blue the scary the blob is back

I got to fix that my green screen set

because blob takes over once a while and

tries to eat me and I don't want it to

because I don't want to make more videos

I I guess I do I mean I don't know if I

should but um

so what was I saying yes index 0 so I've

put an object into the first spot in the

array the array now has a bubble object

in it and actually I could say print

line bubbles just to take a look at it

and you can see UPS I forgot that I have

this extra code in here a little comment

out for a second print line bubbles and

you can see there it is there's the

array it's got one object in it now I

can adjust note a weird little nuance to

JavaScript you know what if I decided

like I'm gonna put this in the fourth

spot index three zero one two three

you know I haven't put anything the

first spot or the second spot or the

third spot what like what's going to

happen so if I do that you'll notice

that JavaScript it just wants to do just

wants to like figure out what you mean

and what are you trying to do let me try

to guess something and strangely enough

it made an array with four elements in

it but the first three are null so

javascript is a lot of flexibility and

how you assign things into an array I

can't think of a good reason why you

would do this you're sort of asking for

trouble you're going to run into errors

later when you try to access a value

that has null high high blue blob but

but it's important to realize that

JavaScript into an array so let's go

back to putting it in the zero spot and

then what do I need to do well down here

what I want to do is not I don't have an

individual variable named bubble anymore

get a little closer in here what I want

to do is say ah move the zero element of

the array move this display the zero


so now I just want to refer to the array

and the specific object in the array but

so let's run this and you can see we

have exactly what we had before this

single object moving around the screen

so I haven't used the power of objects

and arrays yet I'm just taking that

single object and put it in the first

spot in an array and I can make a little

bit of an improvement down here to draw

even though there's only one thing in

the array you know maybe it would be

good for future use later to have a

little loop where I just check the and I

look through the length of the array

right and this picks up from the

previous video the previous video I loop

through every number to set I look

through every number in an array to set

the width of an ellipse here right and

now I'm going to do is say no matter how

many bubbles are in this array go from

zero to the length of the array up by

one each time use that value as the

index move and display all the bubble

objects so this it doesn't matter if

there's five or ten or two this loop

will always apply this logic move or

display to every object in the array and

there we go there's only one I only put

one object in the array so how do I put

the second object in the array okay well

I could copy paste this and say bubbles

index one but there's got to be a better

way right what I can do instead is why

not put a loop around this I don't know

how many times should I loop four times

and then write what I can do is what I

can do is now as I'm looping 0 1 2 3 I'm

going to put an object in the zero spot

put an object in the one spot so this

same code that made that individual

object I can reuse that multiple times

one time two times so now the array by

the way if I say print line bubbles here

you can see look at that there are four

objects in the array and they're all all

four hopefully I won't get eaten by the

blue mass there are all four moving

around the screen I don't know I can

make 400 of them that's a lot of bubbles

look at that there

kind of starting in the center what

could I do differently well one thing I

can do is give them a random starting

value between zero and the width I could

give them a random starting value Y

value between zero and height so one

thing that you can also know is in

addition to having functions as

properties or values as properties you

can execute code that evaluates to a

value it's a little bit weird because

like this has code in it and that has

coded it the difference is random is

being executed right now and evaluating

to a number that's being assigned to X

here this code is not being executed

right now it's being defined as

something in a function that could be

executed later when is it executed its

executed down here when I loop through

all the elements of the array so if I

run this you can see there's my four

hundred bubbles and we can see this down

here is like this is this is what

actually is in that array so I'm going

to take that printout it's not

particularly useful to look at it in the

console there anymore but you can see I

can I could I could just go crazy now

and I could make four thousand of them

because now one thing is important to

realize is there's a limit to how much

you can draw in p5 and how like fast

it's going to run so that sketch is now

running very slowly because it's trying

to draw 4,000 circles every frame but

what's amazing about this is I haven't

changed anything in the code but this

number this is the only number that

controls how many objects are on the

screen so why changing this is the this

is the amazing power of the reuse of

modularity and reusability of objects so

this program is modular in that there is

this object that has these parts its

properties its functions I know which

part to edit when I wanted to change how

it looks or change how it moves and it's

reusable this single block of code is

being used four times or 400 times to

make many objects and all I need to do

down here is loop through all the

objects and say apply the same command

to all them move all of them display all

them now you'll notice that the editor

here the p5 editor has this little like

yellow highlighted line number so look

what's I'm afraid to look at it I'm

going to I'm going to look at it you

let's do this together

oh it says don't make functions within a

loop so I've upset the editor I'm very

sorry but it it's like complaining that


my JavaScript is in proper style the

truth of the matter is that maybe this

is a bad idea for an hour but at the

same time it works this is a great way

to practice but the thing is here this

maybe could be improved in the sense

that setup code like has all this code

in it and this bubble is very simple

what if this bubble got more and more

complex so in the next video what I want

to do is look at a technique for taking

the way this object is made and taking

it out of here and putting it in

something called a constructor function

here I'm just literally making the

bubble object but what if I had this

other function whose job it was to make

bubble objects for me and I could just

call that function anywhere from in the

code and I would just I would be able to

just say make a new bubble and setup and

again life is just about making your

code short it's really not about that

life is about like people and

relationships most I could code doesn't

really matter but you know it's I you

know I guess you can use it for

something I'm using it for something

talking to a camera about it okay so I

just I just think the same lame joke in

every video you're tolerating it this

video is now over should be cut off okay

so that's what I want to do in the next

video I want to look at how can we work

with this thing called a constructor

function which is perhaps a bit more

typical what you'll see in a lot of the

examples on the p5 website if you look

at other types of examples of making

objects with JavaScript you might see

this style in other places as well okay

so if you watch the end of this video I

thank you and I will see you in the next

one or or I mean I'll see myself in the

next one I guess okay