I am doing something very ill advised, I think,

in this video.

I'm a completionist, and I'm returning to something.

I made a video, apparently, almost,

today is February 20th, 2019, and I made this video,

February 22nd, 2017, almost to the day two years ago,

about prototypes in javascript because,

I was on this path, towards explaining a concept

known as inheritance and also another concept,

known as polymorphism.

Now I do have videos about object oriented programming,

inheritance and polymorphism, in java with the processing

development environment, you could go and watch those,

and I also intend, what I really should be doing with

my time right now, is making a video about inheritance

with ES6 classes in javascript.

And that's coming, and that's the video

you should go and watch.

But I just can't let this go.

At the very end of this video, I said,

and then I'll make a follow up one about inheritance

using prototypes in javascript and I never did.

And perhaps,

perhaps there's a kernel of value here, in that,

ES6 classes is really just what's refferred to as, like,

syntaxic sugar, I do have a sweet tooth,

over truly everything javascript is still a

prototype based object language.

So understanding how these prototypes work, and

how this concept of inheritance applies to them.

Is perhaps useful, so if you're still with me,

I'm going to try to explore inheritance with

prototypes in javascript as a follow-up

to this video 9.19 from two years ago.

So if you watched,

maybe you literally just watched that video,

and somehow ended up here which would be kind of amazing.

If you did you might have seen that I had this diagram.

And the idea of this diagram, was I was trying to explain

that I want to, I'm programming a particle system,

and there's going to be particles moving around my canvas.

And I have multiple particle objects.

Each of those particle objects, has it's own x/y position.

p1, has an x/y, p2 has an x/y.

But the functionality is tied to partice.prototype.

So I've added a show function that draws the particle,

as part of the prototype, and there is this idea of

a prototype chain, meaning that

everything descends from object.prototype.

So if we call a function or look at a property of an object,

we first see if it's that object's own property, or

is it somewhere up the prototype chain.

So, what would it mean, now, if what I want to do,

is create

a new kind of object,

I think in my nature of code book, I call it confetti,

which is kind of like a random, weird thing.

But, just use that that for this, cause

I can't think of anything else right now.

If I were to create an object, something called confetti,

and a new prototype,

a class,

again ES6 class,

the way I do this now is with ES6 classes,

I don't do this anymore, but I'm just exploring cause,

I can't help myself.

Contfetti.prototype.

What I want is,

I want confetti.prototype to inherit

everything from particle.prototype, but

maybe have it's own additional function.

I don't know like maybe it has a function called burst.

So it gets show, somehow it's going to get show,

I don't have to rewrite the show function,

it's a special kind of particle, that somehow inherits that.

So let's see how would we do that.

Alright so, let's go to the code.

The idea here is, okay,

I am going to write

a new

class called confetti,

but it's not a class,

this is an old, old way of doing stuff with

this idea of a constructor function.

Cause the idea here is I want to say now,

I'm going to have, and look I was even using var,

so I'll keep using var, cause I'm living in the past today,

c,

and c is a new confetti.

I want to be able to say it like c.show, for example.

I want to be able to call that function.

So right now, if I were to run this code I have,

this loaded here, c.show is not a function.

Okay.

So how do I have confetti inherit everything from particle?

The first thing that I'm going to do is,

in the constructor function, I'm going to say,

particle.call(this), oh this is so weird but,

(sounds of disgust)

I don't like this at all.

But what this is doing, is it's basically saying

execute the constructor function of particle.

Just do what I do when I am a particle.

So let's take a look, let's not do c.show,

but let's console.log(p) and console.log(c).

So we're going to look at the particle object,

and the confetti object now.

Hit refresh.

So look at this, both particle and confetti,

both have an x and a y at 99.

You can see they have those properties,

they both descend from object,

and if we go into here,

we see that particle has it's own show function,

and then it gets a whole bunch of other things from object.

But confetti,

it doesn't have the show function,

it just has all the things from object.

Okay, so how, how, how, how, how, how,

do I link the two?

So one way to link the two would be to say, you know what,

confetti.prototype

should be the same as

particle's prototype.

So I want to set the confetti's prototype to

particle's prototype.

Now this is not a good idea, I don't think, but

let's just, for the sake of argument, put that in our code.

And let me refresh this.

We can see okay.

Oh look!

The show function showed up there fascinating, amazing.

Well maybe we're done.

We inherited the show function.

While this looks right, I have now have

a confetti object that inherits show from particle because,

I've tied the prototypes together,

this is actually a terrible idea.

So I'm going to show you in a minute why

this is a terrible idea.

But let's leave it this way, just for a little bit longer.

Why, am I doing this in the first place?

The idea is that,

the idea here is that this particle prototype,

this particle object,

if you're looking at some of my other examples,

has a lot of stuff to it,

maybe it has this whole set of

physics algorithms built into it.

And I want to just create a new kind of object that

includes all of that physics stuff, but I can just draw it

in a different way.

So, let's just try to simulate that for a little bit.

By what I'm going to do is,

I'm going to add now another function to particle,

called

update,

and what I'm going to do in that function is

I'm going to say is this.x plus equal,

and I'm using p5 so I can use random,

and I'm going to just move the x and they y around randomly.

So imagine this is, like,

a really elaborate physics simulation,

that I've worked out for how this particle should move,

really I'm just moving it randomly.

So now what I want to do is,

I'm going to now add the draw function.

The draw function will loop, and I can say

p.update,

p.show,

c.update,

c.show.

And what I'll have now, I'm going to say background(0).

I'm going to just make sure I can really see this by

saying stroke(255)