[Music]
[Applause]
[Music]
sorry about that little bit of technical
difficulties this morning hello I have
brought back my train whistle welcome to
the coding train a special Saturday
morning edition it's kind of like the
old days of Saturday morning cartoons
only it's Saturday morning coding I'm
having a little trouble like actually
realizing that I'm here and that I'm
live-streaming I'm not entirely sure
that I am this building is basically
like completely empty actually I don't
think it's completely empty just this
floor where I have this particular
recording studio is empty and it's just
it's like so quiet which is a good thing
cuz I can be loud and ridiculous but I
feel this need to be very quiet so I'm
here I'm really excited about some stuff
that I want to do today I feel like
there must be some important
announcements and things for me to talk
before I do that just take a moment to
breathe maybe read some random numbers
oh boy I really need to get progressive
lenses I think okay there's a book
anymore it's the problem fifteen
thousand five hundred and thirty eight
seventy one thousand one hundred and
sixty nine forty one thousand two
hundred sixty-eight
fifty four thousand six hundred ninety
five alright this that helped me that
helped me get centered mellow and think
about what it does I want to say so
first thing I want to say
is that to new experiments will be
coming out on the channel soon one is a
edited version of the neuro evolution
steering car codec challenge that I did
and what's gonna be pretty different
about that is that project was built
over four hours and I'm working on with
Matias help a sort of edited version of
that where I skip large parts of the
coding and just sort of highlight the
key parts and then kind of come in and
explain the interstitial stuff so that's
gonna be a new thing that if that works
well then that might allow me to do some
live streams where I build a very large
complicated project over a long period
of time and then able to release like a
shorter video about it which is
something I've been wanting to do so the
ability to watch the full build or the
project will never go away it's just
that I think it could be useful to the
audience for people kind of coming in
and entering this world to be able to
sort of like see a highlighted version
of the project and then if they're
interested to revive deeper into it all
right so that's what I want to say the
camera shutting off also reminded me of
something really important which is that
this room that I'm in is going to be no
more maybe a some next Friday so I might
get my last livestream not last
livestream no no no no no just last
livestream from this physical space next
week sometime I'm not a hard percent
sure it might be possible that I still
have access to this at some point in
July but I'm not sure the good news is
I'm good finally some day soon this will
be really sad the coding train will have
a moment where the camera doesn't shut
off anymore because I am setting up a
new space hopefully with new equipment
hopefully with some some little be good
and bad to it but the channel might
actually go on hiatus for a little while
just because of just in order to set up
this new space so I'm sort of figuring
that out stay tuned but there might not
be very there'll be very few or if not
it's limited live streams in July and
August and then coming
back full force with the start of the
school year in September but hopefully
all this is gonna be good for them the
amount of content that I hope and would
like to do in the future now a lot of
you have been asking for a video about
how I set up this live-streaming studio
and how it works and how maybe in the
hopes of setting up your own or just
learning more about it and I'm pleased
to tell you that a week or so ago I
recorded a session in here with a third
camera so the actual live streaming
setup and somebody else holding a camera
screen capturing everything and I plan
to release that as a video at least a
document this space this coding trained
studio which lets let's let me let you
in on a little secret I think I can
think I can pull this off of the wall I
rise my mouth is probably coming up
right to the camera I know why this is
really attached to the wall right above
the camera ah now I just got hooked onto
this is this this has always been about
hanging behind the camera this is my
high-tech solution to remind me to look
at you the audience Oh weird stuff all
over the place in this room there's like
a guitar picked over here all right
what's going on ah now now um Thank You
Simon for reminding me Simon who is you
know so helpful to me if you don't know
Simon check out Simon's YouTube channel
Simon is one of the most loyal coding
trained viewers I don't know if Simon is
excited us probably missed a live stream
here there when it was like 3 a.m. his
time otherwise he's always here all
right let's see just taking a peek at
the chat it's nice to be here on a
Saturday feel so relaxed like what could
possibly go wrong
so topic wise I'm gonna actually start
with building a processing java library
because I think for the past year
spit the thing I said I would do after
the coding challenge and then I just
never get to it I'm gonna start with
that I'm gonna spend about an hour on
that I mean I think building a library
will take longer than that but I'm gonna
see how far I get in about an hour at
least just sort of getting set up and
starting that discussion then I will
take a break and talk to you about the
coding trains livestream sponsor for
today brilliant org was actually one of
the things I discovered about brilliant
that I really love my kit Rises I
haven't happened so I spend a lot of
time with a subway looking at my phone
which I really shouldn't do I should
read or just like be one with the New
York City but I finally had app and I
was like looking through him doing some
of the quizzes and stuff on my phone
which I thought was like a pretty good
productive use of my time versus the
other kind of like nonsense I'm I didn't
look at my phone so if you're not
familiar with brilliant
check out brilliant org son you can sign
up for free at brilliant work slash
coding train that lets you know that
lets them know that you found brilliant
front of the coding drain which helps me
out a little bit which is nice and then
there's a lot of free content for
example a daily puzzle and I'm gonna
come back later and do the daily puzzle
for today but there's also a premium
subscription which unlocks a lot of
other courses of content which I will
show you some of later also and the
first 200 people to subscribe to that
premium content get 20% off so let's see
david is asking in the chat will you
have content to upload during the hiatus
so I sort of thought that's one of the
reasons why I did that big data and API
score switch I should pull up here and
just mentioned I it's mostly complete
though so this is a good question I I
would like to but I don't know I see TBD
TBD what's gonna happen July in August
I'm either gonna have content or no
content or have live streams are no less
dreams or try something different
we'll see but there are some ideas for
some things that I could do at least
have some content on the channel
nobody watches the coding training this
summer anyway come back to school and
they're like Zubair thank you for your
super chat
a family-friendly channel I'll accept
your I guess the moderate the automatic
moderation does not shut off your super
chat only because it's a super chat I
guess but thank you nice nice Avengers
icon does anybody know where I could get
a stained glass Avengers stained glass
don't ask me why I don't know if I
seriously want that uh looking at the
chat alright so what I want to do first
before I start doing the processing
library is show you some of the
community contributions that's another
thing on my list that I've got to make a
video about how to make a community
contribution there have been some really
awesome ones that have come in so this
is the most recent coding challenge
incidentally the coding challenge I'm
going to do today is the gift-wrapping
algorithm to create a so what's called a
convex hull around a set of points
assuming I get to it
TBD but this is the most recent coding
challenge video if you haven't watched
it you can it is a variation on the
google chrome a dinosaur game and but
using coding train characters and also
using a new feature of the ml 5 library
which is a machine learning model to
recognize certain speech commands and by
the way one thing I wanted to mention is
a lot of people commented that let me
actually go let's go over to that let's
just let me just show you what it was
and I want to talk about something so
this is it here wait I think I have to
do I have to click for a yeah up it did
work so when I say up it's supposed to
jump so a lot of people commented oh
this would work better less latency be
more accurate with the web speech API
and that very well may be true but one
thing I want to emphasize about using
this particular model and using ml 5
which is built on top of tensorflow j/s
is the model is retrieved and run
directly here on the clients so your
audio is not being sent anywhere it is
staying local to your computer when you
use the web speech
yeah I'm like I guess someone should
fact-checked me on this but I've almost
certain that your audio goes to the
cloud and then is turned into text and
returned and this is you know I think
something that is more that I really
like about working with tensorflow j/s
and being able to run the models
directly in the browser is the data the
images the audio doesn't have to be sent
to a server anywhere and so there's a
little bit of privacy considerations
around that which is something that is
always important to think about with all
of this stuff okay so mine is terrible
but let's look at the community
contributions and some of them do have
sound which is really fun so this first
one is unicorn versus this dots by
Melvin Abraham shoot I did terribly okay
I'm like standing in front of this
awesome little less space here I'm
terrible at this alright I'm gonna get
I'm gonna get a successful one I'm
getting better at it
alright I think I got two good remember
a Cody train is now gaming Jim
[Music]
alright I'm gonna let I love the sound
effects I love all the additions the
jumping feels much more fluid and
intuitive the fonts being used or the
coding train fonts this ah fun to see I
love the train whistle beginning it's
pretty great all right Thank You Melvin
drew that's really awesome alright let's
go to this dot jumper by Swift potato
awesome named Swift potato are you as as
always I always forget to this stop just
stop just stop
all right guess pres I think you to
restart as always I always forget to
this stop just stop
stop just stop and indeed this stop this
stop underneath this this stop this stop
is not underneath this stop - stop stop
[Music]
why is it let's try this one more time
as always I always forget to this stop
this is kind of sad I don't know what
this scroll thing is happening alright
audio is a little loud okay thank you
for letting me know that I can turn that
down is Swift's potato in the chat
anyway super fun I love using the I love
using this dot song excellent thank you
I love the credit here of everything
wonderful work super fun ok let's Oh
some rough ideas on doing this in 3d so
this is pretty interesting this is from
DC bruh Chetty Dave / Chetty so this is
interesting weave this Lola oh cool look
at that so this this is super fun a
roller which is like a little cone and
is this
this is using p5 WebGL which is really
surprising to me p5 WebGL has really
improved and people have really been on
to make projects with it this is really
fun to see cool thank you for this
awesome work III encourage everyone to
check these out and check out the code
and there's one more I know
Simon Tiger and then also just remind
you you can add your own version here
it's a little tricky if you've never
used github before I might refer you to
my git and github playlist but but we I
encourage you to join to try you can't
break anything you can't do it wrong we
will welcome you in to try it to add
your own contribution so let's take a
look at Simon's improved spawning of
trains
I love how Simon includes the algorithm
here so we can see in mine it was just a
picked a random number and then added a
new train but it looks like what Simon
is also doing here if I understand the
algorithm correctly is that there
half is sort of like making a minimum
distance between the trains so if it
picks two in quick succession it won't
be allowed to do that because the timer
has not gotten it ready to be able to
allow the random number to pick the next
train so that's great space makes
browsers scroll down this is alko's
writing if the default is not prevented
by the handler so that's probably
something that has to be written into
the code and you wouldn't notice it if I
go back Thank You Simon for that if I go
back to this jumper right always forget
that this stop it stop it now you
wouldn't notice this because the whole
page is is there but I usually have it
zoomed in a bit forget to this stop
space the default behavior space in the
browser is to scroll down to the bottom
excuse me for a second so thank you for
these wonderful community contributions
I love them and yeah so let's move on to
the next part of our day so let me close
out a bunch of these things and I want
to talk about this myself a little more
space here
and then where's my open simplex noise
coding challenge
let's get this ready okay okay oh boy
so Alka is writing I don't know if this
came through a swift potato a sweet
potato
hello a sweet potato is asking is there
any way to remove or override that
behavior and Alka writes here in our
slack channel window dot add
eventlistener key press and then the
event comes in as the argument and you
say event dot prevent default so and al
qaida there in the chat lookup event
prevent default and david writes I'm
working on a dinosaur game for
processing that also has birds you have
to duck under which is awesome
great okay so I think I'm just gonna get
started here and I might come back and
record some intro e stuff for this but
let me just try
I imagine this might be a multi-part
series and we'll see how it goes
okay Gama Chu writes I'm watching you
live for the first time given to you
where are you watching from I always
love to hear where people are from and
you know just to be a just it's
important to be aware I I kind of peek
at the chat every once in a while but I
don't I don't catch every message I do
often look at the chat after the fact
and I do read all the comments that
people write on the videos scanning
through them and if you feel so inclined
you can also join as a member or as a
patron of the coding train because I'm
actually gonna do the recording so green
screen recording session hopefully a
little later today or else on Monday for
members only too for the interstitial
stuff for that neuro evolution so if you
want to get a link to my Members Only
live streams you can do that now again
you don't feel you're missing anything
those are just kind of some raw
recording sessions of me in front of a
green screen and all that eventually
comes out but if you want to tune in for
that a little behind the scene
that's what I do that with a smaller
audience okay um all right okay okay I
don't want to start I'm gonna start this
one's this one's for all you processing
Java people from the old days
let me just check Twitter and make sure
nobody's telling me not to do this okay
I think I'm good oh all right
let's let's see if I've got a whiteboard
going I do not
[Music]
no whiteboard yep okay that's good
do I have a marker is the question ah
welcome new member
matheus Acevedo Oliveira thank you you
have made the lights blink at my
apartment in Brooklyn I'm not there
right now but the lights are blinking
train whistle for you by the way I had
this idea so I know I shouldn't get off
on these random tangents but I just do I
have been really struggling to keep up
with the rewards that people get for
signing up as a YouTube member or a
patron which are stickers or books so
I'm really really trying hard to get
some new systems in place and have all
that cleaned up over the summer if
you're someone waiting for something I
sincerely apologize and you should
continue continuously bug me about it
you shouldn't apologize for it you can
just bug me about it
but I have this idea of creating this
came up at the i/o conference of
creating a coding Train branded like
laser etched train whistle because
that's the thing people want right so I
could like order these in bulk and then
I could laser laser etched them with the
coding train logo or something and then
those could be a thing that I mailed to
people and then I think will be easier
to do I suppose I could sign them also I
don't know if anyone cares about that
but the books are just like hard to mail
crazy expensive it just doesn't if I
have to it's not working out very well
but if you signed up and you were
promised one you must get one otherwise
my old world ups the sense of the way
the universe works will not be aligned
it will bother me I will lose so many
nights of sleep so please keep me posted
all right putting down this if we have
some time later solve the cube you'll
see my progress still just basically
doing beginners method
but I can do the cross without having to
put it on the yellow side first I mean
that's not that hard
yay for me all right we've got a
whiteboard we've got this I'm going to
start so um let's see let's see how far
I get in approximately a half an hour or
45 minutes and then I want to take a
break and look at that brilliant Daly
puzzle and then either do more of the
library stuff or move on to some talking
about computational geometry of this
unbranded coffee cup from a not a
sponsor water has really let me down by
the way these days I have no water come
on back to me come on back to me with
that great water h2o sponsorship let's
get the slack channel up here all right
hello and welcome to a new series about
building a processing library in Java so
if we've ever wanted to learn a little
more about Java programming and how
open-source works and how you can
contribute your own code through times a
library to some other platform this is
the place for you and I have to admit
like I really don't know how everyone
does it say I have this like really
nervous tic I wonder if this is like
some kind of genetic condition where
when I start teaching or live-streaming
it never Li like nose becomes very itchy
then like I feel like I need to scratch
it or below my nose it's like what it's
like a nerves thing all right
I started working with processing in
2003 which is some number of years ago
it's too many years ago I can't possibly
do that math and one of the things that
I first did when working with processing
was contribute libraries to it and you
can see here I'm scrolling through the
processing libraries page there are
libraries for all sorts of categories
I'm just gonna go under video for a
second oh no that's the actual video
library sorry there are libraries for
there are libraries for all sorts of
categories I'm just gonna go here under
video invision for example and we'll see
there's a library for using like the PSI
camera for doing a open CV oh look at
this one for the connector it's really
not kept up to date um there's a lot of
wonderful libraries your blob detection
this is a really useful one I have some
videos about doing blob detection
processing with your own code but you
could use a library for it so maybe
you've used processing maybe you've used
a library before how would you make your
own library this is what this video is
about or this is what this video series
is about alright so let's see what am I
going to say next
I have to admit something to you I have
not actually done any research or
practice before I'm beginning this right
now I have made processing libraries but
I haven't really made one in a while so
a lot of this series will also be me
sort of figuring it out as I go and
hopefully everything works just fine
it's somewhat of an ancient medieval art
to build a Java
a compilation of Java classes to insert
as a processing library and I'm a lot of
the stuff that you notice I've been
doing is JavaScript on the channel these
days but maybe after I do this I'll come
back and show you how to make your own
JavaScript library as well Matias is
asking who edits the videos and that is
Matthew who is a video editor and and
more based in Montreal Canada okay all
right
so the very first thing that we need to
do is go to the processing library
template under the processing github
organization and you'll notice something
it actually says template here and
there's this little button here use this
template this is a new feature of github
I don't know how to do it is I mean it's
been there for a while but I've actually
never used this feature up until right
now mostly when you're using a github
repo you're cloning it which means
you're what I want to say stop beeping
at me this extra computer here mostly
when you're using this should probably
be like I don't know I'm so confused
these days cuz I now i do the offline
recording with the AMA whatever I'm just
gonna keep going this is what I'm doing
now mostly when you a lot of times we're
gonna use in github maybe you're just
trying to find some code and you're
clicking around you copy and paste it or
maybe you're even ambitious enough to
clone or download so cloning is a
process of taking this repository and
cloning it's a to another to your local
computer your laptop I'm actually gonna
do that a little bit later in this video
downloading would just be downloading
the code there's this process of forking
a repo which is kind of creating a
version of it that is linked back to the
original version but this is a scenario
this is a rare scenario where what I
want to do is build an entirely new
project it's not really related to this
it's related to this in that this is my
starting point but there's no reason for
what I want to build to be a fork of the
template because I am not contributing
back to the template if there's an issue
with something wrong in the template
then I would want to make a fork to fix
the thing that's in the template but I
just want to start from it it was a very
long explanation for me just basically
pressing this button so I'm going to
press this button I'm actually gonna
switch this to coding train because I
would like this library that I make to
be a community project that people could
submit to and I mean I could do that
under shipment as well but this is a
coding training process
library we're going to call this open
simplex noise library I'll call it for
processing let's call it for processing
so that's going to be the name of the
repository this is a new a processing or
open simplex noise and I want to make it
public and I want to create the
repository from the template
so I love this I love that this is a new
repository a new project but github is
being thoughtful about this and
crediting back where it was generated
from
now what is the next step the next step
is now I want to work with this and
update the code and change it around and
put my stuff my open simplex noise stuff
in it and by the way you might be
wondering what is open simplex noise so
I have a whole video about what that is
it's not really important right now the
point is how to make the library but I
want to make it in the context of
something that would be useful so I'll
come back and talk more about open
simplex noise and we'll look at some
examples with it as we get a little
further along all right so I'm gonna
click clone I'm gonna copy this and I'm
gonna open up let me let me
let me be more picks up about this right
all right I'm gonna click clone I'm
gonna copy this and I'm gonna go to my
console application which I'm using I
term and I must say git clone and paste
that in so this is now going to and this
should be bigger let's try this one more
time so I'm gonna click clone I'm gonna
copy this I'm gonna go to my terminal
application I'm just in the desktop and
I would say git clone and I'm going to
clone this particular repo which will
now download everything to my computer
I'm just gonna then open up that repo oh
no I'm not I'm not I was about to open
up that repo and I'm doing it right now
in Visual Studio code which would be
fine because then I could kind of like
look at like what's in there there's
like a hello library Java template and
stuff but no no close all this this is
not what I want this is a very momentous
occasion this might be the first time I
need to use a Java development
environment I'm sure there's some
magical way I could make Visual Studio
code do what it is I want to do but I
want to do this with a Java development
environment namely eclipse
yeah alka this is pretty new I just
turned it on because I had been
privileged alka is saying they've never
seen the template repo before and I just
turned it on in because I have admin
privileges of the processing
organization and I hope it was okay that
I did that all right now I don't even
know if if I've downloaded eclipse I
didn't CD into the repo I now
oh shoot
everything's going wrong now
cameras shutting off IntelliJ right
nobody nobody wants me to use in TIG
I don't know I never used IntelliJ
before in my life so I feel like I have
to use eclipse eclipse.org Intelli
IntelliJ I'll pull that up
this is the Eclipse Foundation website
where you can download and install
Eclipse I'm gonna do that in a moment I
should mention also that a lot of people
the chat are saying oh use IntelliJ I
like that better than Eclipse I don't
know maybe it is better maybe it's worse
who knows who cares I'm just gonna use
eclipse it's the only one I've ever used
and I want to have at least one thing
here that I don't have to learn that's
new but maybe I can come back and show
IntelliJ at some point or one of you can
make your own video about doing the same
thing with IntelliJ and I can link to it
alright so let's download eclipse so I'm
gonna lift down let's download eclipse
I'm gonna get this most latest version
I'm gonna download the 64-bit this link
looks good
[Music]
eclipse much like processing is a
non-for-profit foundation and you can
donate actually I don't know if they're
nonprofit they seem there I should try
it once to form your yes it definitely
should
what's what's going on here all right
clips installer oops hold on Ola oh I
guess I'm doing it
alright once you've downloaded it you're
gonna get this Eclipse installer and
then you've got to choose what you want
here
I want Eclipse IDE for Java developers I
think that's what I'm doing so I'm going
to install it here hit accept and here
we go it was fast except
let me IntelliJ IDEA communities free
and open source that's good to know
[Music]
all right I've downloaded installed it
I'm gonna launch it now I also should
mention that I think the processing
library template is designed for use
with eclipse it's creating a workspace
which is similar to like a processing
sketch book Welcome is great and I'm
just going to do this
open it up
alright let's see alright alright here
we go
I have eclipse now now I'm gonna have to
do some work to like fix the font sizes
I realize if you're watching this you
can barely see anything but right now
I'll just use zoom for a second and what
I want these are my options I could
create a new project a Java project a
project but what I want to do I pretty
sure is import a project so I'm gonna
click on import and then these are all
of my options oh look at this it even
asked like a git so I actually could
probably import it from git but I think
I can just do general existing I think
this is what I want I think I want
existing project into workspace because
the processing library template is an
existing Eclipse project so then I'm
gonna hit next and I want to find that
directory which is just on my desktop
called open simplex open simplex noise
for processing I'm gonna hit open and
you can see look at that
Oh interesting it's called processing
library template so there's probably
somewhere that there's like a name for
it that I might want to rename not gonna
worry about that too much right now
I'm just going to click now finish
finish and okay there we go this is
looking promising oh I have a red X but
you can see now this is an eclipse
project it's got all of the files here
in this like directory tree there's a
data folder and examples folder a live
folder a resources folder I may have to
get into what's in those things but the
most important one right now is the
source folder I'm going to click on that
and we're gonna see like this is really
this is the Java file it's not a PDE
file not a processing development
environment file it's an actual proper
Java file this is what the file that I'm
gonna need to work with
is there a dark mode for eclipses by
holing people are telling me there's a
dark mode let's look for that
appearance No
I'm looking the chat has not told me
where it is yet and I haven't found it
all right let's Google I guess
that's from 2014 that's not gonna help
me
preferences general appearance okay ah
theme
what's not about
okay
oh great
let me quickly mention that under the
preferences under general appearance you
can change the theme to dark mode which
I'm doing right now get the font size
wear with the font size be
you think we'll be under appearance
colors and fonts oh there we go oh my
god this is like insane whoa seriously
okay does that actually change it that
didn't seem to do anything this text
sounds use by text editors let's see
okay that's good so at least I got the
font bigger for the text editor Java
editor text font under Java click Java
editor okay I think I've got that I
think I'll leave the rest of the fonts
[Music]
small
I've also gone this will this is not
enough something necessary you'll need
to do but I've also gone and increased
the font size for the code editor just
so we can see it bigger so where I am
right now is I have got I'm looking at
hello library job I'm looking at this
code and I'm in the Eclipse editor so
the next thing that I want to do here is
I'm gonna figure out why do I have these
errors I know why all right
interesting interesting oh this is
exciting this is very exciting these are
the errors P applet cannot be resolved
to a type the import processing cannot
be resolved why do I have these errors
well the idea that this project where
I'm building a processing library
depends on the processing core library
itself and I don't have that anywhere on
my computer yes I have the processing
application so maybe there's some way
for me to link this to the processing
application but I'm gonna do you one
better what I'm going to do is I'm now
going to clone the entire processing
sort core library source code and I'm
going to have that as a project in
Eclipse and I'm gonna have this project
refer to that so let's look at how I
would do that pretty sure by the way
there's probably some instructions for
how to do this let's look for that for a
second
Oh rename your Eclipse project okay
oh yeah
oh I see so I could just get cored out
jar I think I'd rather have the full
all right I think
so this oh by the way so this we can now
change butts by the anyone who wants to
submit a pull request to processing
library to change these instructions
because you no longer need to do fork
you can you use as a template which
makes so much more sense and that can be
fixed but let's not I'm not gonna worry
about that right now I'm just gonna
mention alright before I do this next
step I should point out that even though
I'm kind of haphazardly no absolutely is
not the right word before I go on to the
next step
I should point out that women before I
go into the next step I should point out
that even though I'm like awkwardly
trying to figure this out as I go there
is a guide to how to do this that's part
of the processing library template
readme and the step that I'm on right
now actually is this ad core jar or in
other jar files to your class path so
one way that you could do this is just
to get core jar what is quart jar it is
the entire processing core library
packaged into a single file a jar file
is like a zip file of all of these
provident to one but I'm gonna do this
in a slightly different way which i
think is interesting I don't know if
it's better or worse which is to instead
of adding quart jar to the classpath I'm
going to add the processing source code
project to the class path that way if I
need to I can actually poke around that
as well so to do that I'm going to go to
nice little edit point here
I'm going to I'm going to go to the
processing main processing repo itself
I'm gonna grab this clone I'm gonna copy
that I should point out that you I
should also mention I should also
mention that I and using SSH meaning
I've already gone through some
instructions for how to set up an SSS
ASIS meaning I've already gone through
some instructions of how to set up an
SSH key on my computer to authenticate
to github automatically you could do
this more simply by just using HTTP me I
should really make a video on how to do
that somebody remind me someday but
that's why this is working for me so
automatically okay so I'm gonna grab
this I'm gonna go back oops sorry cancel
I'm gonna go back to go back to my
terminal I'm gonna say git clone the
hope the full processing library
[Music]
get to that Orange Julius I like to call
it Orange Julius I hurt myself there
[Music]
wow this is really taking a long time
[Music]
see the double X 47 and 65% type sense
[Music]
there we go all right now that I've
cloned that repo I can go back to
eclipse I'm gonna say file import
existing projects into workspace you can
see that's what I'm doing again next
browse back to the desktop processing
open and uh okay so do I really need all
of these great idea so these are all of
the processing projects that are part of
the core processing repo let's try for
right now just processing core I'm
pretty sure that's the only one that I
need is a dependency to build my
processing library so I'm gonna uncheck
all the others I'm gonna hit finish it's
there so now we can see I have
processing core with an X
all right let's see so before it's gonna
work as a dependency for processing
library template this can't have any
errors in it so let's see what happens
here
oh so there's an issue with I should
have just gotten cored a jar if you with
with the Java FX renderer that you can
see how that's the entire error
what's think different Java there's so
many little like Easter eggs inside the
processing source code processing Java
FX so Java FX is missing is this because
of the version of Java that I'm using
Nathan is asking why is the processing
repo more than a gig I will get back to
you on that I should probably just go
back to the core dot jar thing would be
considered clear not jar it would I be
done in two seconds
I should probably follow the
instructions but I do want to fix this
Java FX why don't I have Java FX so I
have to like install that separately
okay
Oh install new software okay that's not
so bad
let's try that it's not anymore included
I am using Java 8 I'm pretty sure I need
to use the correct version of Java with
processing but I think that I am set a
path all right let's try this I think I
think that I found the issue here which
is that Java FX which is something that
processing uses is not by default
included in the version of Java that I'm
running with eclipse and so what I need
to go now is to help install new
software I assume that I could just
search Java FX
No ok [ __ ] already blue we find that we
install new software and you're EFX
Eclipse
where do I add it did I not get help
it's all new software yeah that's right
yeah
work with well there's a drop-down oh
there's a drop-down
gfx eclipse is in the marketplace the FX
eclipse is in the marketplace this is so
it's like the tiniest font ever I can
barely read it select a site so there's
like a marketplace it clips markup like
okay
there we go okay that's good all right
let's write this so I can actually just
go to eclipse marketplace in under find
I can type FX and this is what I want e
FX eclipse and let's let's try
installing that
[Music]
how do i I don't like tell whether it
was installed or not what version of
processing am I using
I mean if Java Java 12 I don't know what
that is SE oh yes oh it installed okay
all right restart now oh well that's bad
having me when it finishes installing
will ask you to restart eclipse which is
what I'm doing and I can see that
everything is totally working now did it
install
I think I might have to go back to the
core jar no updates found yeah I might
have to go back to my core jar
JavaFX is not provided in Java 12 wait I
should be using Java 8 for processing
does it say on the processing library
template
Oh Oh I just need to add this I need to
explicitly add it let me just see if
that fixes it it didn't fix it
Java SE 1.8 that's what I want
don't I need like a JDK or something
hold on let's see
but I'm following this
maybe I need to make sure I have the JDK
downloaded f5 would refresh everyone's
time I should be using IntelliJ no I'm
gonna use eclipse I used two Clips
fifteen years ago and it's what I'm
going to use now let's see soon as it
gives me a little
f-five I don't have the functions
anymore that's a ridiculous Mac I should
just go to import core jar we'd be done
with this nonsense hold on let's go to
is this what I want do I want this do I
need this
Java
that's there
no matter our projects libraries
I'll let them move on from this soon
let me do this hold on
all right I'm going back to court jar I
got rid of the arrows in like two
seconds all right
this was like a cool idea so that I
could look in the processing source code
but it's so not necessary
don't let's just not do this I'll come
back to this another time
all right I'm just gonna do the quart
jar I'm head beans I'm gonna just do the
core jar solution so I'm gonna go back
to where I was here it would get edited
back I was trying to be ambitious and
I'll look into that later so nathan is
suggesting that we redo the processing
template to use IntelliJ I think
actually a contribution of a version of
the template for IntelliJ would be great
and that would probably be something
that would be accepted or at least could
be pointed to so if you're interested I
would say rather than replace it
although I could imagine maybe in the
long-term sense maybe it makes sense but
for as a first step would be to just
create a duplicate version of it all
right but nobody goes maven or great all
I know look I can only do what I can do
all right P applet cannot be Oh November
[Music]
hello my kind of the Kadesh key which
i'm sure i pronounced that completely
incorrectly but I sort of tried to do it
with some kind of vague accent to make
it seem like I knew what I was doing but
clearly I did not all right
errors yeah I gotta wait till people
stop talking about the camera errors P
applet cannot be resolved to a type the
import processing cannot be resolved to
a tight so this is because this
particular project means as a dependency
the processing core library itself so
there are a couple different ways that I
could tell this project my processing
library about the processing core
library and I'm going to show you the
easiest way to do that right now I
should mention however that all of this
was
I should mention however that all of
this all of what I'm awkwardly kind of
stumbling through is actually here as
instructions on the readme and the step
that I'm looking to do right now is
adding core jar or other jar files to
your class path so the idea of a class
path is a very important concept in Java
programming it is the path where all of
your dependencies live all of the
classes that your project depends on
live the path to your classes the class
path so the way that the what I want to
find is core jar that's a bundle jar
file it's like a zip file that has all
of the processing Java classes in it and
there's a variety of different ways that
I can find it but if I happen to have
processing installed on my computer on
the Mac and you can find this
similarly on a Windows or Linux I can
actually just right click on here and go
to show package contents because whoops
right click on here and go to show
package contents a java application is
actually just a directory of files it's
kind of the operating system is hiding
that for you but I can go here under
Java and look at this core jar now I
might find that I need other
dependencies eventually but right now I
just want core jar so what I'm going to
do is I'm going to copy that into my
project just by dragging it over I'm
just gonna put it in the root directory
maybe there's a better place to put I
could link to the file huh maybe I
should just link to the file copy link
what should I do people welcome new
member or long Nellis Sanchez thank you
let me I'm gonna have some fancy stuff
with buttons and little things will go
off
I said ROM now it's rommel sorry about
that I'm gonna copy it should I copy it
or link it excuse me well that was a
burp house very thick copy all right
there might be different reasons why you
might want to do one or the other I'm
gonna stick with copy just so that I
know it comes in so I can see cordage
are is there I still have my errors
though but what I want to do now is I'm
gonna right-click core jar and I'm gonna
go to build path build path is
essentially another sort of term for
class path and I want to add this to the
build path I'm gonna click Add to the
build path and then voila
all of those errors go away it knows
what p applet is because P applet is
part of processing core P applet is the
base class for every sketch you write in
processing yes I like by the way how the
first person to answer in the chatter
just said copy I took as words like
that's that's crucial that's to keep
that's the answer
alright just to did these phase that
just to did why the heck are we into
clubs all the time probably not in ten
years but there's some sort of like
warmth that's filling my heart about
this right now I just love it
okay
we're almost finished this first part
now I'm just about ready to actually
start doing the coding of the library
itself this first part was really just
to set up the project itself but I want
to do a few more cleanup things number
one is it shouldn't be called processing
library template so I'm going to right
click here and go to refactor rename and
I'm gonna change the new name to open
simplex noise for processing what else
let's see let's see what else it says
here add external jars
oh I should put it in lives
this
okay well I think I got another new
member just again another new member I
already thanked this member yeah at Roma
I think I think okay we're just done I'm
about done with this first step okay
looking more closely at the instructions
I've discovered actually that the point
of this Lib folder is this is where
other dependencies should go so I'm
actually just gonna move this chord jar
file into there I think the project oh
now it's complaining at me so you should
have copied it in there in the first
place but now what I'm gonna do is I'm
going to right click on the project go
to build path configure build path and
this is now it's confused this project
this chord out jar file is now missing
so I'm gonna hit edit no no no n-no I'm
not gonna edit I'm gonna hit remove and
then I'm gonna do apply and close then
I'm going to just go back to this and go
to build path and add back to the build
path okay so now I have my project setup
hmm there's now I have my project set up
there are a few last remaining steps we
need we want to get to the point where I
can build the library I want to see the
build successful message and I'll be
done with this first video in this
series so what I need to actually do is
I need to look for a file called build
dot properties and this is going to be
in the resources folder of the Java
project so let's go back to eclipse go
here under resources build dot
properties that's what I want there oh I
have never seen anything like this
what I'm so confused so this to me in my
head has always just been a text file
does anybody know how I can change the
font size of all of this stuff
what's that telling me to change one
through four well what are the items one
through four now
I don't want you to do this
no idea I've never seen this before
so this is like a GUI for the build up
properties but where's all the stuff
panel build ah there we go all right
thank you so it appears that Eclipse has
added a GUI for build properties but I'm
actually just gonna click here so I can
look at the actual text file and this is
this is this is important so where is my
processing sketchbook I'm going to open
up processing to make sure this is right
I'm gonna go to Processing's preferences
and we can see users coding training
documents processing that's where the
sketchbook is great that's user home
documents processing okay class path
local location applications processing
app now again you're going to have a
different location oh I can also do this
oh I should just
I see
I can link to this project
all right so don't try to thing this is
the next setting that I need to make
sure is correct so this needs to point
to that core jar file the processing the
processing core library itself so I
could get to it
you know in Windows it's sort of like
showing me how I might find it I could
get to it from this Eclipse project the
path of this Eclipse project and the
libs directory which I think makes would
make sense like documents Eclipse
workspace is that a thing
hmm where's the Eclipse workspace
oh no but it's it's actually this
project is o is here okay is there okay
users
this is the next item that I need to
make sure points to the right location I
want to find this core jar file the
processing core library so I could
actually point to where the processing
application is actually saved on my
computer if I had it in the applications
directory which I might actually happen
to have it here on my desktop so this
would have to change or I can actually
give it a direct location in this case I
can actually just tell it I'm gonna tell
it user home on the desktop is this
particular project whoops
so let's go sorry let's go here I'm
gonna say PWD whoops
PWD so this is actually where it is I'm
gonna grab this directory and then in
that directory under Li BS for libraries
that or no it's just Li be sorry Li be
for Lib library that is let me do that
again I don't know why I'm obsessing
over this
okay this is the next setting that I
need to change and I need to make sure
it points to the processing core
libraries to spend a lot of effort
getting that core dot jar file into my
project so now I also need to point from
build properties so the variety places I
could point to the processing
application which for me is on the
desktop but it might be in your
Applications folder so many different on
Windows or Linux I think for me what
might actually be easiest is just to
comment this out and point to where the
actual this actual project is so this
actual project is here on my desktop
desktop open simplex for noise
processing so I can put that in here
paste that here then there's a file
called lib for library where core dot
jar is not a file directory so I should
just put that in here and hit save
that's good classpath local include core
jar and then class path libraries
location is sketchbook that location
library so all this is the same target
version 1.8 that should be fine all this
stuff is fine a project name I suppose
more stuff I should change so I'm just
gonna say open simplex noise I'm gonna
say open simplex noise for processing
this is not super important I can fix
this I can fix this stuff up later but
let's just do some of this right now
and I don't have a URL yet and there's
categories let's just put it in other
I'm actually is there a math math I'm
doing all these now all right I'm gonna
fix this up later I'm gonna put the rest
of these but you could see that there's
lots of other things there's that I can
put in here but I'm gonna leave this all
out I'm gonna hit save and I'm gonna go
to the next step
all right
the next step is to compile the library
using ant what is ant ant is from Apache
ant or Apache ant is basically a build
system for a Java it's maybe somewhat
ancient but it's what's used by the
processing library template so if I go
back to eclipse and somewhere up here
there should be like a little ant icon
there it is I think that's ant write
this up here is the ant and no that's
debug that's the debug mode that's not
the ant oh maybe I go to build that XML
you go to build an XML let's look at the
instructions window show view ant ah so
to be able to see ant
I need to go to window show view and you
can see the little icon of the ant let's
click that and now I should have
somewhere where's my ant ant Apache
where are you Oh ant
now I see it drag the resources build an
XML file there okay the next step is to
take this build that XML file and drag
it over to here and we can see there it
is processing library open simplex noise
for processing and I clean click this
and do run ass ant build run as ant
build okay now we say a little prayer to
the ant God and we
run that we built the processing library
build successful look at this having to
open up processing I'm gonna go to
sketch import library okay I think I
need to restart processing I'm gonna
launch processing I'm gonna go to sketch
import library look at this open simplex
noise for processing the library is
there now it's saying import template
that library and there's no code for me
to actually use but I now have the
processing library building and I can
start writing the code so in a way this
was really the hardest part the next
stuff that I want to do is going to be
quite simple by comparison it's really
just adding the code out of the examples
building the library and publishing it
so that will come in the next video or
two or three and I'll see you there
thanks for watching this we built a
processing java library alright alright
everyone that took a little bit longer
than I had hoped and now at the halfway
point of today's live stream this is the
part where I talk to you about brilliant
the sponsor of the coding train live
streams and do a daily puzzle from
brilliant ok so what is brilliant but
first let me go to the web I'm going to
close all these links and I am going to
go to brilliant org so this is brilliant
I mentioned earlier to when I started
that brilliant also has an app that I've
started using I'm a little bit afraid to
plug my phone and show you the app
because I don't know what sort of
strange notifications or text message
log yet but I'll figure out a way to do
that I know I can turn on Do Not Disturb
and all that so maybe next time for the
next live stream I'll try to show you
the app itself but I've been using it a
lot on
a subway when I have extra time instead
of the other nonsense that I get
involved with on my phone so I think I
want to try that I'm just gonna try
whatever the first daily challenges but
I wanna show you a few things about
brilliant that's pretty exciting so one
thing is Simon Simon loyal coding
trained viewers Simon Tiger sent me a
message says I have a present for you
I was like whoa I'm so excited and it
has to do with this
[Music]
so as you know I have a special affinity
for polar coordinates and I have a lot
of videos and coding challenge witches
are all themed around just doing stuff
with polar coordinates and things like
the cardioid shape polar flowers more
flowers pull her problem solving so I
haven't actually gone through I wanted
to show this to you without me clicking
through it this is part of the premium
brilliant subscription I'm so the but
they have these extra quizzes and
courses themed around different geometry
topics math topics so for me what's
really wonderful about this stuff now as
I'm kind of running out of ideas for
what coding challenges to do that I can
kind of go through these quizzes it's
interactive learning it kind of keeps me
fresh and then I get ideas to build
coding challenges and in fact one of the
reasons why I'm about to do a coding
challenge on computational geometry is
because of this quiz that I found on
brilliant all about computational
geometry and there's a section here on
convex hull so this is actually what I
want to do is in the a little bit later
in today's livestream is look at an
algorithm for calculating a convex hull
around a collection of points so I'll
talk about more what that is
but I can click on it you can see
there's some more stuff about that here
okay but what's probably most relevant
and what I've been looking at are the
computer science fundamentals and
computer science algorithms courses so
I'm going to be doing these courses over
the summer and and thinking of ideas for
coding challenges and if you do that
stuff too please share it with me so
let's do a daily puzzle um these are
free so all you have to do is sign up at
brilliant org slash coding trained
there's that URL for nowhere so let's go
to today and let's go to this which is
larger all right
so what I like to do is I like to
recreate the diagrams in p5
because why not I don't know how hard
this one will be but let's let's let's
let's read through it a little bit
together okay and I'm probably gonna
need the whiteboard is the whiteboard
camera on No
all right let's look at this in the
figure below can we relate the areas of
the various regions so there's a light
green dark green and blue region the
legs of the right triangle or the radii
of this larger semicircle which is the
hypotenuse which while the hypotenuse is
the diameter of the smaller semicircle I
hold on I need to recreate this diagram
I can't see it over there I'm just gonna
go over here and draw it while I can see
it okay and then I'll come back over
here so we have our our da1 circle and
then another circle I didn't do that
didn't draw that very well not drawn to
scale my drawing is terrible that's my
drawing oh god it's the worst right but
you get the idea
okay so what are we trying to compute
we're trying to compute the area of the
smaller semicircle little R which is
what the area of the smaller semi circle
is PI R squared I don't get it
the larger semicircle are the diameter
of the semicircle D right but what is
what's little R I don't get it little R
is just half of little D must be right
this makes sense because PI R squared
divided by 2 huh we're there RDR the
side lengths of the right triangle so R
squared plus R squared equals d squared
Oh since D equals to R we can substitute
and simplify as follows I still
understand what lo little oh yes to our
little door is that ok so which
semicircle am I looking for it this one
that would just be this is the radius
for that one that would just be PI big R
squared right so oh I get it I think so
right so if I'm looking for this region
this is going to be PI big R squared
divided by two because R divided by the
whole circle is PI R squared so actually
that's PI big R squared divided by four
right that would be the area of this I
think when we're trying to figure out is
what's the area of this right and so the
area of that is if if that's the radius
it's okay hi little R squared divided by
two
I get that now and what is little R
squared if we know this little R squared
R squared plus R squared equals d
squared so D equals the square root of R
squared plus R squared which is this
divided by two which is the square root
of 2r squared divided by two that's what
R is and so then I now can say I could
plug this in right I can plug this into
little R squared so little R squared
this is the bottom is going to be for
the top is going to be 2 R squared I
multiplied by PI this becomes 2 pi big R
squared divided by 2 is the area of this
is that right the reai I scanned over
this on the subway I didn't actually try
to calculate it because I know the
question is now so we go to the
challenge is how does the oh I'm over
here how does the combined area of the 4
orange this is called a lune by the way
so this is special kind of shape called
a loon it's like a half circle with
another part cut out of it I would
really like to draw this but I think
it's kind of like a pretty pattern
each side of the square is the diameter
of the semicircle so the question is how
does the combined area of the four
orange loons compared to the green area
inside the square okay I don't know if
people will know any of the chat is
yelling me like I've done something
horribly wrong yet I usually get this
stuff wrong which is the way to learn is
to get it wrong you can get it right
eventually or not you just learn through
getting it wrong over and over again
which is kind of my life all right so
let me draw this diagram so I think I
can see it on this computer I think I
can figure this out so we've got one big
blue circle this is really the same
diagram I'm drawing again this is the
blue circle and then we put a square in
there so this is really this is this is
the same as what's there and then we
make these four looms which again I
haven't really drawn to scale so okay so
if this is we're gonna call this R right
so the area of the square the blue
square would be oh wait this is
the area of the square is the side
length times the size like so the side
length is the square root of 2r squared
right we already established that right
the side length of that square which is
this R squared plus R squared equals D d
squared and then if I take that times
that this side the area of the square
sorry its 2r squared
2r squared that's the area of the square
right we did that before oh you're over
here okay now if the looms area is this
we have four of them for know where is
it
over here we have four of them well
there's a PI in there I don't have a PI
in here for orange some is PI R squared
I know that's although this camera went
out
right I did this whole calculation
before and I've already forgotten oh
wait a second hold on I have to start
over here I hope start over here let me
start over here for a second the area of
this loon is half of the side length oh
my god I've lost my mind here I forgot
which one which where's my final answer
anybody know I'm like panicking this is
what how does he try to do math while
you're live streaming and you're really
oh you're doing let's start over I'm
gonna do this in tandem
all right we're going to say I'm just
gonna do this that this is our known
length our so this area here all right
this area here is oh I see what's gonna
happen this area here is PI big R
squared divided by 4
it's the subtracting out that I kind of
got confused now this this area here
right this triangle area right so this
is this this Triangle area is 2r no I'm
sorry R squared divided by 2 so this
little area here is this full area minus
R squared divided by 2 which would be 2
R squared divided by 4 which is PI R
squared minus 2 R squared divided by 4
right reason why I want to find out this
little area is because then once I find
out this area I can then subtract that
out I don't think I'm doing this right
somebody help me area of small circle
divided by 2 equals area of big circle
divided by 4
I need colors oh yeah I should get
colors
let's get some colors
okay
whoo this is fun okay purple so this
triangle here is purple this area here
is pink oops
and this I should really use oh I should
be using the same colors as in this in
the brilliant diagram no it should be
applauding but it's too late I'm using
my own colors then this area is green so
that area there is this is what's called
the lube so basically what I want to
know is what is the area of one loon I
want to multiply that by four and then I
want to compare that to the full area of
this this whole this whole square which
obviously now is if this is R squared
divided by two then the whole thing is
just 2 R squared there's four of them
all right so let me look let's look back
at the explanation for a second you need
to add the two circle areas and then
subtract the Triangle area oh yeah let's
let me go back to here because that's
giving me a nice little proof here that
it's once to give me oh right I forget I
don't have to get the area of the loon I
don't need to worry about the triangle
because oh you don't see what I'm doing
to get the area of the loon oh this is
so silly I'm so silly I knew I was doing
I knew I did this right the first time
if I just have the area of this I'm so
silly so hold on I have my colors what
colors do I need pink I don't actually
need to know this area of the pink right
because what matters to me
oh no that's not true right
the purple segment is a right triangle
yes it is a right triangle the pink
segment is called a segment it's a
segment no I do need that okay I do so
let me do this again
I can conquer this I could conquer this
I'm feeling feeling good about it
okay I'm gonna need everybody to help me
for a second first tell me that this is
correct the area of this purple right
triangle is our whoops R squared divided
by two right this is this area that's
correct right then so then the area of
this quarter circle with a radius of R
is PI R squared divided by four is that
correct
so the radiant then if I want the
segment this what I want is this whole
thing PI R squared divided by 4 minus
the right triangle R squared divided by
2 so this is really this total area do I
have this right am i right so far
Leonardo is writing you can find the
answer adding the square area and the
areas of the semi circles oh you know I
could make this easier you're right I
don't need to do this in this quarter
thing okay I I could do it as the whole
thing but yes okay okay so I'm doing it
in a in a bit of a okay so people are
telling me I've gotten this much right
okay so now let's get the green area so
now what I'm going to do is look at this
this circle let me get the black pen for
a second this half circle which has this
little R right I'm gonna call this half
of the hypotenuse of this right triangle
little R we know that little art that so
and if the whole thing we're D D equals
D equals the square root of 2r squared
right I did that before that's what that
done so little R then equals that
divided by two so now this green area
that's the full half circle equals PI
little R squared divided by 2 so if
little R is this this turns into PI 2r
squared divided by 4 divided by 2 so I
can actually just cancel out the twos
I don't like the way that I wrote this
I'm it's got an easier way to think
about this for my brain which is hurting
right now is just multiply this by 1/2
so so this is 2r squared over 4 divided
by times 1/2 which and these cancel out
so PI big R squared divided by 4 so that
is the area of this whole green thing so
if I take this whole thing I look at
this and then subtract this we're left
with this being the lunes area right PI
R square by 4 minus this this turns into
a plus these cancel out
we just have R squared divided by 2 so
the lunes area according to this
calculation is big R squared divided by
2 and now for the for the grand finale
we now get to say the looms area is R
squared divided by 2 so 4 of them for R
squared divided by 2 is 2 R squared and
now write the area of the square is also
that cuz remember a quarter of it is R
squared divided by 2 multiply it by 4 to
R squared the answer is they're equal
they're equal they're equal
they're equal alright we're going to now
go here and we say the areas are equal
you can hit submit oh yeah
all right now let me find my phone and
take a picture of the white board and
submit that normally I I'm low on I
would love to like code this and then I
thought would be fun it was actually
like code this event count the pixels to
sort of like prove that it's correct
which is not really a way to prove it
count the pixels of different colors but
I don't know where I put my phone to
take this is silly why I don't need to
use my phone I just take a screenshot of
this and somebody screenshot okay I know
how to do it you go to here and go to
here it's correct which is not really a
way to prove that I'm behind count the
pixels of different colors but I don't
know where I put my phone I think this
is silly why I don't need to know don't
phone oh there we go I just take a
screenshot of this all right we're gonna
take a screenshot of this should I be in
it oh I'm not in it I've just seen it
over there okay and we will copy this
video URL
I'm gonna add this image which should be
this screenshot I'm pretty sure God well
we make sure that's the right screenshot
could there be another screenshot and
then let's go to here what's that please
add a link to your sketch
let's do preview
okay let's do edit because this should
be a link wonder if it's a way to like
insert a YouTube video
right is there a way to I'm not gonna
worry about that let's go to preview
it's got the link to the video and I'm
gonna post it alright thank you for
humoring me to watch me struggle through
a little math problem I you typically I
like to tie these to a p5.js sketch but
I'm gonna leave that as a challenge to
you the viewer to make a p5.js sketch
that draws this shape maybe you can
animate it maybe you can you can add
some kind of extra explanation you can
share it with me in the comments thread
here if you don't have a brilliant
account you can sign up at brilliant org
slash coding train you can actually do
that right now cuz I'm gonna take a five
minute break and I'm gonna come back and
I think I'm gonna try to do I would I
didn't get super far with the processing
Java library but I think I might leave
it there for today so that I could do
the computational geometry coding
challenge so I have a coding challenge
ready to go and so I'm gonna come back
and do that so I need a five minute
break to actually like get some water
recenter myself read some random numbers
let me solve this Rubik's Cube and then
I will be back so I'm going to I'm just
gonna leave this here and I'm gonna
throw caution to the wind I'm going to
eliminate myself nope there we go you
don't see me I'm about to mute my
microphone and sign up at the link above
and I'll be back in about five minutes
one of these days all have a nice by the
way one's an animator out there and
wants to help make some animations for
like starting soon technical
difficulties get in touch get in touch
with me on twitter at Schiffman i'm that
might be someone I'm something that I'm
looking for someone to help make for
coding trade okay um and I'll be back in
about five minutes
mute the microphone
[Music]
[Applause]
[Music]
[Applause]
[Music]
[Applause]
[Music]
as always I always forget
[Music]
this dog this doc never forget the good
stuff I'm gonna do this stuff this stock
this dog the starter this start song
never forget the Vista
[Music]
I'm gonna say once again coordinates
[Music]
Cartesian coordinates
[Music]
and auto-tune and the internet will fix
that for me
[Music]
coordinates
[Music]
it's Cartesian coordinates okay I'm back
in zero minutes in negative one minutes
let's save this very important file now
let's just leave this one all right
thanks everyone let's see did anybody
add anything but wait I lost my chute I
think I met I meant to do is click on it
here we go oh come on people
still zero helpful zero interesting zero
brilliant
there's no least be a lot of confused I
should probably link to the actual time
code where I do it but all right I will
check this later I guess I can't link to
kind of link to this comment directly
all right that helped me out people I
need some emojis alright okay okay we're
quitting this yes
exit we are going to back to the browser
we are going to log in as the coding
code it will are right there we go
we're gonna go here set this up to 32 I
think is what I tend to do gift wrapping
convex hull it's gonna be the coding
challenge for tape you know what I'm
gonna do just give me a second here I'm
gonna start with some boilerplate code
okay
all right oh so thanks again to
brilliant for sponsoring this livestream
I encourage you to check out brilliant
if you have some time I am now going to
move on to the cue the theme music for
coding challenges I don't have one I'm
working on I'm gonna move on to today's
coding challenge so I will return back
to that processing library tutorial I
don't think there's actually a
tremendous amount more for me to do but
I'll I'll have to return to that next
week I'm glad that at least got that
started there's a little momentum there
but I don't want to leave today even
though it's now time for me to go
because it's already been over two hours
but I don't want to leave today without
doing a coding challenge and so I'm
really gotten recently interested in
computational geometry and the camera
went off I know I know you don't have to
say in the chat you don't say in the
chat I know it's off I know it's off I
am going to oh I'm definitely gonna need
the whiteboard I'm gonna go to here I'm
gonna go to the lawn I'm gonna search
for delante I think that's how you spell
it must not be how you spell oh yes it
is oh wow there's so many let's go to
this first one yeah
so this was suggested de l'année trail
because I'll I'm gonna maybe I'll just
start and I'll explain what I'm gonna do
so hold on a second everybody
gift-wrapping algorithm let's go here
we're gonna need the cross-product
I need the cross product and what's
another thing that I'm gonna need Oh
Matias made a full screen to the
brilliant challenge awesome I will take
a look at that soon thank you for that
and then why am I doing this
there was another URL that I wanted to
pull up but I'm blanking on oh I know
what it is silly me
first of all that's quit processing
so this is something oh I don't know why
it's that I implemented quite a while
ago that I just want to briefly show
it's not the algorithm I'm gonna use
today but I will come back to it where's
this console.log why that's in there
okay okay I think I am ready
is this the same pattern each time no
it's different
I forgot how it'll random seed in their
camera oh I definitely need to erase the
whiteboard
come back to me whiteboard camera there
we go
[Music]
okay start here why I say the long Hank
alright alright everyone
oh no I want to be here this would be
good to have some kind of like gift
that's wrapped like a prop but whatever
this is a good like holiday coding
challenge it's gift wrapping algorithm
all right
hello and welcome to a coding challenge
that's not gonna work what fine for me
the date that this was published in 1973
because I was born in 1973 and maybe
Jarvis published the gift-wrapping 2d
marching algorithm on my birthday and
then that would be like some kind of
cosmic alignment of how much you're
gonna fail at doing this all right I
gotta get started with this I really
gotta get out of here by 2:00 so like
this is good time for team kids all
right
especially cuz I really want to like
animate it like this which is really
actually the hard part but all right
oh hello and welcome to a coding
challenge today I'm going to tackle the
gift-wrapping challenge I'm going to
make this ko and I'm going to wrap it up
as a nice present so I'm going to hand
it over to you and hopefully we'll make
some something beautiful out of it or
you'll learn something are all that kind
of stuff that jazz alright so what is
the gift-wrapping algorithm so first of
all the reason why I'm interested in
this is this idea of doing an
implementation of something called
toulon a triangulation has been
suggested and talked about for quite
some time and I'm really interested in
tackling this the truth of the matter is
if I wanted to do a deal on a
triangulation I would most likely just
go and get to get a library that I that
does it for me but there is some value
in doing it yourself and I will get to
that in a moment when I start looking at
the gif traffic I'll come back to that
now I I have looked at this before this
is some code that I wrote a long time
ago for an example and this is a
demonstration of calculating a convex
Hall whole this if I did it correctly is
actually using a different algorithm
from gift-wrapping called the Graham
scam not a scam it's not a scam the
Graham scan and there are a variety of
algorithms for computing a convex all
there's the Chan algorithm and and more
and they have various different
efficiencies the gift-wrapping algorithm
is probably the least efficient but it's
a good starter one so let me talk about
what the what it convex hull is and this
is not the right pen let me talk about
what a convex hull is this is the right
hand
March 1st 1973 no it was published
before I was born then misses the point
it missed a point I don't know what that
is let me talk about what a conflict let
me talk about what a convex hull is
first and then look at what the
algorithm is and then we'll go and write
the code for it so the idea is that
we're starting with
and this I should say is an algorithm
part of the field of research called
computational geometry and I would
really like to do a variety of coding
challenges around different
computational geometry topics so if you
have an idea for one write it in the
comments so the idea of a [ __ ] of a
convex hull is first we need just a
random collection of points so if we
have a two-dimensional space and these
algorithms typically generalize to
higher dimensions but you know me I just
like to be in two dimensions it's sort
of my days where I used to be a mind I
didn't used to be a mine I wish that was
mine I don't know so let's say we have
this random collection of points so the
idea is that I want to connect these
points in some way so we have this idea
of convex and concave [ __ ] here's my
random collection of points now first I
need to make the distinction between
convex and concave so here is a shape
that is distinctly concave a pacman like
creature so to speak there is a a vertex
that is interior what is the definition
there is an angle sorry that is greater
I guess it would be an angle that's
greater than 180 degrees that's the
definition there is an angle but all of
these angles of the shape there is one
all of these angles that are made out of
the vertices of the shape there is one
that is greater than 180 degrees so a
conchae a convex shape I let's get this
confused but now that I know the term
convex oh I won't forget it again if I
wanted to turn this into a convex shape
I would eliminate this point and connect
these two points and now I have a convex
shape and a convex hull is a polygon
that you construct that is convex and
contains all of the points so I can i
ball this and I could
go here then here then here then here
now would I go in here no I'm gonna go
down to here here here I'm gonna go here
not gonna go here so this is essentially
the gift I just sort of did my own
performance in my with my brain of the
gift-wrapping algorithm I'm eyeballing
it I don't you know I think I got it
right but there's a proper way we can
actually calculate it and the way that
you do that lets get another random
sampling of points is by first starting
with and it's a point that we know is
exterior - what will be that that's on
the convex hull the way to start with a
point that we know that will be on the
complex allof vertex of the convex hull
is by picking either the leftmost or the
rightmost or the topmost or the bottom
most so a convention is just to pick the
leftmost so I can see this is the
leftmost point now what I want to do is
check this point against every other
point and whichever one is furthest to
the left right whichever one is furthest
to the left is the next point so I these
are going to be in some random order I'm
gonna check them in some order and I'm
eventually gonna determine that okay
which vector is most to the left it's
this one so now I'm gonna go here and
now I'm here and I want to do the same
thing but now I want to pick which one
is left of this - this relative to this
point and that's going to be this one
over here right we can sort of see like
if I draw a line out to all the points
if I sort them all kind of along a
radial path the one that's all the way
to the left will be this one and then I
just do that over and over and over
again until eventually I get over here
and I find that the one furthest to the
left is the one that I started with and
that's going to be my convex hull
I think that's a good that's that's an
explanation it works so yeah okay
back over here
coming back over to the computer on the
Wikipedia page we can see a nice
animation of this playing out and this
by the way is one of the reasons why I
like to write the code for these
algorithms without a library so
ultimately if what I'm working on a
larger project and I need to compute a
convex hull for some reason having a
nice efficient maintained computational
geometry of library is most certainly
the way to go and maybe I'll try to find
some examples of that there's plenty in
JavaScript that I'll link to in this
video's description but most of those
libraries will just compute all the
points all at once and hand them back to
you and if you want to create some type
of interactive explanation of the
algorithm some kind of like or animation
whether it's for artistic purposes or
educational purposes you're gonna have
to write the algorithm itself and it
actually is harder to write the
algorithm and animate it so I'm going to
try to do that as part of this coding
challenge rather than write the
algorithm all at once
that it just like calculates it and
shows the end result I want to be able
to see something like this animation
playing out and that'll make this take
quite a bit longer I'll be more to
figure out but I think it'll be more
satisfying in the end Simon I am looking
I right now I'm looking at the YouTube
chat there's a Lee Lee iOS video on the
I should refer to that yeah
gift-wrapping algorithm the appropriate
definition for this examples when you go
around the shape you never turn left yes
that's probably a better way of
describing it what's this there's some
World Cup game going on it's not what's
happening some other stuff going on in
the chat having to define the notion of
turning left right for the purpose of oh
okay
all right all right all right was my
explanation of good enough I think it
was good enough all right
oh okay actually I'm do the way I'm
gonna do it as Oh N squared right
because I'm going to be checking all the
points always how is it only onh
the inner loop checks every point in the
set s and the outer loop repeats for
each point on the hull oh right it's onh
because you don't need to do every it's
the outer loop is just until you get to
the end okay great
no the way I am gonna do it is onh okay
great it's not om squared okay
okay each time so yes yes okay great I
also should mention that this 2d case is
known as the Jarvis March invented by RA
Jarvis and the time complexity is o NH n
being the number of points and H being
the number of points around the convex
hull and the reason it's that is because
for every point around the convex hull I
have to check all the other points so
that the number of points around the
hall times all of the points it's a
little bit better than ONS weird but not
by much and again there are plenty of
other more efficient algorithms for
doing it this is just the one that I'm
starting with
okay alright let's actually write some
code so I'm yeah let's start writing
some code so I'm starting with a little
bit of boilerplate which is just setting
up an empty array putting ten random
points in the array and I'm using the p5
vector object which I'll make heavy use
of in this in this let me do that again
alright let's write some code so I'm
just starting with some boilerplate code
I'm I've got an empty array
I'm putting p5 vectors in it I'm using a
p5 vector object to store a point and
then I'm just drawing all the points on
the canvas itself so the first step that
I want to do is find you know you could
say I could run this over I'm going to
get a random collection of ten points
and I mention I'll do this with a much
higher number of points but let's start
with just ten so the first thing I want
to do is find the leftmost point and an
easy way for me to do that would just be
to sort the points so I can actually go
here and I could say points dot sort and
the JavaScript sort function takes a
callback function it's not really which
is a comparison function which compares
two elements and so I'm gonna say a
comma B I'm going to use the arrow
syntax if you haven't you seen the arrow
syntax before I'll refer you to my video
on that I'll say a dot X minus B dot X
so what this is doing is it's returning
a positive number anytime a is to the
right of B and a negative number anytime
a is to the left of B and that should
make it such that I can create a global
variable I'll call it left for like the
leftmost point left equals points index
zero and now if I were to say you know
stroke zeros 255 0 and say point P X P
dot y I should see that the left point
oh sorry left X and left out why I
should see that the left point is green
so there you can see that and every time
I run it whichever point is most to the
left is going to be green
right now I need to find the next point
on the convex
and remember I want to animate so really
if I were to just go to go back to the
Wikipedia page and look at the
pseudocode let me take this down so I
see my nose does the Itchy thing as soon
as I start getting nervous about what
I'm doing if I were to go back to the
Wikipedia page and just look at the
pseudocode you're gonna see everything
happens in just a set of nested loops I
don't want any loops to happen because I
want every time through draw I wanted
the draw p5 draw loop I want to draw the
next stage so what I need to find what I
need is
so I'm going to need another array which
will be the points that I'm placing
along the hull I want to say a left can
be kind I think left can actually be
thing I want the original that like the
leftmost
I'll call this leftmost and then we call
this current hull current vertex like
that's the current vertex that I'm on
checking with and then I want to say let
and then current point so vertex I'm
going to use that term when it's of
pacifically of vertex along the whole
and point is the current point that I'm
checking to see if it's the next vertex
so maybe I also need next vertex so I
think these are what I need and I'm so
leftmost is just going to be this sorry
is this and that's also the current
vertex is going to start at they'll as
the leftmost
and then actually the current point is
really an index so let me call that
index and this is next vertex and index
is going to start at 0 and this is
leftmost
and yes let me make the leftmost point
also a little bit bigger oh I already
mean we can make the leftmost point a
little bigger okay and let's also do
current vertex as blue so we don't see
the green one anymore because the
current vertex and I should make these
brighter so let's just do that the
current vertex is now being drawn over
the leftmost vertex okay what's the next
step
I'm gonna need two indices all right so
I'm gonna make a guess that the next
vertex is just points index one okay I'm
gonna make a guess when I'm starting
that the next vertex is whatever happens
to be the next point in the array it's
probably it could be by coincidence but
it's probably not going to be and I need
a I'm confused here I'm really thinking
about this you only have to check the
point so you haven't reached so far yes
I'm aware of that so I could just but I
do need that first point still I do need
to like sort of always include the
leftmost point so I'm gonna keep that in
there
real let me I'll take it out
yeah
and then actually the one that I want to
check is then at 2:00 so the leftmost
point is zero the one that I'm guessing
is going to be the next point is that
one and then I got to start comparing
everything at two so let's draw just for
the sake of argument here I want to draw
a line from current vertex to next
vertex and let's say stroke 255 stroke
weight 2 so we see look at that oh no
because they're sorted so it's a lot I
am seeking to get lucky a lot of the
time because they're sorted but you
could see in this case that's not it's
really got to pick probably this one or
that one so that's where it's starting
now what I need to do is I also want to
draw a line with the one that I'm
checking so I'm gonna say checking is
points index points index then I also
want to draw a line to the one that I'm
checking so we can see those are the two
that I'm comparing so these are the two
that I could pairing and let's make this
stroke so this one's going to be like
green and the one that I'm checking will
just be white okay so this is what's
happening right now
I need to compare these two I need to
figure out which one is to the left and
by to the left
I mean basically like counterclockwise
rotation and guess what there's a really
nice way that I can do that and the way
that I can do that is with the
cross-product
all right
the cross product is a particular vector
operation that you can apply on a 2d
vector of two vectors that are in the
same plane and it will return to you a
vector pointing perpendicularly in the
third dimension away and so what's
interesting about this is I'm let me let
me let me show you what I mean and I can
never remember which is which but it
doesn't really matter because we just
need to know that it's one or the other
if this is vector a and this is vector B
the cross product of these two vectors
will give me a vector pointing out this
way this would be in a like a left
handed system I guess cuz that's my left
hand no no that's left handed would
point the other way right handed I'm
pointing out I think that's how you do
it
the point is it's pointing out but if I
were to say this one is B so I'm doing a
cross B and this one is a then I'm gonna
get the cross product pointing in the
other way so I just need to test is Z
the Z value of a cross product B is it
greater than 0 or less than 0 if by the
way they were collinear or all along the
same path you'll get 0 and we're just
gonna assume for this case that I'm
picking random points none of them are
gonna be collinear probably sort of work
out anyway but so if it B is to the left
of a if Z is less than 0 it's to the
right of a if Z is greater than 0 or the
other way around but I'll just test it
and its flipped anyway in a computer
graphics system so it'll work itself out
let's go try that so if I go back to the
code what I need to do is I need to
create those vectors so I'm gonna say a
is p5 vector subtract and I want to
subtract now what the current vertex no
next vertex - current vertex that's one
of the vectors and then B is subtract
checking - the current vertex
then the cross product which I will just
call cross is a cross B I could
implement this myself but thankfully
it's oh I'm not in thank you everybody
ah well I'm not doing a screen recording
either I will have to do that again
sorry everyone right hand rule I'm gonna
get flamed in the comments for my miss
so let's write write the code for that
so what I need is I need those two
vectors so a is a vector that points so
I can use the subtraction function
because I can point from the next vertex
what is currently the next vertex to the
current vertex
that'll be vector a and then B will be
pointing from the what I'm checking to
the current vertex right and then then R
the cross product is a dot cross B so I
can implement the math for the cross
product but it's actually just there in
the p5 library for me and then I just
want to say if cross is greater than
zero then probably something like next
vert so let me not do anything right now
let's just see let's let's just
console.log the cross product and say no
loop so let's see we got o o cross dot Z
the Z component we got a negative condom
you're going barabbas all right so we
got a negative number so the one that
I'm checking is white the one that it
currently thinks is green so is that
right current one is green so if it's
less than zero then that's to the left
so if cross dot Z is less than zero then
next vertex should actually be the one
that I'm checking and then I just want
to say index
equals index plus one there we are now
of course so you can see that as it goes
through it's always gonna find the
correct one is checking them all let's
let's make a lot of points so it takes
longer ooh that was weird
why did that mess up it found it like
instantly but it's checking them all I
just yeah it's gonna find it pretty
close because they're sorted but I think
it's doing it correctly now something
that I want to add that I think will
just make this a little visually easier
to follow is let me make a little
variable called buffer and I'm gonna say
pick a point between buffer whoops
buffer sorry buffer and with minus
buffer and the height also between
buffer buffer and height minus buffer
and let's make that buffer even bigger
so now the points won't get picked super
close to the edge so why is it getting
is it not making it through everything
oh it's making it through all hundred
all right
people are giving me some interesting
comments all right
okay now we need an exit condition
so if index equals points ah shoot
so now I definitely need an exit
condition so I could say if index equals
points length I've gotten to the end of
the array and I could reset index back
to what this is the question
oh I should put it in the hall
let me let go back to do that again
so need to move like a little bit over
am i standing in front of the code I
don't think that I am but let me just
give myself a little bit more so clearly
I need an exit condition so I'm gonna
say if index equals point length that
means I've gotten to the end of the
array let me at least say no loop here
so I'm gonna like just stop it from
animating once it gets to the end and
let me just go back to like many fewer
points just go back to 20 we'll do that
pretty quickly and so what should happen
is hull should get the next vertex did I
put the current vertex into so hull
should also get pulse should get the
current vertex so now there are two
points in the hull the current vertex
should equal next vertex and then I need
to reset index back to something so
let's also now add something where I
draw the hull so I'm gonna say begin
shape stroke let's have the hull be blue
begin shape I'm going to draw a let P of
hull and I'm gonna draw all the hull
points and shape and I'm not gonna say
close but I am gonna give it a really
light fill so I'm gonna say fill also
have it be blue but with like a lot of
alpha so am i seeing it I think as I
said no loop let me put all the drop
mail
want this out for a second
Oh because it's only two points and it's
after okay okay okay
all right so I'm not actually seeing the
hole yet because only two points are in
there and I'm drawing it before I'm
drawing the green line and the white
line so I could at least say like stroke
wait for here and then I think I don't
know why am I not seeing I think it's
actually not even looping around I'm not
gonna worry about that okay so I'm not
actually seeing the hole yet because I'm
drawing it before I draw these other
lines and I've stopped the looping from
looping but the real question is here is
I need to then go and check for the next
point so I need to figure out what to
reset index 2
oh I also that's they didn't have that
there
oh why then I need to then I need to add
vertex and I don't think I'm gonna see
the hole yet because I've only drawn two
points so far and I've stopped the loop
from looping so let's let's see what
happens what if I just reset index back
to zero and turn off no loop okay it got
stuck so I don't want to first of all
it's two Eagles that should be equals Oh
interesting so look at that it's doing
something but there's a problem
so resetting it's like it keeps checking
but it keeps finding the same part of
the convex hull over and over and over
again so I can't reset index back equal
to zero because ultimately I don't want
to check these two points again I do
actually want to leave this first one
because that's gonna be my end condition
but let's not worry about that right now
let's actually do something where we
remove the vertices from the points
array when I put them in the convex hull
just to see what happens
[Music]
but
so hold on
sup array JavaScript there are remove
and now I can splice but can I just give
it an object and it takes it out splice
just uses index values or I could say I
could just skip it if it if it's
included or oh I know what I could do
oh I know what I could do I could start
at if I don't want to remove it I could
start at the the object the the the
vertex after the one that I just added
I just want to actually ignore the last
one I put in I don't need to ignore them
all I just want ignore the last run I
can't ignore them all but I want that
first one to be included yeah make a
check array yeah okay
so we can see this is just finding the
same vertex over and over again because
exactly checking against itself and
whatever cross product vector I guess
that itself is probably give me zero
back or something so it's always gonna
work
okay okay I know what I'm doing here I
know index equals and it's not if index
equals point length okay I don't want to
check the same vertex yeah I mean I
could just eliminate checking the
current vertex why don't I just do that
let's just try that
that'll be simpler so you can see it's
kind of picking the same part of the
hole over and over again because it's
allowed when I set index back to zero it
itself is one of the points it's going
to check so I think I could probably do
something here that just say as long as
checking is not equal to the current
vertex and then I can put this all
around this this should fix that
oh no it's still stuck
yeah I know I could ignore all them I
don't want to because I want to oh but
then I could just check if that didn't
work
why is that not working
you
Oh Oh next vertex Oh what next vertex
needs to be something not what it
currently is that's why
next vertex needs to be set back to
something else it could actually just be
the leftmost I know for some reason I'm
stuck I everyone's telling me to just
take the point out of the list but I
kind of don't want to because I want to
keep the I want to keep all the points
in the list because then I want to have
I could make a step I don't know why I'm
stuck on that I should just take the
point out of the list all right and that
because then I have to store its index
and splice it all right I'll do that
though maybe I should just admit that I
have to do that all right
so you can see that even though it's
doing this over and over again it is
stuck so even though you've seen that
it's doing it over and over again
it's stuck just picking the same vertex
over and over again because that one is
one of the ones I'm checking so what one
way I could approach this is remove that
one so the easiest way to do that would
be with splice so I also would want to
pick the I'm gonna say next
in the next vertex I also should keep
track of that next index we just set
that equal to negative 1 as an initial
value and then when I find it I want
next index to be that index value and
then I can say points dot splice next
index and just take that one value out
now I'm still stuck so the reason why
I'm still stuck is because next vertex
that it's comparing everything to is
still that same one that it got before
so what I should do is just reset next
vertex to something else
like I'll just put it back to be that
leftmost one there we go so now you can
see it's working now it's stuck when it
gets to the end but guess what the
reason why is as I know when I'm done
right I am done if next if it actually
picks next vertex as the same as the
leftmost so when it finds that one then
I can say console.log done no loop and
then otherwise do all of this other
stuff that I'm doing so let's see how
this goes wah so let's make this more
interesting by giving me 200 points and
we can kind of take a look at this going
now it takes a while to check all 200 so
this should probably get sped up I'll
allow speed this up for you
where's my ukulele tuner is it in here
somewhere I haven't learned any new
songs I can tune it by ear it's
definitely out of tune but I have a
tuner somewhere I don't know where it is
oh here it is
uh-oh I think I may need a new battery
for my tuner so the reason why though
I'm getting a question the last vector
should connect oh I should add it so I
would just use the clothes so the last
vector is not connecting so what I
should do is I should actually always
push the next vertex in so that that
first point is in there twice and then
it will connect Oh
[Music]
wait what did I just do wait why did I
just break it how did I just break it oh
I didn't break it it just takes forever
should I ruin that whole speeding up
thing look at ik again for yeah I I got
confused for a second so all right so
Matt to that whole thing you can
disregard so is being asked for me why
is it not connecting there at the end
well I could actually make it connect by
changing the way that I'm drawing it to
close so somebody's asking why is it not
connecting there at the end and actually
one of the reasons why it's not correct
connecting is just the way that I'm
drawing it if I add clothes here to end
shape it will connect those last two you
can see that they're now they're
connected but it's also like closing it
as it's going so maybe what I actually
want to do is just change it to always
put the next vertex in so that that is
oh and but it's not then I say no loop
it doesn't draw it again maybe I'll take
out the no loop I'm just curious
yeah
removing the date I didn't actually
remove the data right or did I splice
them out I can't remember how I did it
oh I did splice so I should really like
put this into a separate array and then
add them back in but whatever no I will
mention that that's that's a very good
point
oops
I don't know I'm like trying to make a
this work for Matt to it to be edit for
it to be edited well yeah you can see
that the points are gone
which is kind of a problem and so in a
way it makes more sense for me to just
leave them in there but skip checking
them like like Simon was saying
[Music]
trying to think of what I want to say
so one issue that's being pointed out to
me from the chat which is really true is
it's kind of a problem that I'm doing
this splice because I've kind of
corrupted the original dataset like I
don't have that original set of all the
points I have the convex all but I no
longer have all the points so there's a
couple ways I could approach that for
example I could just like keep all those
points that I'm splicing out in a
separate ray and add them back in but
what might be a better solution is
adding is I'm actually already have this
whole point this whole I already have
the whole I already have the whole array
so let's try this a slightly different
way instead of splicing it out what I'm
going to do oh that worked anyway why
did that work
no I don't actually need to splice it oh
it's actually fine that's weird
it's never gonna get stuck now I don't
actually need to do this place does
anybody understand why that worked
because it in theory it's gonna check
against itself if I don't take it out
can I split it somewhere else
just to make it more efficient I don't
really care about efficiency
let's take forever
let's assume it's gonna get stuck at
some point but I don't see it getting
stuck the problem was next vertex okay
yep okay great
so Matt yeah there's a huge when you're
looking at this later there's a huge
amount of stuff that you can kind of
ignore because I'm gonna just go from
I'm gonna just explain that again
so the chat actually is pointing out to
me and rightfully so that this splicing
out of the one that I saved is is
problematic because I've corrupted the
data itself I don't have that original
array of points anymore and the context
that I might be doing this vid that
might actually be important so I could
keep that intercept array I could add it
back in but actually it turns out I've
just discovered this through some
debugging that I don't even need to
delete it the problem was really the
fact that next vertex was not reset back
to the leftmost so it's actually going
to work just fine every single time with
split without splicing that out as long
as I reset the next vertex back to like
leftmost so that it sort of skips
getting stuck so let's just make sure
this lets watch this happen now with
like 200 points and I will speed this up
for you
[Music]
another battery
[Music]
[Applause]
okay we can see that it's done and it
looks correct I'm pretty sure I did this
correctly cuz it seems to be working of
course this is less efficient because
I'm checking extra points that I don't
need to check because they're already
part of the convex hull array so I can
add something to check to skip those and
but but this isn't even the most
efficient algorithm the first place I
just want to get this idea to work so um
you can see that it doesn't actually
connect at the end because I didn't I
don't have clothes as one of the in n
shape so I could add that in let me just
put that in for you you'll see what this
does differently speed this up again
hmm something is wrong with this ukulele
tuner because I just put a new battery
in
all right so you can see what it's doing
now it is always closing the shape with
whatever the latest vertex is but really
while I have implemented this and gotten
this working I have not picked nice
colors have been really thoughtful about
the stroke weight or how this takes a
very long time to animate so it's nice
and I'm kind of animating every single
possibility but I think you could
probably make something pretty
interesting out of this by changing the
way you draw it or thinking about how
you might make this interactive or maybe
the user can add points there's a lot of
possibilities but this will be a nice
building block a foundation to hopefully
do more computational geometry coding
challenges in particular eventually I
want to build a triangulation around all
these points and then figure out how to
make Adaline triangulation which has to
do with a way of having all the
triangles the circle that fits any given
triangle does it include any other
points that's known as a circumcircle so
I I think I will come back and do a
coding challenge just to do the circle
that fits any given triangle it's a
pretty quick thing that I can show you
but there's a lot more to come with this
make your own version of this share with
me go to the code and trade calm to the
page with this coding challenge and
there's a there's a instructions there
of how to share your version of this
maybe you could make this tie this to
sound or something else that I can't
even possibly imagine now I look forward
to seeing what you make and oh also you
might want to investigate one of the
other algorithms in particular the
Graham scan algorithm maybe I'll come
back and actually just do that as a
video also but if you if you make a
version of that please submit that as
well ok thanks for watching see you soon
okay I think this is done there is a
video to be made out of this I think
it's almost more interesting with fewer
points because of the way I'm animating
everything
all right so everybody please bake a
version that doesn't check the points in
the blue area yes so all the I ever I I
appreciate what everyone's suggesting to
me there are so many added efficiencies
to this algorithm but I wanted to just
literally do the basic gift-wrapping one
which I think I have done I will come
back you can actually I'll publish the
code for this one this is the Graham
scan out and we can see how much a
faster it is although I guess I'm
probably not animating every piece of it
maybe but so I I will come back and
maybe do that or release this so I think
I'm done for today let me check I'm just
curious where is my brilliant challenge
there was some things I just want to
check which is the one I already did it
which is larger I want to get mine up at
the top people of course mine's not
necessarily the best oh there it is
alright I got helpful and interesting in
a comment thank you the coder five five
five zero Nilson yes
all right okay where was who somebody
somebody in the chat me was my TAS
posted a link to a p5 sketch but don't
know where that one
alright I've really got to run this 215
oh my goodness this has been a very long
livestream over three hours out of this
will come a video part of a new series
of making a processing library also this
convex hull coding challenge will come
out and then oh the final module three
video ah thank you for asking this Arif
so let me go back here let me find the
bookmark bar the how do I get it to show
so let me go here so I've been
neglecting I know I I guess I'll release
this on Monday then it's already there
though I'm sorry that I kind of got
sidetracked but this new playlist that I
released called working with data and
API is in JavaScript it's a full core
that's kind of like a follow-up of my
intro to coding it barely not with p5
it's with node and native JavaScript
uses p5 in a couple videos there's a
trailer for it here and then a whole set
of videos they're all public this
playlist I don't know why this playlist
is also unlisted so you can actually
find it I think if you just go into this
video well and go to the description you
could just go to the next lesson right
here they're all available I just hadn't
made them all welcome to another video I
have one more thing just there sorry
that that wasn't clear I find that if I
really I don't know that this is
actually true but my strategy with
YouTube is even if I have like 10 videos
ready to go I don't release them all at
once because then their people's
notifications just get the latest one
it's confusing to find them so I kind of
like act as if they're coming out one
per day but often if it's ready or even
if it's being prepared to be ready like
I haven't put the English captions on
yet or the thumbnails not done then it's
just set to unlisted but you can usually
find it in the playlist ok something
similar to gift-wrapping in 3d using
claims and two points yeah probably
alright I've really got to go thank you
so much I this has been fun I hope that
you enjoyed this livestream that it was
good you got something out of it alright
[Music]
this is my gift to you you will now have
a green screen of me solving a Rubik's
Cube
of course there's green on the rubix
crew which is really gonna mess you up
I'm hoping I can solve this before the
music ends that's my goal
one of these days I'll learn some actual
speedcubing techniques this is basically
a beginner's method I didn't make to do
that Daisy so let's skip that one step I
guess I make it slightly more advanced
my son is turning 11 and I asked his
grandparents to get him a new cube it's
like a expensive fancy speed cube 3x3 so
of course I'll just be using that
seriously
Oh getting so unlucky
Oh what do I do with this configuration
it's like I never figure out I just do
it until i get the thing we liked I got
it oh I messed it up I think I had it
further solved and I thought I did
there we go oh yes I beat the song so I
don't know that was about three minutes
if I was about three minutes okay
missed easy saw with 32 I still the
things that things that are not so great
about mic technique is one I I can do it
relative to a different side but it kind
of messes with me so I'm I get messed up
not us so I'm so I'm not really
examining for like which is the best
side to start with and I'm just yeah I
also like some of the end stages I only
know a couple of the algorithms like
only know like the clockwise one to the
clockwise one multiple times says I
don't know the counter clockwise same
thing to do it twice set of ones that
doesn't make it very efficient
all right so other things I know I have
trouble leaving but I really do have to
go
I can maybe try and take one or two
know that I'm I probably not gonna get
to this day because I took so long doing
this live stream but if you were I will
be doing a Members Only recording
session just a green screen recording
session as I mentioned to record some
interstitial explanations for the neuro
evolution car challenge so stay tuned
for that take a look at the community
tab if you're a member or or if you're
in in the slack channel as a patron you
can check that as well
thank you everybody so more I could
could you could do more on sweep line
algorithm okay that would be great so I
will be back for in terms of schedule I
hope I plan to do one live stream again
next week I haven't set a date for that
yet the best way to find out is either
to subscribe as a member or patron I
like post my thoughts on that as I go in
the slack channel but you don't need to
you can just subscribe to the channel
and click the alarm bell and pretty sure
it gives you a notification when I
schedule it now you usually try to do
that at least 24 hours in advance so one
day next week I will be it might
actually just be Friday the very last
day of the week but hopefully I'll do it
sooner I'll be doing one last livestream
for the month of June and it's TBD
what's gonna happen for July in August
but I will be working on it's actually
would be a good thing if I can't live
stream for July and August and I'll tell
you why this book really needs a new
edition it needs a new edition to be
ported over to JavaScript and it needs
new material about neural networks and
neural evolution and I think I could
actually accomplish that in July in
August if I'm not live-streaming and I
could use that time that I would be to
be just like working on the book because
I've said this for like three years and
I've basically got nowhere so I'm gonna
work on this on Monday and this is what
I will consider as a benefit to people
who are members or patrons I will send
you early drafts and four
of the new book and hopefully the new
book will come out until always be
available for free it's just if you want
the early versions getting those out
over the summer all right I know but you
could always just unsubscribe for me if
I'm not producing enough content that's
fine with me too okay thank you everyone
and by the way so if it's unclear you
can just the book is available for free
if you just slide these to zero of
course if you're able to support that's
great or and it's also there's a HTML
version of it but it's pretty out of
date and I need to fix it up okay people
are asking about what I do outside of
YouTube live streaming so I will just
mention this before I go I teach at a
program why is the internet down did I
lose the internet or is like the ITP
website down No who knows I teach at a
program there's two programs that issue
ITP is the graduate master's program ima
is the undergrad program there's a Tisch
School of the Arts so correct I have
definitely not a computer science
professor I don't even know what I am
but I do teach at a university a very
big institution New York University and
that's where I actually am right now and
and this whole program is moving to a
new building in Brooklyn and that's
actually why I'm this face is going away
in a new space is being set up where I
can hopefully have some new equipment
and stuff so stay tuned and I will see
you in the future all right goodbye
everybody I will play you out with this
dot song after the Perlin noise silence
good let's play that one first
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 two
one three I pick nine a lot apparently
but with curly noise I might pick
numbers like this two three four three
four five six five four five
seven five six seven five six seven
eight nine eight seven this is like boys
[Music]
like girls and boys before to depart
[Music]
with curly noise I might pick numbers
like this
[Music]
by purling noise that is totally noise
so this is hurling noise that is Hurley
no this is this is Hurley noise that
it's Hurley no so this is Hurley noise
that is hurtling know her Perlin noise
that it's Hurley more this is Hurley
noise that it's Hurley no this is this
is Hurley noise that it's Hurley so this
is Hurley noise that is her early early
early early early early that is
currently this is hurtling that is early
early early early early it is but week
early noise I might pick numbers like
this
[Music]
this is like a noise I always forget
[Music]
this stock this stock it's fun never
forget to this stop I'm gonna do this
stuff this stock this dad this star this
stop song never forget the Vista
[Music]