[Music]
hello again welcome to the wasting time
portion of the Kotick train my name is
Dan Schiffman and I have about 40
minutes before I have to go I just
finished an hour of code tutorial and
the camera of course just shut off where
I made this project that tracks your
nose it tracks your nose with P 5 ml 5
and the PostNet model and I'm here now
to waste your time because I have a
bunch of things I want to experiment
with and discuss but you should probably
just go about with your day um if I can
manage their good a quoting challenge in
before I go I would like to do that so
one thing I want to test here and I
don't know why this isn't working let me
try refreshing this again alright so I'm
planning by the way it's probably gonna
be December 20th I am planning a
fundraiser for the processing foundation
processing foundation org if you're not
familiar with the processing foundation
the processing foundation is the non for
profit entity that that that manages the
processing project p5.js processing on
Python and also a lot of community and
education initiatives around art and
code and all sorts of stuff so read the
mission statement come hang out with us
at any number of processing days around
the world which is happening in 2019 and
I will be at processing Los Angeles and
hopefully at pressing NYC as well
alright that aside I wanted to figure
out I have this processing is a 501c3
non for profit and this setting I don't
see it I wanted to enable super chat for
good to see if I can to see if I can
figure out how to get live donations and
then I can also build something which
actually shows the live chat but maybe
what I first need to do hold on them so
what I'm doing over here is I'm in my
admin panel and I maybe I'll just build
something that manually pops up
something when there's a super
but why do I not have going to I'm going
to live streaming I'm going into events
a live edit there's 214 of you
apparently watching right now
and under advanced settings under chat
it's not there so they I used to have an
option that was super chat for good and
I could enable the processing foundation
so nevermind I wanted to test that now
I'm gonna have to figure that out and
test that another time oh look it's me
with googly eyes thank you - Bruno
Ruchika who made this a wonderful sketch
all right so let's close all this out
the other thing that's goofy oh okay so
I don't know what to do now hello how
are you
hopefully that hopefully that yeah I
should make you know what I should do
for the fundraiser is on the fundraiser
I should write ap 5 sketch that
communicates with the YouTube API and
like makes a little like heart or
something whenever somebody makes a
donation but you need to get that super
chat for good thing working ok so well
if anybody knows if I mean I I'll
contact YouTube but if anybody knows
about that or has worked with the
YouTube API actually I know you can
write bots and things for the chat so
that's actually probably what I that's
that's something I should look into and
do so what can I do right now I'm at 35
I had this idea actually this is
probably insane to try to do this I'm
doing like a flocking simulation let's
go to coding train on github Oh am I not
will signed in
I'm gonna need my authentication here
[Music]
let me look up the Authenticator oh I'm
I'm streaming and recording so weird and
go down here hit sign-in oh no that's
that's not my password that's my ah now
everybody knows my authentication code
but it's already gone alright let's go
here only 871 871 ideas regarding your
previous stream if you define a 2d shape
in relation to the points surely you can
in 3d as well yeah absolutely
alright no I really I have no plan
nothing whatsoever Schrodinger equation
create a gaffing revisiting pixel
sorting would love to do the quicksort
coding challenge right now but I don't
think I'm going to triple pendulum chain
we're actually marching cubes ooh that
would be a good one stolen necklace
drunken bishop spiral map projection
coding challenge maybe what we could do
you know I have this like weird idea
that I would like to do which is because
infinite recursion into the TV thing I
feel like we should just program that
that would be fun I was doing video
stuff but I don't know
plotter soft body simulation Roman
numerals clicking on object in 3d space
lizard visualization what is that of a
movement of a lizard
the lizard should have a triangle like
head body legs should go to the point
where them is very specific should go to
the point it should go to the point
where the mouse was clicked the hard
part will be the way the lizard moves it
should turn and move at the same time
and travel the least distance ideally
when the lizard is facing one direction
and when mouse is clicked it should
start moving like a real lizard
resetboys okay I don't think I'm gonna
get to this right now
so I don't know why but in my head this
morning I thought I should do the
flocking as a coding challenge
Boyd's Boyd's chance look I even assign
this no there's no thumbs-up on this one
I'll give it a thumbs up could this be
done in a half an hour that's the
question why come on github come on
computer may refresh the page it doesn't
even want to let me give it a thumbs up
yeah there we go how many thumbs up how
many thumbs up can I get on this page
right now I'd like to see clock at
destined Dustin is destined Destin's
office from smarter every day I don't I
didn't I don't know about that clock
from smarter every day but but I'm
always interested oh right we do a do
weird complex number math on the image
to make that spiral pattern in Matt
Parker's videos I also want to do I want
to do some like fluid dynamic stuff
because I have been watching a lot of
the smartereveryday videos about
shockwaves and I think that would be an
interesting thing to do a shockwave
visualization oh I think that no
nobody's thumbs up in this
just me I'm the only thumbs up emoji -
yes all right come on everybody by the
way this is my this is my live stream
for if I can get that to ten I'm gonna
do it this is my live stream for the
week tomorrow I'm actually doing some
school visits for hour of code which is
gonna be fun we got to number five for
six and what I wanted to say by the way
I am planning Obama's night okay are
there any oh let's check if there's any
coding faces tweets and please do I'm
just going to I'm now always afraid I'm
afraid of the internet so I'm going to
the coding faces page oh look at this
we have got some you've got one from
Carol oops here we go
Carol posted Carol d @d r ka ro L on
Twitter three minutes ago posted my
first ml experiments with coding faces
awesome what number are we at now 15
okay - thumbs down this is really like
wild to me to see this happen 2200
people are watching all right but I have
to I have to go I have a meeting to be
at do you think we could do the flocking
all right let's get prepared we'll check
back on coding phases
let's get prepared to do this so
flocking video
Schiffman let's see if that comes up a
little bit that's interesting I don't
know
let's go Craig Reynolds steering no not
videos oh let's original 1986 Boyd
simulation awesome
I want this page
Boyd's here we go and then nature of
code read now a ton of agents here we go
what those diagrams are better here we
go here we go okay all right
okay so I've got my references I
have got
[Music]
and here and we're gonna do this I think
this requires I don't want to do this in
the web editor I think there's too much
involved with the complexity of this
that that I think what I want to do is
use us I'm just gonna run my own server
way the console and I am going to oh hey
I already have the code editor open I'm
gonna get rid of this and someday I'm
gonna like make myself a little template
here but today is not that day oh I need
the CDN
and let's just in case I need the Dom
library let's get this and let's get
shot Jay s so just give it a fixed-size
background everyone and what's going on
here
Oh No Oh tonight
can I reset the bra I think I reset the
browser here and yeah this is not
selected anymore there we go so now this
can be minimized I don't need that open
I don't need this open and don't say
don't save so and then here this so how
am i doing I'm standing here that's good
so I'm not in front of the code so I can
actually do this sighs and I've got this
here which can actually also be over cuz
it can just be above me there we go
and look some more room in the console
okay perfect
all right 32 all right we're gonna do
the flocking the Boyd's challenge this
is definitely gonna take a longer than a
half an hour this is a really
complicated complicated project Simon
yes I know I haven't redone the beginner
p5 tutorials I think I may be me I need
to schedule a time to do more of those
okay so let me actually just go to oh
this is what I'm looking for by the way
here we go all right
why is that so slow
let's open up processing oh shoot
[Music]
so yeah like I kind of put an image
behind me that'll be interesting it's
like I'm spending forever tweaking heads
it was really wasting time when I should
just be coding
[Music]
all right
okay I think I'm ready now
okay the house definitely gonna need the
whiteboard so let me erase that
okay let me just send a quick message
here let me let me just send a quick
message that I need to send sorry hold
on just I'm gonna be a little late
okay all right close enough close enough
should get some water but whatever we're
just gonna we're gonna move forward with
this just let me just it's just that
like a few more and make them theirs
they're too big let's make them a little
bit smaller
Oh perfect now it's perfect
okay hello welcome to a coding challenge
in this coding challenge I am going to
attempt a program using the p5 library
from starting from no code except for
the what we're chance yeah I have this
like hang-up where when I say from
scratch people are always the youtube
knowledge well it's not actually from
scratch because you and yours it the p5
library huh you know what what what what
can I do here we go hello welcome to
coding challenge I am going to in this
coding challenge make this this is a
processing sketch thank you
72 475 okay have a random number
everything's gonna be fine
let me cycle the camera what's the
chance that I can be done in a half an
hour very very little chance well so I
haven't eaten lunch this is not gonna go
well hello welcome to a coding challenge
in this coding challenge I probably
should go eat lunch but I'm gonna 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
void system running in processing so I'm
gonna try to make exactly this or close
to it in JavaScript with the p5
libraries
from no code at all obviously besides
the dependencies okay so this is the
example running so let me just give you
a leg Reynolds you can go to this link
to read this explanation of it and if
find many other links and resources down
here well 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 love
that and 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 could try which I'll
refer to back at the end but I am going
to start from this a blank slate I just
have a canvas you have some amount of
pixels in it there is nothing happening
in the console and I've got this code
set up and draw alright so what do I
need to do now there's definitely going
to be a big need to refactor the code
that I'm going to write so if you look
at my example it's hopefully somewhat
well-organized but I'm gonna
[Music]
Thank You Matsuya for for me alright let
me just let me let me double back for a
second so I'm gonna write this code
without worrying about being like
perfectly organized and and being able
to scale it very easily I just want to
try to get the algorithm working but of
course
where's the button and if you want to
see a refactored example of any probably
so in looking actually at my finished
version in the nature code I'll also
link to so the first thing that I want
to do though is I want to add another
JavaScript file called particle JSI
actually you know what I should rename
this to Boyd dot Jas so what is this
term Boyd when Craig Reynolds invented
this algorithm for simulating a flocking
system like a flock of birds or a swarm
of bees I suppose you didn't want to use
the term bird but it is kind of like
birds
so Boyd it's kind of like droid but Boyd
go read the original paper about
steering behaviors and flocking systems
and you'll find out more about the
history about this but I am going to
make a class called Boyd and I am going
to use the p5 vector object and so eat
this climbing to make Boyd objects and
each each time I made a Boyd object I
need a constructor and I am going to
give each Boyd a position I'm going to
give each Boyd a velocity and I'm going
to give each Boyd and acceleration and
all of those are going to be vectors so
I'm doing this in 2d you should after
you watch this if super you watch this
you should make your own 3d version of
this all the math will work exactly the
same way but you'll just need to rethink
how you're visualizing this and just to
give things a start let's just put the
the position like in the middle of the
window
and let's write a function called like
show which will just draw them as a
circle right now I'll just even use
point like stroke weight 16 stroke 255
point this dot position x2 I think
visual studio code will do this for me
no weird it fixed that for me once I had
the enemy of whatever okay so this dot a
pointer event well I'm not a pointer
event I'm a point okay so now if I were
to then here make a flock which is an
array and I probably should make a flock
class that might be a thing to refactor
later but I'm just gonna say a flock dot
push new Boyd and then I just want to
say for every Boyd in the flock and
music of a music a for of loop and I
said in because that's the way I feel
right now
a boy dot show and then I need to make
sure I am also referencing boy KS in my
index.html so I have the basic Boyd
class which just creates a position
velocity acceleration and draws it as a
point and then I have my sketch where I
make one Boyd and I draw it in the
center of the screen there it is there's
my boy step one complete I probably
should plan this out but I have one boy
that's good now let's have that Boyd
move so let's actually write in the Boyd
object a function called update and this
is this I probably covered ad nauseam
and a lot of other videos and a whole
nature of code series but the idea here
is that position is updated based on the
objects based on the Boyd's velocity and
its velocity is updated based on the
Boyd's acceleration so if I now actually
create a P five dot vector a random 2d
believe this is a function that will
give me a random velocity vector and I
now go in here and say Boyd update
okay cannot read property add of
undefined oh no I have the Vista oh I
just spelled it wrong I thought I'd
missed then this dots okay there 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 a hundred buoyantly
interesting look at this it fades out in
this Purple's perfect circle do you know
why that is because I make a boy 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 dot velocity set mag
which is set the magnitude to a random
value between like 0.5 and 1.5 and now
you can see now they're all moving with
a slightly different velocity so this is
by the way a nice little like almost
like explosion motif and I could have
them with a real big burst and they slow
down there's all sorts of physics see
stuff I could do in this but I just want
to do flocking
so how oh wow 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 flock Nate's
alignment steer towards the average
heading of local flock mates cohesion
steer to move toward the average
position of local flock mates something
so crucial in that description is the
word local local local what does that
mean so let's just do I think
easiest one to do actually is alignment
let's do alignment first so alignment
let's make our own diagram okay so let's
say there are five Boyd's actually let's
make a lot more of them these are all of
my Boyd's this is the one that I'm
currently operating around and 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 so this is the current
one that I'm looking at so and maybe
some of these others are also moving in
other directions also I could take the
approach to say this particular Boyd
needs to align itself to everything but
this is not really how complex systems
in nature actually work the emergent
phenomena comes from this Boyd 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 the simplest thing to implement
is within some radius so I only want to
look at the Boyd's that are within this
radius meaning this one this one this
one this one this one this one so what
if I iterate over all of 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 so I am going
to write a function now I'm going to put
it in the Boyd I'm going to call it a
line and it's going to get presumably an
array of other Boyd's like the idea is
this function a line this Boyd with all
the other Boyd's so what do I need to do
I'm gonna 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 like reduce probably in
some higher order array functions that's
a great thing for you to
[Music]
refactor it later but I'm just gonna do
it this this way I'm gonna say I'm
actually going to use I cuz that's maybe
good that's maybe gonna help me I'm not
really sure but I'm gonna use I right
now actually no no I'll still do use a
four of loop let I'm gonna call it other
of boyd's and I'm gonna just say average
dot add other dot velocity so I'm adding
up all of the velocities this is how you
do an average write vectors right again
you might want to go watch some of my
videos about how vectors work but a
vector a p5 vector just holds an X and a
Y or an X and a wine is Z so I want to
average the vector it's represent it as
an arrow with an X component of Y
component but on average it just like I
might average under array of numbers I
add them all up and divide by the total
and then I would say average dot divided
by Boyd's dot length this would be a way
of getting a way of getting the average
velocity of all of the voids but
remember I only want the ones within
some distance so actually let's
implement that right now let's let's
have some sort of distance like Max or
uncle like perception equals let's just
make it through arbitrary like 100 and
then I'm going to now say if the
distance between the distance between
this dot position X or 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 if
the distance let's actually make it in a
variable D equals the distance between
this boyd's position and the other
boyd's position x and y and if that
distance is less than 100 look at that
look at this fancy thing that it's doing
I have something like a prettier stuff
that like doesn't 1 what you learned a
long line of code I guess I'll keep that
in there for right
now so I'm calculating the distance
between this Boyd's position the other
Boyd's position and if that distance is
less than 100 I'm adding it up and I
should say I should also probably have a
total number total equals zero add it up
I also should probably ignore myself and
if other well I should does not equal
this right
so I basically and I might as well put
that first right 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 a long-winded algorithm
now but what oh and perception if d is
less than perception so okay I'm
starting with a perception a radius of
100 maybe that would be better as I call
it like perception radius that's really
what it is I'm starting with a
perception radius of 100 an empty vector
I'm adding up the velocity is of any
vector any any Boyd that's near me
dividing by the total and as long as I
found one dividing by that total and you
know I probably should like run this to
check this code but I'm just gonna I'm
gonna keep going so now here's the thing
I could just say like for example I
could do something weird this would be
really weird I could just say this dot
velocity equals average like what if I
did that and then I said Boyd like here
I said Boyd dot align flock and I don't
know what's gonna happen here but let's
refresh this right they just basically
don't go anywhere because they're all
instantly equal to each other's velocity
so that's not really a good way what I
need to do now is I if I don't want to
actually assign its velocity to that
average directly I want to steer towards
it and this is where Craig Reynolds
steering formula comes in a steer
force equals some desired velocity minus
the current actual velocity it's kind of
like the error right if I and moving
this way so if I'm sorry moving this way
but I want to move this way the way I'm
moving - the way I want to move is oh no
sorry where's my eraser desired minus
velocity the way I want to move - the
way I am moving is the steering force
meaning push me in that direction so
apply a force maybe I'm gonna turn the
steering wheel you could think of these
as bees or cars or Birds or whatever but
this formula desired - velocity will
give me the steering force and what is
the desired velocity here the desired
velocity is actually that average so I'm
actually going to rename this to desired
and I'm going to add it up and divide by
total and then I'm going to say this dot
velocity equals no I'm not gonna say
that I'm gonna say steering equals and I
can actually just I should actually call
this steering because I could do all
this I can I don't need to save anything
as I'm going so I'm gonna call that the
steering force I'm gonna add all the
velocities I'm gonna divide by the total
and then I'm going to say steering force
is the desired subtract this dot
velocity and I'm going to say returned
steering so I want this function to
basically I want this function to return
that force so really what I should be
doing is I should have I'm gonna write a
function called flock that's maybe a or
like yeah flock with some number of
Boyd's and then I'm gonna say a line
meant equals a line with those Boyd's so
I'm gonna get this force and I suppose
we're okay steering is here so you know
what I should always return steering so
I want to always return a vector but if
it didn't find anything I'll just return
the zero vector and then what I'm going
to do is I'm going to say acceleration
add alignment so the idea the way that
if that a physics engine works and this
has to do with and this is like a very
simple kind of crude physics engine but
force equals mass times acceleration
this is Newton's law of motion or
acceleration equals force divided by
mass or in a world where the mass of
everything is one acceleration equals
force so if I want to apply a force to
this object I just need to set the
acceleration to that force and actually
so that's what I'm going to do just
starting out here I'm going to say
acceleration equals alignment okay so
now if I go back to sketch and I say
Boyd dot flock Boyd's we should now have
all the Boyd's
you doing that one with just just
implemented with that align alignment
rule let's see Boyd's is not defined
sketch touch is line 14 oh it's called
flock oh this is my variable naming is
terrible but I'm gonna leave it that way
right now a line is not defined Boyd is
a line Boyd's oh this dotted line this
dotted line Boyd's oops acceleration is
not define oh my goodness
[Music]
that's not much better ah okay
so let's think about this I so so it's
kind of working
let me um let me give them a much higher
burst of speed because I think and all
them starting in the same place actually
also let's let's do a couple things let
me actually not have them all start in
the same place because that is just to
see this effect happen let me actually
start them in random places on the
screen so we changed that let me make
the perception race a little bit smaller
and I don't know why this matters but
let me draw them like a little bit
smaller okay so you can see and let me
actually have them start out going quite
a bit faster so you can see as they get
near each other they start to they start
to get each other's velocity sort to
average each other velocity with their
neighbors and you can start to see these
clumps moving together
now these Boyd's to steer with like
infinite power in a way like I'm saying
hey your your steering force is the
difference between your desired velocity
and your current velocity and this apply
that directly to the acceleration but if
you think about it if you're driving a
car you know in a car racing game for
example is this concept of handling like
how well can that car steer so we should
probably have a variable we should
probably have a variable I'm gonna call
it max force and I'm gonna set it equal
to one for a second and then what I'm
going to do is here I'm gonna say a
steering limit this dot max force so
this what this does is it limits the
magnitude the length of that vector to
some maximum force so this should be
exactly the same right we're not seeing
anything different but if I were to make
maximum force like 0.01 like really
small right now you're gonna see like
they're not actually change
their velocity they are but very very
slowly and the other thing we're really
gonna need to do I just have to like
give up and do this I'm gonna add some
something for the edges here so I'm
gonna say if this dot position dot X is
greater than the width this dot position
dot X should equal 0 else if this stop
position dot X is less than 0 this stop
position
dot x equals width so and then I'm just
gonna do that for the Y why are you here
why did the terminal open I have no idea
I think I hit like a key command that
made that happen and then we're going to
do this for y and I could do this in so
many different more thoughtful or
refactored ways but this is gonna be
good oh no what am i doing okay with
with xx YY YY y xx xx xx with with
alright now here let's do buoyed edges
so we should see them reappear wrapping
around and now let's go back to the boid
and let's make this like point 2 is kind
of reasonable ish so interestingly
enough there kind of like it slows them
down which is sort of which is
interesting and there's but I'm only
doing alignment right now but you could
see how this works right you can see
they're all starting to align with each
other what I could keep them going it's
a minimum velocity which might make
sense and you could see how these are
like kind of going back and forth but
you get the idea or Alanna why are they
all slowing down is that just like a
coincidence one thing I could do is one
thing I could do this this is actually
gonna be worth it because I should also
give them a maximum speed like they like
I this is going to be a parameter of a
variable that's gonna allow me to
control the system pretty well and I
could consider their desired velocity in
the alignment to not actually be the
actual average velocity but just the
average direction
because I could then say steering dot
set magnitude to this dot maximum speed
so basically I'm saying like I always
want to go in the direction of my
neighbors but at maximum speed and I
don't know that that's really an
important detail but if I add that in
here we might get the effect that I was
sort of hoping to get which now this is
what I was expecting to see as they get
near each other they're all starting to
align together let me refresh that one
more time you can see that they're
clumping and as they group they all
start to align so this is the alignment
rule this is a very simple rule it's
predictable it's obvious this is
alignment
how many more rules do we have to do at
one point I messed up the camera didn't
I well whatever some fancy
post-production thing that not you can
maybe do let me pause for a second
there's gonna be an edit point alright
12:06 all right all right
half an hour so far all right it's going
to move faster now I think let me uh
cycle the cameras
okay
so that is alignment whoo-hoo alignment
now all we need to do is add cohesion
and separation so separation is going to
be the hardest one to do so let's do
cohesion next so the same thing we're
going to look at our neighbors we should
go back to what the rule is actually
defined as let's go back to Craig
Reynolds original page cohesion steer to
move toward the average position of
local flock mates okay this is actually
not going to be that hard because we've
already calculated the average velocity
of local flock mates now let's just
duplicate that code and I know I know we
could refactor it I won't play the song
because we could probably do this all in
one fell swoop there's so many
possibilities but now I just want to get
the average location of my local flock
mates and steer towards that all right
so I'm gonna the way I'm gonna do that
in and I'm just gonna I'm just gonna go
nuts and copy/paste this whole thing and
call it cohesion and I'm gonna keep the
perception radius I'm gonna keep this
idea of steering keep this idea of total
go through all the Boyd's check the
distance between myself and the other
ones as long as they're not myself and
within the perception radius what am i
doing steering ad not the others
velocity but the others position then
right so this should clearly be
refactored into its own function what
whatever then as long as I have at least
one I'm going to divide by the total now
I don't want to set the magnitude to the
maximum speed so what I have now in
steering is the average location so if
this is the average location well let's
say it's over here then what I need is a
vector that probably that's clearly not
the average location but let's just say
it was the average location is kind of
like where this Boyd is but I want to
steer in that direction
so to get a vector in that direction I
take the average location minus the
current position of me which is
basically saying now what I want to do
is say steering subtract this stop
position
so subtract my position out I have a
vector that's pointing from me to the
average location remember which is in
the steering variable then let's say I
want to go at maximum speed and then I
want to though so this is now my desired
velocity I'm going to subtract out my
current velocity limit it to max force
and there we go that's cohesion so now
in where is that in flock let cohesion
equal this dot cohesion boyd's and then
oh we have a big problem this dot
acceleration equals alignment this dot
acceleration equals cohesion so how can
I set the acceleration to two different
forces but before I even answer that
there's an easy answer to that question
let's just comment out alignment and
let's watch cohesion happen right we can
see they start to group together this is
cohesion happening bate and that
neighbor radius by the way is a super
important value right that neighbor
radius if I were to change that and I
have a different one that perception
radius if I were to change that to like
ten thousand right they're all going to
come together as one because they all
see everybody if I were to change that
to 10 right there really those little
pairs like you could see that kind of
get in little groups of two the force
though isn't so strong so like if I were
to change the maximum force right to
like one now you see them they should
almost like these little like electron
thingies that like start magnetic things
that start to like spin around each
other and then fan off ah okay
so there's so many possibilities here
you know I can make the maximum speed to
oh I'm not actually limiting you could
see there we go that's what I was
looking for you can see they get into
these little groups but let me go back
and say maximum speed is for the maximum
force is point two and I realized this
maximum of speed is not actually a
maximum speed because in update if I
really wanted it to be a maximum speed I
would want to say this dot velocity
limit this dot max speed
so let's actually add that in and see
what we get this is oh and let's put the
perception radius back at 100 and there
we go so now we have cohesion so we have
cohesion what happens if we have
cohesion and alignment how do we get
cohesion and alignment okay this is
really working it's gonna be a really
long video
all right cohesion and alignment the
problem rests here it's is actually a
really easy thing to solve because this
is called force acute the answer yours
force accumulation in physics if two
forces are acting on an object the
resulting acceleration is the sum of
those forces so all I need to do is say
acceleration dot add alignment and
acceleration dot add cohesion right
because why is this not falling because
the force of gravity is pointed this way
and the other force of my hands holding
it up is pointed in the other direction
and with an equal magnitude therefore it
is at rest those two forces have a net
added together have a net acceleration
of zero but obviously so I need to add
them together but there is this if I
actually do this right now we're gonna
see some really crazy behavior this
looks like it's kind of working but it
really isn't because what it should also
have is this acceleration shouldn't
accumulate over time at every moment in
time I start with a net acceleration an
acceleration of zero and add all the
forces together so what I should do
right before I flock is say this dot
acceleration set zero zero this is
setting its values to zero and zero
another way I could do that is just
multiplying it by zero
there's multiplying a vector by zero
takes everything out it could make a new
vector or whatever but this will work
nicely and technically this also might
make more sense here this is kind of
like after I finish updating the
velocity then I can reset the
acceleration in case there's other
things at play so now we can see both
cohesion and separation I'm sorry
cohesion and alignment are at play look
at this eventually they're just all
going to become this
one clump come on you can catch up catch
up one club okay um one thing I would
like to do I really want to attach
sliders to those parameters but I've got
to resist because we got to add
separation hey we've got alignment and
cohesion separation this one's a little
bit hard let's look at it hmm
wait come on scroll steer to avoid
crowding local flock mates steer to
avoid crowding local flock mates okay so
we have the idea where's my eraser we
have the idea of a local flock mate
let's kind of erase this for a second to
just deal with two here's me that's me
here's my local flock mate
if this local flock mate is too close
it's within some sort of distance
threshold
I want to steer to avoid that what would
be my desired velocity my desired
velocity would be to move in the
opposite direction so the idea is my
desired velocity is in the observer but
what if there is one here my desired
velocity would also be in this opposite
direction so then my net desired
velocity would be the average of these
two and it even would make sense for the
magnitude of that desired velocity to be
proportional to the distance so if this
one is here I maybe want to avoid it but
I only really need to think about
avoiding it a little bit if this one's
really close I need to avoid it a lot so
the magnitude of the vector is inversely
proportional to the distance of the
local flock mate and so this might end
up with kind of like a desired velocity
of something like this if I'm averaging
those two together okay so let's see if
we can implement that not gonna be super
easy but let's do it okay so the nice
thing is I'm gonna start with cohesion
because we've kind of cohesion as close
to separation and again boy
[Music]
I should show you that I'm wearing my I
will effective displayed our t-shirt by
the way
okay so separation so I'm gonna leave
this at a hundred steering I think I
might need to use more like I I kind of
like the idea of just having one vector
that ends up is it's sort of the average
here then it's kind of like the
difference but I think I need I think I
need to think I need that's the one step
at a time so I'm creating this vector if
so this is the same if it's not me
and it's within the perception radius
what do I need I need a vector I'm gonna
call it difference which is the others
I want a vector sorry that points from I
want a vector that points from the other
from the other to me because I want that
to what go to the opposite direction so
it's my position - the other so I want a
vector a new vector which is the diff
subtraction between my position and the
others position so this is a way of
calling the subtract function which
doesn't operate on a vector but
subtracts two vectors and gives us a new
vector which is difference then I want
the difference to be inversely
proportional to that distance so I'm
going to multiply it or set its
magnitude something like that I mean
this is making it I'm gonna devour
divided by distance I could just say
divided by distance right it's inversely
proportional the farther away it is the
lower the the higher the the farther
away it is the lower the magnitude the
closer the higher the magnitude okay and
the distance I guess technically that
distance could be zero and that would be
problematic but with floating point math
we're almost never going to get a value
of zero okay then I want to add then
that is the thing I add up that's the
thing I want to average all those
vectors that are pointed away from the
things near me I think we're actually in
pretty good shape here this isn't as
hard
I thought oh that was done this is the
tricky part here so get a vector that's
pointing away from the local flock mate
make it inversely proportional to the
distance add it up then this is the same
because oh no no I don't need to
subtract position I kind of don't know
if I want to I let's leave this it's
let's leave this whole always go at
maximum speed thing and then the rest is
the same the rest of the same right once
I have that just average it set it to
max speed subtract out the velocity and
limit it to maximum force and that's the
end okay so let's see so now just to be
sure that this is right pause for a
second okay just to be sure that this is
right let's go into boid let's go to
flock let's add that lets up separation
equal this dot separation and then let's
add in separation and I want to not
bother adding cohesion and alignment so
I just want to see separation right now
oh and William in the chat is saying 1
divided by distance squared maybe that's
probably a good idea squaring the
distance that's to make it quadratic or
whatever that's probably smart I bet you
if you read this full explanation it
does something like that but let's just
see
so are these separating yeah it looks
like they are it looks like that when
they get close to each other they're
kind of moving away from each other
weird weird behavior do I have this
isn't it look exactly like what I
expected
let's let's give them maximum force like
just like really let them be super
strong about separating yeah there we go
okay so that's more like what actually
that's way too strong yeah why do they
feel like there something is weird here
like I think my inversely proportional
thing is wrong what's going on let's go
back to separate Oh it's perception race
is one
and there's just so many of them that
they can't all separate with this is
what I expected to see and I think it
actually it wasn't really a bug in my
code it's sort of a bug in my conceptual
sense of how this works and also maybe
the inversely proportional thing so a
couple things that I might do here it's
like what if I take this out and then
also let's try dividing by distance
Square to kind of like that idea to make
that whoa that's weird that makes them
want to stop
is that because oh because their desired
velocity ends up being oh yeah it
actually has to be maximum speed because
if if in other words if their desired
velocity is like oh I'm far enough apart
I my desired velocity is now zero then
it's going to make me want to like stop
yes because I'm already always returning
an empty vector ah what I could do is
instead of returning an empty vector I
return a null vector and don't bother
adding that as a force but that all
aside let's leave it at there's so many
ways you could change or alter this
though this is pretty good this is what
I wanted to see this is separation only
so now we should be able to see and
let's I'm gonna do this really quickly
I'm going to not be thoughtful at all
about the interface but just so I can
debug this effectively I am going to
going to sketch j/s I am gonna say let a
line slider cohesion slider and
separation slider and I should use oh
and I'm just gonna say a line slider
equals create slider I'm gonna give it a
range between 1 and 5 with and actually
just give it a range between zero sorry
zero and five with a starting value of
one and increment value of 0.1 so I want
to do this for all of these sliders
cohesion slider separation slider and
then in Boyde i want to say where i
calling flock I want to just scale them
so I'm gonna say separation sly oops
separation dot
multiply separation slider value and
then I'm gonna do this also for cohesion
and for alignment doesn't really matter
the order but I probably should be
consistent just for like just gonna
always mean the order doesn't matter at
all but I'm so this is separation slider
a line slider and cohesion slider or
those the names so again I'm not
thinking about design or interaction
design or visual designer any of that
just wanted to quickly put three sliders
in there and now so by the way flocking
so this is now the flocking simulation I
didn't draw in this triangles they're
not rotating but this is the flocking
simulation but just for the sake of
argument this should be what order did I
make them in like they're not labeled
alignment cohesion so I want to do yeah
alignment cohesion separation that's the
order that I thought of them in so let's
just turn all the way up separation oh
boy let's let's turn off right this is
only separation now turn that off let's
turn on only alignment whoa wait no
that's oh they're just the alignment is
so strong when the alignment is so
strong it makes them like go in circles
around each other I'll talk about why so
let me just decrease those ranges so
there's a little bit of an issue here
which is that look at with the previous
ones updated value right instead of
taking a snapshot of all their current
velocities and then each one updates
based on that snapshot I start with a
set of velocities I update the first one
based on that set of velocities and now
its new velocity is there so when the
next one it's actually updating itself
based on the previous one that I updated
which is not how the world works it's
not how time works but that's causing
them to like ripple into each other
based on the order and go in circles
that is something that you might want to
consider fixing I'm not going to fix
that but now I can really play with
these I can get different sort of
qualities of flocking based on how
strong I make these rules so no
alignment a lot of cohesion no
separation add a lot of separation less
cohesion I mean separation I shouldn't
make too strong but it's important and
let's add some alignment back in and
there we go flocking whoa okay this
coding challenge is complete it is done
I will be uploading the code you will if
you want you can look in the video
description to find the code as a
snapshot as exactly what it is let's go
make a list let's make a list on the
board of things you might try to do and
I'm going to take suggestions from the
chat and make your own version of this
and you can hashtag coding flocking
coding train flocking I don't know but
let's let me make a list of some things
you might try number one is do deal
shoot okay I'm hold on time out and ity
edit this I'm throwing away these
markers that don't work me in the
hallway there we go okay alright number
one snapshot of all velocities that's
gonna be my code for that number two op
an optimization you can do is called a
spatial subdivision or a quadtree
optimization one of the things that
makes this really slow and I'll just
show you here for a second is if I were
to try to do this with a thousand Boyd's
right look how slow this is but you have
to realize it's not a big deal for p5 to
draw a thousand things moving why it's
fine drawing a thousand things moving
but as soon as I put flock the flock
function in it's super slow the reason
that is is because it's got to do and
every boyd again check every board
against every other boy check and so
there's a way of subdividing the space
spatial subdivision into bins or buckets
and have the boys only checked ones that
are near each other in the same buckets
and that's called you know i probably
have a lot of distance the distance
calculation i could reduce
the number of times I call it but for
this quadtree or just simple spatial sum
of subdivision so these are things you
could try these are just code
refactoring really actually the other
okay the other thing you could try
another thing you could try is hold on
sorry I lost my train of thought oh
train of thought because it was related
to this spatial subdivision thing
optimize well maybe there's some
suggestions in the chat right now had
attractors or trees multiple yeah fix
the velocity snap trapezoid make believe
that I'm just looking at the chat I had
something in my head that was the third
thing snapshot of all the velocities
optimized quadtree and subdivision oh
yeah I said reduce the distance squared
whatever okay another thing you could
try to do is really build a more
sophisticated interface and there's lots
of other parameters that you could
control and try right there's the
perception radius so we saw that you
could change the weights to the weights
for alignment cohesion and separation
but there's also the perception radius
there's maximum maximum force
there's maximum speed you know each rule
could have a set different perception
radius so many possibilities so this is
this is the stuff that you could do to
like really control and tweak all the
values and play with it you could
another thing you could do is just
design visual design like are they
triangle circles are they flapping
butterflies like how do you design of
the voids like make your own beautiful
visualization of how you design and draw
them tadpole like how there's so many
ideas there another thing you could try
to do is 3d can you extrapolate this
into 3d
and and if you see the word quaternion
anywhere you start to research you might
want to turn back but but you could you
could extrapolate this into 3d look
there were some interesting suggestions
oh right Boyd's with different
parameters yeah so a sort of another
suggestion which came from the chat
thank you is Boyd's with different
parameters right so there's no reason
why every Boyd has to have the same max
speed or maximum force they could same
perception radius you could implement
this thing called the view rule which is
kind of interesting to think about I
don't know why I'm going to I have a
diagram of it but it's one of the things
that right now is each Boyd there's two
things about this one each boy can see
everything around it but what if the
Boyd itself could actually only see if
it's moving in this direction things
that are within its particular view in
front of it maybe it doesn't deal with
anything that's behind it doesn't try to
use a cohesion or alignment or
separation and then the view rule which
is posited by flake in the book the
computational beauty of nature I'll link
to that book also it's a wonderful book
with tons I'm probably like 90% of the
things on my channel are all from the
computational beauty of nature book but
the flake positive to this additional
rule that you always want to keep your
view empty so if there is a Boyd in
front of you you want to steer that way
to keep your void your your view empty
clear and this might result the theory
is that this will result in something
that looks more like that pattern that
you'll see of actual birds flocking
where they kind of appear almost in this
triangular pattern so what's interesting
about this right you see a pattern like
this you think AHA this is a top-down
behavior there is a leader this bird who
is saying to all the other birds fan out
for me and follow me but yet this type
of intelligent behavior emergent
phenomena can come actually only from
simple local rules of in
action and that's by the way this is
what this whole video was about if you
didn't gather that already okay buzz
what are some other ideas other ideas
might be open other ideas might be
adding obstacles other forces there's
you know thinking about these living in
a world where they're interacting with
other things maybe there's a predator
that comes in and it's chasing them all
sorts of unique and interesting
possibilities okay so thank you everyone
for watching this coding challenge put
your other ideas for things people could
do in the comments and then if you make
your own version of this flocking code
please go to the coding training com
challenge page and submit a link to the
- what you made I will also make a
virtue of this the runs in the web
editor and linked to all those resources
like the Craig Reynolds original paper
about flocking the video on YouTube and
the chapter in my nature of code book ok
thanks for watching this coding
challenge flocking and I'll see you soon
okay alright everybody
oh boy it's 12:30 I definitely have to
go I'm glad that I fit in this extra
coding challenge and I'm actually
recording it to disk so this can be
edited I assume this is at least an hour
right but hopefully this was useful
thank you all these nice comments so
when will I be back a week from tomorrow
if I have to guess so there will be no
live stream tomorrow this was today's
coda train episode the next time I will
be back is a week from tomorrow next
Friday
upcoming soon is a live stream from the
ITP winter show if you're in the New
York City area I highly recommend you to
come to this this is the show of
students work at ITP Sunday December
I'll probably do a livestream from the
show in the afternoon of Monday December
17th and then later that week hopefully
on December 20
I'm gonna do a fundraiser telethon for
the processing foundation but I got to
figure out this super chat thing so
that's that what else do I want to tell
you ah if you live in Europe possibly in
France or near the city of Paris
coming soon I'm hoping to announce a
workshop slash meetup that I'll be doing
in Paris in early January so don't to
say anything more about that because
it's not settled I don't even like know
exactly which date yet but stay tuned
I'll announce it on Twitter I'll mention
it again here but that I'm hoping to I'm
have that which is the first ever
possibly like I mean obviously I go to
things and I've met people in my own
little room here but anyway but this is
exciting to me to try that especially I
get to practice my terrible terrible
French alright perfect hi yes Alka okay
let's talk offline Alka about your
suggestion to fly to New York City to
help with the livestream for the effect
actually I'm like it this is this is
something I would seriously take under
consideration okay motion TX thank you
new member wait I want to figure this
out there's a way that I can make a page
and I have to like log in to my other
guy I guess I can okay I want to make a
pop-up thing happen when I get a new a
new member in for math music says
workshop in Paris I live in Paris
excellent I would love to go everywhere
frankly traveling is hard inexpensive
and uses a lot of energy both the
world's energy and my own energy and I
have like these small children that I
spend a lot of time with and a family
and so I can't really just go everywhere
but I dream of going everywhere I would
really like to go to Japan I'm willing
to go I've ever been to anywhere in the
Middle East
ever been to Japan urban Africa I've
never been to Australia New Zealand
these are just things that are popping
I've been to a lot of places in Europe
and Canada been very very few places in
South America I don't know world tour
coding train World Tour coming soon
thanks everybody
and in for mock music if you
to the Meetup you will see me I will be
bringing my stickers I will be bringing
the coding train stickers thanks
everyone and yeah Norway
ah I have been to Norway so lol elo
leaves just thinking what can I tell you
about my favorite place one of my
favorite places in the world rune de
Norway this small island off the coast
of Norway called rune de which I believe
means bird island is one of my absolute
favorite places at certain times of year
you can go see the puffins I went on
this like six-hour hike mostly six out
really long hike all the way to this
lighthouse that you can only get to by
hiking and then you can just sleep there
overnight didn't we like back but this
place is amazing I really want to go
back there there's a centre there which
is like a bird science site anyway if
someone can figure out a way that we can
do like a live coding train from the
island of rune de that would be awesome
Dominican Republic that would be a
Brazil all these amazing places all over
the world here's a nice picture of
runa-san unda it was where did I stay I
stayed at the this the bird center there
Environmental Center
yeah research safe so I stayed here you
can actually just stay there like it's
for scientists but you can also just
book a room there because I am NOT a
scientist the Runet environment is as a
research station with four main
activities
oh this is perfect for flocking let's
let's look up actually I was in a
Norwegian I'm not kidding
anybody could find this I had it buried
in my computer somewhere I was I'm in a
Norwegian Travel Magazine with my family
because they were there shooting photos
to be like I think it was a Travel
Magazine and we were like the only
people standing on the island because it
was like kind of the wrong time of year
to visit there were no puffins rune de
Norway puffins al it's near ålesund
um so yeah these are the puffins of rune
de noir Yeah right
it's bit I see these photos and I'm like
terrified because they're all through
these like cliffs you could go right up
to the edge
like we were doing that I think about it
and like oh my god we're we doing
something really dangerous this place is
amazing
Cody train is sponsored by the Norwegian
travel Council no not at all
but you know it's very expensive in
Norway I mean I think I won I don't
think hopefully it's not for people who
live there because they have excellent
services you know health care and those
types of things but as a tourist there's
incredibly expensive food food was so
that is and I don't know I have to say
it didn't love the food or oh yeah I had
some really interesting things to eat
and I spent a little time in Oslo and
there's some like really awesome
restaurants there but there was just I
don't know maybe it's hard like it's
like dark and wintry I love you Norway
all right I think by the way the author
of the Iowa factor the Sun is
I have to go I'm like super lazy alright
goodbye everybody
please refactor my pocket code I got to
get it in the editor or the coding train
account soon this challenge will
probably be up edited next week sometime
and I will see you I'm going to I am
going to stop the livestream on this
page where's that page shoot I don't
have it open okay
no live control room one thing that I by
the way one thing that I'm planning on
doing mpj gave me this idea I mean I
could have thought of this myself but
lots of people do this is getting a loop
for like stream about to start loop for
thanks for watching and like a loop for
like be right back like fun little
coding train animation thingies anybody
wants to make some of those I mean I
would be glad to hire somebody in you
know Matthew who does video editing has
a lot of talents and might be interested
in working on this I don't mean to ask
for things for free but if you're
interested if you're an animator and you
like rainbows and coding stuff and you
wanna help me make some crazy
interstitial stuff that I could put an
open broadcast studio get in touch okay
stop streaming and I'll see you all
later