- Hello and welcome to a coding challenge.

In this coding challenge,

I should probably go eat lunch but I'm going to just

try this coding challenge.

I am going to attempt to program this.

This is a flocking simulation.

What you're seeing right now is an example

that I made many years ago

of a flocking simulation, a Boids system

running in processing.

I'm going to try to make exactly this or close to it

in JavaScript with the p5 library

starting from no code at all.

Obviously besides the dependencies.

Okay, so this is the example running.

Let me just give you a little bit of background here.

If you want to learn more about the flocking

algorithm as invented by Craig Reynolds,

you can go to this link to read this explanation of it.

And find many other links and resources

down here, whoa, that's a lot of stuff.

Have fun, see you in a few weeks.

You can also check out this YouTube video

of the original 1986 flocking simulation.

Wow, that's amazing.

This is so cool, oh my God, I love that.

You can also find an explanation of it

as part of my Nature of Code book online

with some diagrams and code written in Processing

and an exercise that you can try which I'll refer to

back at the end.

But I'm going to start from this, a blank slate.

I just have the canvas, you have some amount

of pixels in it.

There is nothing happening in the console.

I've got this code set up and draw.

So I'm going to write this code without worrying about

being perfectly organized and being able to scale

it very easily.

I just want to get the algorithm working but of course,

where is the button?

(pop music)

If you want to see a refactored example of it,

you can probably go and look and actually,

at my finished version in the Nature of Code

which I'll also link to.

The first thing that I want to do though is

I want to add another JavaScript

file called particle.js.

Actually, I should rename this to boid.js.

What is this term Boid?

When Craig Reynolds invented this algorithm

for simulating a flocking system like a flock of birds

or a swarm of bees, I suppose he didn't want

to use the term bird, but it is kind of like bird,

so Boid, it's kind of like droid but Boid.

Go read the original paper about steering behaviors

and flocking systems and you'll find out more

about the history about this.

But I'm going to make a class called Boid

and I am going to use the p5 vector object.

I'm going to make Boid objects and each time

I made a Boid object, I need a constructor

and I am going to give each Boid a position.

I'm going to give each Boid a velocity.

I'm going to give each Boid an acceleration.

All of those are going to be vectors.

I'm doing this is 2D.

You should, after you watch this, if you watch this,

you should make your own 3D version of this.

All of the math will work exactly the same way

but you'll just need to rethink how you're visualizing this.

Just to give things a start, let's just put

the position in the middle of the window

and let's write a function called show

which will just draw them as a circle right now.

Actually, I'll just even use point, like strokeWeight 16.

Stroke 255, point this.position.x.

I think Visual Studio code will do this for me.

No, where does it?

It fixed that for me once, whatever.

This PointerEvent, I'm not a PointerEvent,

I'm a point.

So now, if I were to then here make a flock,

which is an array, and I should probably make

a flock class, that might be a thing to refactor later.

But I'm just going to say a flock.push new Boid

and then I just want to say for every Boid in the flock

and I'm using of, I'm using a for-of loop

but I said in because that's the way I feel right now.

A boid.show and then I need to make sure

I am also referencing boid.js in my index HTML

so I have the basic Boid class, which just creates

a position, velocity, acceleration and draws it

as a point and then I have my sketch where I make

one Boid and I draw it in the center of the screen.

There it is, there's my boid.

(bell rings)

Step one complete.

I probably should plan this out

but I have one Boid, that's good.

Now, let's have that Boid move.

Let's actually write in the Boid object

a function called update and this I probably covered

ad nauseum in a lot of other videos

in my whole Nature of Code series.

But the idea here is that position is updated

based on the Boid's velocity and its velocity

is updated based on the Boid's acceleration.

If I now actually create a p5.vector, a random 2D.

I believe this is a function that will give me

a random velocity vector and I now go in here

and say boid.update.

Oh I just spelled it wrong.

I thought I missed the this dots.

Here we go, look, it's moving.

It's moving with a random velocity each time.

Okay, now let's just make a bunch of these.

Now I have a system of 100 Boids but it's interesting,

look at this, it fans out in the perfect circle.

Do you know why that is?

