[Music]
[Applause]
[Music]
so this is random this is noise Perley
noise that is in the core random
algorithm the actual random algorithm
itself those numbers aren't related at
all you pick like I'm picking random
numbers between zero and ten nine two
seven six one nine four eight nine to
one thirty I pick nine a lot apparently
but with Perlin noise I might pick
numbers like this two three four three
four five six five four five six seven
five six seven five six seven eight nine
eight seven six well this is like Perlin
noise performance part
[Music]
89 2 1 3 1 2 3 4 3 4 5 6 5
these look like pearls and noise
performances but with curly noise I
might pick numbers like this
by purling noise that is Hurley noise so
this is Hurley noise that is Hurley
noises this is Hurley noise that is
Hurley no so this is Hurley noise that
is her pearling know her pearling noise
that is hurling boy this is Hurley noise
that is hurtling this is this is Hurley
noise so this is her but with pearly
noise I might pick numbers like this
[Music]
this is like Perlin noise performance
part good morning hello and welcome to
the coding train live on a Wednesday
where there's nothing else going on on
the Internet today
I think people aren't watching anything
they're here rows watching videos about
simplex purlins gradient fractal value
whirly noise right right hello my name
is Dan Shipman and I at the moment am
here every Wednesday at exactly this
time and is the morning for me here in
New York City and you are here also so
thank you thank you for watching I'm I'm
a bursting at the seams to do today it's
topic and I'm gonna get to that in a
second it looks like people are saying
hello in the chat one thing you might
have noticed I instead of kind of
waiting till I'm completely ready to
flip the switch to start live stream to
you to youtube you table youto utopia
YouTube YouTube it ooze um I instead
start streaming with just the logo and
playing some music while I'm getting
ready that way at least some things up
and running people get the notification
take some time for people to arrive I do
hope and plan to soon have that beat
something that's animated maybe that
says like starting in just a couple
minutes but you know all in good time
I'm still a person who streams on the
internet with a camera that shuts off
every 30 minutes so technical stuff is
it's it's happening it's getting there
I'm starting to become a professional
ish
person so now what what thing I just
want to say that it's really an honor
and a thrill and brings me a lot of joy
and happiness ease how many parts of the
world people are from who are watching I
saw Ethiopia Iran Cambodia Cambodia
Thailand India and those are just some
of the countries that I saw people type
in scrolling past in the chat and I know
that there's probably some US viewers
there that is still in terms of the
viewer
ship when I look at the YouTube
analytics the highest number but and and
anything that I can do to make the
content more accessible to international
community and all sorts of different
communities with access to technology
and the internet in different ways I
would love to hear from you maybe you're
from somewhere in the world where you
can't get this but you want to maybe
there's some kind of subtitles I could
do or bring on a guest or help somebody
else do videos in a different language I
don't know this is the thing I would
love to do so makes me I mean you see
France Belgium Poland Belgium Australia
and Nepal Portugal Romania France
Germany Bulgaria amazing amazing turkey
Russia Pakistan Belgium Israel hungry
Egypt Kerala Netherlands Poland
Bangladesh okay I have to stop reading
this it's just - it's too thrilling and
wonderful so um let me talk a let me
make a few announcements first I'm gonna
open up my browser this spoiler alert
I'm gonna talk about that ah the coding
train web site let me yet again
highlight the fact that there is this
web site and what one of the primary
things about the coding train web site
it is a place for you to share things
that you have made based on videos that
I put out which the youtube comment
system isn't particularly great I mean
there's I'm trying to think of the good
qualities about the YouTube commenting
system well they have a little heart
button I get to press a heart button I
like that I'm trying to think of other
things anyway so if I go here to for
example my most recent purlins and when
I say purlins for every single video I
have ever made up until today please
just insert a footnote a parenthesis a
parenthetical a subscript a superscript
please insert the year 1983 Oh 1983 I
was a young 10 year old boy in Baltimore
Maryland innocent of what would happen
in the future to me not realizing that
what's
my life blowing into a wood device that
when air goes through it and then comes
out makes a whistling tune anyway this
particular Perlin noise algorithm is an
algorithm that dates back to 1983 and
today we're we are entering the future
we are entering the 2000 the 21st
century we're gonna hit 2001 in this
video baby and talk about simplex noise
anyway I was saying something all right
the point of me showing you the website
is this is a place where any challenge
and let's go to this one Perlin noise
loops and go to the challenge here you
can find the various links of things
that I talked about in the video you can
find other related parts that are
related to this challenge other videos
but here's what I want to highlight the
community contributions and currently
the system for submitting your community
contribution requires a pull request on
github this might not be a thing you're
familiar with or comfortable and how to
do but guess what the coding trade
community is make your first pull
request on github if you can't do
anything wrong you can't break anything
you can't do it the wrong way we will
help you and so uh there's only one
contribution right now from Carlos Ponce
source code here let's click on the
project and take a look at it
there's controls there's a horn oh look
at that oh look at that this is
beautiful X Y Z oh I can I can put the
access see X axes the access is the ax e
is there it can make it not rotate this
is beautiful and by the way I did look
at this before I started live-streaming
this is need renderer we blows my mind
that's really awesome thank you for this
submission so I encourage you to submit
your ideas to here there was something
one thing I would love just as a little
note little tidbit you make me so happy
if you do it this way and maybe it
should be more explicit in the
guidelines but if I go here into like
the pull requests oh look there's one
there's another one
right here also by JC pons if I click on
it and it there's a comment here what I
would love even though the URL to this
particular project is in the actual
files that were changed in the pull
request we can see it here for me to
look at it I have to go in here and then
do this and hit copy would be so nice if
you could just put the URL to the
project also in the comments you put
here so it's really easy to click on and
see to make sure it isn't some something
that's not appropriate or there's an a
mistake that URL is broken that type of
thing helps just check it and I just
love looking at them so that would be
that would be wonderful so that would
just bring me a little sparkle sparkle
into my day to have that okay
what else did I want to talk about
announcement wise aha yes google Summer
of Code so again I'm not an official
representative of Google Summer of Code
I don't work for Google I don't I'm not
I'm not an organizer of google Summer of
Code but I want to I like this because I
do participate in google Summer of Code
and it is an excellent program
for any of you watching who might be a
excellent opportunity for any of you
watching more students who might like to
get involved in open source and get paid
to do so so if you are again you should
really double check the eligibility
requirements from Google's official
materials but for my understanding if
you are a current university or graduate
student even if you are graduating this
year you are eligible to apply for
google Summer of Code you can find all
of the different organ touring
organizations here I will you know we
can look through them there's some that
I'm a little bit familiar with there's
some that I'm quite intimately familiar
with and if I keep scrolling down and
eventually we get to the peas ah there
we go the processing foundation so the
processing foundation is here I'm going
to click on this you can click to learn
more anyway I'll come back to this
another time I don't think the deadline
is for quite a while if people have
questions but I would encourage you to
apply a processing foundation I is is
the particular open source organization
that I participate with for google
Summer of Code I didn't know
which was kind of exciting to me that
tensorflow is on here and I didn't check
I should I better check it soon as I
stop live stream and check this if the
tensor flow J s is part of what they're
looking for contributions in for google
Summer of Code but that's certainly a
project that I have some passing
familiarity with that I might encourage
you to apply also o clips the clips I
need like a love I need like a love
sound effect for when I have love for
something I used to spend a lot of time
programming in Eclipse I even saw
Eclipse passed by on a YouTube video the
other day that I was watching I'll tell
you more about that later and I've been
trying to find a time to do some stuff
about Eclipse on this channel the coding
train oh oh that would that would be
nice
and I haven't thought of it I found a
reason to do so I'm the thing that I've
been wanting to do is actually show the
steps to make a processing library a
processing java library you know this
might have been more relevant more
timely I've gotten around to it a year
ago two years ago five years ago ten
years ago but I still think it has value
today and in particular if you're
learning about programming in Java if
you want to understand more about
contributing to processing itself it's
good timing with Google Summer of Code
coming up so I think what I would like
to do and I don't think I'll get to this
today but I I would like to turn the
simplex noise open simplex noise
algorithm by Kurt Spencer that I'm going
to look at into a processing library and
I could do that in a video and then we
could make a JavaScript library I think
there might already be a JavaScript
implementation of Kurt Spencer's code
will off to look into that but that's
something that I am interested in
Wolfgang oh hey everybody wolfgang
amadeus mozart is here I thought I had
some Mozart music you know I have some
Beethoven here anyway Wolfgang Amadeus
Mozart asks do you prefer JavaScript or
Java well your I love them both equally
it's like asking me to pick between my
children some days I like one more than
the other
sometimes one is complaining more the
other ones complaining more the next day
some days one of them wants to give me a
big hug the other one doesn't but then
the next day the other one does the
other one does it not that they should
be required to give me hugs whatever I
don't know what I'm talking about
anymore but no I will not tell you which
one I prefer I love all programming
languages and they're all nice and they
all have their good points and their bad
points and people can some people like
these and some people like these to me
any all the different paths for getting
started and making stuff and expressing
yourself and finding the joy in
computing is the nice thing all right
what is this whoo Java Linux found it
ooh ooh I don't a processing foundation
I need a thing for a thing someone give
me some kind of all right so that is
that let me close this up oh now we're
to the topic so here's what's happening
today first of all what's again
mentioned I have I have a like whatever
the equivalent of writer's block is for
what it is that I do I have that maybe
you can help get me out of this
youtubers block I through a learning
incentive grant from Google from YouTube
I am working on creating a new playlist
which is entitled working with data and
API in JavaScript I've mentioned this
before I do have some videos that I have
made previously on this topic but
they're mostly out of date and it could
use a little refreshing plus there's a
lot of stuff I didn't get to so I need
to start doing this I have to finish
this playlist my deadline is you know
late April early May and so I want to
get started on this and so next
Wednesday
come lower high water I think we'll say
hell but I don't swear on my channel and
if you noticed that I don't curse or
cuts or whatever word you want to use I
secretly just like a little goody
two-shoes
I had my wild period my Rumspringa but
what what did you put it here cafe chain
that will remain nameless because you're
not actually sponsoring me but you could
I'm looking at you at all J anyway I
have to finish this so come hell or high
water that's what I was trying to say
but I felt weird saying hell I'm gonna
do this next week so please please help
me out here give me your ideas
contribute to this hopefully there'll be
an I'm digging a train ride on Friday
and I'm hoping to work on this thing is
the audio gone alright sounds really low
right now okay let me thank you for
letting me know there's mic issues let
me see what could have caused that
test test that's weird
test test all right III here I've got it
everybody can't hear me anymore all
right
I'm aware of the sound problem just let
it fly live on the edge let your freak
flag fly
no don't don't don't nobody fly any
freak flags in the chat keep everything
please
alright so that's that so today I have
an obsession my obsession is with noise
algorithms I have you have seen me spend
all of my time on this for the last two
weeks there's got to be a stopping point
at some point sure there probably is no
stopping point now the mic okay alright
let's restart the system alright
back
[Music]
music playing please let me know I
checked I've checked a whole bunch of
things and everything is working as hard
as I can tell people are asking if the
issue might have been
we hear you okay great so the reason why
I don't think the issue is the mic is
because you couldn't hear the music
either and the music and the mic are
completely separate audio inputs that
are coming in in different ways so if
they're both if you're not hearing
either of them somewhat her between the
computer and quick alright okay so well
I had momentum I had energy I feel
sleepy now what time is it oh good
as long as I get started coding by a
half an hour in that's a good thing so
um it's the mic wait hold on
audio gone but music on oh no you could
hear the music fine oh okay okay
it is the mic let me got it
test test I hear myself in the monitor
boy
the good news is I have another mic i'm
gonna mute the mic because i don't want
any like popping sounds that come up i'm
just gonna play with the cables for a
second
okay all right let's see if the mic is
back the weird thing is I don't see the
level change in the the monitor that
shows me like this little green bouncing
bar alright so right now you can hear me
I did switch out the batteries I
unplugged and plugged in the cables
let's see if that fixes it if not the
good news is I do have a second mic but
it'll take me a little bit of time to do
that through my sweater and see if it
works now I hopefully the music doesn't
like mess it up so it is clipped to me
now and hopefully we're okay
everybody seems to say it's good alright
alright so hopefully this is going to
work let's play a little music
to make sure that that's not causing the
problem
[Music]
I'm gonna say once again
[Music]
coordinates
[Music]
okay all right here we go now let me go
back to what I was saying before I had
all the different mic audio shenanigan
problems I have an obsession Perlin
noise I have done a lot of videos about
Perlin noise I have done a lot of videos
you know what let me just get started
with the actual coding challenge because
I'm gonna explain everything that I'm
gonna do and then I'm gonna end up
explaining it again so I have this open
yes and then all right that's good
enough okay
all right all right here we go Simon I
see that you are asked me did you see my
long message it's not possible for me to
read long messages during the live
stream so I will check it out later
thank you very much okay here we go this
will be coding challenge 137 open
simplex noise although I'm not I have to
think about how to title this because to
be clear what I'm going to do in this
video is not implement open simplex
noise I'm going to use a particular
implementation of open simplex noise in
a processing sketch so if it says coding
challenge open simplex noise
some of them might think that means I'm
implementing it which I will not be
doing alright
I'm just checking the chat to make sure
the that to make sure anyone saying
there's an audio problem and Paul says
hello from Brooklyn hey I live in
Brooklyn I'm not in Brooklyn right now
but that's where I live
okay hello
now this video has been a long time
coming because let me tell you something
I've been living in the past I've been
living in 1983 my whole life I mean I
didn't live in 1983 for ten years of my
life then I actually lived in 1983 and
then it the years went going but but
since then or at least for the recent
times and I was making these coding
training videos about parolee noise I
was living in nineteen 383 all along and
I sort of knew that but I never really
bothered to look into it I didn't want
to know I didn't want to know about
what's happened since 1983 I am going to
update my life right now and your life
to to the year 2001 and actually more
like the year 2014 and all the way to
the present because today I'm going to
unpack what it means it's the best of my
ability what it what is the difference
between the original Perlin noise
implementation from 1983 something that
came out in 2001 which is an updated
version of Perlin noise called simplex
noise by Ken Perlin himself and some
open source implementations that have
been made more recently um notably by
Kurt Spencer called open simplex noise
so a lot of stuff discovery this video
will be approximately 71 hours and 32
minutes long I hope you enjoyed it now I
will be prepared to begin speaking
let's go travel back in time to 1983
hear what happened in 1983 no I want to
know the year 1983
war
let's drop a fact and let's travel back
to the year 1983 Oh is a simpler time
when Jim Henson's fragglerock launched
and uh-oh there's the bad stuff happened
oh let's not look I don't want to know
what happened Paige am i on all right
let me get to the point here 1983 the
original Perlin noise a type of what's
known as gradient noise was developed by
Ken Perlin in 1983 Ken Perlin won an
Academy Award for this work it is the
the algorithm that Ken Perlin invented
in 1983 forms the basis for the source
code the implementation that's in
processing itself in all these videos I
made about Perlin noise where I the
place where I learned to understand how
Perlin noise is works and how its
created was this webpage which is no
longer online but I found it through web
archive Perla noise by hugo elias and
you might have remember to go elias from
the problem is when i look over here now
to look at myself and what i'm pointing
to I see the chat and then I see weird
stuff happening in the chat I have to
distract myself
this page by Hugo allies this is where I
learned and first understood how the
Perlin noise algorithm works why it's
this kind of gradient noise what this
concept of octaves of octaves is the
idea of waves and amplitude and
frequency so I would encourage you to
check out this article and look at it
and think about the whole thing over
I'll just start over from where I'm on
the Hugo Elias page because I it's bad
for me to stop because it's good for me
to just keep going okay where I first
learned about how the Perlin noise
algorithm actually worked was from an
article written by hugo elias this page
is no longer on the internet but you can
find it through web dot archive.org this
is a wonderful introduction noise
functions talks about random sampling
interpolation applet ood and frequency
octaves and looks at this kind of
gradient smoothing process that happens
to create Perla noise and explains why
you get these sort of patterns on how
this stuff works there's actually even
implementation so but I am NOT going to
go through this today I will point you
to the idea of gradient noise this is a
key idea because the idea of Perlin
noise is to smooth gradients in perhaps
what well let's say we're considering a
two dimensional space two smooth
gradients within a two dimensional space
squares on a grid this is how we usually
think of a 2d space the reason why I'm
highlighting this is because this idea
of how this space is oriented the
geometry of the space is the key
distinction between classic cool classic
Perlin noise and simplex noise all right
so we'll come back to that next stop on
my Wikipedia tour is the page for
simplex noise so simplex noise is an
algorithm for constructing n-dimensional
noise it's comparable to perla noise
created by Ken Perlin himself but the
key element here is fewer directional
artifacts so what do I mean by
directional artifacts maybe you've
noticed this in some of the videos that
I've done before let me pull up this
processing sketch look at this does it
feel like it has this this is um
- I'm visualizing two-dimensional noise
using a third dimension of noise as
slices of animation do you feel this
like kind of bouncing like it's kind of
like herky-jerky
classic Perlin noise is kind of
herky-jerky it kind of gets to a point
or stops it bounces that's the sort of
visual quality of a directional artifact
it doesn't feel smoothly continuous over
long periods of time and so this is
really the innovation of simplex noise
now the innovation has to do with
symplectic geometry which is really and
this is actually in an article that I'll
refer to but a simplex grid looks like
this so the core innovation is the idea
is that instead of smoothing the noise
calculating these gradients over a
square great rectangular grid a tiled
system of equilateral triangles and
there's lots of variations of this and
this this also generalizes to multiple
dimensions and symplectic sym I can't
say that word but symplectic geometry
which maybe would be a topic for another
day to visualize some of this stuff in
higher dimensions but this is the core
innovation I I couldn't possibly begin
to say that I understand exactly how all
of the pieces of the algorithm works and
how this smooth is out smooths out those
directional artifacts but I do want to
highlight the work of I lost the page
here but oh yeah here of Stefan
Gustafson who is a computer graphics
researcher in particular the page of
documents on simplex noise and this PDF
which I'll scroll all the way back to
the top called simplex noise demystified
so I read this on the subway home last
night and on the subway to work this
morning and so I have some picture in my
mind of how this works I probably need
to read it about 73 times as a court but
this will give you much more background
into the difference between classic
noise which
there's a nice and you can see here
these this idea of these gradients and
SCIM simplex noise and how the tiling
system works in multiple mention so I
encourage you to check that out now what
are the oddities about a simplex noise
is that there's a patent for it this if
I'm correct is the patent patent us six
eight six seven seven seven six b2
inventor Kenneth purlins you can
download the pdf this was filed in 2001
at the time of the invention of simplex
noise and there's a lot this is an
apparatus for generating image the
apparatus includes a compute or the
apparatus includes a display connected
to the computer on which images from the
computer appear I will stop now doing my
dramatic reading of this patent and so
to me I'm not a lawyer I'm not an expert
in this but it's unclear to me what it
would mean to use the sort of like
literal version of the simplex noise
algorithm which is described in great
detail here in the patent in say a
processing library or processing sketch
in an open source environment so there
is fortunately a a post that was on
reddit that I found from four years ago
from dot whoops sorry dot let me find
the username k dot jpg which is a post
about this new version of what's called
open simplex noise so this algorithm is
very similar it's it's highly correlated
and relates to the Ken Perlin simplex
noise but there are some key differences
and this the code for this algorithm is
published here on K dot JPEGs github
gist open simplex noise Java and which
means I can use this in process because
it's Java and if you scroll down first
you could look and be like whoa you got
to love anything that has a variable
named squish constant 3d oh that is a
beautiful variable name but I want what
I want to do is highlight down here I
looked I looked I looked I'm gonna keep
going there's a lot of code tests and
then here this is free uncovered
software released into the public
so I believe this is something that I
can use and I'm going to use it in the
context of this video boy that was a lot
of explanation so what does this mean so
I want to do another video after this
one which is I just find every single
piece of code I ever wrote music me
prostrate pearl enjoys function and try
to do it again with open simplex noise
but I'm just do that just for one thing
right now one thing then I'm gonna do a
coding challenge with it maybe this
isn't a coding I don't know what we'll
see this might get divided into two
videos I'm thinking now all right let me
go here raw let me do a base big
copy-paste I'm gonna go to processing
because processing this is the sketch I
want it whips I want to change this
particular sketch from purl in classic
pearl in 1983 noise the noise function
in the processing library aka gradient
noise there's that there is also
something called a value noise there's
all these fine distinctions between them
but anyway it's easy to get confused and
I'm somebody will write a nice extinct
comment that I will pin to this page
that has us all explained perfectly I'm
sure I want to change this to use open
simplex noise and I want to examine and
look at the difference in quality and by
the way what does it mean what do I mean
when I say quality so first of all let's
go I like thinking let's take it like a
dive into this a little bit further
let's go to processing org slash
reference let's search on this page for
noise I'm gonna click here and I'm gonna
go down and I'm there's a I'm gonna redo
this whole description but I'm gonna go
down here and I'm going to say I'm gonna
read this part there have been debates
over the accuracy of the implementation
of noise in processing for clarification
it's an implementation of a classic
Perla noise from 1983 and not the newer
simplex noise method from 2001 so why
not I mean processing by the way was
invented it started by Casey Reis and
Ben Frey is a project in 2000 run one at
the same time why not update the version
of Perlin noise that's in the library so
I think you could make a good case from
you could make an argument for both
cases but there there is a different
quality to the values and there is now
historically years
years of people making artworks visual
art works and projects based on the
quality of the Perlin noise the noise
function in processing just say noise
I'm just gonna say noise for now on and
if we if it were to be updated those
projects would suddenly maybe not look
the way they were intended not look as
beautiful not look as compelling not not
be as visually distinctive because it's
not that one is better than the other I
mean there are reasons why you can say
simplex noises and improvement those
artifacts and the smoothness and a
computational complexity those types
those are things that had changed and
are updated that are better in in in
according to a lot of different kinds of
metrics but it would make much more
sense to have a separate library that
you could use with processing to get
open simplex noise I mean you could make
the case and there is a get up issue
this discussion about this you could
make the case that it might make sense
to add to processing something called
noise mode in which case you could put
in here I don't know whether you would
what the terminology would be that would
put in 1983 what a year now like but you
could put in maybe gradient pearl in
simplex value you could have whirly
noise in my research there's look up
something called Worley wor le why I
want to really implement that noise it
looks really cool so that could be
something that you could do I would say
a good test case to see if this makes
sense to add to the processing API we're
just being to make it as a library first
where you could pick your different
noise mode and then if everybody in the
world is suddenly using it and creates
so much opportunity and possibilities
maybe then it would make sense to fold
into course that would least be my point
of view I'm not speaking as an official
representative a processing I'm just
telling you my take on this all right
now so let's let's see the difference
let's see the difference this this this
this moment being living in the year
2001 in 2019 has really changed my life
people tell me in the comment to stop
giggling oh well I can't new tab so ah
wait let me do save as
let me save this on the desktop here
save noise 3d okay so what I think
because processing is built on top of
Java I can actually I'm gonna create a
tab I'm gonna call it open simplex noise
I am going to paste in all that code and
this code because it is written as a
standalone java class will work just to
have the box ranked like this with no
changes in processing it's really
amazing I could even if I wanted to have
named the tab open simplex noise dot
Java and sometimes this is necessary if
there's certain features of Java that
the processing IDE won't understand but
in this case it's not necessary and I
should say again thank you to attend
Jakob for showing me this and giving me
lots of advice and help I mentioned that
Tian's work in several videos so far but
ok so now we're going to change this
over the first thing that I'm gonna do
is I am going to create an object called
open simplex noise just call it noise
I'm gonna say noise equals a new open
simplex noise object and I'm just gonna
run this to make sure I'm not getting
any errors I am getting errors Oh weird
amazingly I did this yesterday I swear I
did this yesterday just to test and they
didn't have to make any changes but this
is one of those things you can't have
static functions in a class inside
processing has to do with things being
internal classes yadda yadda yadda so
what I'm gonna do let's try renaming
this to open simplex noise Java I think
that will fix that issue great so no
errors and maybe that's what I did
before and I just didn't notice it's
running now it's running the current
noise algorithm the noise function in
processing now we're getting getting
close what I'm going to do now is just
change this and I'm gonna comment this
out and I'm going to say actually let me
just do so I'm gonna
show you something it's kind of
interesting let me comment this out I'm
going to put this in and instead what
I'm gonna do is I'm now gonna say Noyes
dot eval so that noise object has an
eval function the eval function takes
one Val I don't know if that if it's
supporting one dimensional noise we can
talk about how you can get that you just
fix the second dimension but then I give
it the arguments for 3d noise X offset Y
offset and Z offset and I'm now using
the libraries noise function instead of
the built-in noise function let's run
this I'm gonna get errors cannot convert
from a double to a float so this is a
little bit of funny business that we're
stuck with here and this is what I if
turning into a processing library I
would clean this up processing in it's a
simplification of Java has basically
ignored the existence of the data the
data type double double is a floating
point it's not a floating point L is a
decimal number that you connect that is
more memory more accuracy more digits
than just floating point and so here
what I need to do is do something like
hey well I need to convert which is
called casting what comes out of the
eval function as a float and then look
at this now interestingly this looks so
different now there's a couple reasons
why this looks different one is look at
those look at those I don't see a single
directional artifact in there do you see
any directional artifacts there are no
discernible direction look at this just
like flowing smooth noisy transition
okay now but it looks kind of weird and
one of the reasons that it looks weird
is that the noise functions are
generally designed to give you a number
between negative 1 and 1 the mean being
0 Processing's implementation gives you
a value between 0 & 1 as a sort of
convenience but so this multiplying by
255 this is why we see these vast areas
of the color black because any noise
value that's less than 0 gets reduced to
black which is kind of interesting to
note now what I can do here and I should
really take out the third dimension to
demonstrate this but so if I change this
to float N and then I say float bright
equals map N which
between negative 1 1 2 0 and 255 now
whoa that's not what I meant to happen
but that is cool
whoa what arrow did I make hold on
this is so weird what am i doing that I
did differently than yesterday what
numbers am I getting oh oh oh oh whoops
I forgot that's kind of cool by the way
that this by accident on it and I should
not be having this print line thing here
hold on okay this is actually a really
nice by accidental effect I kind of love
that I got this but I forgot that I had
previously multiplied it by 255 here so
that I need to take out I'm sure the
chat is yelling at me about that there
we go this looks whoops this looks more
like what you what we originally started
with it's a different noise algorithm
I'm visualizing it in a very literal
fashion in a two-dimensional space and
there you go now there's lots of ways we
could alter the quality of what we're
getting I mean one thing would be this
increment value is really playing a big
role in and the Z increment values
playing a big role in the quality of
what we're seeing like for example let
me make increment point 1 like suddenly
look that's what the noise looks like
look at that ooh this is really nice oh
I love this and then you know I could
the Z increment you know if I made that
really fast then you're just seeing it
sort of like changing really fast and
that that now it has a lot more sort of
chaotic randomness to it but only this
is a nice addendum now the quality of
this has such a sort of like smooth and
graceful visual quality even that moving
beyond just this very plain visual
representation there enormous
possibilities and I would refer you to
the work let me just refer you to the
work of young Jacob who makes all these
amazing gift loops using
open simplex noise and a variety of
techniques all described in his blog
post so now this thus this ends this
video which I don't think was a coding
challenge at all just explaining a
little bit about the background and
difference between the different noise
algorithms and I will now do a video
where I attempt to loop I would do a
coding challenge where I I'm gonna do
two more things I'm gonna do one coding
challenge where I attempt to do a two
dimensional noise loop using four
dimensions I'll explain what that means
in a second and then I think I also want
to do I wouldn't do like a speed video
or I just take every single thing I ever
made with the point is I don't it's not
gonna be everything coding challenges
wise and like change it over to open
simplex noise alright so you in those
videos what Simon is now giving you
message and the coding challenge you
picked a random between one 1,000 or one
in a million to use to give you the
maximum number in Java you can use
integer max value and integer.min value
thank you
okay okay whoa oh this is what I want to
do look at that it is so cool whoa look
at that oh my god these are like
ridiculously amazing jeez I love these
oh my god
okay all right so first of all I'm just
curious does anybody that that was my
take on Perlin noise simplex noise a
little bit about that history of those
things does anyone have a does anyone
want to point out any significant
Corrections or things that you might
know about and now I'm gonna close all
of this and I'm trying to think
yeah
yes instead of changing a spectral piano
rights this is a really good instead of
changing the place where you loop in the
noise space you can make a noise object
with different seeds yes that's what I
was thinking of doing
um let's look at does this take a seed
that's what I don't remember so there is
oh yeah it does a seed so they think
this is what I'm gonna do instead of
doing different spaces I'm going to do a
take a seed to a coding challenge where
you reproduce one of those animations
flocking patterns but by this kind of
noise yeah so this is what I'm gonna do
now I just need to figure out what my
demonstration is going to be I mean I
think I'll do something simple I mean
one thing I can do is just do a grid
like the flow field thing so let me let
me open up what I'm what I'm thinking of
doing so I have this example in nature
of code book under agents flow field 3d
noise yeah it's basically let me let me
take out the vehicles to show you what I
mean oops
and I don't need this text so this would
be an easy thing for me to do not I mean
easy this would be a good starting point
like I could make this Luke this is
noise um open simplex noise in
two-dimensional space and I could use I
could use a four dimensional space to
loop to loop the two-dimensional space
it sounds weird I'm going to try to
explain that but I don't know is this
visually interesting enough another
thing I could do is I could just put a
bunch of these in like random spots I
could go back and do the landscape but I
already have that terrain generator
let's find that code let's find that
code terrain generation
Schiffman noise so if I go to here and
then I do download code let's download
the processing version and open this up
like I have this and so I really like to
add the simplex noise to this and see
what happens but this is a much more
complex example I feel like this is a
second part let me do the first one let
me do them both I think I want to
explain the stuff with a simpler case
and then do terrain as a separate case
because I already have built the terrain
and I can do the other one
from scratch everyone's egg do this do
this this is better I'm gonna do this in
2d first to explain it I will come back
to this okay terrain on a sphere oh
that's a great idea
I'm not ready for that right now okay
let me cycle the cameras I really really
want to cover es6 inheritance because
it's a topic that I use in a lot of my
programming classes here at NYU and and
it's a topic I use in a lot of my
programming classes here at NYU and I
would like to have some video tutorials
to refer people to okay all right okay
all right so let me put this away all
right
so let me just what I'm gonna do close
this
[Music]
okay I'm gonna actually just start with
this as the base code alright it's just
a bomb stump right so you have read up
on purlins simplex gradient noise and
yet still call the processing noise
function per Lin
it's a hard habit to break I'm sorry try
I know people get very bent out of shape
about these the the particular
distinctions between these noise
functions and III would like to be as
accurate as possible and I apologize for
any inaccuracies and conflation that I
have done in the past and I'm sure will
continue to do in the future hopefully I
am providing a set of resources for
people to be able to do a deep dive into
this to understand it further okay so
okay so I guess if I'm being absolutely
correct about this let me see if I
understand this correctly the original
Perlin noise sorry the original noise
function from 1983 is no longer referred
to as Perlin noise because simplex noise
is Ken Perlin updated version so that's
really at this point Perlin noise that
other noise I would need some other name
like gradient noise or 1983 noise
because it's no longer truly purlin
anymore but open simplex noise is based
on Perlin noise simplex noise in a with
this other slightly different algorithm
maybe that's kind of right I don't know
terrain inside the sphere please turn
ringing on a hypercube okay I'm really
trying to get this right everybody I'm
just doing my best here okay maybe I'll
invite Ken Perlin over to come be the
final word on this he does work here at
NYU and I have I've been lucky enough to
speak with him on a few different
occasions and see him speak and be very
inspired by his work okay all right all
right okay I know what I'm doing now
okay
OLF yes can you change noise method
pearl and old Oh simplex by clicking on
the canvas yes but I'm not I'm not gonna
do that right now that would be a nice
sum it would be great for someone to
make and actually in this paper sorry I
know I said I was kind of done with the
background stuff but one of the things
that's really like about Stefan Stefan
Gustafson is paper on simplex noise let
me just find it again here and by the
way there is also this implementation
which is Stefan Gustafson uh speed
improved simplex noise algorithm for 2d
3d and 4d I just wasn't clear what the
license is about this so I thought I
wasn't sure about whether what I mean it
does say the code is placed in the
public domain you may use it as you see
fit but attributions would appreciate it
so I said I just don't I it's unclear to
me what violates and doesn't violate the
patent and at least on the reddit thread
there are some pretty good arguments for
why open simplex noise doesn't violate
the patent oh but what I wanted to show
you which i think is really nice about
this particular article that I would
recommend you check out going we find
this diagram is there's a just a couple
of visual demonstrations of all the
different noise algorithms side by side
I think this is where I saw it yeah so
classic pearl in noise maybe I'll say
classic Perlin noise how about that
probably noise classic it's what I'm
going to say and simplex noise you can
see the sort of visual differences just
here mapped onto a terrain
Fourier series drawing the Perlin noise
terrain I hope somebody knows that all
right
coding challenge time I mean I can
actually just loop this which would be
kind of interesting but I don't know why
yeah actually you only be kind of
interesting would be to
you know right like because what I could
do here is I could say n is greater than
zero
how do you do those turn around turn or
anything zero something like this is
that right
what's the chance I got that right oh I
did like this would be kind of fun to
Luke like and then if I change the
incrementation value no but like this
let's do it this this actually yet
looping this would be kind of
interesting
as it would be surprising to see this
loop right but I think I want to go with
all right let me I mean I need sorry the
other thing I need is yeah I have an
idea for what I'm doing I think I have
an idea now I'm never getting to that
inheritance stuff mi I need just the
gift loop code download this or actually
it's just one yeah I just need this
and put this on the desktop
and I can close that I don't think I
need this
great oh and this is doing this great
okay all right all right I am ready
classic see Perlin noise is classic
Perla noise is a good way of calling it
just there's so many people calling
fractal noise purlins that is often hard
finding actual articles about either
that makes sense
try to that makes sense that is a good
bit of feedback okay
fractal noise yes that's another term I
should have used okay okay so wait I
need this to go back to what it was
all right
okay I've got it I got it I got it I'm
gonna do to two things in this video all
right
three things who knows
alright alright I gotta get started
whoops uh-oh come back camera there we
go 11:36 okay hello welcome to an
exciting moment for me we do that again
so Pradesh in the chat says am I the
only one who is curious to see the four
dimension animation so to be clear what
I'm going to show you is still going to
be visualized in two dimensions I'm
using the third and the fourth dimension
to create a closed loop of the values
that are in two dimensions that sounds
like a really weird thing and I will try
to unpack that a little further I do
actually have a video about a hypercube
a four dimensional cube a tesseract
visualized in three dimensions that's
that you might want to refer to if
that's what you're kind of looking for
but this is really I'm using a higher
dimensional space to pick values that
are still being visualized ultimately in
two dimensions alright hello welcome to
a coding challenge entitled 4d open
simplex noise Luke that's got to be like
a clickbait title if I ever heard one
right anyway let me thank somebody and
met you I didn't have this prepared so
you'll have to like edit this the artist
I'm a Tian Jacob who I've referred to is
like the last 307 challenge with you
that I've made because I keep doing this
topic over and over again it's been
really an inspiration for these videos
makes these amazing noise loop gifts and
I've talked a little bit about some
techniques for doing that using classic
Perlin noise the noise function in
processing which you can also refer to
as fractal noise and I've recently
through feedback and research bin turn
on to this idea of simplex noise and
open simplex noise and I made an entire
video all about that and the differences
in a little bit about the history there
so I'll refer you to that video if you
want to find out more in this particular
video all I'm going to do is I now have
the processing 3d noise example which
you'll see nothing is three-dimensional
here there's really a two dimensional
space of noise and the third dimension
is what's creating the animation frame
you can think of that third dimension
almost as time I'm seeing frame by frame
by frame what I want to do with this is
take this and make it loop I want to
have this noisy scene and this is using
open simplex noise which has a different
quality and character to it it has less
what are known as directional artifacts
that have that I referred to in the
previous videos like this herky-jerky
feeling of what kind of the noise
algorithm could sometimes do it feels to
like stop and turn around and so the
smoothness of this is quite pleasant and
has a kind of visual quality that's for
a lot of scenarios better so there's
more to say about that you could go
watch the other video but what I want to
do is make this run just over a few
seconds and then render it as a gift
that loops seamlessly and if I were to
do that right now if I were to just say
well hold on timeout let me make as
example of this really quickly
I mean this one I don't think this needs
to go in the video but I think this
would be a good demonstration of this oh
whoops I want to do this No
I didn't fix that yet where am i where
am I
what's my sketch called noise 3d am I on
the desktop so confused
I am oh it's this ffmpeg
- oh shoot what is it I use - I image to
notice - f - ash f image - - framerate
30 - I output no I'm in the directory
what I call it a no loop - percent 3d
dot PNG no loop gif
oh wait I really should stop it from
rendering that's though it's not like in
the middle of doing both at the same
time let's do that again yes
does this make the case that I want to
make effectively Omak preview won't show
me at all what is wrong with computers
these days
does that look like it's looping I don't
see it actually kind of feels like it's
looping there's got to be an obvious I'm
gonna look closer oh there we go it just
took forever to get there cuz I just
have likes way too many images yeah I
think I just had way too many images
let's uh hold on it's surrender this
again let me just do it in the outside
directory like for that's like it's like
it's over ten seconds I don't need that
many
only two ten second big wonder let's
delete a bunch more energy in ajiz
yeah
there you go see that flicker there
because it's starting over yeah okay I
still wanted to for this demonstration
like let me just let me reduce it by
half now
let me minimize this
take this out
okay perfect
all right
hopefully the YouTube compression will
make this obvious let me cycle the
camera
I took a quick break there just to
render out that processing sketch I
rendered it out like a few seconds and
as you'll see it's I rented it to a gif
and every few seconds you see this a
jarring thing happened where it goes
back to the beginning the last frame of
this noisy scene doesn't match the first
frame and this is something that I
talked about in previous coding
challenge videos how to get a sequence
of values a one-dimensional array of
random values where the last value
matches up with the first you close that
loop and the way that I did that was I
want one dimension of values let me walk
around a circle a circular path in a 2d
noise space so now what we're doing is I
want two-dimensional looping values so I
need to basically walk around the space
of a torus right I need all of these
values to move around and like come on
back and the way that I can do that
right if what I'd wanted was if what I
wanted was one value then what I all I
need to do is walk around the path of
the two dimensions now what I want is I
always want one value sorry let me say
that again
if what I want if what I want is a
1-dimensional a single dimensional list
of values then I'm saying the same thing
again I don't need to say that the
tourist thing is fine so so in order to
do this I just need to give it two
dimensional values I need to give it its
two dimensional coordinate space and
then its other space along the circle a
circular path so I need four dimensions
right
I need the X and the y and then I need
the location along the circular path
that's coming out somebody who could
make hopefully make a nice diagram of
this that I can link to include some day
is like an overlay here look look at
this diagram if you make this in the
next couple days it will go here I swear
all right so all right okay so let's do
this so first what I want to do is so
this is let me just be clear this is the
processing noise 3d example and the only
thing change is I've added this open
simplex noise code from Kurt Spencer I
will link to where that code and some
background about this open source
implementation where it comes from in
the video's description and instead of
calling Processing's noise function I'm
calling noisy foul from Kurt Spencer's
open simplex noise and that gives me a
double so I have to convert that in a
float and also gives me a range of
values between negative 1 and 1 which is
different than the values between 0 and
1 okay so what what I would like to do
though however is make this a bit more
visually obvious what's going on so I'm
gonna change this I'm gonna threshold
this to render the color either black or
white and one way I can do that is with
a nice little ternary expression I can
say brightness equals like is noise
greater than zero if the noise value
that comes out is greater than zero then
I want to see 255 otherwise I want to
see zero so if I do that you'll see we
get this and I can kind of play with
this sort of increment values like maybe
let me make the increment a little less
but make n but make it go through the z
space faster I don't know so now we can
see so this this would be action animate
I should render this to a gift so you
see it not looping but this is what I
want to have Luke and also look at the
beauty of this particular noise
algorithm it's very smooth it doesn't
feel like it's sort of it doesn't have
that directional artifact doesn't feel
like it's sort of slowing down to a stop
and then going backwards it just keeps
going with this kind of beautiful
organic randomness alright so now that I
have this let's turn this into a gift
loop all of these videos are now kind of
this series everything's depending on
each other so I have a previous coding
challenge where I made processing code
that just renders out the frames of the
frames for a gift loop and a
demonstration it's just a rotating
square so what I want to do is I'm gonna
use that as my basis and I'm gonna grab
what I need from here so I'm gonna grab
all of the variables that are at the top
here you know what I pause for a second
I one of the things I meant to do was
also do a screen capture because it's
possible that when we edit stuff back
together later that having that just the
plane screen capture might be helpful so
let me just set that going I meant to do
this at the beginning but obviously I
forgot but I noticed here I'm standing
in front of the code so this could be a
place for that
let me grab the alright so medium
let me grab the the all the code before
setup from here which is all of this I'm
gonna put that into my gift loop code
then I wanted to make the new open
simplex noise object and I'm going to
put that in here now it's complaining to
me it doesn't know what open simplex
noise is so I do need to make a new tab
I'm gonna call it open simplex noise
Java and whoops it needs to be dot Java
because this particular open simplex
noise class is using some features of
the Java programming language that don't
work super elegantly in processing so I
can then just go copy and paste it over
you know certainly there's more more
streamlined ways of
of importing a java class but just
copying it over is one way then I'm
going to come back to here and what I'm
gonna do is everything that's in draw is
what should go into this render class
this render function so this render
function should now have all of the
drawing code and I'm gonna run this now
I messed up oh I'm missing sorry I'm
missing one curly bracket there we go
so this is exactly that oh there's so
many things open here by the way this is
for when the audio wasn't working what
can you can clip this part out all right
let me just rearrange here I don't know
why oh what a mess
all right so here now we have this
running now it's not looping in I've got
to figure that out I also I want to give
myself more frames probably and actually
let's make it short because I really
want to make sure it's looping and let's
make it let's make it 640 by 360 it's
kind of nice to have that aspect ratio
okay so now this is what I want to
render as what I want to render as a
perfect loop so what's going on okay so
here's the thing
the thing that needs to loop is the the
z axis the z axis instead of moving
forward in time should move around in a
circular path to create that donut in
three-dimensional space so how do I do
that exactly well it turns out that the
way that I can do that is let me
actually get rid of this idea of Z
offset and I want to have the if let's
see if I can diagram this
all right so this is my two-dimensional
plane of noise in three-dimensional
space what I and I'm at any given point
what I want to do is kind of walk around
in a circle and if this were the flat
plane the circle would come out like
this
so what I need is an angle I need to
rotate around need to use that polar
coordinate formula to rotate around a
circular path within that's like one
plane of one plane of the
three-dimensional space so to do that I
use four dimensional noise because what
I'm doing here is I get remember in
looping a gift I want a percentage from
zero to a hundred percent so I can now
have an angle which is equal to map that
percent from zero which goes between
zero and one to between 0 and 2pi then I
can have I'm gonna call this like you
offset for the third dimension and I'm
gonna call this a V offset for the
fourth dimension and so what what those
are is I'm gonna say cosine of the angle
and sine of the angle right so I'm gonna
use the polar to Cartesian coordinate
transformation and map these values
which go between 0 and 1 no sorry go
between negative 1 and 1 to between some
spread some noise radius some noise
diameter this is a concept I talked
about in the previous looping video but
it's very hard to type and talk at the
same time sometimes I do a good job
sometimes I'm a mess and right now I'm a
mess because this is very hard to
explain so this is exactly the same
technique that I did in the first noise
loop video where I just had an X and a Y
now I have an X and a Y but the looping
is happening in the U and the V so
that's where the size of this circle is
important so I'm not sure whether I can
the open simplex noise algorithm if I
can have negative values or not but to
be safe I'm just gonna like map these
between like 0 & 2 so that's some what
I'm picking sort of an arbitrary this I
think we called noise diameter or
something like that I'm picking an
arbitrary value now down here change
this to you you offset V offset and
let's run this did I get everything
right
no no oh I have an extra 0 in here
because I'm going crazy I don't have Z
offset is not a thing anymore and here
we go why is it running so slow
did I turn rendering on no he did this
the other day the fourth dimension
didn't didn't make it run so slow
40 is slower Oh Etienne is watching it's
yen's Jakob
hi Etienne everybody say Thank You NCN
and the chat applause so maybe it just
is that slow I could have sworn though I
did this oh maybe I just automatically
rendered it okay so one thing to note
here is that for D the the
implementation for getting for D noise
is quite slow and you can see this
framerate sort of like chugging along
the good news for us is we're here to
render out to a loop so I don't care
about the speed the framerate I am just
going to turn record to true and I'm
gonna run this again and I will see you
when it finishes rendering
I'm loving watching seeing everybody say
hi at the end thanks at the end Thank
You Etienne
almost 220 frames that's like four
seconds
okay so finished rendering alright it
finished rendering so here the good news
is just to reiterate because 3d noise
works quite smoothly if you're not
rendering out to a loop you don't need
that fourth dimension you could just use
the third dimension and sit watch your
real-time software in your media art
installation work beautifully but if I'm
rendering it out I want to close that
loop I do need that fourth dimension
okay so let's now I'm gonna use the same
technique where I am going to go to I
need to open up terminal
I have ffmpeg installed
I am I in the right directory I am going
to say no I'm not I need to go to my
this directory and I'm gonna say ffmpeg
- F image - - framerate 30 - I
and then the directory was called output
gif there's three digits % 0 3 D dot PNG
and then looping loop no loop I'll just
call it noise loop dot gif here we go it
hardly exists I must have done this
before sometime let me overwrite it oh
whoa whoa whoa something weird happened
I'm in the wrong directory shoot yeah
give loop before D I'm totally in the
wrong directory ok fortunately alright
I'm gonna switch over to my terminal
window and I'm in the gift loop for D
sketches folder and now I'm gonna use
ffmpeg to render all those frames into a
gif so I'm gonna say ffmpeg - F image -
and ffmpeg is a utility you would have
to install separately on clue 2 links to
how to do that in this video's
description - f image - - frame rate
let's give it 30 frames per second - I
the file path which is output gif
it's each each file is gift - and then a
number so 0 3 digits dot PNG and then
I'll call it noise Luke dot gif and I'm
gonna render that out I am going to take
a look at it here it is let's take a
look and by golly if that doesn't loop I
don't know what Luke's right this is
about a 4 seconds long one one thousand
two one thousand three one thousand four
one thousand one one thousand two one
thousand three one thousand four one
thousand so of course you can see you
might be able to detect the loop because
it's so short but if I made it longer
and if there was a bit more if I was a
more artistic and add more creative
ideas about how to vary the visual
quality you might be able to create
something more like what I showed you in
those original Etienne Jakob gifts so
now is that now now I think I need to do
some more with this I think do I do it
in this video I'm trying to estimate
like how long that actually was
all right yes I do want to do something
more I'm just trying a side should be in
a separate video
I'm gonna keep keep going Q learning i
with only this was Q learning I really
I'm so easily distracted by noise
algorithms getting stuff I'm supposed to
be doing all right now you might be
thinking oh I finished come to the end
of this video I don't need to watch
anymore but there's more what I want to
look at very briefly and it probably not
be brief I want to look at how to do a
few more things with this what if I want
multiple parameters to loop in
interesting ways I don't know I don't
know that I can actually describe what
it is I want to do I'm just gonna start
coding it so first of all let me do
something with this
let me I'm just gonna stay in this gift
loop thing I'm gonna turn a record to
false and I'm also just going to at the
moment just comment out V off so that I
can see this run much faster so by the
way this is what happens if you do three
dimensions it's looping but you're just
kind of going forward in time then
backward a lot people were asking why
don't why do I need four dimensions so
this is what it looks like with three
dimensions it's got directional
artifacts I'd say it's kind of moving
towards a spot and then it's coming back
to the beginning so I couldn't make it
loop with three dimensions but that's
not what I want to do what I just want
it to run fast right now so what I want
to do I'm thinking thinking thinking aha
what I want to do is draw it not render
this as pixels anymore I want to start
visualizing my own geometry that I'm
inventing and designing so to do that I
think a nice way to do that would be to
think of the the screen as a grid of
quadrants maybe with each and let me use
an integer here each each having each
square having a width of like 20 pixels
and then I'll need a number of columns
and rows and so I'm going to say in
columns equals the width divided by W
into rows equals height divided by W I'm
gonna go here and I'm still gonna have
essentially this same a loop but I'm
gonna change it from and let me simplify
here also let me look let me say for int
I equals 0 I is less than number of
columns for int J equals 0 J is less
than number of rows and then I'm gonna
get rid of all this X offset y offset
I'm just gonna get rid of la stuff let
me comment this out I'm gonna I'm gonna
do something we're incredibly simple for
a second I'm not drawing pixels
I'm not updating pixels well all I want
to do is I want to know X the X location
is I times W the Y location is j j times
w i want to translate to XY I'm going to
use push matrix and pop matrix to make
this translation only apply to this
singular moment and I'm going to draw a
line from from from 0 0 to W comma 0 and
why do I not see anything something is
stuck somewhere
percent zero render percent right record
false background 0 stroke 255 what did I
miss
what am I missing here ike / - oh oops i
have a bug here not height / - height
divided by W so now I should be able to
see these lines no J + + stroke - 55
what am I doing wrong here renders being
called for since not being used
oh-oh-oh-oh I have another really bad
bug oh this is such a common error in
processing in Java I declared gloop sir
I declared global variables calls and
rose up there and then I read Eclair
them here so columns and rows are zero
so many bugs these need to not be read
Eclair just setting them here there we
go this is what I wanted to see and let
me just to be clear about this let me
use random I'm gonna put a rotation here
like rotate by actually let me just
rotate by pi divided by eight right you
can see these are a whole bunch of lines
so what I want to do is set the rotation
according to open simplex noise alright
so in order to do that I now need to say
here's my noise value and I'm going to
put V offs back in and then I want to
take that value angle equals map n which
has a range between negative 1 and 1 to
between 0 and 2pi and I'm gonna put n
sorry angle in here and we have this X
often oh and now I need to create X
offset and Y offset so X offset is map
the columns which go from 0 to columns 2
between like 0 and again these shirt I'm
just going to go between 0 and 2 the I
should make these variables right to
think about thing about those actual
offsets and then oh I have this also as
an angle let's call this a there we go
and let me offset it a little bit let me
let me make it a little bit bigger oh
they only have the width is 20 that's
fine let me I think also what I should
do is translate by W divided by 2 W
divided by 2 so that everything is
centered nicely and I should probably
draw the lines from negative W divided
by 2 2 W 2
- bye - there we go so now look at this
this is my oh wait something is wrong
here because each column is identical so
I have something wrong
ah this needs to be je but why I'm
getting everything wrong all of a sudden
take a deep breath everybody I'm trying
to rush this there's no need to rush
we're gonna be here for a while you run
this there we go this is what I'm
looking for this is now open simplex
noise where I'm showing you is I can map
this onto geometry but I really should
make a nice terrain right that's coming
so I can map this on to geometry
now here's the thing what if what I want
is different noise values sorry I'm
looking at the chat the chat is giving
me Corrections but it's behind me in
time I gotta stop doing this
I'm thinking here
joy I don't want to use a different
noise seed or do i I do
okay so I'm thinking this is tricky
yeah okay sorry
yeah okay
okay okay so what I think would make
this more visually interesting is right
now I'm only varying one parameter
I'm just varying the rotation of each
line at each spot in two-dimensional
space but what if I want it to vary like
a color also or the thickness of the
line you know it's obviously drawing
everything in a perfect grid what if I
wanted to draw things not in a perfect
grid that I think I'm gonna let you
explore I need multiple two-dimensional
noise space loops
so what I did previously to do this was
create a class called a noise loop class
I'm gonna do that again so let me create
a noise loop class oh this is gonna be
hard to think what needs to go in here
well what it needs is its own noise
space sorry so basically the idea is
that if I create a new noise loop I
create a new noise space and what I can
do is I can give it a seed so I'm gonna
say int seed equals int random you know
and again I'm just gonna pick some
arbitrary range between like 0 and
10,000 I could be more thoughtful about
like sort of the maximum integer
Rainer's or something
but now what I'm doing is I'm having
multiple simplex noise generators each
with a different seed this is slightly
different than what I did in my previous
in in the previous coding challenge
where I used a different part of the
same noise space but here I'm using a
different seed so now what I should be
able to do is I'm just gonna write if
there's a variety of ways I can do this
but right now let me just put an eval
function in this and this is kind of
silly I don't necessarily need to wrap
open simplex noise into a separate class
because I could just make a bunch of
instances of it that's I think you know
what let's just do it that way I think
there's going to be some benefit to
wrapping it into a class but just to
demonstrate this idea I could do this
right although I might want to have
differ
diameter spaces no let's write I'm I'm
very I'm very conflicted here yes I'm
gonna wrap it into a class because the
reason why I want to do that is I also
want to have a variable that's that
diameter the diameter of the tourists
basically and that's something that I
want to be able to set when I create the
noise loop so in other words and then I
have an eval function in which I would
get X offset Y offset Z and then an
angle and I would do exactly I could and
there's more that I could there's and
then I would take this right here so
it's what I'm looking for yes and then I
would also give it a minimum and a
maximum and so let me give it minimum
and maximum and I'm using some weird
variable naming here but that's just
what I'm doing right now
because that way and I I think I want to
like store the X offset and Y I'll
calculate that in here somewhere but I
haven't figured out how to do that just
yet so oh and I need now what I need
thank you very much is I need this
calculation to happen in here and then I
this is now between you know I only need
the maximum no oh no no no this is
between zero and the diameter and then
I'm returning map the noise result which
goes between Z negative 1 and 1/2
minimum and maximum so let me just
recreate using this I've encapsulated
all of the ideas of the noise loop into
my own class that has its own seated
open simplex noise object so now if I've
done everything correctly this this I
don't need any more
I'm going to create a noise loop I'm
going to call it like loop loop one and
in setup I'm going to say loop 1 equals
a new noise loop what do I need to
create the noise loop I want to know the
diameter - I'm the minimum maximum 0 and
2pi and then down here I'm saying float
float a equals an OOP one eval X offset
Y offset and angle so this should be
exactly what I had before
no oh and these have to say float in
Java you have to type everything and I'm
just data type everything I mean I'm
forgetting that I'm forgetting that
again here because I'm so used to
JavaScript these days and cannot and
this is not a void function this returns
a float
speaking of typing things all right so
this is the same as what I had before
right
the difference is I am now taking that
angle and passing it to my noise loop
function I guess do I I guess I really
need to give it that noise Luke me into
the x and y offset outside no I'm going
to keep that here so in theory what I
can do now just bear with me I don't
know that I've explained this super well
I need to come back to it at the end is
I can create a second noise loop whoops
let me do like for color I'm gonna do
two like let me do I think I let me call
this like our loop and G loop our B loop
what I can do is I can create two more
and I can sorry this is what I should be
so I have our loop and G loop and this
should really be D loop for diameter
maybe no no a loop for the angle a loop
for the angle of rotation
I don't know and these should go between
0 and 255 maybe I want to give them like
a larger diameter and now what I can do
is I could say let me also draw a
rectangle separately like let me say
rectangle 0 0 with with this is this is
really a square let me just see what
happens if I just add something that's
white here with some alpha G loop oh gee
loop B loop B loop this is now a loop
oh the squares are off because of the
way that i centered everything that's no
problem we say rekt mode Center great so
now I'm going to also say here no stroke
let me draw the I don't know I should
just make the line color I don't know
why I'm drawing a background but the
point is I'm just showing you the
possibilities now if you will indulge me
for a second
I can now also say float R equals this I
can get the looping values R and B and I
can put those into here are you know R
comma 100 comma B to get some colors and
give it a little more so now okay so why
why is that not changing very much so
what did I miss
Oh
people and shatters think he's tired I
think that's true all right this should
probably be its own separate video but
anyway oops
I'm people that chatter saying that I'm
tired with tequila I am I'm not paying
attention to lots of things I'm doing
this should be our loop B loop there we
go wha that's all happening way too fast
so let me make the diameter much less I
want these colors to be a little bit
brighter so let me Mint make the minimum
100 all right so you can see now this is
now the color is changing I could make
another loop for the thickness in a way
I kind of want to like not draw the
lines anymore because I'm just curious
about this color yeah so that's kind of
interesting you can see I mean this
really is just another way all of these
are kind of the same but it might have
been more interesting to vary the
thickness of the line so let's I just
want it let me just try that if you will
indulge me for a little bit longer so
I'm going to say like s loop which I'll
also use to and goes between like stroke
weight of one and Stroke rate of six
let's put the line back and let's say
I'm gonna say stroke weight is the S
loop evaluate and then I'm going to say
stroke weight SW and then I need to also
declare it up here we need another s
loop now that's kind of interesting
oh I should make it like this the length
of it there's so many possibilities oh
this is terrible but I I think actually
what I would like is for it to be much
thicker yeah so that's kind of
interesting anyway you see the point I
should make that the color let's get rid
of the let's least try to finish with
something and then render it to a gift
please please let me get somewhere with
this so I'm gonna take this out and I'm
gonna say stroke our 100 our 50 be 200
whoa where is oh I still have the square
in there there we go I don't know what
I've done look I don't like this at all
I mean I'm demonstrating the idea it's
so fast all right let me try giving it
some more frames to work with so that I
can slow down and there we go I don't
claim to have made anything of any
particular visual magic here I like the
first one that I made better frankly
don't you just end the video there
I should just ended the video where I
started I think maybe we won't include
this digression I'll just go to the
terrain I think that makes more sense so
I think this can end unless I can think
of oh but I do like the idea of
demonstrating how you can have multiple
noise loops in a separate class maybe
this is nicer than I think I just can't
see the beauty in it spectral praiano
right it's really hard to follow because
you're using for loops yes six inherits
how many people are desperate for the
es6 inheritance because I'm gonna do
that
I should make them thicker what would
have been interesting I think would okay
let's try that all right well let's just
let me let give me a minute to like play
let's make them
like what if I actually build like let
it go all the way down oh yeah that's
kind of more interesting and let's let
the color have a bit more change to it
oh you know what would actually be a
different way of experimenting with this
would actually be to go over a larger
space in the 2d directions there we go
this is what I was like looking to do I
knew I was missing something all along
yeah okay oh good this wasn't all for
naught this wasn't all for naught ah
this is what I was missing okay hold on
we back up here
all right I'm not very happy I'm not
very happy with this visual result right
now and I just suddenly realized what's
wrong here what I actually am looking at
here when I left to be really really
small I I was so focused on my tourist
loop that I forgot to think about the
fact that I also have this two
dimensional space and I am actually
looking at a very small section of it
and so the values are so similar to each
other and where is that happening in the
code that's actually happening here
before I had like an increment value
that I was playing with and instead of
having an increment value I'm just
mapping between 0 & 2 I'm looking in the
whoops I'm looking in the two
dimensional space between 0 & 2 and if I
just were to expand that out I'm gonna
have more variety I think and I'm gonna
see a more interesting pattern so let's
do that so let's change a few things
number one is what where am I here let's
look at the values I have up here so
this is all fine let's actually give me
like let's actually have a quite a bit
more variety of thicknesses and maybe we
can also like Ram pack up these up a
little bit but really this I think is
going to be the key so let me look from
0 instead of 2 to 2 0 to 10 there we go
and so now this is more like what I was
kind of imagining we might get this is a
seen it and it's actually looping let me
give it in a way I kind of want to like
take out the loop to let it 360 is good
so I think this is good let me give it a
what I'll give it the full range of
color and let me actually set this back
down to zero
maybe those are too thick I mean I got
to stop playing with this there we go
okay I like this whatever here's what
here we go
this is my
four dimensional 2d open simplex no loop
and now it's time to render this as a
gift why not right so I am going to all
I have to do is change record to true
hit run wait a little bit see you in a
few minutes
in the chat Espen Larsen
[Music]
Oh your lack see says I made the middle
it stopped
we made the mini version fluoridation
all right it has it has rendered now I
should be able to just run ffmpeg again
I'm going to overwrite my previous gif
no no I don't want to overwrite it let's
keep my previous gift
the noise loop - let's render that out
and this video has come to a close
let's take a look we this was our first
noise looping gif and now we have a new
one there it is can you find the loop
can you detect the loop now I don't I
hopefully I think so here's the thing do
this again let me find my looping gif
there it is by the way this is my
previous one here's this one I should
really just and and let me open it up
preview it here and there we go so this
is now complete this is open simplex
noise in a two dimensional space
different parameters of each element
being drawn are controlled by different
seated open suplex noise spaces each of
which is looping over this like torus so
I'm excited to see what you might make
from this and but I think you know I'm
excited to see what you might make from
this and I think one thing that is
missing from what I've done here is I am
locking myself to the two-dimensional
grid and if you look at its yin Jacobs
work you'll see that there is a kind of
ingenuity and creativity to how the two
dimensional space is drawn and where
things are placed so this is in still a
kind of literal visualization of the
noise data and I'm just knew I have some
different parameters that I'm trying but
I think you could go further with this
and you could think about how what it is
you're drawing in this space in addition
and I would definitely like to do this
you could do this with a terrain and I
do have a coding challenge Perlin noise
terrain which uses Perlin noise classic
which you can now try with open simplex
noise and see what kind of visual
quality it has as well as make it a loop
so thank you for watching if you made it
all the way to this video at the end of
this video I am quite impressed and I'm
really thrilled and I really just can't
thank you enough for sticking with me
with this and there you go so Rory
O'Connor writes if you want a perfect
loop just reverse it end-to-end so yes
that is true it would loop but it would
have a particular visual quality to it
where you would see it suddenly come to
a stopping point and then reverse
direction at you know I suppose it's
possible you could design it in such a
way that that's not detectable but this
is a smoother way to be able to achieve
that effect alright
all right
not you I don't know how you're gonna
make any the unit you're gonna make a
mole if you can make I was a mountain of
mess if you could make a molehill out of
it go and reverse or make a mountain out
of a molehill maybe that was a molehill
as a molehill LMS understand this
expression works I have to it's 12:30
a very ill-advised plan would be for me
to do my inheritance tutorial now but I
do have a little bit more time and I'm
going to do that I'm not gonna look at
the terrain unfortunately okay I just
want to look at this by the way with I
never mind and so let me quit this and I
mean eggs out of here p5 web editor
where did I do the inheritance stuff
prototype discussion I did it here okay
let's do it with I'm gonna take a short
break just to get some water let me get
this set up okay maybe I'll try to you
luck see is the MIDI version easy for me
to find because I will play it while I
take a short break
oh oh I got to fix my Michelle I will I
will get to that eventually
[Music]
I'm too tired to explain what I'm doing
right now I'm just getting myself ready
coffee I don't I I probably should get
some coffee I don't have I could get
coffee but you'd be waiting a lot more
than just a few minutes which is what
it'll take me to get water
okay it's very quiet it's weird lists
ominously quiet okay I'm ready I think
maybe I missed something yeah not yet
okay yeah let's do let's be a little
more
okay
all right I'll hey I'm ready I am ready
all right I didn't see where's that MIDI
file Alexei MIDI polar to Cartesian oh
here we go
okay I'll download this other okay oh
you can't hear this or maybe
you can't hear this because it's coming
through my microphone
I got to learn how to play this
[Music]
so I have to get some water
i I have to change settings to get the
output of the laptop on to and I can
like download it I'll have to be able to
play that once I get it on the sound
board I can play it I'll just have to
play the actual one I'm gonna mute my
mic I'm gonna put it on to the wallpaper
you can still hear me it's you can hear
because it's coming through my mic
this song's not long enough for me to
get water all right I'll be back
I need a waiting animation
[Music]
[Applause]
[Music]
alright I'm back
[Music]
I'm just waiting for that part at the
end I was trying to time Mike
Oh
[Music]
am i alive streaming right now well for
God
okay all right okay
like on the camera I know if I just did
this I'm gonna give myself till 1:30 I
mean I would love to be done before then
but that's kind of my that's my limit
that's my definite limit okay all right
I am here in this video to talk to you
about something called inheritance
inheritance in the context of
object-oriented programming and
JavaScript and es6 classes poof so first
of all there are three core foundational
principles to object-oriented
programming
let me write those down there's this
idea of encapsulation there is this idea
of inheritance that is the topic of this
particular video and there is also the
concept of polymorphism which I will
come back to and I have made videos on
all of these topics before I can link to
them those videos however were all made
in the processing programming
environment and looking at these three
principles and the java programming
language now i am talking about exactly
the same thing but in javascript and i
have already made a whole set of videos
about encapsulation and object-oriented
programming javascript making use of
something called es6 classes so one of
the things you have to get used to if
you choose to spend your life
programming in JavaScript is that it's
just always changing and there's 500
different ways to do the same thing and
everybody's got their opinion on which
way is best and a lot of my older videos
used a prototype a prototypical object
based way of doing object-oriented
programming with a constructor function
and you'll find those in older coding
challenges and you'll even find a set of
videos about how to do object-oriented
programming that way and even one about
how to do inheritance that way and if
you watch that you're a true champion
because this is wildly confusing and I
have no idea if I explain that well but
I'm here in this video to talk about es6
classes so what is a class sorry es6
being the version of JavaScript that
came out in in 2015 and it's currently
2019 while I'm recording this but it is
now pretty widely supported across all
browsers you know you have to look up
the exact specifications but I think we
can feel pretty comfortable using it so
the idea of a class and I'm gonna use as
my example
something called particle because I am
demonstrating this in the context of
animation and graphics so I'm drawing
particles in a canvas those particles
move around the canvas and the class is
a template for the making of an object
if I create a particle class then I can
have a variable somewhere else maybe I
call it P and I can say new particle a
metaphor analogy that's often used for
is it a metaphor analogy I'm just a
cookie cutter I think it's really an
analogy yeah an analogy that's often
used to describe the distinction between
the class and the object is the cookie
cutter versus the cookie so the cookie
cutter doesn't isn't actually a cookie
it's a thing that you can make cookies
with so this is a template there's no
particle object here this is just a
template to make actual particle objects
and if I have my template I can make
more than one particle objects within
one particle object each with its own
set of properties all made from the same
template so the new keyword here saying
new particle means execute something
inside the class called a constructor
function so I'm kind of I guess I'm by
accident reviewing some of the basics of
es6 classes and object-oriented
programming to get myself into the
inheritance topic but I'm gonna I'm
gonna kind of move along because you can
find and see many more details and
examples about this in the other videos
so this is the basic idea so let's go
over to the code for a second and what I
have in this if i refresh I've got this
little dot moving around and what I want
to do is gonna look at the timeout for a
second my upper text is out of frame
let's see how bad that was oh that's
weird
what's out of frame because I see it all
in my preview
what's out of frame don't use the word
template for es6 oh just something wrong
what's out of frame
mmm don't see anything out of frame let
me look on my preview over here Oh
welcome new member jord Evander bolt I'm
so weird
because what I see
this is so weird hold on let me look at
the livestream here view on watch page
no I see it not out of frame nothing is
out of frame okay I think maybe okay we
come on you've scrolled up or something
you've scrolled on your screen cuz it's
all in frame okay I've written portico
yes okay somebody has their YouTube
window scrolled crisis averted what's
coming over here okay I forgot what I
was doing but this is good okay
there's a little there's a little thing
that's particle anyway um alright so
what I have over here in my sketch is a
single particle moving around the canvas
oh wait time out why was I not supposed
to say template a class is a Brooklyn
wait hold on
blueprint I'm being trolled
no it's not for es6 for it's for a class
which is correct your class is a
blueprint okay all right I'm gonna I'm
gonna I'm gonna keep that alright looks
alright so I'm so whatever have over
here is a canvas with a little dot
moving around and this dot is an example
of a particle object so here's my class
I have the constructor the object gets
an X and a Y and the update function
changes the X&Y randomly and the show
function draws it as a point this is
what happens when you live stream for
like two and a half hours drops and
that's a point it would be great if
there was a function called point by the
way anyway so let's say now let's say
this is your life this is you this is
what's happening to you you know what I
would like I would like to put another
one of these particles I wanted to but I
wanted to look different and so I wanted
to be a square particle so the first
thing you might do is like okay I'm
gonna make a boolean variable like is
Square and I'm gonna set that to a
square I'm adding another argument here
Square and then I'm gonna say hmm all
right if this dot is square then draw
this as a oh not a square a function
then just use rectangle this dot X this
done why when will this ever end least I
could use the square functions the least
I could do could say square otherwise
make it a point
and then oh I'm so tired already and
then I can go over here too why is it
what
why is it not oh well I need a
parenthesis here and then I have to go
over here and I could change this to
true because I want it to be a square
and then a refresh and look it's the
square and then I could say false and
it's not so now I could have I could
have two particles oh I could have P 1
and P 2 and I could have P 1 do this and
P 2 do this I'm so tired
this is so much work and so much coding
I'm gonna call it update and show on
both of those and there we go now I have
my circle my square alright so that's
one solution to this I have two
different mostly the same things with
some sort of core essential difference I
don't like this solution let me do it
another way I'm gonna make another I'm
gonna just create a new JavaScript file
I'm gonna call it square J s I'm gonna
go here I'm gonna copy paste the whole
thing paste that in here I'm gonna get
rid of this idea of is square and I'm
gonna have a class called square P 4
square particle I'm gonna get rid of
this variable and then I'm going to this
one's the square so I'm gonna draw it as
a square and then this one is the circle
so I'm gonna draw this just as a plain
old point and I don't need this anymore
and I don't need this so I have
basically a particle class and I have a
square class square P class they're
entirely the same but one draws is a
square and one draws as a particle I'm
gonna go back to sketch touch a s and
I'm gonna say new square square P and
I'm going to refresh and if I did
everything right no square P is not
defined because I forgot to reference it
in my index.html so let me do that then
I'm gonna go back and there we go
goodnight this video is now over but not
at all in fact I'm only just getting
started
all of this was exposition exposition to
the point where we are right now where
we real we think to ourselves there has
got to be a better
way there's got to be a better way than
having some kind of like type variable
inside of my class and then I use if
statements or to have two separate
classes which I've just copy pasted the
code and changed some things how could I
have this idea of classes that inherit a
bunch of properties from another class
but modify them and this is in fact what
inheritance is for so there are lots of
examples of this and inheritance the way
you might design your software
inheritance can operates in a tree like
structure so maybe I'll come back to
that so let's I don't know what I'm
saying I was going to go off on I don't
know what's going on in which I should
not look at the chat should not look at
the chat do not look at the chat or look
at the jet I don't don't look at a jack
so let's now think about that in the
context of this what if I could write
another class and I'm gonna call that
class square P which is like the
silliest name for a class ever but it's
somehow my example for this video so
what happens when you record a tutorial
after three hours of recording tutorials
class square P ah but I missed the most
important piece of this you had to wait
through like so much video just to get
to this point where now I am going to
say extends and this is the most
important thing particle this is the
keyword extends is a keyword in
javascript in es6 that makes the square
particle class the square p class
inherit from particle so let's think
about what this is now the constructor
is a special case the constructor is a
special case we're gonna have to work
with it in a different way but if what
this means is if there is an update
function update function and if there is
a show function that it's as if I
be pasted the update in the show
function into square P but I don't
actually have to these functions are now
part of the square P class it extends
from particle inherits particle this is
also sometimes referred to as the child
class or maybe the subclass I'm getting
close to the top I know and this is
often referred to as the superclass or
the parent class and the word super is
quite important here because that's
actually a key word a key word in
JavaScript that's gonna allow us to do
some interesting things later in a
moment alright so now I said the
constructor was a special case you
really always have to write your own
constructor so no matter what even if I
want to make this Square P an exact
replica of particle I still have to
write the constructor here and then I
could put my own code in here but in a
lot of cases what I want to do is
actually say particle dot call this this
is really weird syntax but essentially
what this is doing is it's saying hey
you know what I want to do when I create
a square p particle what I want to do is
do everything that I do in the particle
but to this object this object and
that's we're essentially calling the
particles constructor so let's go do
that right now so I'm coming over here
and what I'm gonna do now is I'm just
gonna have square P extends particle I
now don't need to include these here and
instead of having this code here I could
say particle dot call this do I need to
do something with the XY z-- don't I hmm
let's call it confetti I know I used
confetti somewhere else
wait this is right right home we just
see yeah no that's not right what did I
miss here do I say this
X
like this no what am I forgetting
I guess I'll look at my examples uh
where are my examples a nature of code
I've done this so many times recently I
don't know why I'm blanking on this
right now Systems inheritance confetti
yeah I didn't even do it in here you
don't have to what is wrong with me what
am i losing I'm losing my mind
super XY yeah oh I'm totally wrong oh
hold on let me be sure about this cuz I
was doing this in class yesterday
I think I'm just remembering the
prototype thing Oh
let me just be sure about this let me
find my sketch from class here
then why you inheritance demo square yes
super super all right I have done
something quite wrong I have used I
spent this whole time explaining that
there's this thing called es6 I guess I
erased that which means I don't have to
use the old prototype way in JavaScript
and yet I just did that by accident this
is from the old way huh what is wrong
with me
I spent some time explaining to you why
this can be referred to as the
superclass and why that keyword is
important it's because I
like redo that part of the video or is
it like interesting it's not really
interesting to have this mistake in
there I don't remember where I said that
though yeah I think it's not interesting
to have that mistake in there so did I
let's see if anybody can remember did I
yeah super is called I know I know I
know I know I know
everybody's telling me this here's my
question for you if anybody can remember
the last 15 minutes of your life
watching this did I reference super and
parent and child and sub both after I
wrote particle call this or did I write
particle call this and then talk about
that because if the last thing I did was
just write particle don't call this I
can just do that again
I will give the chat a second to catch
up is 1 o'clock maybe I can scroll back
yeah I mean mark pal writes it is
interesting to have a mistake I agree
it's interesting to have this mistake in
the live stream but the edited videos
and sometimes it's useful in the coding
challenges to have mistakes but I feel
like sometimes the people who come to
find the videos later are just looking
to learn how it works and an extra 5
minutes of getting it wrong is confusing
first came before super ok yeah after
talking about sub super class that's
what Nathan is saying but people in the
chatter telling me super before oh
that's the same thing excellent ok so
let's see if nacho can work his magic
and I'm just gonna go from where I wrote
but where did I write constructor
I don't know we'll try something alright
so I think what I did so actually
weirdly I think it might work without me
explicitly calling super and that's but
I think it's bad that's bad kind of bad
practice now while I could be done by
just inheriting update and show and like
sort of assuming I'm also going to
inherit the constructor its profits it's
a good habit and I think in almost all
cases you really need to explicitly
write your own constructor even if you
are extending another class but in the
case where all I want to do is when I
make a square P a square particle and
actually in my nature of code book which
is example is mostly the same I call
this class confetti that's another name
I could be using if I want to just say
you know what I'm gonna define my own
constructor but I want to do exactly the
same thing as whatever happens in here
and the way to do that is just by
calling the super function so the super
the keyword super means execute
something from the parent or superclass
so super with parentheses means run the
constructor so let's now actually try to
go over and and do this in the code so
hold on I have to back I have to back up
here I just realized
all right so now what we can do is we
can say square P extends particle this
is the magic once I've extended particle
ah I could just get rid of this that
stuff is all inherited now from particle
whoo-hoo and then I could just say hey
super do the same thing and I still have
to pass in those arguments this is
basically saying hey you're making a new
square P when you make a new square P go
ahead and make a call the particle to
construct the code that's in the
particle constructor so this is now the
square particle if let's call this
confetti just as like a different name
now if I go back to the sketch and this
was left over from before I forgot that
I had this in there
right if I run this again we have two
identical particles it's as if I made
two particles because the square the
confetti class the confetti object is a
complete duplicate it just inherits the
particle class completely but the whole
point of this is we can now do things
like augment and override so what if I
want my confetti objects to always have
a color so maybe I can add another value
here like I'm gonna call this this dot
brightness or this dot bright equals a
random number between 0 and 255 so
school confetti objects do everything a
particle does but get an additional
property and then maybe you know they
don't actually that I want to draw them
a different way I want their physics to
be exactly the same so I want to inherit
the update function but I want to draw
them a different way so I can actually
override the show function so if I write
a function that has the same name of the
function that it's inheriting then this
will then be ignored for any confetti
objects and just to change that name
here let me call this confetti so let's
do that let's all mint and override I
mean those are sort of terms I don't
know what the technical term for those
things are so back over here I might say
something like all right so initialize
X&Y the same way but add a new sorry add
a new property that's a random number
between 0 and 255 then override the show
function you know I could go back and be
like well how did I do this in no but I
don't need to I don't even need to I'm
just gonna say in the show function I'm
gonna say fill this table right stroke
255 stroke weight 1 and then I'm gonna
say square square this dot X this dot y
at oh maybe this should also have you
know a subtle called R for like the side
length and I'm gonna make that 10 and
then I'm gonna say this dot R so now if
I run this we can see look there is a
square there's a confetti particle and a
regular particle so this is that this is
the magic here and listen you can do so
okay what have I shown you so far this
is the idea of inheritance I can have a
base class or I can have a parent class
I can inherit from it I can add
properties and I can override but guess
what I could also do let's say what I
want to do is you know my confetti
object it should update just like a
particle updates but I also want to do
one thing more I wanted the size to
change so if I come back to here one
thing I could do is in the confetti
object I could say update and then I
could say well first do whatever you do
in the parent object call super dot
update so do whatever you would normally
do for updating and then do one more
thing this dot R + equal you know random
value so in addition to and let's in
addition to sorry changing the and
that's going to be too much in addition
to changing the x and y which presumably
is taken care of by what it's inherited
also change our and now there we go you
can see that this is now having an
additional behavior the size is changing
as a buoy now I don't know that the way
that I've set this up
is particularly elegant or useful but
what I will say is a common technique
especially you'll see this if I in some
of my videos where I work with physics
libraries is that you might have kind of
like this base class that includes all
of the code and math for the physics of
how something moves but and you can
imagine that being a particle class but
you have all these different variations
of that with slightly different
behaviors and different design elements
so that that base class can kind of be
the core physics of your system but lots
of different things can exist in your
system and be customized in ways without
having to duplicate code over and over
again I should also mention that classes
can only inherit from one other class
but it is called a tree an inheritance
tree because an example that I think
I've given before in other videos is an
animal kingdom so you could imagine a
scenario where you have this idea of an
animal class right and maybe that has
some properties that all animals share
wait I thought I can't think of but then
you might have from that you might have
something like mammal a mammal class a
reptile class those would have things
specific to that and then maybe the
mammal from that is going to like
inherit there's gonna be a canine class
this is right biologically or what but
the point is you can inherit things all
the way up the tree so if animal has a
property called weight and mammal has a
property like you know fur color then
canine is going to get fur color and
weight it's going to inherit that
everything inherits so you can have and
it's not a network it's a tree and so
this is something that's really quite
powerful in designing large software
systems and working with other
JavaScript libraries that you want to
like have a very flexible and agile way
of augmenting and using features from
something else while implementing your
own thing this is kind of the core
principle of object
oriented programming in inheritance so I
need to come back and I need to do one
more video to talk about one other thing
which is the term polymorphism which for
me feels a little less relevant in
JavaScript because polymorphism really
comes up when you have a strongly typed
language because you how you specify
what data types certain things are
javascript is very good at just kind of
figuring it out in lots of cases but in
this case what I can do is I can make an
array that's full of lots of different
kinds of objects that inherit from each
other and then just like blanket apply
the same thing the same functions the
same functionality to all of them so
maybe I'll try to do one more video just
to basically take this and put it into
an array alright
thanks I hope you got something from
this there's probably like a lot more
that you can do but this maybe gives you
an inkling of how inheritance works and
might change the way you think about
making a project in JavaScript in the
future Thanks all right
all right so I don't know the
polymorphism thing is kind of let me
think about this let me make I got 15
minutes I mean it's like this is like a
five minute video to mention
polymorphism polymorphism I mean what
polymorphism means to me is it's the
idea in like in Java for example this is
why it's polymorphism we talked this
through for a second I could say
particle P and this is Java equals new
confetti and this is the core idea of
polymorphism in that I can treat an
object in multiple forms like I can
declare it as a particle but it's
actually a confetti and then and then
even if I call P update it'll know the
proper update function to call which is
the one from confetti and this makes me
this makes it easy to like pull a lot of
stuff out of an array and but it doesn't
it doesn't sorry someone's saying no
sound in the chat it that doesn't really
apply in the same way in JavaScript
because you're just doing this or this
so I'm trying to think like is there
something is there like a salient point
here that I'm missing about the idea of
polymorphism
okay let's see what's I'm reading this
Stack Overflow post
this is so old yeah
I mean
hmm you know once no one's telling me
anything that I don't are let's see
his ability to react differently
depending on the object type yeah I
guess to putting in an array is kind of
because they're all I mean one of the
great article that I love is how my dog
learned polymorphism
I remember reading this like years ago
and this is what I'm saying you can do
this this but this is irrelevant in
JavaScript
[Music]
so
yeah that's what I was gonna do Rubin
writes you could generate an array
filling it random with particles in
confetti and iterate the list calling
show on each so that's what I was going
to do but I don't really it doesn't get
at polymorphism the same way but I guess
that's what I'm gonna do I'm gonna just
explain I'm gonna cop to it and explain
exactly what I'm talking about
okay we cycle these cameras
just google es6 polymorphism that's what
i just did but nothing that came that
nothing that answered my question came
up I'll do it one more time
I'm just gonna I'm gonna explain it in
my own way
overloading is polymorphism yeah yeah so
that's really what in essence the poly
more mean that's I think that's an
oversimplification if I might be so
respectfully but yeah all right I wish I
hadn't erased this okay so give me a
second here
all right I guess I just did that I'm
Jule
oh why do I hell it's like cycle to
camera and then the cable like Wiggles
loose okay I've got one more topic here
about object oriented programming in es6
with classes and that is what is
polymorphism and what is polymorphism
mean and how is it applied in JavaScript
so just to review the core idea of
object-oriented programming creating a
blueprint a template as a class that
makes that encapsulates a whole bunch of
data and functionality together that is
the idea of encapsulation it's a little
package of an object with data and
functionality inheritance is the idea of
once I've made a class and I want a a
class to inherit a lot of properties or
functions but modified with its own
custom stuff that's the idea of
inheritance and inheritance is a thing
that happens in a tree because you can
have something inherit something which
is here it's something else and actually
the end of this video I'm a little bonus
I will just show one little trick about
inheritance that might be kind of
interesting now what is polymorphism so
polymorphism if we look at the word
itself poly meaning many and morphism
more for like form means we can treat an
element an object that has a particular
type like a confetti object as either a
confetti object or a particle object
depending on what's convenient for us
and yet somehow the system the compiler
the interpreter the executor of the code
is going to know what to do correctly
and so if I were in a strongly typed
language which JavaScript is not what I
strongly typed I mean you have to
declare the type of the thing before you
make a variable I would have to say
something I could say normally I would
say like confetti C equals a new
confetti object this is the way and a
strongly typed language I would declare
a variable C I would give it a type its
confetti and I'd call the confetti
instructor to make that object in a
strongly typed language I could also say
particle PE or particle C whatever it is
equals nu confetti and this would be
allowed because confetti extends
particle so in that case I could
consider this variable to be of
different forms I can consider it to be
a particle when it's convenient or a
confetti object when it's convenient but
the compiler will always know to execute
and use the properties and functions of
the confetti class and this is
especially convenient when you want to
put a lot of stuff into an array in a
strongly typed language because you
don't want to keep track of which type
which things are we can basically do the
same idea in JavaScript it will just
look less fantastic because javascript
is so flexible anyway about types but
this is the core idea so let's actually
go and do this
let's over here let's change this is
code from my previous video about
inheritance let's change this to an
array and I'm going to make an array
called particles and I'm gonna put a
little for loop to just add 10 particles
in setup then I'm gonna say just to get
started I'm gonna say particles index I
is a new particle and I'll just put them
all in the center whatever and then now
I can say for let P of particles and I
can say and this is an a for of loop
which lets me go through every particle
I could use a for each loop I know a lot
of people prefer those but let P of
update and show so now I should see if i
refresh this
I should see here we go I've got 10
particles moving around now what if what
I wanted to do was say if random 1 is
less than 0.5 so I basically want to
give a 50% chance of either putting a
particle object or a confetti object
the magic of all of this is that I don't
have to change this code down here
I just an fill this same array with a
bunch of different objects as long as
they're kind of linked through this idea
of inheritance they all have an update
function they all have a show function
polymorphism says this variable P is
going to know for each one it's gonna
know whether it's a confetti or a
particle object and it's going to
execute the right version of the
function so we should now see we have a
bunch of particles and a bunch of
confetti at every time i refresh this
there's a different random amount so
that's polymorphism why I made a kind of
a short video timeout for a second
somebody's telling me strongly typed or
explicit typing strongly typed or
explicit typing that's a death
difference strongly typed versus
explicitly explicitly types I don't know
I think I say use strongly typed
correctly is Java a strongly typed
language Python is a dynamically typed
line statically typed language in a
weakly typed language both Java but look
look according to my Google search Java
is a strongly typed language so I think
I'm okay there I think I'm okay
so tin says the Cody train you are
confusing strong typing and explicit
typing mmm no no let's look at this
answer Java is a strongly typed
programming language yeah Simon's asking
about the inheritance trick yes I'm
gonna come up with that strong typing
and we I'm gonna I'm gonna assume I'm
okay
I'm gonna move on I'll come back and
correct that later if I need to
I'm though I didn't talk about Python so
that's okay I can be its Python
strongly-typed dynamically typed Java
sadly tight oh so confusing uh explicit
versus implicit strongly versus weakly
okay okay I think I'm close enough right
you know for learning purposes that's
the maybe a detail alright so I promised
a little extra tidbit here so one of the
things I would like to show you that's
useful and this relates to actually how
the toxic libs library work oh no that's
not important okay so I promised a
little extra tidbit here at the end of
this video so one of the things that's
really interesting about inheritance and
that inheritance tree is that
inheritance is not just the thing that's
useful because you can oh you designed
your own particle class and now you're
designing your own confetti class that
extends particle maybe somebody else
designed something and you want to
inherit everything from that for example
there is a thing in p5 called p5 vector
I've used it a lot of coding challenges
and videos p5 vector object is a vector
object it has an X Y and a Z component
and has a lot of functionality for
vector math so what I actually could do
here is I could say look at this I could
say class particle extends p5 dot vector
so in that case now I'm just going to
say super X Y like I don't need this is
now an object that's gonna get X&Y
from the parent class but I don't
actually I can now start to use other
stuff so for example my particle might
also have a velocity which is I'm going
to just make that a which is like create
vector 0 comma I want to make it random
so I'm actually going to use the
p5 vector from from angle no no random
2d function so it could have a random
velocity and then I could say oh this is
so crazy
but this dot add this dot velocity
because there's an ad function and I
want to add the velocity to this object
because it is a p5 vector and then I
could just draw it at this at X&Y let's
see if this works amazingly this works
so this might this is very the behavior
is very different cuz it's not a
different random velocity it's just a
random direction but you can see this is
a very pop our 'fl particle extended p5
vector I suddenly got access to all of
the vector math that's in p5 vector and
then confetti extends particle so it's
also a vector and let's just look I
think it's pretty useful for me to very
briefly before I go just go over to the
console and do something like let a P
equal a new particle let's just look at
this look at this I want to take a look
at this you can see that this is now it
this particle object has an x y&z and
this this is actually how it works
underneath the hood you can see here
that it's prototype where it inherits
everything from is from this particular
object and if I looked at a confetti
object this has to do with the prototype
stuff this is what es6 classes
completely hides from you and if i look
at this object now we can see look it
has the brightness and r it has this
velocity it has an XYZ its prototype
what it inherits from is particle and
thats prototype is vector so you can
actually see this is generally a place
you kind of don't want to look because
it's like super confusing but you can
see the inheritance chain the prototype
chain or the inheritance tree here
confetti extends particle which extends
vector and this s dot vector is like a
weird notation because of the way the p5
library works alright so that's a little
extra trick you can think about that
maybe that would confuse to you that's
ok kind of confused me while I was
explaining it hopefully you got a sense
of inheritance and polymorphism as
features of us as aspects of
object-oriented programming that you can
apply in JavaScript using es6 javascript
thanks very much and I'll see you later
all right there's a discussion going on
about all sorts of stuff in the chat
that's very interesting I think I'm
finished for today I don't know what's
happened there's a parent I don't know I
the news is completely - I'm it's
actually great to livestream because I
am NOT looking at the news I am NOT
looking at Twitter I'm not looking my
email who knows what's happened in the
world in the last few hours because I'm
gonna be returning to my email getting
some lunch having some appointments some
office hours and different things I will
be back next Wednesday and next
Wednesday hold on Tim is writing
something tan said Java is strongly
typed because you typed confetti see but
that fact makes it explicitly typed not
strongly type strongly typed meanings
that a value sticks to its type ok all
right Minnie what I meant by strongly
typed and I was maybe being too informal
with language is that you have to
specify the type of a variable when you
declare it so Tim maybe what you could
do when I publish the edited version of
this that's in the tutorial playlist if
you can write a succinct explanation of
the nuance of that I can put it in the
description or even like pin a comment
but I think I don't think there's
anything like horribly wrong in what I
said
and Simon writes Python is strongly
typed but not statically so there is a
difference between strongly typed and
dynamically typed language yeah
yes that's explicit typing all right
maybe I should just record a little all
right all right all right all right all
right I have an idea not she's gonna
work his magic here
Python is strongly typed but you don't
write types I see that's so true I get
it
I sort of get it I sort of get it so
what's the key definition of strongly
typed that's what I'm gonna do here is
you're gonna see Oh
eleska Lexi I'm so sorry I never got to
that
[Music]
so what does strongly-typed mean I get
the browser back a strongly type area
one where each type of data is
predefined as part of the programming
language and all constants are variables
defined for given Oh strongly typed
means you can't make up your own strong
and weak typing write what you said it's
confusing Schiffman because using
strongly type when you mean explicitly
type typing is already confusing is
enough that it'd be nice to be right
with the definitions used strongly typed
variables and objects inherently have a
type that cannot be changed if you
assign a new type you recreate and
reassign the variable okay data
structures and functions must know what
types they operate on beforehand once
you make the variable a given type
alright okay
I get it I think yeah I'm reading the
Wikipedia page also I mean I think there
are I'm not the only person to be
colloquial about it can I reuse a
variable going from number to string in
strong types okay yeah all right okay so
I'm gonna try a little quick addendum
explanation that will come in in the
middle that's he will do his magic one
moment please
so during this video I refer to Java as
a strongly typed language and all the
places I looked on the Internet do
describe Java as a strongly typed
language however the aspect that I was
explaining is really something known as
explicit typing meaning you have to say
if you're gonna declare a variable a
variable P I have to say what kind of
data I'm putting in there is it an
integer is it a float is it a particle
which strongly typed means is that that
type could never change it has to remain
the same and there's really like a lot
of stricter rules around how that works
so like Python for example is also
strongly typed but you don't have to
declare what it's not explicit you don't
have to say what kind of type that
variable is you just can't change it
later you've got to be it's got to work
all when it's compiled so there's a lot
of nuance to that and some very spouts
I'll try to include some reading
material in this video's description to
explain that better but what I really
meant was explicit typing okay now back
to the video all right Tim and everybody
watching is that a kind of reasonable
correction that that would just like pop
in somewhere in this video
or do I need to do that again whoops
with anything that I maybe said
incorrectly
oops
okay so that will end up somewhere
overlaid in the edited version okay
people are saying even dynamically
static says yes correction is okay says
Nathan thank you everybody you know
what's really kind of fun about doing
this I really don't know half this stuff
I mean people think that I know all that
stuff and I you know I'm just like
figuring this out like the rest of you
and actually you know this really helps
my teaching here and all the other stuff
that I'm doing I learned so much from
people watching and I really thank you
for that I was too close to the green
screen and that's she is very good at at
at his work with magic with Adobe
Premiere so it'll be fine
Python is really if Li but it's mostly
correct well we'll see all right thank
you everybody all right so Alexi that I
probably asked about contributing to
p5.js so let me make a list so I mean I
don't unfortunately I really have to go
and I don't have time to talk about that
today but I will say if you're
interested in contributing I'm pretty
sure there is a wiki page about getting
started this is where you want to go
so things moves so this is like a short
answer if you're interested in
contributing to p5.js this on the wiki
is where you want to kind of start right
here go to the github repository wiki
and down here there'll be information
about different ways to contribute the
community statement and code of conduct
and overview and a development guide so
this is a place that you should get
started all right I have got to go so I
really have to do this data stuff next
week I the things that I didn't do is I
didn't do the terrain I didn't do my
like video that I imagined of redoing
every single Perlin noise example that I
ever made
alright classic Perlin noise example
that I ever made with open simplex noise
that I didn't do I look at Fermi's I'm
kind of on this idea of making a Rubik's
Cube so I would want to get to that at
some point and I really would like to
make a processing library anyway I don't
know when I'm gonna do that I want to
come back and show Eclipse
and how to make a processing library all
right I'm gonna go so thank you everyone
I am going to play you out with the MIDI
version I'm gonna take that sometime
here to go to System Preferences sound
and I think if I do the multi output
device if I play this you're gonna hear
this through yep
[Music]
we hold on so Matthew Jeolla raucous
makes a really good point I think a good
thing to keep in mind is that other
languages have arrays where the type of
the array is dependent on the type of
the contents in Python most of the time
the container is not defined by its
contents yes that's an interesting okay
so I am going to the I'm muting my
microphone I am going to the wallpaper
I'm gonna play about with this everybody
see you next week on the coding train
every Wednesday 10:30 a.m. Eastern
nothing makes me happier than getting
people's like weird musical remixes of
my coding stuff doing that please make
tough I like to have more sounds of
music to play I will see you all next
week
[Music]
[Applause]
[Music]
ah