[Music]
okay okay okay okay okay now you can
hear me right it's never a kodick train
without I know I just got to wait till
the chat like the other wait till the
chat catches up and realizes that I am
talking that you can hear me now ah
still talking to himself no joke okay oh
I just got to wait for this all right
[Music]
all right let's let's let's let's begin
again hello good morning welcome my name
is Dan and this is the coding train oh I
said so many interesting and important
and funny and elusive illuminating and
exciting and magnificent things that I
cannot possibly remember it's not a
coding train if I don't start with my
mic muted by accident every once in a
while anyway so why am I here what's
going on it's Monday I'm wearing a
t-shirt this couldn't possibly be the
coding train it's like cold outside I'm
wearing the t-shirts see I had a whole
thing
good morning and welcome to a very
special edition of the coding train on a
Monday so it's been a while since I've
been here I haven't done a live stream
for several weeks now I was at this
wonderful event that was really fun and
exciting called thinker con I'm wearing
the thinker con t-shirt and so I was not
able to livestream on that Friday and
then this past Friday it was a holiday
here in the United States other what
known as a Thanksgiving so I was not
able to livestream on Friday and I just
I just I felt the the the sort of need
to put some ideas to typing onto screen
to Internet
so welcome so I'm here this by the way
is actually live I noticed there was
some confusion at the beginning of the
chat before asking is this a premiere or
is this live you can have something
recorded that is premiered live that you
can chat with or you could actually be
live or I could be live but I'm actually
30 seconds in the past by the time you
see it and then you could be watching
this it's a point in the future I
recorded there's so many possibilities
that's so confusing but right now at
this very moment I am live here and I am
going to program some stuff so I'm
checking out the chat so I'm not gonna
be here for super long I will go back to
my usual Friday schedule I do I am here
though to talk about a few things for at
least an hour let me open up a web
browser and let me first go to something
which I'm very excited about so you
might have recently remember that I did
a challenge a coding challenge where I
attempted to create a logo interpreter
logo being the programming language
invented in 1967 where you can control
this little turtle that moves around the
screen and make graphics and I did my
cruddy little version of it that I
thought was my best attempt on my
channel and then you the people created
something unbelievable
so I'm gonna go to github.com slash
coding train slash logo so this is the
no I'm not signed in but that's fine
this is the community version I'm gonna
go here to contributors all of these
people have contributed code to this
version of the logo project and if I go
here and click on this live web demo
link I will be here and you'll see look
at this okay there's like a design
there's the actual syntax highlighting
there's a little menu here where I can
like pick look and it supports color it
hexadecimal with repeat and syntax
highlighting and I can look at these
different I can look at these different
things that are here and I could type my
own look at this the coding train logo
is here this is unbelievable I don't
know what this this but does recenter oh
that's crazy oh I can like move it
around this is just unbelievable I know
how to do all this stuff it's
unbelievable to me so thank you everyone
I'm really excited about the future
possibilities of what we can do in this
channel using this so so I will try to
do this periodically where a particular
coding challenge is put into a separate
repository that people can contribute to
I don't have difficulty managing all
this stuff and I'm figuring out new and
interesting ways of doing that for
example and sometimes someone just
emerges the tasteful toasty on github is
now the
has permissions to this repository to
review and merge pull requests so that's
really exciting I do also want to
mention then though that if you go to
the coding train comm and these are the
two these are the two-part coding
challenges that for any of these
challenges you can also submit no you
can also so in addition to contributing
to maybe a community version if you've
made your own version that's hosted
somewhere on your own you can submit
that as well so I don't know yeah you
can see look at this here I think I
showed these already but there is a 3d
logo experiment that was submitted here
which actually look at this this is
amazing that submitted by Dave be soft
calm which implements a version of logo
where you can run it run it with a 3d
render oh my goodness so so much amazing
stuff ok so I wanted to mention that
what else is coming coming so I am going
to it is almost December and I am
planning to do a holiday extravaganza
but waiting mean I have no plan yet and
that will be a fundraiser for the
processing foundation so I just want to
mention that you don't need to wait for
the fundraiser processing foundation is
a nun for-profit foundation in the
United States that supports a variety of
initiatives you can see all the
information here on the website and if
you go here to support you can find a
way to support so I will do a fundraiser
at some point for processing I think
tomorrow is giving Tuesday so pre giving
Tuesday announcement there you go ok so
the next thing that I'm going to do is
the chaos game
okay let's move this so many
possibilities here oh I like this
oh we can make this one look at this oh
boy boy boy so many oh ok so the reason
why I'm doing this is at the finger con
let me let me thank a few people let me
open up thinker con here so I want to
thank in particular the organizers of
thinker con smarter every day Destin if
you're not familiar with a smarter every
day channel you probably would enjoy it
Sabrina
Emily and a Henry from minutephysics I
don't know why I don't see Henry here
and Robert Quaritch from radio lab or
the organizers of this conference it was
really fun I got to see the festival the
spoken nerd which was mind-blowing the
awesome I mean I am the target audience
for that joke it was really fun
and I was lucky enough to get to do a
short 10 minute demo I did this demo
with James loss let's see author of the
I think it's the algorithm archive I
think that's the name of his project I'm
pretty sure I'm pretty sure that's a
project he has a project like this it's
got to be the algorithm archive right oh
yeah yeah yeah okay
and his YouTube channel is Lee iOS OS
and I've mentioned I've mentioned his
channel before because I used his video
on the hypercube to create my hypercube
challenge he also has a twitch channel
where he does a lot of live streaming so
so I'm gonna mention these things
algorithm archive thinker Khan
so we did a kind of coding competition
we had 50
and each program the Chaos game next to
each other he was using like Julia and
some kind of crazy in VI or something
text editor and I was just using my
usual p5.js web editor which I'm also
going to use right now let me just do
this okay and I'm going to call this a
chaos game chaos game number file there
is also a number file video video which
I will reference okay
all right so this is what I'm going to
do today so Johnny Joestar asks is this
not supposed to go on twitch to know so
I do not live stream to twitch at one
point I was live streaming to to
multiple platforms and I for for better
or worse I have sort of landed on
YouTube as my primary platform for both
live-streaming and shorter edited
versions of things that happen on the
live stream so let's just get started
here playing the chaos game oh oh oh
before I forget how do I find this okay
a doctor circuit I think twitter.com
doctor circuit doctor circuit sb espen
Sunday Larson is a coded train viewer
musician programmer from Norway has his
own YouTube channel that you could find
created for me music ever that I will
premiere at this moment
okay thank you
spen for this amazing to know how quiet
if that was loud super loud or super
quiet but I on using that off okay all
right
let's see Cass game coding challenge
this is I think gonna be finally I'm
gonna do this in two parts because I'm
going to do a really simple version with
just a triangle first and then I'm gonna
do another version with a more of a
variety okay I'm looking for my train
whistle here it is
alright let me reset I almost want to
have a timer here but nothing ever
nothing good ever comes from the timer
okay the volume was pretty good I
wouldn't change it okay all right
hello welcome to a cup okay that's okay
that's so good okay me me me me me me me
me my alright hello welcome to a Cody
couch coding challenge last last try
last try everybody hello and welcome to
a coding challenge the Chaos game doll
alright so why am I doing this coding
challenge I recently was lucky enough to
attend this amazing event finger Con in
Huntsville Alabama thank you to smarter
every day and the other organizers of
thinker con this was a mind-blowing
event and at this event I was I had the
chance to do a live demo of some coding
in front of people it's a rocket was
nuts was a Saturn rocket look kind of
like this and I did this with James
sloth who is the author of the algorithm
archive has a YouTube channel as well
you might remember references to his
youtube channel in the have his youtube
channel up the iOS OS know what is a
hypercube
come on seriously seriously
what happened to his was always the
first one
look here's mine how come I don't have
my B you too premium on just sign in
this is oh boy oh boy don't I have
YouTube premium ok everybody just take a
moment here we go here we go there we go
learning is something I've always
enjoyed ok hold on a sec I want to thank
the right people here don't worry this
is this is all gonna happen in a moment
but if I have a little okay so Destin
Justin smarter everyday Sandlin Dustin's
sand Lynn Henry Henry minute physics I
got to get everybody's name that I want
to thank Henry Reich Emily graslie
Emily graslie Sabrina Cruz Robert
Krulwich
okay yes I'm using an invisible computer
isn't that amazing
this is my my script over here I have a
script okay how can I hold on I'm just
gonna add let me let me do this you
you've got to realize that half the time
on the coding train live is just me
taking care of stuff that I need to take
care of so I'm over here and let's say I
have YouTube where do I find my YouTube
premium that I'm logged in over here and
then I have like family sharing so
family premium family so I have this
manage so how do i yeah family sharing
settings one two three four five six you
can share with up to six members so I
just need to share listen you two delete
add a family member so my family member
now I have a new family member it's
coding train choo choo coding train choo
choo at gmail.com
and send join my family now I have no
idea what's gonna happen here so I'm
whoops I am going to now I'm going to
just I'm gonna do this for a second I
forgot to have a keyboard shortcut for
this ah there we go
I am going to go into the email I don't
I just want to I don't know what's in
the email of that account have never
logged into it you're invited to join a
Google family group accept invitation
get started join family welcome to the
family everybody so now if I go here and
it refresh learning there we go alright
no more ads thank you okay
uh now remember how I was about to do a
coding challenge it's like ten fifty I
don't have any water okay here we go
everyone back to select channel chat yes
okay
Oh where's my alright okay here we go
actually maybe what I should do is know
sorry everybody here
hold on this is the actual code from
thinker con which might make sense for
me to start with this let me just get
rid of some
and of course I made some silly err
counters not to find
all right
okay James sloths and what is the name
Leo Leo SOS Lea iOS OS okay all right
here we go a little jogging little
exercise
hello and welcome to a coding challenge
the Chaos game okay this is exactly what
I'm going to make in this coding
challenge Thank You Prasanth
Kumar for these super chat no more super
chats please it rubs me hello and
welcome to a coding challenge the Chaos
game this is exactly what I'm going to
make in this coding challenge why am I
going to make it so recently I was very
lucky to attend this amazing event
called thinker con I'm wearing my
t-shirt from thinker con um thank you to
the organisers of thinker con Destin
Sandlin from smarter every day and Henry
Reich and Emily graslie and Sabrina Cruz
and Robert Cole rich this one event was
mind-blowing Lee awesome and amazing I
met so many wonderful people
links to finger con and various other
YouTube channels related in the this
video's description so while I was there
I met for the first time in person a
james schloss who is the author of the
algorithm archive a wonderful website
with many sorts of algorithms in it read
more about it also from the YouTube
channel that I have no idea how to
pronounce still but only iOS OS and I've
used a lot of his videos before as
inspiration and ideas okay so James and
I did a live coding demo in person at
thinker Khan creating this the Chaos
game so what is the Chaos game
well the Chaos game the Chaos game I
have to explain what it is now
No that was that was pretty good that
was pretty good cast game pretty good
originally
oh yeah then I have the numberphile
video yeah
the Chaos game is a
silly wasn't gonna cry who's no crying
encoding all right the Chaos game refers
to a method of picking random points and
iteratively moving point the previous
point you picked to the next point in oh
you know what there's not really a good
way for me to explain it to you other
than diagramming it and actually just
writing the code for it for more
background on the cast game I certainly
would suggest this particular video from
numberphile so what what what's amazing
to me about the cast game is it's
there's a very that's a very very simple
idea so the way we're going to play the
Chaos game is we are going to have a two
dimensional space that two dimensional
space is going to start with a set of
seed points now I'm going to for the
moment just create three sort of fixed
seed points in the form of a triangle of
course heading three points are
basically gonna make a triangle let's
roll on one line but that's another
topic for another day and then what I'm
going to do is I am just going to pick a
random point anywhere that was such a
fail
third try is the charm
third charms the third okay I got a
random point and now I'm gonna start
with this random point then if I were
somebody who didn't code what I would
have to this is the problem what I don't
live stream often enough I have a lot of
trouble I'm just gonna start what I want
to do this with no edits whatsoever so
you the viewing audience it's just gonna
have to bear with me I promise that I am
NOT going to stop again
just needed a little warm-up just needed
to kind of get myself going for the day
and now here we go this will all be over
soon in more ways than one
hello welcome to a coding challenge the
trolls game so this is the Chaos game
playing out right behind me um this is
actually code that I wrote at this
wonderful event that I recently got the
chance to attend called thinker con
thank you to the organisers of thicker
con Destin Sandlin Henry Reich Emily
graslie Sabrina Cruz and Robert Krulwich
links to their information and websites
in this video description
this was like a mind-blowing ly awesome
event and while I was there I programmed
in front of people underneath a rocket a
Saturn rocket depicted here with James
schloss now I never met James floss in
person before but you might remember
that I've used
James floss is a YouTube channel as
inspiration for other videos like the
tesseract over here so James and I I
think he used like Julia and like VI but
I programmed this Chaos game algorithm
in the P 5 web editor and that's exactly
what I'm gonna do right now in homage to
the wonderful time I had at thinker con
so what is the cast game so first of all
I would recommend this numberphile video
about the Chaos game for background - it
is an iterative process of picking
random points and and doing some math
with those points and seeing what
happens afterwards so rather than try to
define it you can of course always read
the Wikipedia page
very tempted to do a dramatic reading of
it I'm just going to describe to you how
it works
over here on the whiteboard so let's say
we have a two dimensional plane this is
a two dimensional plane and what I'm
going to do is I'm going to start with a
set of seed points so and maybe I'm
going to put those points
as an equilateral triangle but as you'll
see eventually at some point I could
have 4c points 5c points I could put
them anywhere and then what I'm going to
do is I'm going to play the Chaos game
and the first thing I'm gonna do is pick
a random point on the wall here we go
first try earlier today earlier I was
doing another take and I'd have to do
that like six times I'm very lucky now
okay so so this is my first random point
now what I'm going to do is I need to
pick a random number one two or three a
B or C zero one or two
how do I do that do I have a I don't
know I'll just pick one from my my oh I
have a book of random numbers five four
one five seven so why don't we do seven
modulus three right 7 divided by 3 is 2
remainder one so I picked a one zero one
two
so if this was zero this was one this
was two what I'm going to do now is move
half way to this point and now I have
another point aha okay now pick another
so there is number nine eight eight one
eight so I just use the last digit 8
modulus 3 is 8 divided by 3 is 2
remainder 2 so 0 1 2 so now I'm going to
go half way to this point and I could
keep doing this over and over again
and if you watch the numberphile video
you'll see somebody do this actually
physically with rulers and pens and all
sorts of artistic talent I have none of
those things so but I do know a little
bit about programming and so this is
something I can program so let's
actually go program this and then see
what happens all right so I'm going to
use the p5 GS web editor this is I think
a simple enough project I'm gonna go
here I'm just going to go to the editor
home page here and I'm going to
this chaos Game one safe all right so
let's start this off so I've got my two
dimensional canvas what I need first are
those seed points so I'm going to do
this in a very simple way and then
[Music]
all right thank you by the way to
Espinosa and dr. serpent on Twitter who
created the our factor this later song
which is like my new favorite world
links to more about essence music in
this video's description okay so I'm
creating these three points you know you
don't you know what I'm gonna put them
in a random spot I'm gonna make the seed
points themselves actually random why
not right so I'm gonna have it at point
a point B and a point C so I need three
points ax am i standing in front of the
code a kind of M so let me move this
over and let me move this over let me
give myself let me just use a window
width and window height so I cover the
whole thing and then I'm gonna make it a
black background we're good alright so
what I want to do now is let me draw
those points so I'm going to say stroke
255 stroke weight eight so I just want
to see those points a X I just want to
see them so we should see three points
now how come I don't see any points ah
because I am drawing the background over
and over and draw so let's do this here
okay so every time I run this sketch I
am going to now have three new points
alright so now let's play the chaos game
so what I am then I need a kind of
global X Y we need a global X Y and what
I'm going to do with that is I am also
going to have X Y be some other random
point and what I'm going to do in draw
is say stroke let's make it like a nice
RGB color and I'm going to draw a point
at X Y and we can see okay there it is
so this is right every time I run this I
have my three seed points and I have
this new pink dot which is the X Y so
now what do I need to do what I need to
do is I need to say let me pick one of
those three points and move halfway
there so the first thing I need to do
here is just pick a random number one
two or three right but this is going to
give me a floating-point number so what
I want to say now actually is give me
floor that which will take off the
decimal place and then if I get a zero
I'm going to do one thing otherwise if I
get a one I'm gonna do another thing and
and I know I know there's all but just
remember I know I'm overusing the sound
effect right now but it's the first day
I have to use it it makes me so happy so
if I pick zero what I want to do is move
half way I want to move half way right
to this point guess what I could use
some math right I could take the X of
this the X of this / - I've got a new X
but there is actually a function in p5
called lerp lerp stands for linear
interpolation meaning interpolate from
one number to the other in a linear
fashion by some amount so if I want to
linearly but I want to linear
interpolate if I want to learn from this
point to this point by point five watch
what I get to do fifty percent that's
halfway there so I'm going to say x
equals ler X ax 0.5 then I'm gonna do
the same thing for Y and then I'm going
to do here I'm gonna do it with BX look
it's already happening the cast game is
already happening over here
look now I only have two points so you
can see all the points end up just on
that one line right every time I restart
this all the points end up going between
point a point zero and one but now let's
make some magic happen
whoops let's do the last possibility
let's plug in the see
and see what happens okay here we go
what's going on do I see some pattern
emerging here well I am playing the
Chaos game this looks like it could be
kind of familiar let's be a little bit
more methodical about this let me
actually start with an equal a perfect
equilateral triangle I don't know what I
mean by perfect but then what I'm going
to do what do I need to do an
equilateral triangle boy this is an
equilateral triangle has an angle of 60
degrees so if I want to figure out from
this top point how far down and how far
over to go I just need to use the angle
60 degrees and cosine and sine I've
probably got some video where I explain
that right so I need to go you know what
I should just do forget the equal I know
I said I wasn't going to do any edits I
feel like the equilateral triangle is a
bit of a digression that I don't need to
have in this of it well that's a nice
one so let's let me go back
so actually this won't be an equilateral
triangle but it'll be simpler let me
just put these seed points at the
corners and then I so so I'm gonna put
these seed points at the corners and
then we're going to see what happens and
then let's so we can start to see
something emerging here this pattern
that's emerging it's happening kind of
slowly so what I might like to do a
couple things I might like to do first
of all I think it's I'm gonna make the
points a little less thick then I'm also
going to give them a little bit of alpha
again I have no artistic talent so I
shouldn't do what I'm doing and then I'm
going to draw 100 of them each time
through draw there we go there we go
look what's happening so pretty so
beautiful let's forget about the Alpha
all right oh and you know we can do
which is fun why not
what happens if I give it different
colors like here if I pick zero let's
try this one color if I pick one let's
try a different color and we can sort it
and we can see now
we can see there are actually three
different sections in a way of this what
is it called say it with me
sierpinski triangle so this is what's
amazing the chaos game this very simple
algorithm will produce a perfect
rendering of a fractal pattern this one
very famously is known as the sierpinski
triangle very little code I've got the
sierpinski triangle right there
so this coding challenge is actually
complete but it's not over I mean the
video is gonna end at some point when I
stop rambling but let's think about some
things that we could do for example
anytime you make something like this you
might think to yourself what are some
parameters that I could start tweaking
well why should I bother why should I
start with only three seed points why
should I only have why should I only go
50% of the way each time there why
should I have an equal probability of
going to each one aren't there some
other things we could apply to this so
this is now your exercise create your
own version of this could you make an
array of seed points could you vary the
distance the the the percentage did a
distance you go to each point could you
vary the probabilities of how you pick
each point what else could you do with
color how could you render this could
you connect the lines could you use
different shapes what if you did this
without and you had to erase the
background so you're actually like
piling up all the points in this big
array there's so many possibilities I'm
gonna come back in the second part and
at least do the part I'm gonna refactor
this later but not too much later where
I'm gonna at least make this an array of
seed points and and play around with
that 50% value so I'm gonna do that much
don't watch that video yet if it exists
if it doesn't exist who can't watch it
try this on your own and then share with
me your results and then you'll see my
extra little step with this and that'll
be that okay if you're looking for the
code by the way when especially when I
do something in the p5 web editor you
can just go to this particular URL which
will also be in the video's description
and I do have a page about this
challenge also on the coding range
okay thanks and see you the next time
all right okay
whoo-hoo all right so that was number
one I'm just gonna move right on
dr. circuit
all right
all right so let me do duplicate
ooh I like this that's crazy okay
all right
hello and welcome to coding challenge
the Chaos game pop dude
electric boogaloo thank you - Espen
Larsen dr. circuit on Twitter for
creating the I will refractor this later
song this coding challenge is in honor
of that song because guess what later is
now I will refactor this now so what I'm
gonna do in this coding challenge is
expand this idea of the Kaos game
instead of merely creating the
sierpinski triangle I'm going to make a
version of this where there could be
more than three points seed points and
that as the points move as the newly
random point move moves from point to
point to point I I might move by a
different percentage than 50% so if you
didn't watch the previous coding
challenge where I made this you could
pause now and go watch that or you could
just stay here with me right now let's
be together let's be friends on the
Internet programming stuff okay so the
first thing that I want to do to
refactor this again but I'm not gonna
overdo it use it sparingly otherwise
people will get irritated and annoyed
and I'm sure I will hear about it um the
first thing I want to do is I am going
to make a array called seed maybe I
should call it seed points let's just
call it points I don't know let's call
it points and instead of having a X a Y
what I'm going to do in this array let's
get rid of this first I just want to
recreate this exactly I am going to say
I'm gonna have three points and I'm
gonna create a new point which is a
vector I'm going to use vector create
vector function to make a new point
anywhere randomly in the canvas
I know I've run a little bit out of
space here but that's fine :
and then I'm gonna say points push V
okay and then I am going to have a point
called current which is also going to be
a vector a random vector I'm good there
we go there we go so now what I can do
is again I have just refactored this two
instead of having separate XY variables
for all four points I have an array that
keeps my three seed points and I have my
current point in and all current point
is a separate variable and both of those
are p5 vectors a vector being an object
that can hold an X Y and a Z but I'm not
gonna use the Z right now although you
should do this in 3d but I'm not going
to all right so then I'm going to say
for let P of points and I'm gonna say a
point P X P dot Y so we should see there
we go those are my first three seed
points and then what I'm going to do
here is random the length and this is
actually now oh you know what I don't
even need to do this guess what the
random function in p5 I'm gonna say like
next equal to random function and p5
will give me a random object out of that
array now if I want to pick them with a
different probability I'd have to do
something different but here this next
is now going to be one of those three
points randomly and then all I need to
do is say stroke I'm gonna still give it
this color and then I'm gonna say next
dot x equals alert this so I'm LARPing
but I'm gonna lurk between next and and
the current oh and current is the result
of that so the current is the thing
that's moving and it really doesn't
matter but I like to think of it in this
order current is moving and then I think
there's a lack sealer vector function so
I could do this in one line of code
that's another reactor this later now so
there we go and then all I need to do
is draw the point let's give all I need
to do is draw that point and here we go
look at this tada now one thing I should
probably do is also reset it let's write
it let's actually all this stuff here is
kind of the process of let's write a
function of resetting like I want right
now it's like resetting every time I
change the code because the p5 editors
can figure to like relaunch the sketch
but I think what I would prefer to do
here is write my own function called
reset it's a nice refactoring and I need
to empty the array and I'm going to say
points equals here so this function
reset will just sort of reseed the
environments and I could do something I
could do it whenever I click the mouse
but just for right now I can say if
frame count modulus like 100 equals zero
then reset so what that's gonna do is
every 100 frames right because a modulus
of the number 100 will equal zero
anytime then frame count is divisible by
100 with a remainder of zero so you can
see over and over again this is gonna so
no I'm here I have refactored this but
now that I have refactored this okay so
for example I can just do this no oh
yeah look now interestingly enough I
don't really get a pattern that's super
interesting to look at with four points
kind of accidentally I sometimes M and
so what happens if I have eight points
whoa this is crazy now probably what I
would want to do what might make sense
for me to do is place these points
around a circle just I mean it's
interesting to have them randomly but I
think I would prefer just in sort of
figuring out what I want to do with this
to have all those points around a circle
right so you can think about actually
this was a way of getting my equal
triangle that I was looking for so what
if I have eight points and then I get
some kind of like hexagon octagon
septagon whatever the number of sides is
based on the number of points for three
points it's a triangle so you can you
could sort of do the math there of
what's gonna be if I increase the number
of points so let's actually not reset
them randomly but let's reset them and
in that sense I don't need to this can
actually just be in setup and always
keep these same seed points and what I'm
going to do is say I'm gonna have an
angle which is going to equal to pi
divided by eight so let's make a I'm
gonna use Const for a constant just to
be have fun I'm gonna call that n oh oh
I didn't did I not switch back all right
don't worry everybody I have figured it
out camera camera camera I know so hold
on I'm gonna go back
alright alright here we go
alright alright so what I'm gonna do
here actually is uh I'm gonna have a
fixed set of points right so the points
are I'm just gonna do once in setup and
what I'm gonna do is I'm gonna use the
constant Const N equals 8 and I know I
could be using constant other places the
code if you want to know more about
Const I made a video about it where I
got a bunch of things wrong five
different resource for that but so I
just now I'm making n points and what
I'm going to do is say the angle is two
pi divided by I that's a bad idea
because I don't want to divide by zero
so all right well we'll say oh it's I
know what it is it's I times two pi
divided by n that's what it is right
because I want to have I'm looking for
and if look if n is four for example I
want zero degrees 90 degrees 180 degrees
270 degrees it's probably gonna go the
other way because the screen is flipped
but that's the idea so now what I'm
going to do is say create vector at some
number like let's just do 200 times
cosine of the angle oh you know what I
think there's P 5 vector from P 5 dot
vector from angle I think as a function
hangul so that's gonna make a vector
from that angle and then I can say V dot
V V dot multiply 100 and that's working
but I need to translate to width / 2
height divided by 2 and now we have
these points in the center of course I
also if I want to I need to do that here
okay so there we go
we can see now I've created eight points
around and let's actually use
let's make that a little why is this
down here oh oh there's a weird mistake
goofy mistake happening Oh cuz when I
reset this is this is kind of you know
what I'm gonna do the translate is fine
but it's bothering me I'm just gonna
make life easier on myself and say add
width / 2 height / - right I'm just
gonna move that to the center manually
by adding that to the vector okay
now what I want to do is multiply it by
like width / 2 or something okay great
so now you see those are all my points
we're still playing the Kaos game now
what I want to do is I am going to have
a variable called percent and I also I
just want to make like a lot more points
really quickly so I can just sort of see
the pattern and what I'm gonna do now is
I am going to try I'm going to when I
lurk I'm going to lurk by that percent
and let's try different values so let's
try so let's go back to 0.5 and this is
what I get
let's try 0.25 interesting let's try
point 1 let's try and end of for 0.25 6
do I need like we could something more
interesting I just could have sworn when
I thought about this earlier I'd get
more interesting patterns timeout for a
second
all right let me think about this
could've sworn when I was looking at
this page here
inside a pentagon oh but the current
cannot be the same
let's try Pentagon
they're up I just should have picked
five
[Laughter]
alright I'm back Neko monsoon in the
chat said try three just to see if you
didn't break anything so I made the
point N equals I made n equal three with
the percentage of point five and we can
see I have the sierpinski triangle
actually if you look on the Wikipedia
page for Kaos game you'll start to see a
bunch of these a point inside a square
repeatedly jumps half the distance
towards a randomly chosen vertex but the
currently chosen vertex cannot be two
places away from the previously chosen
vertex so this is interesting right so I
could actually start to create some of
these patterns by modifying how I pick a
particular point so this one actually
would be nice let's do the Pentagon one
a point inside a Pentagon repeatly jumps
half of the distance but the current
chosen vertex cannot be the same this is
going to be an easy one for us to
implement we just need to get a new
random number that's not the same as the
previous one so so let's go back here
let's first make this five okay so we
can see even with five a Pentagon we're
kind of getting a somewhat of an
interesting pattern here and I might I
don't know why I obsess over this sort
of stuff but I kind of feel like let's
give this just like a little bit of
alpha and make the stroke weight one and
do like a thousand points all right so
we could just sort of see this pattern
more quickly okay now what was I doing
so what I want to do now is not allow
the next point to be the same as what
was previously chosen and so there's a
variety of ways I could do this but
actually I could just create a way of I
could just create a way of ignoring it
if it happens to be the same one so
let's say previous I'm gonna create a
variable called previous and right here
when I pick previous equals next and I'm
gonna say as long as next is not equal
to previous then I can do this stuff so
now look at this
there we go the Chaos game Pentagon with
one slight modification and you know
what I I don't want it to keep resetting
I just want it to I want to tell it not
to reset and I want to go to share full
screen and I'm gonna put this in a
different window and we're gonna bring
this up here and we're just going to
enjoy this now okay here we go we're
done
chaos game thank you very much look at
this it's so beautiful intricate and
amazing so I now encourage you now you
have really got something right you can
start to make a variety of patterns and
here's the thing one thing that you
could do that actually is really it you
could think about that I didn't do if we
go up here look at this this is actually
a little sort of animated gif showing
you the process of actually moving the
points from one spot to another and then
sort of branching out so imagine what
you could do if instead of just picking
all the points and layering them you
actually created a system or you animate
the process of building this pattern and
you can see you can see maybe you can
recreate some of these other patterns by
doing this rules this one would be a
nice one to create you could try
different percentages and see what you
make so thank you for watching this
second part of the chaos game I think we
are done with all the cast games stuff
I'm going to do if you make your own
version of this please visit the coding
train comm link that's in this video's
description there there are instructions
for how to submit a leg to the version
of the cast game that you made yourself
you can share with me your images or
gifts on twitter at Schiffman or at the
coding train hashtag coding chaos game
and I'll see you in a future Kotick
jaunt all right I don't know maybe I
will
all right everyone I think we got a
couple coding challenges out of that I
got my equilateral triangle in the end
at least yes I did
I'm just curious here I sort of thought
varying the percentage would be
interesting but apparently not so much
ooh that's kind of cool
so I guess it is maybe the idea was Oh
going the hole going further is what I
should have done right right it's all
about going further uh okay hold on I
got to come back we got to include this
I don't need a record scratch sound
effect I guess this could be done in
post that's just not gonna want to add
it I mean for a good reason I don't
think we should do a record scratch wait
wait wait wait wait
let's refactor this now and actually I'm
not actually gonna refactor it I
realized something when I was playing
with the percentage earlier and making
it lower I started to get much noisier
images and of course this is true
because I'm not going very far and so
the points are sort of layering on top
of each other and I'm just getting kind
of a cloud of points but what if instead
of going halfway there and that's
actually I don't I know I'm being kind
of a lunatic about this stuff let me
just make these white instead of going
halfway there what if I go 75% of the
way there
so actually going further will start to
yield some interesting patterns and you
can see here now if I say 15 look at
this so this is now
fifteen points going 75 percent of the
way there you know and by the way maybe
if I were to make oh and that's 90
percent of the way there if I were to
make some sort of slider where I vary
the number of points I could go back to
putting these points all in a random
location that would be kind of
interesting let's do that now just
curious so where where do I let's do
this let's just really quickly I'm just
curious to see I got a stop
you should I shouldn't be doing this you
should be doing this right so you could
see okay I don't know that got it so
anyway so that's this is a clue to you
of what you could now make right that I
told you to share with me right
you could vary that percentage vary the
number of points vary where the seed
point starts animate oh so many
possibilities okay see you later
good bye okay let me put this back
however to five and
and back 2.5 and there we go and there
we go
X Nick is asking what if your percent
gets larger than one that's an
interesting question
oh yeah what time is it 11:30 Akari oh
part 3 says LOM probably not but I'm I'm
about ready to go I have to just check
something here
just checking sorry I like to look at my
email okay all right I don't see the
demon faces
we'd have to stare at this more later
okay
close these things out so I wanted to
also I wanted to let me sign in here
oh thank you to oliver harris a new
member of the coding train
authentication code
all right I'm pretty sure now that's so
all right so you might recall that
somewhat recently I created the
quick-draw a quick-draw coding challenge
right here where I I use the quick-draw
data set the Google quick-draw data set
to replay drawings that people all
around the world have made various
things like cats and rainbows and so on
and so forth so to do this I downloaded
very large data files full of JSON data
of all of the drawing information and
then I spun up a little note server to
pass individual drawings to a JavaScript
web client and so now you know timing
wise it's sort of ironically as soon as
I did that almost like to the day the
Google really creative lab released an
api to it called a web component so I
wanted to explore this in kind of like a
part two the question is do I need to
sign up for an API key so no no not
quick-draw data set I'm already there a
quick-draw component sorry this is what
I'm looking for so I do need an API key
okay so how do I get an API key
I don't want to do it with NPM install
join the quick-draw API Google Group API
services library okay so let me okay
let's do this
whoa MoMA this seems weird doesn't make
any sense
I think that's a mistake on there is it
like console google.com or something
yeah maybe it's here api's and services
the library quick draw quick know does
anybody know what I'm looking for here
[Music]
this is API slash library this is so
weird
no quick draw API
there's a quick web demo
this is so weird
why is it taking me to Pantheon Corp I
mean this does not feel like where I
should be logging in
does anybody discovered where do I
really need to search is it is it really
as simple as reading the instructions
and actually searching for this more
precisely okay let's try this
No
consult developers.google.com let's try
that that's where I want to try this
yeah this is what I'm looking for
hmm
cloud google.com well I might have to
come back to this the API is just not
public yet oh but it's right here this
is not a private component
all right well maybe I'll use this API
key of self-hosting huh
quick draw files Oh appspot look at this
like for example let's see this
Drock component rjs oh the readme says
to join the group which says they'll
give you access to the API alright so
I'm gonna come back I think I'm gonna
I'm gonna join that group and come back
next time and look at that API thank you
which is good because I kind of have to
go anyway I wanted to do this sort of
thing cork on thing Google Creative Lab
is and I don't know what what count
Chris is asking is Google Creative Lab
an official Google github account oh do
I just have to literally join the group
ok let's do that I just kind of would
prefer to join it from so let me get an
API key different a slightly different
way for a second because I'd rather
actually whoops or actually you know
what this is fine all right let's
all right let's let's
all right let's do this
let's join group
okay so you can now see and enable the
quick-draw API in your own project at
Google cloud really it's so weird why is
it still MoMA inside Google maybe that's
really where I'm supposed to be going
but there it is
private create quick-draw coding train
okay
okay what API is do I have
I should probably actually show how to
do this in the video enable okay
okay can I delete this
library Oh Google Oh Google why why do
you do this to me how do I delete it and
I want a new project
delete ah
so delete this oh come on delete yes
okay
okay I don't think anyone watching the
video is gonna be able to follow this
and then I should be able to do me I am
so me if you're actually watching I
should be able to just do a once I have
the API key I should just be able to do
make a call to quick draw files
appspot.com with with with just a get
request right to get just like the JSON
back like what I want to do is just get
the data like I want to draw it myself
fetch image data draw image now oh yeah
like this drawing API middle one this is
what I want to do so category ID equals
or random API key format JSON okay great
so this is this is what I need okay all
right
okay
okay so now and
okay okay
all right everybody so give me a second
here
remind me later okay
oops Oh
I definitely need to go eat only new
tasks I open up go into Chrome
where there I should probably not do
this now oh boy oh I just want to get
this open I here we go
I know the camera went out okay
okay everybody I should definitely go
eat lunch but said I was going to do
this so
dude you hear that that was my stomach
growling I don't know if that came in
through the microphone or not I don't
think I need the thinker Khan shirt
anymore I was wearing that for so let me
this will work better for the microphone
I'm sorry this is gonna make some weird
sound for a second
apologies for all the scratchy scratchy
okay
all right oh that mean okay
well the problem if I go and have lunch
which I should do I won't be coming back
so I'm not doing this now or not
probably should practice this first yeah
okay and here we go
all right here we go hello welcome to a
follow-up coding challenge quick draw
again thingamabob quick draw API web
component addition so previously in a
coding challenge I downloaded a large
data file from the Google quick-draw
dataset I talked about what the Google
quick-draw dataset is it's just a
collection of millions and millions of
these doodles that people made playing
the Google quick-draw game and I created
a node server locally on my computer to
open that very large data file and pass
information about the drawings to a
JavaScript program that would read that
information and then replay the drawings
in a canvas basically almost to the day
that I released that coding challenge
Google came out with something new
called the quick-draw component and what
the quick-draw web component is it
allows you to actually using markup and
importing a JavaScript file just
actually embed quick-draw doodles in a
web page I'm not going to do that in
this video what I'm gonna do is actually
show you how to use the API directly to
pull the data from the drawing yourself
so that you can draw it in a canvas so
I'm gonna do what I'm gonna do just to
be clear I know that wasn't clear at all
I'm gonna do exactly what I did in the
previous coding challenge but instead of
downloading a very large data file and
spinning up my own node server I'm just
gonna ask the Google API itself for a
drawing and then I'm gonna go eat lunch
we should probably eat lunch now well
maybe I maybe like pizza or something I
don't not a big pizza eater but we'll
pick some food themed drawing and just
to be sure that I it's actually working
to do it this way I am going to do this
in the p5 web editor so that I can be
sure that you could be sure that I'm not
like secretly downloading a big file
running a node server somewhere why
would I do that though
captain disillusion will come for me if
I cry to fake something on my channel I
was hoping that maybe it something in
post just got added there got doubt it
like a rainbow
okay uh-huh so here's the thing it's a
bit confusing because this is so new
this API is available it's out there but
it's a bit confusing to use it so the
first thing you're going to want to do
is go to this github repository quick
draw
- component and then down here somewhere
in here you're going to want to find
this join the quick draw API Google
group now by the time you're watching
this this may have changed but I will
hopefully keep the code up-to-date but
maybe the signup process will have
changed so as soon as you go to the
Google quick draw API Google Group I
joined I'll end up this page click join
you'll need some sort of Google account
then you're gonna want to go to your
Google API dashboard so here I am I'm at
console developers.google.com slash API
slash dashboard there are a lot of API
is there that you could look at and what
I'm gonna do is now search for
quick-draw I made a project by accident
which I didn't mean to but this is what
I'm looking for quick-draw exclamation
point data API private now this will not
appear for you to you unless you join
that Google group so that's a little bit
of the confusing thing at least at the
time that I'm doing this today November
something 2018 it's like the 25th 26
something like that all right
so I'm gonna click here - oh and I need
to make a project so I'm gonna call this
project so I want to first create a
project just try to click enable I'm
gonna do this call this coding train
test I'm gonna hit create and then I'm
gonna go back and search again for
quick-draw quick comma draw and I'm
gonna grab this here no okay it's so
hard to use these API services I'm gonna
get this quick-draw API this is where I
am select a project okay no I created a
project oh oh here we are somehow I made
it to the coding train test project you
want to create a project and get to your
coding train you're well you're not
gonna call it Cody right get to your
project page now I'm going to find that
API it takes a minute for the project to
it should actually be created I think I
was going too quickly there I'm gonna go
to quick draw data API ah there we go
now I'm on this page now I'm gonna click
enable and I'm in able ngey API
okay so now I have this API enable the
next thing that I want to do is go here
under credentials because I'm going to
need an API key so I'm gonna go here
under credentials create credential yeah
this looks good
what API are using that's what I'm using
look here's my API key fantastic so
here's the thing I am going to
regenerate this API key as soon as I
finish this video so you won't be able
to use it you'll have to create your own
and I'm going to copy it copy it and I'm
going to very quickly just over here now
in my code I'm just going to add it at
the top as a comment so I always
remember it okay so here's the thing I
should mention that this while you can
do you can use the API I'm gonna do that
right now if you're going to use this
for a large project you might want to
actually consider self hosting the API
which is kind of what I did in the
previous video but actually using
Google's code which is probably much
more robust and it's a lot more
possibilities but once I have my API key
all I need to do and I'm gonna scroll
down here to API middle where I just
need to go to this particular URL so
let's grab this URL I am going to I'm
gonna use the load JSON function in p5
I'm gonna paste this in here so now what
I want to do is I want to say drawing
category I know that cat is a category
I'm gonna say ID so I could ask for a
very specific drawing but I think I can
actually just say random to get a random
one and then get my API key and then I
mean I don't is animated I don't want it
animated and format equals I want it
JSON like I want to get that JSON so
let's see if I take this URL now not
found
all right what do we think I did wrong
pause for a second hear me I am so me
how did you get your successful get
request he looking over there animated
what if I don't give it an ID ah okay oh
oh look at that interesting
okay great
oh hello I'm alright I'm back so
interestingly enough even though the
documentation says ID required ID number
or random I thought this mint means I
can actually type random into the URL
query string but maybe not because now
if I go back here and I just zoom in up
here and get rid of ID equals random
just start with key I can see there we
go each time I do this I'm going to get
a random cat drawing here in JSON so
look at this lovely
alright so great we're now using this
API so I can go back here I can go back
to my code and I'm gonna say I'm gonna
say a constant URL equals so I'm just
gonna save this and obviously I would
want to do something more I could do so
much hereby I could actually form the
URL with the particular category but cat
aghori but right now I am just going to
keep that and I'm gonna in setup I'm
gonna say load JSON URL got I'm gonna
give it a callback got cat and I'm gonna
write this got cat function drawing and
I'm just going to say console dot log
drawing so let's see that in p5 if I
actually and I'm going to take we get
rid of the draw function if I've
actually got there we go
drawing so this
looks like there it is so you can see
down here in the console all that data
came in so all that data came in so I've
got the cat and now guess what I can
draw it okay so let's just make this 255
255 so oh I wonder if this is the
simplified data so it actually probably
isn't to simplify data or maybe it is
I'm gonna be fine lots of github issues
timeout for a second
I like that solar liner wrote Dan is a
dad confirmed I know exactly what solar
liner is referring to do we know is this
the simplified data will return raw
time-based data Oh otherwise simplified
data
good where was I
so looking back at the documentation I
just realized is Anna made is animated
if I set that to true I will get the
data back that actually has the timing
information related to how the user drew
the drawing in down to the millisecond
but which in my previous coding
challenge I didn't bother to use I just
use this simplified data which is just
the x and y values of the particular
path that the user that the user drew
and it also is reduced normalized to 255
by 255 pixels square so I want to use
the simplified data just to make my life
easier because as I mentioned I need to
go get something to eat
is Pizza one of the categories it's the
only food one that I could think of you
know that's like you know vegan quinoa
Bowl or something is one of the
categories let's try pizza
yeah looks like pizza came in or
something so now what I'm going to do
here is in got cat I'm now gonna call it
got pizza got pizza what I'm going to do
I really I could just go to my previous
code do I dare
I couldn't we actually probably rewrite
this code it's a lunchtime you go up the
other video I'll link to the time in the
video or actually write this portion
right now I'm gonna go to github.com
slash coding train website and I'm gonna
go to coding challenges all the way down
to quick reading challenge 122 quick
draw sketch is and this is the code
right here where I in draw where I draw
that particular pattern let's look at
this basically actually here's the thing
this whole thing there's no reason for
me to rewrite this just to prove that
this works this is the entire code and I
am going to go back to my code I'm going
to paste my entire thing in here the
only thing I'm going to change is
instead of my own node server
/ cat I am going to go to the particular
URL now there might be some slight
differences here but let's see what
happens I don't see a cat let's try that
again
blocked by Coors I don't have the chorus
problem before
also that Kors arrow should have coming
up in
Oh
guess what everybody
oops hold on guess what everybody so
before I had made it actually was the
error that yes reload the site
so Mattoon when we edit this like I
don't need to go and find that Coors
thing because that was a red herring I
don't know why I got that error but this
is the problem Oh guess what I found the
problem when I made my own node server
I sent the data back for the drawing in
a drawing property of the data boy that
was a terrible way to explain it I wrote
my own node server so I had the actual
data for the sketch the drawing the
doodle embedded inside of the data
coming back dot drawing but that's not
the case with the Google API the cat or
the pizza is just the data itself so if
I now do this and now hit run
come on pizza
huh
it's a good that's a very long timpani
effect
oh it just didn't work for the first one
why is that it needs like a minute so
weird what is going on
I'm getting it sometimes and not other
times
so weird
I'm getting the Coors error
look I'm getting it in various places I
think
I think this is a weird p5 web Google
API is also dot drawing seriously so
that wasn't the problem
oh it is not drawing I'm just a lunatic
all right that that never mind Matt's
yeah it is the cores issue but it was
like I got it in my you know i refresh
the page hold on a sec
we get really auto-refresh
oh do you think it like
I think this is there's some weird stuff
with the web editor which is really
unfortunate
[Music]
oops
Oh No alright alright that's promising
it's not the web editor
you know just
oh I'm over my API limits oh that's the
problem okay probably because I was
requesting it so often war I know it's
hold on
where where where is my console there we
go okay can I do you think somebody used
my key crazily
yes somehow I think I've been foiled by
somebody watching me cuz there's no way
I made seventeen thousand eight hundred
ninety nine yeah look at this watch
here's the problem yeah this is the
problem all right I'm gonna have to kill
my key regenerate something and not make
it public while I'm live-streaming why
why can't we can't this is why we can't
have nice things people I might actually
just have to leave and come back and do
this another time unfortunately or
actually uh me I am so me could I
perhaps use your key I promise
can I use your key can you generate me a
key and what I'll do is I'll put it in
the code without I mean I maybe I can
just generate my own new key I could
have also like locked it to my IP
address or something but
okay thank you so I'm getting a new key
and I will make my screen invisible when
I get it
[Music]
okay I've got the key let me just get
put it in a way that I can transfer it
really quickly oh are you kidding me
oh I have to like to factor again oh
wait hold on don't worry everybody this
will be ready in a second
yeah I'll make a new sketch - I don't
know what a minute I I've got a way
around this
I will secret
okay create secret just okay all right
scream going away so what I'm doing now
is I'm getting that key you can't see
what I'm doing I'm getting this key
getting messages Here I am going to
I am going to put the key in the code
you won't be able to see that and then
what I'm going to do oh shoot ah hold on
everybody hopefully I didn't mess up
shoot I might have messed up I won't say
what I did that I might have messed up
though
heíd address bar do I hide the address
bar in Chrome
how do I hide the address bar in chrome
I'll be back here
how do I hide the address bar in chrome
f11 nope that didn't work that's
probably like a PC thing make sure this
actually works
I don't want to go into full-screen
because oh woops sorry as soon as I get
this to work
and I will come back live
there we go okay so I have it working
oh that's all I need to do is hide the
address bar there's got to be it go to
about flags and the compact Flags
compact
address
address book settings compact the
address
seriously won't i can't hide the address
bar I have an idea actually all right
fine
okay
alright I'm not going I'm just gonna
delete the URL from the address bar use
tape to hide it okay this is a working
version I deleted the URL from the
address bar cannot know where this oh
you know there's oh my goodness there's
an easy way to follow oh it's a way to
find this ah you know what deleting the
address bar is is no good because but
anyway I just got a move on to finish
this before somebody gets it because
it's way too easy to get it okay I just
realized okay okay
I'm back actually so the problem that I
was having was not a cores error or some
other error there was no error the
problem was the people of the internet
that's why we can't have nice things
somebody used my took my API key and
started using it and I exceeded my quota
so I have a new API key and I'm going to
you can't sorry just run it quickly
oh wait hold on we could do it quickly
[Music]
hi I'm back and I'm moving very quickly
because the reason it wasn't working
look at my code wasn't some mistake I
made wasn't the dreaded cours error it
was that I exceeded my quota now how
could I possibly have exceeded my quota
because I certainly did not make
something like 19,000 API requests in
the last few minutes and in fact
somebody watching this this is why we
can't have nice things people must have
taken the API key so I have a different
API key and because I've talked with you
long it probably also just got used but
let's hope it's here in this sketch I'm
gonna run it for 29 err so let me show
you what the error is I thought this was
a cours error but it's actually the
server responded with the error for 29
and for 29 is a issue with the key so
I'm gonna I'm gonna I'm gonna conquer
this I'm going away I'm gonna generate a
new key and then I'm going to
immediately run it for the first time
live before anybody can possibly get it
okay can I the question is can i
generate a new key myself that's valid
okay I know how to do this goodbye
screen this is so sad I'm not gonna be
able to have luxury of this I just want
you to know whoever you are on the
Internet
this is definitely one that I should not
have done live I guess no this is the
old key whatever you saw was the old key
so whatever you saw was the old key okay
hold on I am going to
sign up at mentioned me in slack if
somebody has a key faster than I can
make another one for myself so whack a
no one managed to copy the key from the
screen but there's a way to pull up the
sketch that I'm writing in the web
editor if I was not using the web editor
nobody be able to get the key
I should just not use the web editor you
know what I'm just going to not use the
web editor next time but let me just get
another key join group I'm joining from
my real Google account and then console
dot developers.google.com
password feels best plan I know okay
that just seems like all this extra
programming I guess I should do that
it's gonna go here and moderate the chat
also while I'm here okay oops I'm
determined to do this quick
sorry me I am Sammy
creating a credential okay I have
another API key
we have another API key thinking here
let me get my API key
okay have my new API key let's make sure
this actually works okay I'm getting
drawings now what's gonna autosave shoot
you're right about the password field
two lines of code what's two lines of
code the password field it feels like a
lot more than okay I'm gonna do it okay
I am going to okay
all right don't worry this is not the
actual key all right so what I'm gonna
do is I'm going to put this at the end
and key equals then I am going to here
how am I doing this I'm creating like a
create input how do I make something a
password field
how do i password field password input
field how do I do that in HTML input
type equals password okay
[Music]
type password know type password oh oh
man sir yes okay okay all right great
okay and then
Plus API key key
key input let's call this key input key
input equals API key sorry I'm thinking
I really need to go eat key no API key
all right all right all right I'm gonna
do this as part of the coding challenge
even though it's irrelevant but you've
who hints equals API key I like that all
right oh but I just gonna move quickly
all right
all right I'm gonna I'm gonna conquer
you Internet what I'm gonna do here
thank you to me I am so me for this
suggestion all right I'm gonna conquer
you Internet thank you to me I am sue me
for this suggestion what I'm gonna do
I've already started doing this I'm
gonna create an input field key input
I'm gonna say key input equals equals
create input with nothing in it so oh
let me know do I put Auto refresh here
oh and let me uncomment this out okay so
now we should see there's this input
field right so what I'm gonna do now is
I'm gonna say key input dot attribute
this is all the p5 Dom library type is a
password so what this means is anything
that I type in here you can't see and
then when I call new cat I'm actually
going to say I'm gonna get the API key
is key input dot value so I'm gonna get
the input from the value it's not
speaking anymore I'm going to yes I'm
gonna get the API key from there and
then I'm going to with what I did to
this URL is I just left it with key
equals blank at the end so now I am
going to say plus API key so if the API
key is in here if the API key is in here
then what will happen is it will pull it
from there you won't be able to see it
it will pass it to that you won't need
to do this
you don't need to be crazy I'm just here
trying to defeat the internet and
unfortunately I might have made a
mistake but hold on so I'm gonna get rid
of this screen behind me I'm gonna go
get my API key
I'm gonna put it in my clipboard I'm
gonna put this back and gonna paste it
in
Oh syntax error
syntax error what's going on
oh I'm not calling you cat I forgot I
had new cat commented out because I was
so worried
mmm hold on hold on I guess the sequence
doesn't matter here play No
what is going on
but wait why do I have this error now
it's really 12:40 this is what always
happens to me
cannot read property value of undefined
sketch line 19 what what
what is going on oh okay
I didn't have okay new cat was commented
out so I need to actually call new cat I
also need to call new cat after I create
that input field
okay I'm gonna defeat the Internet here
here we go
alright the input field is there I now
will make this go away I am now quickly
going to get my API key coming back here
this is coming back and pasting it in
here 4:01 that's good
my sequence is off I guess I should make
a button let's let's make a button yeah
this is gonna be fun format yet alright
new cat is commented out that was a
problem I think what I can want to also
do is create a button like start and
then I'm going to say start start equals
create button start equals create button
start and then we say start mousepressed
new cat so now okay now I should the
sequence should be I'm gonna I'm gonna
win the work I'm gonna paste my API key
in there then I'm gonna click the start
button then I should start seeing my
cats and they won't be cats
they'll be pizza because I'm gonna go
eat lunch but prodigious a salad
disappear
captain disappear lusion rookie quick
get my API key then paste this in here
you can see it again now I'm gonna hit
start
thank you very much I can get another
pizza
there we go every time I press Start
we'll get a pizza I win
internet so you won't have to go
and so defeat it nobody nobody won here
basically we all lost so anyway you can
see now there was a point to this the
whole point to this was that the exact
same code I wrote in the previous coding
challenge I can now run from anywhere by
using the official quick-draw API from
Google I might have to just come back
and do this video again but it's going
to exist in some form because this was
all too insane so yeah so goodbye
everybody
I am going to take this away so that
nobody sees my key by accident and I
will see you in a future challenge
[Music]
all right I got to go everybody that's
it I don't know if I'm coming back on
Friday now I should be right back on
Friday I will be doing something on
Friday I I would take questions and
stuff but it is 12:45 I'm probably like
unbelievably late for something
let me just check the calendar here to
make sure okay I'm okay I have a little
bit of time but I really have to go so
so anyway so so yeah so thanks for
watching thanks for tuning in this has
been the coding train when I will just
say - I will take you out with thank you
- Espen Larson's
[Music]
now I have to sit here press this button
to stop streaming