Because I make a Boid and I give it a random velocity.

That random vector is always of unit length one.

The direction is something different so they're all

actually moving with the same speed.

If I wanted them to have, and this is not an important

detail to the flocking stuff, but just to sort of

get a sense of how this vector stuff works,

I could say this.velocity.setMag, which is set the

magnitude to a random value between 0.5 and 1.5.

Now, you can see now they're all moving with a

slightly different velocity.

This is by the way, a nice little almost like explosion

motif and I could have them with a real big burst

then they slow down.

There's all sorts of physics-y stuff I could do

with this but I just want to do flocking.

How, how, how do I do flocking?

Let's return to this paper here.

This is the key behind Craig Reynolds' flocking algorithm.

Three rules.

Separation: steer to avoid crowding local flockmates.

Alignment: steer towards the average heading

of local flockmates.

Cohesion: steer to move toward the average position

of local flockmates.

Something so crucial in that description is the

word local, local.

Local, what does that mean?

Let's just do, I think the easiest one to do

actually is alignment.

Let's say there are five Boids.

Actually, let's make a lot more of them.

These are all of my Boids.

This is the one that I'm currently operating around.

It has a velocity vector like this.

Let me just make up, let's just pretend

like the ones around it are kind of moving

all in the same direction.

Because that'll be easier to think about.

This is the current one that I'm looking at.

And maybe some of these others are also moving

in other directions also.

I could take the approach to say this particular Boid

needs to align itself to everything.

But this is not really how complex systems

in nature actually work.

The emergent phenomena comes from this Boid having

a limited perception of its environment.

So maybe, it's actually only able to see things

that are in front of it or behind it

or to the right or what's probably the most simplest

thing to implement is within some radius.

So I only want to look at the Boids that are

within this radius, meaning this one, this one,

this one, this one, this one.

What if I iterate over all these ones that are

within some distance, average all of their velocities

and shift this velocity in the direction

of all those velocities.

That's what we want to do.

I am going to write a function now.

I'm going to put it in the Boid and I'm going to

call it align and it's going to get presumably

an array of other Boids.

The idea is this function align this Boid

with all the other Boids.

So what do I need to do?

I'm going to make a variable called average

which is going to be a vector then I am going to

iterate over and I could do all of these with

reduce probably in some higher order array functions.

That's a great thing for you to do.

(pop music)

Refactor it later but I'm just going to do it

this way, I'm actually going to use i because that's

maybe going to help me.

I'm not really sure but I'm going to use i right now.

Actually, no, I'll still use a for-of loop.

Let other, I'm going to call it other of Boids

and I'm going to just say average.add other.velocity.

So I'm adding up all of the velocities.

This is how you do an average, right?

Vectors, again you might want to go watch my videos

about how vectors work, but a vector, a p5 vector

just holds an x and a y or a x and y and a z.

So I want to average the vector, represented as an arrow

with an x component and a y component.

If I want to average, just like I might average

an array of numbers, I add them all up and divide

by the total.

Then I would say average.divide by Boids.length.

This would be a way of getting the average velocity

of all the Boids but remember I only want

the ones within some distance.

So actually, let's implement that right now.

Let's have some sort of distance like max.

I'll call it perception equals let's just make it

arbitrarily like 100 and then I'm going to now

say if the distance between this.position.x.

You know what?

I think there's a p5.

This is fine.

It's just going to be, it's kind of long the way I'm writing this

but I don't mind.

Let's actually make it in a variable.

D = the distance between this Boid's position

and the other Boid's position, x and y.

If that distance is less than 100,

look at that.

Look at this fancy thing that it's doing.

I have some prettier stuff that doesn't want

to let me write a long line of code.

I guess I'll keep that in there for right now.

So I'm calculating the distance between this Boid's

position and the other Boid's position.

If that distance is less than 100, I'm adding

it up and I should also probably have a total number,

total = zero.

Add it up.

I also should probably ignore myself and if other

does not equal this, right?

So I basically, I might as well put that first.

As long as the other thing is not me

and the distance is less than 100, add it up

and then divide by the total.

But obviously, I only want to divide by the total

if total is greater than zero.

All right, so this is kind of a little bit of