[Music]
I'm gonna say once again coordinates
[Music]
coordinates
[Music]
and auto-tune and the internet will fix
that
[Music]
coordinates
[Music]
hello and good morning I almost had that
timed right I was gonna the end of that
song crossfade into me my mic is on
hello hello I'm trying to be somewhat
more professional this morning with my
opening coding train logo and some music
which instead of be just here like is
the is the stream starting is the stream
starting oh wait okay hi so this was my
to attempt let me know how it went
welcome and good morning and well to the
coding man shoot I was doing so well
welcome made a good morning no it goes
like this
good morning and welcome to the coding
train my name I'm your host Daniel chief
bond and I am here every Wednesday 10:30
a.m. Eastern to do some coding stuff and
actually I'm really excited about today
I recently released a few videos about
making a gif I think by the way that
these videos are getting tons of views
just because people want to know whether
how I'm gonna pronounce the word it's
like oh I feel like I really that wasn't
my best work either that gift loop video
I feel like I went on and on and on at
the beginning and then in the end it's
just a rotating square and I could have
done so much better
but alas people seem to be enjoying it
and watching it if you go on to Twitter
and go to a hashtag gift train gift
train gift train because these gifts are
little gifts you know hearts out into
the world if you go to gift gift train
you can see I'm just gonna go to latest
here wait a second I'm a little bit
afraid to click on this one I'm sure
it's fine but you can see that people
are sharing gifts that they've made and
I hope to see more of these this is a
pretty interesting one by the composer
of the Iowa refactor this later song
[Music]
so please continue to share those in
addition to sharing on Twitter or I
suppose if I ever got around to using
Instagram could share stuff with me you
know I have this hi this whole thing
where I was gonna switch over to using
mastodons and somehow I never was able
to make that really happen but maybe
I'll give that another try
but no no that's spoiler alert okay I
also you can also share things on the
coding train website itself here are for
heart submissions that I will now share
with you the first one I will share with
you is love hearts by unrig Ezra so I
guess I can click and everywhere I click
it makes a heart whoo look at this and
they're like oh oh it's like X tracing
its contours more and more this is
beautiful excellent work I love it
let's look at the changing the Cassini
oval to a heart by Simon a different
Simon then the usual coding train viewer
Simon Tiger ah look at that
I love that another beating heart I'm
gonna make I'm gonna make more coding
challenges with like hearts and stars
and rainbows and things like that but
just it brings me such happiness and joy
okay that's beautiful work
rainbow heart excellent use of the
combining of the rainbow with the heart
together let's click on this this is by
Ria's Lockhart laaskar here comes it's
falling from the sky oh it's coming from
the sides I think this one needs
[Music]
that's beautiful I love this I love the
creative use the way people are using
this sort of path of that formula the
heart curve creatively and having it be
the boundaries of the basically a
particle system that's coming in really
nice work and let's look at one more
heartbeat by copper of France and here
we go look at that that is really cool
so this is look at this so you can see
the cardioid shape and the particular
heart curve there and you can see it's
from beating back and forth between the
two of them and this also is a wonderful
this is a wonderful reference to a
wonderful allusion to the circled square
shape morphing coding challenge that a
golden Levant presented on this channel
here so you can see this is more thing
between two shapes the heart shape and
the cardioid shape see me sad to move
away from hearts today we're gonna have
to keep the heart we're gonna have to
keep the heart thing going alright so
thanks everyone for joining I'm gonna
get I'm gonna try to not have too much
exposition and just get right to the
coding because I am so excited about
this topic that I'm gonna do today if
this happened spontaneously as if in a
dream to me and yet it yet it's
something that's been around for quite a
while that people have been using as a
technique and I I would say a pioneer of
this technique is Etienne Jacob Etienne
Jacob I don't know how to say the last
name in French and you can see this I
don't know that this was made based on
the fact that I did a heart curve coding
challenge I can only just be I can I can
be somewhat semi confident suspicious
that maybe it is somewhat and partially
and a little bit inspired by my coding
challenge simply by the date of February
15th given that I did the coding
challenge on I think February 13th was
my live stream last week because today
is February 20th but what I want you to
look at this and I want what I want
YouTube look what I want what really
blows my mind about this it might not be
immediately apparent to you is this is
not a processing sketch a p5 sketch
running presumably it might have been
created with one of those things but it
is in fact a gift there is a little bit
of it what's amazing about this is
there's a lot of randomness and
randomness of this in this gift
it seems chaotic and random and yet
somehow it loops seamlessly although now
that I look at it I see this like slight
moment of a jump but we can look more
and more at Etsy ons Twitter feed let's
look at this one similar idea but this
is a gift it is looping over and over
again how I talked about in my gift
looping challenge that the end point of
a gift the last frame of a gif if it
matches with the first frame it will
appear seamless but how do you have
something that's so random and chaotic
and yet somehow accidentally or by
design and with a frame at the end that
matches the one from the beginning and
this is exactly what I will present to
you today in a coding challenge about
creating a Perlin noise loop so before I
keep going and talk too much about this
let me there so this is another
reference this is I think even more
salient here like this is particularly
like how in the world is this looping
how is that looping now the answer to
this is if you read at tiens article
here all about Perlin noise functions
and this particular technique for how to
animate noisy stuff with a nice trick so
I'm gonna present to you my own way of
doing this which I suspect is exactly
what's in there considering about this I
think I read this article probably in
2017 when it came out
and then somehow yesterday in the middle
of class at ITP
I was like this new idea and then I was
I messaged goal 11 about it I was like
did this new idea he's like uh-huh yeah
by the way this is my p5.js sketch that
I made I suspect you like but year ago
or six months ago that does exactly that
so clearly I didn't invent that I just
thought that I did I had
remembered something but I'm gonna go
through this with you today and it's I'm
so excited about it cuz it's really
gonna change for its I think it's gonna
open up a lot of interesting and unique
creative possibilities for you and you
can make hearts and rainbows with it and
of course we're gonna need
polar to Cartesian coordinate
transformations
ah I think I did show David snipe
Snyder's 4ei heart gift but let me just
make sure to give this a nice highlight
because this is what I love something
that I absolutely love the most is when
I see different bits of code and
examples that I've made get combined and
recombined in unique and interesting
ways and here is a nice ode to
Valentine's Day with the heart curve and
the Fourier transform by David Schneider
hashtag gift train okay and now oh no oh
I wanted to keep that up let's put that
here I think I'm gonna attempt to do
this in the p5 web editor even though
there is a somewhat significant bug that
you are all aware of if you've watched
my what video did I experience that in
the bouncing DVD logo let's make this is
that okay too big too small I'll move
this over a tiny bit question is I think
I would like this to be a little bit
bigger and if I do wait 600 600
auto-refresh
zero let's make this I know the camera
went off I have a I'm on a path to
fixing this camera issue don't worry
everything is gonna change for the
coding train in the future ah welcome
new member cryptic so by the way if you
like what I do there's no requirement to
do this I will mention there is an
opportunity to join as a YouTube member
I also have a patreon I'm not so sure
about the patreon try to figure out what
to do about that but you will get an
invite to a slack channel I will at some
point you know some amount of time mail
you some stickers and you will also have
my
so thank you to new member you get a
little fancy icon so I don't know
anybody in the chat who's a member
I'm just curious but your icon changes
your little emoji icon changes based on
how long you've been as a member and I
can't remember what I think the dot that
this dot character is the first one and
I think the rainbow is the last one
maybe I've had to be a member for two
years or something so I can't imagine I
don't even had it for that long but I'm
curious to see what those what those I
set them up at one point alright so I
think I think all right so is that okay
this font size is that visible and think
about think about all of the people
around the world who are like on there
on the bus or the subway on their way to
work or school with their little tiny
mobile device watching the coding train
and they read my code all right
so this is gonna be a coding challenge
it's going to relate to a lot of
different things so the two things that
I want to mention are blobby this also
relates to this and Perlin noise
playlist coding train mmm what's gonna
happen here okay hold on a second just
give me a second here I want to be
logged in as a different person one of
these days I'll fix this it's fine
just give me a second here everybody
just just purl in yeah this is where I
have a Perlin noise playlist ah there it
is oh yeah okay
uh-huh there we go all right so I don't
know I think I'm gonna start with this
what's one of them these are amazing by
the way
I mean look at that
I don't think I should lead with this
because this is misleading I'm never
gonna create anything so beautiful as a
TN Jacobs but I think oh yeah this this
this is definitely related to what I
want to do and where's the heart okay
here we go
alright this I can lead with I need to
make sure I have a white board working
white board this this this is no good
I've got three markers here David in the
slack channel asks Dan do you think
you'll ever make a 3d version of blobby
I've been trying it since I saw the
blobby video and I can't figure it out
oh I like this idea yes in fact we
should make a three I mean you would
need the spherical geometry coding
challenge so the spherical geometry
coding challenge combined with the
blobby coding challenge is the path to
do this and I would love to do that
that's a great idea okay wait trying to
find a marker that will do us justice
haha I think I have found this is the
marker which will be the marker for
today how are we doing on glare let's
see
that's not causing the glare is it this
one that's definitely the glare that's
better
okay let's make sure this works
Oh oh that was the saddest thing ever
you know you'd think somebody who has a
YouTube channel is like hundreds of
thousands of subscribers would bother to
find a marker before going why and yet I
can't seem to manage to get myself to do
this fortunately for me I have a box
here and this box you can't see it is
full of markers we're gonna find one I
need what I need is another box that's
full of markers that are used up no I
can tell already
okay promising very promising ah there
we go no this one will do the job
polar noise loops this is the topic for
right now by the way incidentally it's
also my intention to talk about
JavaScript inheritance with prototypes
and es6 classes so that'll be the that's
gonna be the boring stuff that comes
later I mean I don't know what's boring
and what's not boring but that's gonna
come later okay let's make sure this
camera has got a half an hour of
possibilities
by the way I've just decided I'm not
bothering with slow-mo anymore with the
chat somebody in yes it's the spherical
and coordinate polar song mmm
thank you okay we c'mon for that
suggestion I have I I haven't remembered
in recent weeks to put slowmode on in
the chat and so now I'm kind of leaving
it without slowmode in the hopes that
the community and my my continuous
presentation of hearts will keep the
chat under control but plea is if it
becomes unwieldy or a problem for anyone
let me know in particular those of you
who are in the patreon YouTube member
slack group you can let me know if you
need me to turn on slow mode yes I am
calling this polar noise loops
welcome to the Polar Express I don't
know if that's a good name for it but
that's what I'm calling it
alright let's let's get this started
time to do some coding hello okay I knew
something went wrong hold on
zanny dolly pee in the chat asks hey is
there a fixed time when he goes live and
in fact there has never historically
been affixed time but there is a fixed
time now and that fixed time is right
now
every Wednesday 10:30 a.m. Eastern Time
shoot my mic clip is kind of broken
hopefully this is going to hold I think
it's going to be okay
let's try that again tissues and I'm
ready to go I think I better start
treating the livestreams as actual
like time on the Internet in video
supposed to just like oh I'm not really
because it's not part of the thing
that'll edit for later but whatever
hello and welcome to a coding challenge
who if you can't tell about this one so
I found this gift the other day by a
tian jacoba at john jacob with my
american pronunciation and look at it
look familiar to you it looks like a
heart curve that I made in a coding
challenge previously now I can't say for
sure whether this gift was made based on
my heart curve coding challenge but I
can say for sure that the work of a Tian
is amazing and phenomenal and uses a
special technique one that I have
recently rediscovered in a dream it came
to me through dream and yet it's been on
the Internet at least since 2017 if not
before that so what's going on here
that's so fabulous and exciting is this
chaotic scene this scene of randomness
and smoky heart beauty beauty is
actually a perfect gift loop how is it
that the end matches the beginning and
this is something I talked about in my
previous coding challenge gift loop
where we looked at okay well we can move
something across the window we can
rotate something and as long as the last
frame matches up with the first frame it
will loop but if it's all random and
chaotic how do you do that and so there
is a technique for doing this Golan
Levin actually also has an example bit
of code which describes this in more
detail which I will show you later in
this video but mostly what I want to do
is highlight to you this blog post from
necessary disorder etienne from November
15 2017 which explains this technique of
creating gifts like this here's another
one how could this even possibly work
and so to begin this discussion I mean
hopefully we're gonna get to a lot
something I could probably make videos
on this topic for the rest of my life
but to begin this topic I'm gonna return
to a previous coding challenge you may
remember me from coding challenges
as Kotick challenge number 36 blobby
it's when I used to wear t-shirts with
this other logo on them to bring my
coding challenges and by the way see
more gray hair there but I think it's
the lighting or something cuz I once
asked me if I dye my hair and I do not
but maybe I should I have no idea
anyways that's not important I'm
probably not gonna get edited out you've
no chin and yeah okay so what is the
issue with blobby
so I'm actually even though I could just
pull up that code I'm gonna speed code
blobby again
you're gonna see watch this is like two
coding challenges in one so I'm going to
what I'm gonna do is I'm just gonna say
let a equals zero a is less than 2pi I'm
gonna turn off auto refresh for a second
I'm working in the p5.js web editor
which I think goes be a good
demonstration of this and then I this is
supposed to say for I got so what I'm
doing here just in case you're wondering
as I'm writing a little for loop and
what I'm going to do is I'm going to use
my polar to Cartesian coordinate song
and I'm going to say let X equal R times
cosine of that angle let y equal R times
sine of that angle and then I'm going to
I'm going to make up some value of R R
is going to be 100 I'm gonna translate
to the center of the window and then I
am going to say begin shape I am gonna
say n shape and I'm gonna set a vertex
vertex at X Y and I'm gonna say and I
spelled to pipe is of zero which is
really complaining I mean to say a
stroke to 55 and no fill and there we go
look I just wrote the code for drawing a
circle because this is a for loop I'm
gonna go through all these different
angles I'm gonna calculate I'm gonna
chain I'm gonna increment the angle I'm
gonna keep the radius constant and I'm
gonna set all the vertices XY another
circle now if R is random and this is
basically what I did in blobby if I say
random 50 to 100 look what we've got
we've got this kind of
crazy flickering thing that's almost
that's kind of interesting
onto itself and I could make this a
little more evident by making the time
step did not the time step the the delta
angle the amount of angle at the amount
of vertices I'm drawing fewer I could
make sure it connects at the end by
saying close and I could also just for
right now say no loop so we only get one
of them so each time I run this sketch
I'm getting it a new random pattern now
here's the thing this actually looks
like it's a nice closed loop because
it's all random it doesn't matter if the
last vertex doesn't match up with the
first vertex and I you know it would be
somewhat smart of me to be more
thoughtful about what this Delta angle
is like maybe it should be something
that divides perfectly into two pi or
the radians equivalent of 360 degrees
but again I'm not going to worry about
that what I'm going to do is I'm now
going to add perla noise to this now if
you've never heard of Perlin noise
before I will refer you to a playlist
where I talk about what Perlin noise is
and how it works and a whole bunch of
other videos related to this so go and
watch those now if you want or also link
to some articles about perla noise but
i'm gonna assume knowledge of Perlin
noise for the purpose of this this
coding challenge so right now what I'm
gonna do is I'm gonna say let T equal 0
so I'm gonna use T as my offset through
the one-dimensional Perlin noise space
I'm gonna change that to X offset and a
little bit but let's just keep it at E
right now then I'm going to say R is
noise of T times 100 so interestingly
enough let me we get a different size
circle every time I run the sketch
because we're getting a new randomly
seeded set of Perlin noise values and
the I'm never moving through that time
space so each vertex is exactly the same
so what I want to do now is say in the
loop T plus equal some amount of Delta
so now you can see look at this the
amount is changing but it doesn't match
up so first of all let me clean this up
a little bit by saying Matt let me use
the map function which I think is it it
will make things a little simpler Perlin
noise always has a range between 0 and 1
and let's say I want that range to go
between
like 100 and 200 now so we can see look
at that now there's just this little
every time I run it you can see that the
last Perlin noise value doesn't match
the first one this is the problem this
is getting at this idea of a perfect
Perlin noise loop and let's also have
delta T the amount way I moved through
the Perlin noise space Ceri what chu
Delta TB tumbleweeds can we have like a
tumbleweed animation and like the
crickets sound effect right that would
be great alright so let me change that
to this and you can see even if I move T
faster and I get this kind of smooth or
blobby like shape it always has this
artifact the last and by the way if I
took off this clothes this will be more
evident why right the last vertex
doesn't match up with the first one this
is the problem so how are we gonna solve
fruit so why why does this happen so I
have my title of this video right here
Perlin noise loops curly noise if we're
talking about one-dimensional Perlin
noise Perlin noise values in a
one-dimensional space with this being
the T access the time access although
really I should call this like X offset
because it's like the X at offset this
is maybe a graph of those values and if
I'm arbitrarily going from zero to some
fixed end point as I get to the end of
that circle whatever value I'd get here
which maybe let's say if this is between
leg 0 and 1 maybe this is zero point 3
and this is like zero point 6 to 1 right
they don't match up if I were to take
this and twist it around into a circle
they don't match up there is another way
to look at a space of Perlin noise
values this is a way of looking at it in
one dimension let's now look at it in
two dimensions so instead of having a
sort of one-dimensional graph of Perlin
noise values i present to you a grid of
Perlin noise values now if we think of
this grid as fairly like low resolution
and I'm gonna draw
I don't know why I made those dotted
lines like this is like basically a 5x5
grid right now if I if I did my drawing
correctly the idea is right each one of
these represents some value between 0 &
1
now in this 2 dimensional space each one
of these values represents all is also a
number between 0 & 1 so I might have
like point 2 here point 3 here and point
3 1 here and point 2 6 here and point 1
9 here right every single space has a
value now here in one dimension any
number in one dimensional space is quite
similar to its neighbors and it only has
two neighbors a neighbor on the left and
a neighbor on the right or a neighbor
after a neighbor before here each value
has how many neighbors 1 2 3 4 5 6 7 8
it has neighbors above and neighbors
below and neighbors to the right and
neighbor diagonally down so the idea
here is that what if I could walk around
through a 2-dimensional Perlin noise to
get space to get random values and
always end up back where I started and
why not just walk in a circular path I
mean that's kind of what I programming
anyway so why not just do that what if I
were to start here and get this Perlin
noise value then this one then this one
then this one then this one then this
one then this one then this one then
this one then this wasn't more than this
one then this one and this one I would
have 1 2 3 4 5 6 7 8 9 10 11 12 13
random numbers and the last one is going
to match up with the first one if I keep
going so I could get those those random
numbers over and over again and if that
if there's an amount of numbers there is
so vast it's going to appear like it is
a continuous sequence of total
randomness smooth with perla noise so
this is the theory so let's now go and
apply this theory to this particular
blobby shape
sorry there is I see a siren going off
alert polar noise on the whiteboard what
does that mean yeah I should play the
Perlin noise song I also see in the chat
that temp name is saying voice and video
get more and more distinct over time I
don't know how to resolve that what I
can tell you is that I do correct for
that after the fact so everything that I
do in today's lives for the full
livestream ends up archived on YouTube
forever I mean until the world ends and
there's a lot of reasons why that might
happen sooner than later but anyway that
aside or it's probably more like that
YouTube won't exist before the world
ends but anyway I don't what this is not
this is not the discussion but oh but
then I also edit out chunks and those do
not and and and resync the audio if
necessary several people are typing I
just want to know what the what the
alert symbol and polar noise on the
whiteboard question mark question mark
if that was some sort of issue that I'm
oh yes no I wrote into polar noise on
purpose
got it I wrote it as polar noise on
purpose I mean it should say polar
pearling I don't know if you can did I
write that out of you mostly yes I wrote
it as polar on purpose even it's a term
that I made up that probably means
nothing and is terribly misleading and
everybody wants to complain alright I
see
are we all satisfied now okay poor Simon
through the chat rightz
poorly no ease that's actually really
good why isn't it isn't it
poor our pearl our maybe it's pearl our
noise anyway okay alright so actually
before I come back here I want to let me
just open up processing real quick it's
the pull
just want to grab something real quick
which is just give me a second here what
am I looking for not pixel flow I'm
looking for math basics this is another
basics math Noyce 2d there we go okay
interesting
let me let me comment this out there we
go
might as well cycle the cameras while
I'm here taking a short break from the
actual content and now I'm coming back
so coming back to the computer what I've
opened up here is a processing sketch
that is visualizing pearl and noise in a
2d space so this is showing you a sort
of the classic visualization of exactly
this idea and in that visualization each
number a number between 0 & 1 is mapped
to a pixel brightness so here you see
[Music]
let's try that again
I really shouldn't put the soundboard so
close to my keyboard where I switch the
camera let me just go back all the way
because that was alright so before I get
back to the blobby code what I have here
is a processing sketch that is
visualizing Perlin noise in a two
dimensional space so this is a pretty
sort of like classic visualization of 2d
perla noise as this cloudy like texture
and this is literally exactly this where
each number each random Perlin noise
value in the two dimensional space is
represented as a pixel with a brightness
value between 0 and 255 and when you
look at that you get this cloud like
pattern because the color seamlessly
smoothly moves between white to black to
gray to black to gray to white so the
idea here is what is what I want to do
is walk around this space and pull those
numeric values but map them to something
else besides a pixel value and walking
around in a circle is a nice way to
create a loop but you don't necessarily
have to have that be in a circle all
right so let's go back to the blobby
code now there's a little is a bit
confusing about this because in addition
to the walking around the Perlin noise
space in a circular path I also happen
to be walking around the 2d canvas and
circular path to draw this circular
shape so I'm kind of using the same idea
but with two different points of view
and hopefully that is something that
makes sense to you okay so what I want
to change this is I no longer want to
have T what I want to have is X offset
I'm gonna say I want to have an X offset
and a Y offset and I want to get the
Perlin noise at x offset Y offset okay
now T is not T is not T is not where do
I have T cell ah T is moving up let's
took that up okay so this is now what I
had before
if the pearl if the axe offset in the Y
offset right basically if what I'm doing
is I'm asking for what is the Perlin
noise value at this spot it's gonna give
me some random value and then I'm gonna
make that the radius of the circle the
blob shape as it goes all the way around
so I want to start moving but I actually
don't want to start here I want to start
over here so I have to deal with the
fact that I the that I need to find this
point if zero zero is in the top left
because I can't have negative values in
the purlins oi space so this is a little
bit of a tricky piece of this but I want
to use that same puller to Cartesian
coordinate formula or I want to say X
offset equals cosine of that angle y
offset equals sine of that angle now
look at this I kind of got something but
it's weirdly symmetrical and the reason
is this is exactly what I just alluded
to I these X offset and Y offset values
are going between negative 1 and 1 and
so in fact I'm trying to look at Perlin
noise values over here right and these
this doesn't exist the Perlin noise face
is all positive so there's actually a
very simple solution to this which is
just to add one like that and suddenly
whoo yeah I think so and let me add the
clothes back in and let's run this a
bunch of times and we can see there we
go we have this nice random blobby shape
where the N matches the beginning now I
want to do let's do some more stuff here
all right so first of all I am where
what happened to that like incrementer
what happened to t plus equal point 0 1
now I have X offset and wife said why
aren't I saying X offset plus equal one
point one y offset plus you go on one
well actually the incrementer is this it
is the point 1 here it's cosine of the
angle and in truth I could have a
separate variable from the one that's
incrementing in the loop because I could
move through but but but I need to go
all the way to 2 pi so that that I don't
want to do I think a way for me to bury
this in a more flexible way is actually
to use the map function so if I map
cosine of a which goes between negative
1 and 1 and then map that to a range
between 0 and 2 we have and this is sine
we have exactly what I had before and I
can keep I can keep rewriting the sketch
I'm getting a new a new version of the
shape but interestingly enough what
happens this is really now something
that I should make a parameter so for
example what if I were to say let I'm
gonna make this a global variable let
I'm gonna call this noise max equal to
and I'm gonna put this here
and watch what happens if I make this 5
versus 10 versus 28 versus 0.1 and look
at this 0.3 0.5 look at this this is
really kind of interesting with just a
little bit of noise I have what appears
almost like a perfect circle but it kind
of looks like a human being like me with
faults I have lots of faults drew that
circle it's got some slight so Perla
noise can actually use as a nice way
with a little subtle perla noise of
making some perfect shape like a letter
form or a circle or a square
have a little bit of wiggle to it that
makes it seem more hand-drawn so that's
a nice thing to see the other thing we
could see here very quickly is like you
know it would make sense for me to
create a slider I'm gonna say and this
I'm using the p5 Dom library to do this
which is a really quick way I'm gonna
create a slider which has a range
between like 0.1 and 10 and I'm gonna
start it at 0 actually let's make it
between 0 and 10 I'm gonna start it at 0
so I have the slider here now and then I
want noise max to equal noise max to
equal slider value so watch this okay
that didn't work create slider the range
goes between
zero and tenth hold on a sec let's take
this out oh I have no loop in here no
wonder
take out the no loop and now let me
slide it we need to make that so first
of all I need to give myself smaller
time steps when moving the slider so
let's do this oh look how it kind of
like unfurls because it's the same noise
space I'm just stretching or shrinking
it that is a really and imagine now if I
isolated that like a long a sine wave
I've had it super interesting and I
could also make I just out of curiosity
could make this go to like 100 I should
make it go to 11 so happy if it goes to
11 but really it should go to like a
hundred and eleven and watch this I
guess it's hard to detect that
subtleness but if we could animate that
more slowly over time so the slider
isn't the best way of demonstrating that
but you'll see a lot of possibilities
here another thing that I could
demonstrate here and let's just put it
at five just start books open oh it goes
to five and then zero point one so all
right so another thing that I could
demonstrate to you is interesting like a
always starts at zero because I'm going
from zero to 2pi
but if I am walking around the path of a
circle there's no reason why I couldn't
start over here and then go around or
start over here and then go around and
why not vary that that would be like the
phase if you go back to my for ei trips
all of this stuff it's so crazily
interrelated it's amazing but if you go
back to my Fourier transform videos
where we created these orbiting
epicycles we had this concept of phase
which is where does that orbit start so
let me show you another thing here okay
what I'm gonna do is show you so let me
make a variable called phase let me have
that be zero I'm gonna have cosine of
angle plus phase sine of angle plus
phase what do you think's going to
happen if I increment phase well it
looks like the shape is rotating I mean
it is rotating or it's not rotating
means usually is rotating but I'm
actually just starting at a different
point of the no noise space
interestingly enough like and if I make
that much small
you'll actually see that like smaller
than the amount of vertices I have you
start to see a wiggle between them so
interest it's like I could make this
point too and that's going to be even
more apparent let's look at that crazy
weird wiggle as those vertices adjust
their spot and then I want to show you
something even crazier I think like let
me put it back let me sink it so this is
like a nice perfect rotation what if I
only apply the phase to the X offset or
the y offset like different phases that
is real it's kind of too fast so let me
do like this like this is really weird
you can sort of see it's almost like
there's something crawling around the
edge yeah there's so much weirdness
stuff going so anyway you see the sort
of like exciting possibilities of
thinking about Perlin noise values as
one-dimensional values that you might
pull over time you know in a sort of
one-dimensional fashion but actually
pull them from the path of a circle in
the two-dimensional Perlin noise space
now what I happen to be doing in this is
taking a very literal approach I'm
taking those pearly noise Pat path
values walking around a circle now
plugging them to like the distance from
the center of a circle over time as I'm
drawing it so it's very like it's a very
literal sort of like visualization of
Perlin noise values in a circle to the
edge points of a circle but if you start
to think of other ways you could apply
those values the creative possibilities
explode and so in other words if this is
what I started with
I have Perlin noise at the beginning
sorry i've Perlin noise values in one
dimensional space but they don't loop
why not take those looping values here
along the path of a circle and then
unfurl them back into the sort of one
dimensional line and then use those to
apply to any value in any visualization
to make a perfect gift Luke that's the
idea so I'm gonna just put that out
there and putting this out into the
universe I mean I didn't put down the
universe lots of other people
it's yin and go on and many others I'm
sure I'm forgetting to reference have
done this for years
so give that a try in the next video I'm
gonna come back and actually do that so
I'm gonna see if I can take this idea
and just apply it to something probably
won't be that visually interesting but
this will hopefully give you lots of
ideas of what you might make okay so
thanks for watching this coding
challenge where we now have this kind of
blobby thing oh wait wait wait
I should really add the third dimension
here and I'm trying to decide should I
make the third dimension
this is so weird yeah I think I will
okay let's add one more thing to this I
think I have I think I can this video is
not too long so far alright let's add
one more thing so for so let me take out
this idea of phase for a second I'm just
gonna comment that out and put it back
to what it was which is just this so
every time i run it i get a new Perlin
noise space and incidentally the only
reason why I'm getting a new Perlin
noise space is because p5 behind the
scenes will see perla noise with a
random seed each time but I could
actually control if I were to say you
know noise seed and pick some arbitrary
seed value and random number seeds is
maybe a topic for another video every
time I run this like I'm gonna get
exactly the same shape each time so
anyway just point that but there is
something else there's another way I
could animate this and it has to do with
three-dimensional Perla noise and Perla
noise can exist in any n-dimensional
space in p5 and in processing I think
the functions that give it to you just
support one two and three dimensions but
let's talk about how you might use three
dimensions here so for example if this
is my visualization of Perlin noise in
two-dimensional space that cloudy image
well I could make sort of like a cloudy
set of cubes in three dimensional space
but another way of thinking about it is
have that third dimension be slices of
an animation so I could show you the
Perlin noise space and over time while
incrementing a Z value as Z offset shoyu
Perlin noise for at Z offset equals zero
then Z offset equals point one then
point two then point three and so that
actually all of those will have numbers
you know each one of these numbers is
now has all of its neighbors o2 up and
down and left and right and forward and
backward are similar random values so
this is actually a really easy thing for
me to add I just need one more global
variable called Z offset and this needs
to be global because I'm not resetting
it back every time through draw each
time through draw an incrementing it and
I can just add Z off right there to the
Perlin noise function and then I can say
Z off plus equal some amount like point
one and you can see we get this wig
I can make it point zero one and I'm
gonna move through the purlin oi space
much more slowly and once again we could
see like there's all sorts of things I
could do here like this could be zero
point three and this could be point one
you know there's so many parameters that
you could explore here I think we've
made actually a super interesting shape
for like a crazy animated game version
of asteroids like you could imagine
having Perlin noise giggling oscillating
looping noisy polar asteroids that's the
thing you should make so anyway so I
hope you find some variations for this
and I look forward to seeing what you
make and stay tuned for the next video a
torus shape yes a torus shape increased
resolution it's just
alright I probably should have if I
thought about this made the stroke wait
to for it to be a bit more give it a
little more pop a little more zing gotta
have thing coding train sponsored by
zing zing
[Music]
I have an idea how hard is it gonna be -
can I just get the mic like I can just
do this right
mic equals p5 got audio in and then I
can just have this B is it get level No
get volume shoot v5 sound
I just wanted to tie it to the sound
real quick audio in it's funny there's
apparently there's a video about this
where I'm wearing a tinfoil hat because
I really really like input my Oh Mike
got to start Mike get level p5 dot audio
in okay what did I miss
what'd I miss p5 got audio in Mike dot
start Mike get level do I not have the
sound library imported this was this was
meant for me to just do one thing really
quickly to make this fun cuz its cannot
read properties start of undefined hold
on I was just there and the code p5
audio in Mike dot start Mike dot get
level Mike dot start
I forgot to show this but whatever Shh
okay I don't know what did I have wrong
they're so weird I must have something
spelled wrong okay right here we go
and here we go really it's not picking
that up
test my whole idea of taking a little
break and just putting this on oh I
forgot the new okay thank you everybody
new p5 audio in how come oh is it
it's just so quiet
I should I should also have the phase
going so it spins test one two
test one two oh this has to test one two
test one two and then hold on I don't
know why I'm like trying to make
something interesting out of this that's
not my job I'm terrible at that let's do
this it's the polar two Cartesian
coordinate song
[Music]
and they say once again
[Music]
all right and we're back
alright I probably should have I
probably I mean it's save I probably
should put this back to what it was
because this is let me just do a
duplicate and that will be this will be
the noise loop audio in just in case
I'll publish this as well and it's not
like part of the coding challenge and
let me just go file open and just go to
this noise loop let me get rid of the
audio in thing and put this back and put
what is this now yeah what why not I can
leave the weird little background thing
in
interesting sorry I can't resist playing
with this stuff I'm gonna stop I gonna
stop I have to stop okay
can you check Twitter for generative
arts I don't know what that means
let me save I have to stop and now what
I want to do is do this okay this is too
frenetic I want something more soothing
and relaxing it's too frenetic maybe Z
offset is too much yeah that's nicer
although should be this yes and all
right I'm gonna stop doing what I'm
doing and I am going to go back to this
alright so I have to think about what is
it that Oh what is the example that I'm
gonna demonstrate now with turning this
into a loop I mean I guess I can make
the most and actually somebody had
suggested to me a gift library now I
know I wanted to use this P 5 gift
library so let me see if I can find this
just finding something here for a second
p5 gift okay so there's this library but
somebody pointed out to me a library
that uses webworkers gif canvas
JavaScript web workers let's see if this
comes out this was in a youtube comment
this is it so I'm curious to try this ad
frame
ad frame delay copy how do I know when
it's finished how do i render okay all
right so I'm curious to try this gift
Jas library I do love this library that
was created by my students but it had a
few bugs in it and I'm sort of curious
to try this probably not a good idea to
try a library for the first time during
a live stream but why not oh I forgot to
mention this but that's fine we're back
to here and we've got this alright okay
do web workers work in the p5 editor I
guess we're gonna find out maybe I
should try this real quick if you if you
will all bear with me for a second
so is this hosted with a CDN I don't
know maybe I need to download the
library dist oh I need all this I'm so
confused
[Music]
let's download this whoops
and I assume also need this
let me do duplicate let me add these
files
but seem to have worked
[Music]
let me add this here gift out worker ojs
and gift out yes okay no errors so to
speak let's put this back to 400 by 400
now what I need to do if this is gonna
work is I can create a new gif give her
this Mike it's knocking we take off Auto
refresh that's gonna make it crazy let's
try just doing this add frame canvas
element I think I should be able to say
[Music]
gif add frame okay so I need to say let
canvas canvas equals create canvas
canvas TLT I don't want this delay let's
just take that out that should do that
let's just see does this give me an
error no air as far as I can tell and
then what I need here is unfinished and
then gift render maybe I'll do render on
I'll make a button button button equals
create button render and then button
mouse pressed gift bows a gift render so
this should in theory now I'm adding
frames I'm adding frames I click render
I couldn't seem to work
let's check the console
[Music]
the server responded with the status of
4/4 so maybe I can't do a web worker oh
I couldn't find all right I'm gonna have
to investigate this more
all right everybody alvaro rights could
create a circular path in Z offset so
that gif is also periodic in time
exactly alright so I'm gonna have to
investigate this later already running
okay hold on
Oh cuz the workers running I don't know
let's completely refresh probably
shouldn't be trying this in the web
editor yeah okay I'm gonna give up on
this now it was good that I tried doing
it that I know that this doesn't work
and go back to here
how come this
maybe it didn't save actually all right
actually hold on hold on just give me
one more second I wonder if I just hit
that weird saving bug this is it right
no gift test no all right I'm not okay
this is alright so what I'm gonna do if
you don't mind humoring me for a second
so I'm gonna switch to processing
hello
quit processing
there we go
and then I'm going to do desktop let me
just quickly convert this code to
processing
same exact thing and let me simplify
Lily get rid of this phase
okay
okay all right
just check the time let's see here so
the reason why I want to use processing
is I also want to this is gift loop oh
that's not what I'm gift pull look like
I'm gonna call this polar noise blob
okay and then I what I now need is I
need this code a little bit and
processing until I have a solid way to
generate the gif in in JavaScript I'm
going to use processing for making these
gift loops so let me open this so that's
this okay so this is the gift loop
and this is the blop and this is this
alright okay
increment I by radians one interesting
okay that's an interesting thing to try
all right part two is coming up right
now okay
all right sorry I'm thinking I'm
thinking hello and welcome to part 2 of
the polar hello and welcome to part 2 of
the polar
Perlin noise loose I wrote polar noise
loops on purpose as like a wordplay
thing but people kept saying no no it's
pearl annoys pearl annoys this has polar
Perlin noise loops the whole point of
this is I'm doing a follow-up of my
previous coding challenge where I made
this blobby shape which is created with
a Perlin noise algorithm and the end of
the shape matches up to the beginning of
the shape by walking through a
two-dimensional Perlin noise space in in
a circle hold on I'm out this is a good
time for me to show Golan's gif olan
sketch
if you're wondering what I'm talking
about go and watch the previous video
but also I forgot in the previous fed I
neglected to show this particular sketch
created in p5.js by goal on leaven which
demonstrates this idea so the ideas I
want to use Perlin noise values over
time but I want the last value to match
up with the first value and so if I pull
those values from a circular path and in
truth it doesn't have to be circular as
Luz I end up where I started then I'm
gonna have this perfect looping Perlin
noise so why not take that perfect
looping Perlin noise and apply it to my
gift loop so that I can miss this in the
gift loop coding challenge I just had
this rotating circle it's very easy to
have the and match up at the beginning
but what if what I want to create with
is random chaotic algorithmic scenes of
beauty and an example an artist who does
this is Etienne Jacob and you can read
more about this work at necessary or
necessary disorder wordpress com this is
a blog post from November 15th 2017 you
can find many more of these like amazing
gifts on a Chen's Twitter account all of
which I will link to in this video's
description so this this video is
inspired by the beautiful work and this
this just is mind-blowing to me this is
not this is not a sketch running over
time it is a perfect loop yet it seems
as if it's just a continuous random
chaos so how are we gonna achieve this
so I admittedly I think by the end of
this video I'm going to end up creating
something incredibly simple but I hope
it will unlock a superpower for you
which is this polar noise loops okay
alright so let's go
let's go back to all this stuff so what
do i what do I want first I want to go
and by the way I in in the in between
the last video and this current one come
on computer respond to me I get a
perfect connection if you increment I by
radians one I see I see all right
in between in between the previous video
and this one why is this not open why
why why why
come on oh stop there it is oh it's just
there why it should it should switch
windows when I click on this this is a
bug in processing now it doesn't seem to
be working is it because it's running
switch no switch oh processing
processing all right I'll just do this
it's fine fun this is the one I want
right now anyway
so one thing you might have noticed is
in the previous video I was working in
JavaScript I have now moved over to Java
using the processing development
environment this is mostly because of
what I want to do now is render files
out that I can then repackage into a
gift you can do that in JavaScript too
but I haven't found like a really
excellent elegant solution for doing
that yet so when I'm working with
rendering I generally prefer to be in
processing and also I like to just show
you different things so I have ported
that code the exact same code but I'm in
processing now and so what I want to do
is first let me get rid of so to speak
this this visualization entirely I
should really start yeah
actually let me not get rid of a
visualization entirely right let me get
rid of this visualization entirely first
so I don't really care about this our
thing right now and I do I do care about
this hold on sorry I'm getting confused
here what am i doing and I'm typing let
just give me a second here I know what I
want to say I know what I want to say
different so let me get rid of the fact
that there is a loop in draw to start
and what I actually want is for and I
want to get rid of this big in shape and
shape and what and what I want is for
that angle variable that's to be a that
a variable to be a global variable so
I'm gonna say float a equals zero and
I'm going to here just increment a by
some arbitrary amount over time and this
that I'm gonna have to be more
thoughtful about this but let me just
change that and then let me also then
say ellipse at X Y a 16 16 so what is
happening here right now that is moving
super fast so let's say point zero one
so what I'm doing now is I'm actually
having that circle - I'm having an
ellipse trace along that path that was
previously that strange shape so I don't
I don't really care about mapping the
noise value right now I just want to be
able to see it so let's just say R
equals 100 just to see it okay so I have
this oh I don't like what I'm doing look
just give me another shot at this give
me another shot at this because what I
want to do I can you know the shot this
me I am so be there is a gift library
for p5 go and look at the one that I
just referenced I'll send it to you it
just needs a little help I don't think
it's ready for prime time but it
actually is quite there's many things
about it that are awesome ok use circle
you circle thank you okay alright well
so let me start adjusting this code to
get the Perlin noise values from walking
around the perimeter of that circle so
all of the stuff that I'm drawing here
with this blobby thing is kind of
irrelevant at this point and in fact I
don't need to have a loop inside draw
anymore so I'm gonna take out that loop
I'm gonna take out all the drawing stuff
I'm gonna take out begin shape take all
the drawing stuff this translate and
what I am what I need now what I'm left
with and I don't need this x and y
either what I'm left with is the fact
that this angle this a value needs to be
a global variable so this now is let's
I'm just gonna I'm gonna just change
this this is now right here all I'm
doing see is increasing in draw
increasing the angle over time and
asking for the noise value and I don't
I'm gonna take out map even I'm just
trying to simplify this really really
simplify it the idea here is that I'm
saying okay I just want to have and why
is it giving complaining to me about
what art because I'm not using it I know
I understand what I'm doing to out of
this I really understand what I'm doing
now I know you don't believe me
I mean you're right to not believe me I
wouldn't believe me either
so let me just answer a quick question
you saw gyoji bow in the chat asked if
this is java how is it possible to use
functions outside of a class so this is
processing and processing is is a
programming development environment with
its own set of functions that is built
on top of java and it actually obscures
the main class for you so you can
actually just write kind of procedural
code just in a simple text editor
without all the java java mumbo-jumbo
but it also does support the java mumbo
jumbo if you like the java mumble java
all right here we go
here we go
so now I'm going to start with this code
but I'm basically I'm gonna remove
almost all of it because what I want
ultimately is I just want a single noise
value over time walking along the
perimeter of a circle so the idea of
looping inside draw is no longer
relevant so I can take that out the idea
of drawing anything is no longer
relevant so I can take that out I don't
need this translate what I do need is
this idea of calling the noise function
in two-dimensional space based on an
angle that's incrementing over time
around the perimeter of a circle so now
that angle has to be a global variable
that angle every time through draw gets
incremented by some amount and I'm gonna
when I want to make a gift loop I'm
going to change that to the percentage
thing because I want to go from zero all
the way to two pi and that's the end of
the gift loop that closes the loop but
but for now just incrementing it by an
arbitrary amount is fine and if I were
to say print line R let's watch this go
so if I run this what we're seeing is
the noise values now this is looping you
can't tell but I'm getting the same
noise values over to Gavin except not
really because point one isn't perfectly
divisible by two pi but I'm not going to
worry about that David Schneider
actually pointed out that if I use the
radiance functions like 360 divides into
one perfectly so I could say like or it
divides into ten even so I can say plus
equal radians of one this will actually
now give me a perfect loop thank you for
that suggestion so now what I need to do
is map those noise values to something
so I'm just I could do color I could do
position I could do size let's have it
let's have it do position I think that's
kind of a very literal way of looking at
it so I'm going to now say x equals map
R which has a range between 0 and 1 to 0
and width I'm gonna use the circle
function because it's my favorite
function X comma height divided by 2
100 and now I'm gonna do this and we can
see this looks like randomness right
this looks like randomness this looks
like smooth randomness Perlin noise but
I it is a repeating pattern hard to see
that repeating pattern but it is there
so now what I want to do if I go back to
my gift loop code and this is from a
previous coding challenges they're all
kind of interconnected at this point
what I want to do now is take this idea
so I need this global variable a to come
over here I need to take all of this
which is in previously in draw and it
goes in to render my render I'm gonna
paste it in here and then a the
difference is a doesn't increment a is
based on the percentage so a equals the
percentage times 2 pi because if you
recall from this video this video was
designed this code example was designed
to render frame by frame
some looping pattern from 0 percent up
to a hundred percent and now that I know
that my Perlin noise values will loop as
I go from 0 to 2 pi I can take the
percentage of how far am i through to pi
so let me run this now and we can see
there we go now I believe this will be a
perfect loop I can't tell can you tell
that this is a perfect loop I can I
could increase the number of frames to
slow it down I could change the noise I
there's a bunch of things I could do but
let me leave it like that and now I am
going to turn on recording I'm gonna say
record equals true this is the system I
set up before if I say record equals
true it's gonna save out to a folder a
whole bunch of frames let me make sure
there's nothing in that folder right now
no so I'm gonna do this it's gonna quit
when it's done and now all and now if I
go to the folder and output we can see I
have oh there's a bit of a problem that
was weird the first frame it draws it at
the center and then jumps is that was
that a coincidence or is that actually
right
I think it's I think it should be fine
all right I think I got it right let's
let's turn that into a gif and see if it
loops take time out for a second so
before I use that easy gift thing so I'm
going to tell me that maybe now I should
use a command line tool like ffmpeg how
do make gifs with fm MPEG
mm-hm does anybody know off the top of
their head what the command for so
frugal do I have ffmpeg installed
okay so this Oh run away from ffmpeg I
just like I really kind of hated
bringing up easy gift calm I mean it was
fine for that video but since I have in
the video there's no reason why I
couldn't show another another solution
like a command-line utility gifts a Cole
let's look at this on github yeah
June 1st 2018 that's almost less than a
year ago
so Alvaro hasn't could we make an
animation in which periodicity is more
obvious yet the the ffmpeg - I
something-something output dot gif
hamelot dot IO how to ffmpeg PNG files -
gif how to ffmpeg PNG files is that like
the search I want to do Oh
so this where where % 0 3d is the frame
ID in three digits it's interesting gif
cycle is good at recommended ok people
are telling me gifs achill is
recommended
a world gif gift merge how do I install
it I don't want to install with macports
homebrew macports no do I have brew
installed yeah apparently I do well
let's try it brew what do I do it I like
brew install gift cycle how do you spell
gift cycle totally worked
oh what a world we live in welcome to
2019 everybody can't create update
lock-in okay
sure why not that looks reasonable
permission denied no I did that okay
this okay
Oh promising okay
gif sickle give cyclists pail gif sickle
is a terminal okay so probably something
like this delay equals 10 - - loop star
dot gif okay so my guess is gif
sickle - - loop star dot PNG test gif
file is not in gif format that didn't
work yeah I know it's why it's in PNG
it's in PNG
so I have to say let's check the chat
shouldn't we use mp4 the html5 instead
of gifts on the web already probably
probably probably probably needs to be
in a gif format gifs achill only allows
a gift for mounting back to ffmpeg do I
have ffmpeg installed ffmpeg well I'm
not even going to get to the inheritance
stuff today am i I'm going to I can make
it happen alright let's try there any
other documentation here so install
ffmpeg Mac let's just try to find the
official source here okay
oh look install install documentation
documentation download download look at
this all right oh just a static builds
for Mac OS ok whoa let's try this
release snapshot let's get the release
oh uh oh my god this is terrifying yes
Simon I see the I see what you're
putting there in terms of the
millisecond stuff
oops well this install for now let's try
this Here I am just installing ffmpeg it
gives me literally gives me the actual I
can put it's up to me to put it in like
user local bin on my own I guess I could
install it with let's just install it
with brew I'm afraid of brew but this is
oh why not
alright this will do ok alright Jared
Ola check is giving me a nice command
could somebody who is watching can
someone to paste that command into the
slack channel because it's gonna scroll
past too fast for me to remember it
all right all right so we've got ffmpeg
all right that's promising so there was
a command let's get rid of this
okay so now ffmpeg - F what's image -
why do I have image - there why image -
I guess that's like convert image - like
convert - frame rate one okay - I gif -
% D PNG and then test dot gif is my file
name let's try this in the range 0
through 4 so I think this isn't right
because do I have to do this like
something like that no so what would it
be
let's just try this just curious
ok so that worked but I've been feeling
it only used it only probably use the
first 10 frames right but let's see if
it actually made something oops
oh it's nice and slow I love that yeah
it's only the first 10 frames and why
does it but such a big jump in the first
one - app image - so zero 3d okay ah 3ds
3d okay thank you
that makes sense percent 3d okay let's
try that no no
famous last words
percent 3d % 0 3 let's try that no can I
just do like star dot PNG I just do this
No
percent zero 3d because there's zero
padded no the docs could help no I don't
have to look at the docs that's why I
have a live chat going to look up for
the docs for me and give me the correct
answer the problem is you're like 30
seconds behind so that's not gonna work
I mean I could write them out without it
being zero all right I don't even
remember where I was
oh what if I do this I have an idea I
have an idea won't it just work for me
to do this
can't I just do that No
wrong directory directory uh I've been
in the wrong directory the whole time
why did that happen how did that happen
[Music]
hold on
oh so sad there we go yes over right
so I think this is a bad example because
it is - it's moving too quickly but it
does work
I do like this as a new technique though
so hold on so let me go back now that I
know that this works
the question is how can I make this a
more illustrative example would just
doing this
no that's would having more frames no oh
I don't want to record right now how
could I make this example more
illustrative of the idea that I'm trying
to demonstrate yes so this slowing it
down would help so maybe that's just
what I want to do
okay
ffmpeg can do frame interpolation that's
a cool idea make it go in a circle
without noise so it's clear it's looping
oh like add in all right so this is a
good idea let's add in I have an idea
okay okay thank you that's a good idea
do the same has gold on yeah okay hold
on a sec so actually let me stop for a
second because let me stop for a second
because this example I think isn't very
illustrative of the point that I'm
trying to make first of all it's moving
so quickly that you could probably fake
the idea of it looping pretty easily
even without a perfect loop so let me
see if I can demonstrate this more
clearly
number one is let me also in addition to
drawing that circle let me draw
something moving in a circular pattern
so I'm gonna translate to the middle I'm
gonna give myself a radius of 100 pixels
and then I'm just gonna draw a line from
zero zero to radius actually let me let
me give it let me calculate an x and y
again x equals radius times cosine of
that angle y equals radius times sine of
that angle and I'm gonna do I'm just
gonna make these other names x1 y1 I'm
gonna draw that line and then draw a
point draw another little circle another
circle at x1 y1 that's smaller so let me
run this for a second so this should all
right and let me say a stroke let me
also add a stroke 255
and I kind of wanted to go the other way
around but whatever so and then let me
make this circle have a bit of color to
it Phil let me just actually let me just
give it a little bit of alpha okay so
the idea here now is that this is
definitely a perfect loop in the sense
that that circle is rotating perfectly
now can I make this thing that's moving
randomly also loop I think one way to
demonstrate this idea is just to really
slow down its movement so if I change
the noise max to one and probably also I
think what would be helpful is let me
make it much wider so that and I'm so
that it's kind of moving and with more
with more variation left and right so
now it's my my argument that this is a
perfect noise loop I'm seeing the exact
circular loop and just just so this is
visually a bit more clear let me also
make the stroke wait for so you can see
these a bit more easily so the circular
loop is looping perfectly as a circle
but the Perlin noise value is also
looping which is mapped to its XY to the
x position of that other circle okay
let's render this now so I'm gonna
switch this to true as I was about to do
before and I'm going to render it out so
we're gonna run this when it finishes
its loop it stops I'm gonna look in now
look in the output I'm gonna look at the
first one which we can see the circle is
though that's weird
why is there no stroke around that
circle I think that might have some kind
of weird error with the first frame that
is so weird why why what's going on
if render percent if record output Y is
the first one not like a fully finished
version of this so weird there's like a
weird bug going on here we delete the
output again
why why why why why oh I why is the
first frame oh no oh I don't have the
stroke here hi everybody sorry sorry
there's just a weird little silly bud
which is not that important which is
that I have the stroke set after drawing
that first circle that was just a
mistake
so that's why it wasn't appearing in the
first frame I can run this again so it
also gave me a nice suggestion which is
to put this to put this circle actually
also at the same Y position which is
kind of interesting let's try this just
really briefly yeah so this is kind of
in will oh yeah but it's offset okay
hold on everybody
everything's gonna be fine let me make
this a little nicer let me move let me
translate everything let me calculate
all the values before I draw everything
and then also I want this to be I have
an idea oh this is gonna be so much
better now now I want this the x value
to be mapped between negative width and
width times two which is going to put it
all over the place
okay so now you're gonna see this rocket
so there we go so that looks like it's
moving chaotically which it is we do
this one more time sort of entering in
moving around left
okay that was too extreme I guess I
shouldn't like give it such an extreme
let me just do negative with divided by
two and let me do like let me do like
point
oh just negative width and width would
be fine I don't know what I'm doing
there sorry that was my range was weird
let me give it that range now okay one
more time let's just see it's luke go Oh
goodbye go back in whoo that was weird
oh okay hold on
let me back up for a second let me just
do this for a second kind of put my
finger on where it started yeah that's
fine
that was what I was saying the same I've
you've been recording the whole time no
no I know everyone's sorry this is going
off the rails a little bit let me back
up I'm a I'm just gonna like back up so
that to where I had that stroke bug so
that there's not meatless like constant
stopping and starting okay this was the
problem
yeah no I did I want negative with so I
know I was gonna try to expand the range
because Perlin noise like keeps around
the center so much which is why I was
saying I know that the correct range is
negative it's far between and so that's
what I'm gonna do
all right
all right this weird little bug why is
there no outline in the first frame is
just because I missed something quite
obvious in my code which is that I have
the stroke drawn right here so I
actually want to let me fix this up a
little bit because I kind of drew this
thing in this very weird way let me
actually draw everything relative to the
center
let me put stroke and stroke weight
right at the beginning and then the
angle is always the percentage times 2
pi I'm gonna get this noise value and
then what I'm gonna do is I am I'm gonna
I'm gonna get these I'm gonna get this
is like X 1 this is like X 2 y 2 and
what I'm going to do and I'm have this
raise I'm just gonna draw everything
relative to the center now so and this
I'm gonna change this to n 4 noise just
so R isn't confusing so I'm drawing both
a circle that is moving horizontally
with Perlin noise as well as a perfectly
orbiting line and little dot so and then
because everything is being drawn
relative to the center I've got to
change my range to negative width
divided by 2
width divided by 2 and this should be X
1 and this is X 2 okay so now we see
this now one thing I could do that that
someone suggested to make this a little
bit more visually compelling let me just
increase the stroke weight even more and
let me draw the first circle also at
that's the Y the Y height of that
orbiting thing so this is going to look
like something of a somewhat chaotic
scene but it should if I did it
correctly be a perfect gift loop so let
me go here let me look in the output I
see that's the first frame right this is
here and this is here the last frame is
that there and that bear matches up and
guess what so in my previous gift loop
coding challenge I used a web service
easy gift calm there's another thing you
could use called ffmpeg let me pull up
the ffmpeg website ffmpeg
is a complete cross-platform solution to
record convert dream audio and video now
I've already installed ffmpeg on this
computer it's a command-line utility so
how to do that it's something I'd be
happy to come back and do in another
video but what I can do now is if I am
in my console and I am in the directory
I mean that output directory I can say I
have this in the chat here ffmpeg the
format is image - I want a framerate of
like 30 frames per second and my I want
to make it a gif no no this is my file
name and this % 3d is indicating that I
have all my filenames are named if you
look at them they're all named gift -
then three digits PNG so I can say
percent 3d dot gif this is thank all of
those files convert them from a image to
a gif and then I just give it the file
name of the gif I want so I'm gonna say
a noise loop dot gif and I'ma hit enter
it's gonna do oh darn I got an error
what did I not what did I not do
correctly here
[Music]
okay what I did incorrectly there is the
files are named PNG I'm saving pngs out
of processing converting them to a gif
now I'm going to hit enter I'm gonna say
a little gift prayer and it seemed to
have worked and I'm gonna go now
and look into that folder and all the
way at the bottom or at the top or no
where we're going to put it boys loop
gift oh whoa whoa I mean like temporary
land hold on a second huh hold on
yeah there it is I don't know why it was
I was it was I don't know what I deleted
the folder ah delete of the folder and
terminal put me into there okay sorry
all right let me do that one more time
okay so the files are named gif - 0 0 0
dot PNG because they're PNG files I want
to load the PNG files and turn them into
a gift so now if I just need to change
this to dot PNG noise loop gif hit enter
uh-huh I did this already so that's for
everyone over feet we are going to fake
making this seem like I never made a
mistake but I did make a mistake but I'm
correcting a mistake ok here we go
alright so the files that I saved from
processing are not gifts they're pngs
I'm taking the PA cheese and turning
them into a gift so here we go
PNG now I'm going to turn that it's a
noise loop gift I'm gonna hit enter it's
doing it a fitting it yeah it seems like
it worked then I'm gonna go back to the
finder into this folder I'm gonna go
down and there it is
noise loop gift and now we say our
little noise loop prayer and watch the
gift loop
I it's a perfect loop I don't know this
is like not the most illustrative
example again because that y-value is
kind of a yeah trick but anyway I don't
like the fact that I gave it the Y
position because then it makes it feel
like it's moving in a circle it's like
well it's so funny how it's like
actually following the RO team that's
just a coincidence right right if I do
this again yeah see I don't want it to
follow it
I want that let me oh I got like a bad
coincidence okay hold on
noise we're gonna do I'll do this whole
thing again
oh wait of course start on the other
side start far away this might be good
huh no don't follow it you're too much
following it I'm gonna find the perfect
there we go there we go that was a good
one okay okay okay okay
all right one more one more time
42 is the answer lurk the why how can I
make this more illustrative like giving
it the Y value seems silly I could say
like height - why
no no I - height divided by 2 minus y so
what I mean no well I could say negative
Y yeah I wanted to start further away so
let's do
draw line from start to finish from the
circle leave trailing ghosts behind the
big circle but if I leave the trailing
ghosts then the loo visual the loop
won't visually match lerp the dirt needs
more explosions that's a good suggestion
all right hold on
okay all right
okay last try Here I am I kind of I'm
good at we just like the cameras got to
go off any second now change the color
at the beginning of the end that's kind
of a good idea that's a really good idea
the brightness right I mean really I'm
on a kind of a warpath here to trouble
it point all right this oh yeah I'm back
I'm not ready to render my gift yet I'm
on a mission here which is try to really
illustrate this point and so I did it I
made a couple more changes one is I now
I drawing this circle that's moving
chaotically at negative Y value so at
least it's reversed I don't want it to
piers if it's following that circle and
then I also extended the range of Perlin
noise to a little bit more so it's
moving a little bit more wildly I also
added a noise seed so that I know every
time I run it it's gonna run exactly the
same thing now I got a great suggestion
from the chat which is maybe to try
adding color so another thing I can do
here with this first circle maybe is
have the brightness itself maybe the
Alpha be up beat that noise value so I'm
gonna take the noise value and a map it
which is goes between 0 & 1 2 between 0
and 255 so we can also and I need one
more parenthesis here so we can also see
that the color of that circle is
shifting right the kind that's not very
extreme I'm really torturing myself here
let's try making an RGB yeah all right
so it's a subtle color change but the
color change Luke's perfectly okay all
right I have to just give up I have to
render this gift you as people who make
beautiful interesting things with lots
of creative ideas in your heads will
really take this and run with it okay so
I'm gonna now
up here from record equals false to
record equals true I'm gonna hit run and
I'm gonna let this run it is going to do
oh people are telling me sighs people
are talking sighs okay one more thing
one more thing let's change the size
let's also change the size which map
that noise I of 0 1 2 between like 50
and 500 we're gonna make that kind of
extreme and you know what I can do ooh
you know what we could do ooh this is
exciting I could actually have oh I have
a really crazy idea this is I'm really
making this a mess but I don't care I am
going to get other noise values for the
size you can't stop me I'm gonna just
get X offset Y offset - I'm gonna make
the noise max much bigger for that so
that's going to be more chaotic and then
I'm gonna get noise - I'm gonna get
another noise value I shouldn't be
allowed to do this anymore someone
should just get bring the thing that
hope they takes me off a mess a noise -
so uh and then that's so this noise -
value is gonna give me the size of this
circle and so right so it's gonna do
this and it's way too big so I do
believe 10 and 100 so that's gonna give
it kind of this chaotic quality but it's
gonna loop perfectly okay this is it I
rendered it and now I have all these
frames I can check and see that the
first frame it looks like this what does
the last frame look like by doing 200 it
looks like that that's perfect you can
see that's right before it so let's see
if this loops perfectly now the way I'm
going to create my gift which is a
little bit new is I'm going to use a
tool called ffmpeg ffmpeg is a complete
cross-platform solution to record
convert and stream audio and video how
you install ffmpeg would be a topic for
another video but I have it installed on
this on my computer and you can see that
I can just type in term
all commands to do things like convert
this video file to this other format and
I can type in some commands for a gif
which is I have them written over here
on my invisible computer ffmpeg
- F image - I'm going to convert this
image - I want a frame rate of 30 and
then I need to give it the file names
which is gif
all my filenames are named gift - number
number number dot PNG gif - and I can
say there's going to be three digits
percent 3d dot PNG and I want to turn
that into my noise loop gif then I say
my gift prayer gif gif gif gif I don't
know I don't I'm like a gif atheist
so whatever how's the prophetic prayer
it's been like I've been streaming live
streaming for like hours now okay we run
this looks like it did some stuff so I
can go back into my finder and look
there's a noise loop gift and I can
watch please PLEASE loop
please loop just like loop ah it's
seamless so this is so visually not that
creative but I think now you can
hopefully take this and understand
something new about Perlin noise and how
to make Perlin noise loop and make some
more perfectly looping gifts that you
could share you could give them as gifts
to the Internet hashtag gift train gift
reign train gift no no no gift train
whatever I'll see you later in a future
video thank you for watching all the
code and all the links to things relate
that I talked about in this video are
all linked in the description ma see you
soon
okay that that is all all right is 12
let me just all right hold on I'm gonna
I need I need a like a few minutes to
sort of see like how I'm doing on time
so we're gonna take a short break and I
will be back in a few minutes hopefully
to do a little bit about
[Music]
I'm gonna do this this stock this dot
this star this stock song never forget
the Vince dot but somebody composed that
song for me
[Music]
just give me I've been another Sigma hi
four minutes I'm gonna go get some water
[Music]
are these coordinates
[Music]
and auto-tune and the internet will fix
that for me
[Music]
coordinates
[Music]
it's the four to Cartesian coordinates
it's coordinates
[Music]
[Applause]
[Music]
here's the water fun coding a square as
the water here is the water it's
actually quite far away walk all around
okay alright so let's see here it's
12:45 I really want to get to this
I really want to get to this other topic
but it's gonna take me a minute to get
there let's save all this stuff stop
save so if you're wondering what I'm
about to do I'm gonna do something very
ill-advised and prototype JavaScript
coding train okay that's perfect and the
question is prototype do I have the code
that I left off with here is it on is it
here somewhere
mmm would it be under tutorials p5.js
like 16 No
yeah 10 no where what is this video
number 9 prototypes in JavaScript would
it be here in nine that makes no sense
oh yeah here it is oh look
[Music]
by the way somebody sent me a clip that
was like four seconds long it was a
Google Drive link that was a auto-tuned
puller to Cartesian thing but was like
five seconds long wasn't this full song
that is by I should I forgot to give
credit to this song is from Yeol accion
SoundCloud SoundCloud yo Lexie polar
alright let me just go to soundcloud.com
/eo lakh see so this is where this
particular song comes from and this is
here so the people were talking about
gift is and I distracted me for a second
oops no no no no no don't do that so uh
this is what I want I want this code
that I had before perfect
and let me go I'm gonna do this not in
the what the video I'm gonna do this
not in
[Music]
so let me do the following I think does
this is this the way I used to do this
prototype gosh I think I need to be do
this fresh oh I shouldn't do this now oh
no its prototype g /b
I'm just getting ready to do a tutorial
that is ill-advised but I kind of wanted
to do it this week wait where's that
code they lose already I'm saying here
we go
lots of room here there we go and oh
it's broke something's broken here okay
whatever that's fine
I don't really care
and I need the CDN treasure just get
from here
and
okay
all right everybody so you might be
wondering what's about to happen I'm not
really entirely sure so what I want to
do is two or three video tutorials about
object oriented programming inheritance
as it relates to maybe particles
particle system or physics simulation
design and I was going down this road
apparently in almost exactly two years
ago Wow two years ago to this day and I
was doing it with es5 and like the
prototype syntax directly and so I think
what I would like to do is complete this
with a little follow up video but really
go into but really go into inheritance
with es6 classes ok d t6 in the YouTube
chat sends this link of their work so
let me quickly go to twitter.com slash
arts generative I think I'm gonna have
just go to the ah lovely
oh look some nice times table stuff is
this the one I was supposed to look at
109 8 to 769 109 no this one this is
this is really nice stuff it's beautiful
thank you for sharing my in Visio is a
bit physical thank you ok can I manage
to do this I said I was gonna do it I
want to back out of that but now that I
said I didn't do I'm starting to feel
like the need for lunch it's one o'clock
I mean three hours is month two hours
should be my limit
three hours is my absolute limit so let
me see if I can manage to power through
a little bit longer the hearts the
hearts where the hearts
all right so the other thing that I need
to do this is really unfortunate is
recreate so I just wanted I want to find
like what did I sort of like end up with
on the whiteboard here okay okay all
right I need to somewhat
[Music]
first image in the ten videos and photos
oh this one oh yeah I saw this one oh
yeah this is amazing I'm sorry this is a
beautiful heart image I saw this the
other day and it's so lovely and my
brain is melting like like this heart is
melting into beautiful rainbow colors
maybe there's a way you could apply
Perlin noise and make this animated loop
sorry for like being dense and not being
able to find that thank you for sharing
that
that is beautiful why doesn't it show up
here that's so weird like oh whoa whoa
and here it is animating Oh lovely wow
look at all these so oh wow whoa okay
okay okay uh-huh
thank you so much to arts generative on
Twitter for sharing these with me sorry
for being kind of dense and not noticing
oh wait wait wait wait wait
[Music]
that might be too loud long sound effect
there is breaking news was just
submitted to the website repo I'm being
told if I go to the coding training calm
under coding challenges under bouncing
DVD logo bounce no no I don't see it I
don't see it
is it not merged yet is it not merged
how am I supposed to find it if it's not
merged let's go to website pull requests
bouncing DVD logo this must be it
this must be it bouncing video on how to
create a bouncing DVD logo video here's
the URL I guess this will get merged
soon enough let's go to full view my
work here is done I mean I didn't make
this but thank you thank you to Orville
chopper this is really quite we have to
wait now so much for that job I mean I
could talk about JavaScript prototypes
any time come on
maybe needs like a drum oh that was kind
of the corner was it that was the corner
[Music]
it's really bouncing
I think we're getting further away
we're just getting further away now
[Music]
it never hits the corner she says round
corners it says Anthony I feel like
we're gonna get a nice Barry okay oh
yeah that's close enough
all right we're hitting the DVD corner
you win a bell and a train whistle we'll
see you next time where the prizes will
be like a cup of water all right back to
prototypes all right here's the here's
the bad news everybody
I need to somehow recreate this diet
this stuff because I like in in theory
on is this is this my good pen so I
don't need to redraw all of this but I'm
gonna say p1 X Y prototype okay p1 X Y
proto tight and then that goes to
particle dot prototype which has a show
function particle dot prototype which
has a show function and then it has this
weird underscore proto and that goes to
object dot prototype which has like
object dot prototype
not even know if this is right I really
made this two years ago I've been doing
this for that long this is crazy I mean
I've been through just for much longer
than that but that's YouTube video
nonsense prototype that links down to
here is that right yeah and this has
other things like I think I was talking
to has owned property so continuing this
video from two years ago and then we
could have like P 2 which has x and y
and prototype okay so this is basically
the diagram I had before all right so
now what I need now what I need refresh
this this video by the way has it a
6,000 views which is totally insane
this got to have oh yeah this is this is
a lot of thumbs down a lot of thumbs
down a lot of thumbs out on that one
whoop alright so now I just need I need
a little cheat sheet here I need a
little cheat sheet which is my old olden
days where - where would I have one of
my historical inheritance with prototype
examples well I think I've converted
everything
like what I'm I hold on javascript
prototype inheritance let me just see
yeah yeah yeah this looking on my
invisible computer for the way I used to
do this
I guess well I should look for it on
this computer hold on I have an idea
oh I know how I could do this nature of
code okay I know exactly what to do so
I'm looking for this and then I want to
go to like here and then I have this
inheritance example and if I look at it
it's using extends but if I go into the
history of this file yes six updates es6
inheritance so probably if I go to this
version of the file yeah now how do i
browse the file view file no no not that
one view file yeah here we go so this is
my ol okay great
except there's this shouldn't be here
but that's fine okay this is what I need
I think I can actually remember this but
it'll be my reference just in case okay
all right I think I'm ready for this
great with this very bad idea
on this no good very bad terrible idea
day
the problem with me doing this is I
really should only be doing this if I'm
also going to do the es6 ones but such
is life it'll have to wait till next
week because I got obsessed with the
noise loop thing the water is gone I've
got 24 minutes before I turn into a
pumpkin and here we are
okay hi everyone I am doing something
very ill-advised I think in this video
but I were trying a completionist and
I'm returning to something I made a
video apparently almost today's 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 that my 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 I just I can't let
this go I at the very end of this video
I said and then I'll make a follow-up
one about inheritance using prototypes
of JavaScript and I never did and
perhaps perhaps there's a kernel of
value here in that yes six classes is
really just what's referred to as like
syntactic sugar and I do have a sweet
tooth over you truly everything
javascript is still a prototype based
object language so understanding how
these prototypes work and how this
concept i've inherited applies to them
is perhaps useful so if you're still
with me i'm gonna try to explore
inheritance with prototypes in
javascript as a follow-up to this video
9.19 from two years ago so if you watch
they've maybe just maybe literally just
watched that video and somehow ended up
here which would be kind of amazing if
you did you might have seen it that I
had this diagram and the idea this
diagram is 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 its own XY position
p1 as an X Y P 2 as an X Y but the
functionality is tied to particle dot
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 dot
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 I just use that
for this cuz 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 classes
the way I do this now is with es6
classes I don't do this anymore but I'm
just exploring it cuz I can't help
myself
confetti dot prototype what I want is I
want confetti dot prototype to inherit
everything from particle dot prototype
but maybe have its 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 you I don't
have to rewrite the show function it's a
special kind of particle that somehow
inherits that so let's let's see how
would we do that ok so coming back to
the code I don't really know this a try
don't worry I have my cheat sheet over
here of my actual example from the
nature of code book if I need to refer
to it 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 I'm this is an old old
way of doing stuff with this idea of a
constructor function because the idea
here is I want to say now I'm gonna have
it okay I was even using var so I'll
keep music var because I'm living in the
past today C and C is a new confetti I
want to be able to say like C dot 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 see dot show is
not a function okay so how do I have
confetti inherit everything from
particle so I think what I do is I can
say particle I wrote I don't even
remember I hope to look at my cheat
sheet particles I thought I was right I
was right Park hold I call particles I
call they knew that's what it was I'm
gonna type so okay so the first thing
that I'm gonna do is in the constructor
function I'm gonna say particle dot call
this oh this is so weird but what the I
oh 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 dot show but let's console log p
and console dot log C so we're gonna
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 its own show
function and then it gets a whole bunch
of other things from object but confetti
up it doesn't have the show function it
just has all the things from object okay
so how do I linked it to well one way to
link the two is by saying confetti
by saying confetti dot prototype I have
to look it up ever date anything
I'm gonna edit out to be looking it up
right that's what I thought oh yeah yeah
object I create ah aha oh yeah yeah okay
okay okay so one way to link the two
would be to say okay you know what
confetti dot prototype should be the
same as particles prototype so I want to
set the confetti prototype to particles
prototype now this is not a good idea I
don't think but let's just for the sake
of our unit let's put that in our code
and let me 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 great oh and look the
constructor is even the particle
constructor perfect all this is great
done finished I'm out of here
wait I think there's a problem so this
is a bad idea because we actually don't
want to set it equal this could cause us
problems and what we actually want to do
all the I the idea of prototype is to
base an object off of other objects and
it would it and in order to do this
properly we need to say object create
particle dot prototype we want to make
sure we make a new object that is based
on the particles prototype itself and
that's what we're actually pointing to
not directly to the prototype okay so
let me just add that in and I'm gonna
hit refresh again
wait no here we are here we are and
great why do I have to do that do I
really have to do that hold on I don't
actually know about this stuff can we
just forget that prototypical
inheritance exists oh I see that David
also made like this really cool looping
gif yes I would follow these classes
over
the tapes don't do this wait why do you
need could someone explain to me why I
needed to do that I'm looking at this
like where is this gonna cause a problem
like what if on to see yeah I guess I
could just I think I shouldn't make this
video if someone could explain me why
I'm supposed to do that
that would be great yeah okay I see
if you do ah thank you thank you
that's why thank you me I am so me wow
that's totally it
okay thank you okay
okay thank you
so let me go back
while this looks right I am now have a
confetti object that inherits sho from
particle because I've tied the
prototypes together this is a terrible
idea so I'm gonna 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 you like the idea here
is that this particle prototype this
particle object it's good night in if
you if you're looking at some my other
examples has a lot of stuff to it maybe
it has this whole like 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 like simulate that for
a little bit by what I'm gonna do is I'm
gonna add now another function to
particle called update and what I'm
going to do in that function is I'm
going to say this dot X plus equal and
I'm using p5 so I can use random
negative I'm going to I'm just going to
move the X and the 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 am going to now add
the draw function the draw function will
loop and I can say P dot update P dot
show C dot update a C dot show and what
I'll have now Animus a background 0 and
I'm gonna just make sure I can really
see this by saying stroke 255 and stroke
weight 8 so I should see if I go back to
here two little dots dancing around what
is the particle object one is the
confetti object the wonderful thing here
is my confetti object which sorry I am
going to now which is now C so I have C
a confetti object I have P a particle
object
this links to confetti dot prototype but
confetti dot prototype and particle dot
prototype right now are equal they're
the same thing
so it's actually as if this is linking
directly to particles not prototype so
the show function it's getting is right
here and there's also now an update
function okay so my confetti object has
both an updated to show function and its
own X&Y the particle has its own X&Y and
an update in to show function so what I
want to do is I want my confetti object
to inherit this update function but I
wanted to have its own show function I
want to have its own show function I
want it to draw itself in a different
way maybe as a square with some color or
something like that so let's go back
here and what I'm gonna do is say okay
no problem what I want to do now is say
that confetti dot prototype I can type I
could type okay that's a copy-paste that
dot prototype dot show equals function
and I'm gonna just do something totally
different
I'm going to give it us I'm gonna say
stroke 255 0 255 I'm gonna say Phil no
Phil and I'm gonna draw this as a square
with a side length of 50 and now I'm
gonna hit enter and what's going on
why why why why isn't the confetti
calling it's show function the reason
why it's not well okay well okay well
maybe I need to do this after after I do
this confetti dot prototype equals
particle dye prototype ha
wait now they're both showing like
confetti either both I want them to do
the same update function but I want them
to do different show functions so why is
that not working it's because I can't
actually the way that the prototypical
inheritance chain thing works is I can't
set confetti prototype
equal to this I basically overwritten it
so it's as if there aren't two separate
ones I want to base this on that not
overwrite it and the way to do that it's
what kind of ridiculous and this is why
the es6 classes methodology that you
should just turn this video off and go
use instead is I have to say right here
object dot create particle prototype
it's basically making a new prototype
based on the particles prototype but I
can modify it so once I've done that and
I hit enter now you can see I have both
of them are using the same update
function but one has its own show
function and let me show you we're gonna
see this in the console in a way that
hopefully will bring this all together
in a way that makes sense so look at
this they each have their own XY that's
good because that XY property is added
in the constructor function which both
the particle constructor function and
the confetti constructor function call
the particle object has a show and an
update function as part of itself but
look at this now the confetti object has
its own show function but oops sorry but
it's update function is down here
because it points to the particle so
this is the chain confetti particle is
kind of has its own show and update
confetti as an X Y its own show but it
also has a show and update which it
copied from particle now the reason why
it doesn't call this one is it always
looks for the first instance of
something up that prototype chain so
this is wildly confusing and convoluted
hopefully this gives you a little
background its sense of how this works
but there's one other missing piece of
this I believe which sorry there's one
other missing piece of this I believe
which relates to this here the confetti
the confetti object doesn't actually
have its own control
sure really it should so for example if
I wanted to do something like I'm just
gonna add right here like I want to do
something else like console.log hello
this is confetti like in addition to
initializing this object the way a
particle does I want to do something
else actually maybe what I want to do is
give it a color this dot color equals a
new color that is pink and then actually
what I'm doing is I'm calling that under
stroke I'm referencing the confetti has
a color like the the particle gets in
X&Y the confetti gets in X&Y and a color
let's see what happens here
Oh weird weirdly that worked so I
thought I needed this other step which
is this confetti prototype constructor
equals confetti so is this really
unnecessary can we just put that in here
all right because if I go back to here
the constructor is pointing to particle
if i refresh now it has the constructor
the confetti constructor which is what I
want huh well I mean that seems like
important but it worked anyway
hmm where you be I am so be is typing
[Laughter]
what is disaster the 1:30 yet that's
when I'm leaving
I think constructor let's use type of
correctly so that's the that's the issue
or you could inherit from it interesting
so the real CR for XY is recommending
some other YouTube video to watch we
took probably should have done before I
started on this bad so maybe it's just
the type of thing okay it's a minor
detail
but let's try that C type of particle
no wait how do I use type of oh it
returns it not a boolean sorry thank you
very much
that's not oh no no no those are
functions ah it's of the variable yeah
no this is right type of C object oh
thanks that's really great thank you
very much
I mean maybe it's just it makes it a
cleaner but there's how do I get the
class name get
it's still prince2 instance of thank you
that's what I'm looking for
maybe that's what C P instance of
particle true instance of confetti false
okay see instance of particle true
confetti also true
it's useless unless I didn't reload it
well let me take that out maybe I didn't
reload it true particle true P instance
of confetti false no everything is
working the way it should
let's put this in I think this is
actually completely useless see instance
of confetti true particle true it's the
same false particle true it looks like
it's a bi MCB rights which I agree with
it looks like it's somewhat of a
standard with no actual meaning useful
for if you're constructing types
dynamically but not useful otherwise
okay so anyway I'm going to mention it
but but
so interestingly enough this worked
anyway I thought I needed this other
step in order for it to call the
confetti constructor properly here if
I'm saying new particle versus new
confetti it looks like it works anyway
but I'm going to show you what this step
is really one thing one thing that's
kind of missing here is that in if I
look in the prototype here the particles
constructor is pointed to this particle
function and if I go here into the
confetti you can see like oh there is no
constructor it's getting it from the
prototype chain which is incorrect the
confetti object should have its own
constructor and so a way to do that is
to say I think it's to say actually I
have this line of code here in mind from
my example I'm just gonna copy it in
that's what it is to say this confetti
dot prototype constructor equals the
confetti function right I want to like
specifically assign it that and it seems
to me that this is just a convention to
kind of clean things up I can't actually
find a place where I need that in order
to write code to run correctly but I'm
gonna leave it in there and so now I'm
gonna hit refresh and we can see here
that a confetti object inherits
everything from particle including it
gets its own X&Y and it gets a show
function sorry sorry and it gets a show
and an update function it has its own
constructor and its own show function
because I wanted to modify the confetti
show function from the particle show oh
don't worry
if none of this made any sense to you
that's okay
um this is confusing and weird but this
is underneath the hood how all of this
stuff is linked together in the
implementation of the JavaScript
programming language itself this is the
prototype inheritance chain I can
basically create a new object with its
own function calling the other objects
constructor function and then attaching
its prototype to a new object based on
another object's prototype it's really
weird and kind of awful but this is how
I used to make my examples but don't
worry oh there's a new way I make these
examples well you don't have to worry
about this anymore you can skip to I
haven't made it yet but soon enough
within the next week or two I will be
uploading and publishing a video all
about inheritance in JavaScript using
es6 classes and in those videos I really
talk about the theory behind inheritance
why it's useful and how to put it into
practice in JavaScript so if you
actually made it through watching this
video thank you
hopefully this helped add a little
something to your day and I'll see you
maybe in those es6 classes videos thanks
good bye alright alright it's 1:30 I
have to go I don't know if I should
release this video without having made
the other ones we'll see Nico is asking
can you please put the full live online
as well for this one so the whole live
stream will stay archived as soon as I
hit stop streaming so you don't have to
worry about that and then also edited
versions will be uploaded separately so
I always leave everything online unless
you know I guess I reserve the right to
take it down if there was some big
problem but I haven't not yet to date
taking a live stream down and apparently
this is like live stream number 160
something so let me just check for any
thank yous here so we had looks like we
had new member cryptic who also super
chatted with a comment try a coding
train try a coding train with Perlin
noise looping smoke who interesting that
would be like - Luke the the z-axis in a
way like to do a tourist basically or a
sphere or something like that to loop
the Z value around back to the beginning
I've been live streaming for 3 hours I
don't think I'll be able to get to that
today but I do love that idea and would
like
to try it so thank you to everyone who
joined today I appreciate it I
appreciate you maybe I could go back to
a slightly happier place
and just open this and this is where I'm
going to finish why did it not work by
the way when I go to full let's try this
I go to full test test test it is why is
it not getting the audio in there's no
error in the console it's so strange
what if I do present hello test test
really weird but if I go to sketch oops
sketches and hit play gets the audio how
weird all right so thank you everyone
I'll be back next Wednesday let me check
my calendar
next Wednesday 10:30 and Eastern I gotta
work on this date and API that's coming
next week look at my calendar I see
nothing see nothing telling me that next
February 27th there's no reason why I
wouldn't be here so next Wednesday I
mean if I could sneak in some time I
would love to come back and do the es6
classes inheritance stuff tomorrow or
Friday or Monday or Tuesday pretty
unlikely that's gonna happen but I
certainly will come back to it next week
and George has Dan will you answer
questions today well I I would be happy
to answer a few questions if they appear
in the chat you need to interact with
the page before we can use the audio or
mic I think I think that's true that is
true so how do I so what if I have an
idea let's put this in mousepressed
so I won't start the mic until
mousepressed and but I think I could do
this so that it's not null let's try
this hello
No
okay so hold ah what if I do this and
just say if Mike I know the camera just
went off so if I do this and then I
click it starts and Eitan asks do you
work at a company so my full-time job is
teaching at a program called ITP and
also ima ITP as the graduate program ima
is the undergraduate program and to
School of the Arts in New York
University and that's actually where I
am I'm in the Tisch building the closet
where I thought up some cameras and I do
this alright let's try this
No
so weird the I know that that's there's
like a weird chrome thing all right I'm
not gonna worry about this it's so sort
of silly oops
sketches I guess I just was like I don't
know why I was I was gonna try to put
this on the screen
all right this is my goodbye song for
reference what time is it now
138 p.m. by the way when I went to get
water was snowing it inside of you I
wonder if it still is
according to Web Audio API pop privacy
policy in Chrome Safari and Firefox
usually I do audio context 8 equals
resume after the direction try the embed
version not the full one yeah these are
all good suggestions alright goodbye
everybody thank you so much I will see
you next Wednesday I'm fading myself out
whoops no I'm using my microphone and I
will hit stop streaming in a minute or
two
[Music]
just coming back to say hi to you Lexi
hi Alexi thank you for the Florida
Cartesian coordinates on did you call
somebody share to be a short clip of the
Google Drive link I know what it was it
was very similar but you hey but it
wasn't you what did you make up earlier
versions like a short clip they by
everybody
[Music]