[Music]
good morning I almost forgot to unmute
my mics welcome if you hear a little
nasally extra nasally sound if my voice
is a little quieter if I have a little
less c'est quoi vous enthusiasm the
enthusiasm is deep in my heart I'm
getting over a cold and actually now
that I'm getting to speak I think it
worse than I thought but I don't want to
cancel today because I've got some
momentum with this every Wednesday thing
and I dunno as a matter of fact that the
next two weeks are a little I'm gonna
try to keep this every Wednesday thing
but I know for sure two weeks from now I
won't be here on Wednesday and I'm not
so sure about next week yet but I have
some plans of extra bonus live streams
so today might be a bit of a shorter at
the so too
you know very minor minor just a little
bit of a cold it snowed here we had a
snow day I was exciting thanks to
everyone who indulged a little extra
annoys loop video where I walked the
streets of Brooklyn and talked into a
camera I was wearing a baseball cap
trying to channel my inner youthful
youtuber I don't know how well I did but
it was an attempt so I've got some what
I view as exciting things to talk about
and show too and I also just want to
kind of reset a little bit because I
think I've been obsessed as you may have
noticed noise different noise algorithms
classic Perlin noise simplex noise open
simple
noise and I've been doing a lot of
videos about that I've been looking at
techniques for looping noise by adding
extra dimensions and using polar
coordinates it's been glorious
it's baby time for me to take a break
from that although there's a little time
towards the end of today I would like to
apply the looping noise to the terrain
code which is something that I said at
the end of my video that I would do if I
don't get to today I'll certainly
release that code people are telling me
the stream is very laggy oh all right
I've been talking all this time and no
one has been able to hear me so I do see
here in my in my live control room
YouTube live control room that I'm
getting bad quality okay let's try
restarting okay now it's fine
I mean I'm tempted to just restart here
let's restart it's fine now okay all
right so now it was about art but
apparently it's where he did anybody
catch anything that I just said I
suppose hopefully when this gets
published Aggie the actual words that
were coming out of my mouth will be
heard on the archived version of this
video is that true
okay so all right let me just at least
let me just repeat myself I don't know
what else to do but repeat myself which
is not a good idea considering the state
that I'm in I have a day it's called a
box of Kleenex mmm decoding train today
is sponsored by the common cold it makes
your head congestion your your brain is
in a fog you shouldn't be live-streaming
on youtube I I'm a little bit sick I
thought I actually have felt when I woke
up this morning I felt pretty good and I
haven't been doing very much for talking
very much it just started
I realized I was a little shaky but I am
going to proceed with today this will be
a bit of a shorter stream than usual so
that I don't overdo it but I wanted to
make sure that I came here because I've
got important things to say and
important well I don't have anything
important to say I've got things to say
I've got stuff to code common cold
you're not gonna get me down ah lag
comes again alright now some of you are
experiencing lag I almost the part where
the words come out of my mouth there is
a lot of lag in between there there's
like a little loading animation that's
in front of my eyes as I think and
attempt to speak and I'm gonna go check
the live control room it still says bad
I'm tempted to restart why don't I just
restart should I just restart I should
probably start I'm getting mixed and
getting mixed signals from the chat all
right
okay
in theory I am back now I am going to
look at my we'll see how this goes
the good news is on everything to disk
so nothing is lost and until the
computer decides to die I see that
people are saying still lag so doesn't
seem to have corrected itself which is
somewhat unfortunate let me just put on
the waiting music sometimes takes a
minute
[Music]
the question is is this on youtubes end
or is it on my end it could be it could
be the internet connection that I'm
using here at NYU I am not streaming
through Wi-Fi and streaming through the
Ethernet cable plugged into the wall
line so but I do have like a lot of
things are lagging I've got suggest
drugs so maybe this is all for the
better I could come back later today
[Music]
it's very hard for me to do actually
this will be fun let's try something
let's try a little experiment here
[Music]
okay most of you probably can't see this
but I'm gonna attempt to run this
internet speed test what I did is I just
used in open broadcast studio I'm doing
like window capture to grab the browser
window on the computer that I'm
streaming from you can see my IP address
now I'm broadcasting that out and let's
see how this goes so I don't know if you
can see this but it looks like I'm
getting a download rate of about 430
megabits and here comes the upload this
should be good for streaming let's check
my it still says bad ah I mean come on
look at that can you see this this
doesn't look like it's my on my end
right
oh all right so now it seems to be fine
okay now it's working like okay well
let's proceed then shall we
I was kind of hoping in a weird sort of
way I was hoping it was just gonna get
worse good I think maybe I should be
taking a break I know I know you're here
to watch this live stream and you don't
want me to be secretly hoping that the
whole thing turns off so I can go
downstairs and rest but if I'm being
honest that's a for a moment that's how
I felt okay so looks like my speedtest
seemed to fix things oh it says good now
okay so my YouTube live control room
says good let me remove this window
capture and I think I'm actually just
going to delete that and I think I'll
get started I've got going here there
are teams of people all working 24/7
rotating shifts of engineers curriculum
writers as designers makeup hair costume
design just to make this happen right a
person named Dan Schiffman standing here
talking to you live on the Internet all
right he at least cover some important
announcements I can't even hear myself
speak that's how congested my head is
it's not good
all right browser and I have some
announcements to make first
congratulations to the mm oh I like I'm
talking to the camera and then I turn
over to refer to this thing that I have
here and it just all I see is lag lag
lag lag lag lag lag lag lag lag lag lag
lag in it so that's good let me check
the slack channel
I bet it's encoding problems not network
alka right i bets it's encoding problems
not network so we're there would that be
happening like you mean like on the OBS
level or like you
oh it's back the PC already isn't it
well isn't it possible that this is a
problem on youtubes end
I mean nope okay on the bottom right of
OB s I have a very green icon
I have CPU 10.3% 30 frames per second
and kilobytes per second 5100 70 people
are telling you already view stats
there's more information there okay view
so I'm seeing view I don't see something
just called stats here here I'm gonna
share with you all I mean you can't
really see this cuz it's lagging but I'm
gonna show PS window let's see if I can
do that a little behind the scenes here
today on the coding train oh now it's
ret OBS oh this is gonna be crazy
[Music]
uh-oh what have I done I guess I can't
really share with you this without it
yeah it's fine it's just got a nice
little oh why is this here this is OBS
it is red now if this was green before
that was green before I did this view
stats there we go ooh okay now it's bad
now let me share this with you
oops sorry everyone hold on
there we go
okay so I said that's the OBS stats okay
I I'm now streaming again I've got the
stats from OBS up here that you can see
I don't have the chat open give me a
second to get that I mean could it mean
I can't imagine that having the chat
open on this computer was somehow
causing a problem going to do that every
single live stream okay
interestingly enough quality seems to be
good now
interesting okay here's the thing
oh you know I'm recording two discs also
okay well I am going to hide these
windows I am I have the chat up I have
this up okay here we go
attempt number I don't know what at this
point tip number three I guess uh-oh I
see a racy read we just have a look here
we're dropping some frames Network yeah
it's the network okay black
all right everyone ah Alka brings up a
good point Alka brings up a good point
which is that there I think there's a
backup ingest server on YouTube that I
could be I don't know if you are seeing
this but I just switched to the yeah cup
ingest server
it's a configuration and let's see maybe
don't blow your nose into the microphone
today's comment alright since I've
switched to the backup server has that
changed anything I don't know what time
what where you are in the time-space
continuum so if you're giving me comment
bad I need to know that you are hearing
me talk about the backup ingest server
and saying that it is still bad
yeah okay thank you me I am take a look
at oh yeah that's a lot of dropped
frames Network okay so what I guess I
could try just coming back in like a
half an hour maybe I'll just do that how
about we try that if I could just go on
and do some stuff and you will only be
able to hear and barely be able to watch
I'm not sure what to do I got to make it
just some music
help me think
[Music]
[Applause]
[Music]
so I'm hearing from some folks that it's
gotten a little better
I do see right now that I'm only getting
I'm only having 1/3 dropped frames which
is pretty good so let me try let me just
do a few things and I'm going to now
ignore that this problem is happening
and I and I'm going to turn off this
monitoring and I'm going to proceed
ping test okay hold on I'm gonna try one
more thing
all right so thanks for your patience
everyone this this isn't going very well
but I'm gonna I'm gonna just try to give
this like 15 or 20 minutes to do some
content and see where we are maybe my
voice will start to get worse and I'll
need to stop maybe the internet won't
have fixed itself and I'll need to stop
but me just standing here doing nothing
seems kind of pointless so and just in
case you're suggesting oh why don't you
restart blah blah blah check your
network connectivity restarted twice
network connectivity is good there's
dropped frames from OBS seems to be a
network thing who knows on what end
where but such is what's happening okay
so I wanted to make a couple spins
number one congratulations to the 2019
processing foundation fellows check out
this medium article on medium.com slash
processing - foundation to see all the
wonderful projects that are being funded
by the processing foundation this spring
and so I would love to tell you about
all of these but I'm just going to
scroll through them like I've just done
and then I'm gonna close this window
seems to be working fine now I also
wanted to mention that processing
foundation YouTube if you are not a
subscriber please subscribe to the
processing foundation's YouTube in
particular there is a video that just
came out today which is a three minute
recap of processing Community Day in Los
Angeles and to learn more about the
processing foundation and its mission
and initiatives and community day please
check that video out and stay tuned now
you let me actually click here to
processing foundation's channel you can
also check out the the livestream
archive you'll notice that it's seven
and a half hours because this is just an
archive of all the talk
from that day but matcha who I work with
on the coding train and I are working to
put together edited versions of all the
talks which will be posted soon sometime
in the next few weeks hopefully even so
stay tuned for that please subscribe to
the processing foundation YouTube
consider also you know if you have the
means and are able to if you can support
the work of the processing foundation by
becoming a member once a year I'll do
like a specific fundraiser on the coding
train for the processing foundation but
prostate validation is a 501c3 tax
exempt US nonprofit supported by some
grants that we've been so lucky to get
supported by the New York City
Department of Education cs4 all
initiative and probably almost more
primarily supported by people you the
viewers perhaps of this channel the the
people who use processing p5.js and if
you want to become a member you can go
to here alright right now I'm just like
blah blah blah blah blah blah to see if
people are still saying lag really all
I'm saying now the conference's look
stable okay so I wanted to mention now I
have another thing I want to mention
which is so you may recall that I
recently published coding challenge
number 137 for D open simplex noise loop
I've talked about Perlin noise classic
Perlin noise from 1980 simplex noise
from 2001 there's actually a different
improved Perlin noise algorithm also
around 2001 that was separate from
simplex noise I believe I've gotten some
of this right gotten some of it wrong
I've conflated oversimplified some
things one of the one of the mistakes I
certainly made in this video was being
too I talked about moving a loop looping
noise in three discs by moving a plane
along like the path of a torus which
isn't exactly what I'm doing because I'm
actually using four dimensional space to
loop but so there have been some really
nice threads and comments explaining
some of the things I got wrong in the
comments of the video so I highly
urge you to check that out I just wanted
to highlight this one particular comment
from Ralph Tootsie who writes noise is
indeed a confusing topic so many terms I
will try to clarify for those who are
confused there are many kinds of noise
value gradient whirly Gabor Gabor gobble
this is one I have not heard of him have
to look that up wavelet etc when the
algorithm uses a random number generator
it is probably value noise the Hugo
Elias article even though it's titled
Perla noise is actually value noise so
that's value noise is when a bunch of
random numbers are picked and sampled
and interpolated and smooth value noise
okay that's a helpful clarification when
the algorithm uses gradients the vectors
on the grid points it's called gradient
noise the most popular gradient noise
algorithm is Perlin noise there are two
iterations of Perlin noise the first is
classical from version from 1983 and I
believe this is the algorithm that's
currently in processing and p5.js when
you call the noise function then later
Ken Perlin improved it by addressing a
few issues to make what is known as
improved Perlin noise so we could
actually look this up improved Perlin
noise and we would find that here I
believe this is improved noise reference
implementation this is from a
corresponding SIGGRAPH 2002 paper which
you can find right here improving noise
and then let's finish this comment out
then later Ken Perlin in photo then in
2001 Ken Perlin published simplex noise
which is different from the two other
perla noises but still is gradient noise
so I assume that the first classic
version and the improved noise are both
operating I see that the lag is kind of
happening again
that the both of those are operating the
gradients are happening on a rectangular
or square grid
it's noise on a symplectic grid or a
grid of equilateral triangles and so
there's an article about this that the
author of this comments posts about
improved perla noise which I will click
on now and you can find that here so
this is also a really nice reference and
it was nice while I was working but it
seems to be laggy again alright so I'm
getting some stuff off my chest
even in this lagged states be
interesting to watch this back later I
love how the YouTube chat moderation is
smart enough to automatically flag
comments that say subscribe to a
particular channel that shall remain
nameless in addition to just you know
inappropriate language and that sort of
thing okay
sir please restart your Mac I have tried
that twice I don't think that's gonna do
anything so I think I am NOT going to
restart my Mac some people are saying
it's stable I'm gonna look at the
control-room
bad we are not receiving video day it's
so funny that I have this cold because
it really just it's so apt it just
couldn't be a better match to lag the
network lag and the head congestion it
just feels like the same thing that's
all mixed together so it's kind of
appropriate there's a bad lag problem
all right oh no what have I done what
have I done I'm gonna close don't make
me pull this car over I will close the
chat window and not look at it for the
rest of the livestream behave yourself
well I like that the audio is not
lagging because at least you can hear me
and in terms of dropped frames alright
let's move on to the next topic of today
we're just gonna keep going and I'm
probably gonna stop at about probably
gonna stop in about 15-20 minutes if
the lag keeps going I there's there's
one thing that I wanted would do
regardless of whether I'm live streaming
I could stop I'm just as really this
kind of like practice so let me talk
about that a bit okay then I will take a
break and come back a different time
maybe I do want my free Friday morning
no that would have been good oh boy Wow
now it says it's not even receiving any
data like it's completely stopped
streaming yeah Wow oh it's back but bad
the chat is really out of control all
right I I'm sorry I'm gonna minimize the
chat I it's I will take a peek at it I'm
gonna just keep the slack channel open
the slack channel is for members of the
coding terrain through YouTube or
through patreon but I think to assume
that my record to disk is working and
I'm going to talk through some stuff
then I want to think through and begin
working on so I would suggest you maybe
go do something else but if you want to
stick with me here I'm gonna I'm gonna
probably be here for a like hunger to
talk through some of this stuff okay I
don't know that this will actually be a
separate video but let's give this a try
hi it's it's me dan from the coding tree
I mean who else would it be
I'm gonna just tell you about something
that I'm working on that's slowly over
time on the channel out of order I'm
trying to work through an idea for a new
playlist of videos if the idea is to
hats and bolt skills around working with
data and API is in JavaScript both
client-side and server-side and I hope
that this can be supported for people
who are teaching courses on information
visualization machine learning data data
visualization data art self traffic
people who are teaching for more fully
fleshed out courses that involve project
making and and critique and dialogue but
and and so maybe those people that I'm
imagining in my head who are teaching
these courses could use some video
resources they could point their
students towards there are somewhat
generic and will give foundational
skills so there's a github repository
hopefully by the time if you're watching
this this will look totally different I
am working on a lot of ideas for this
it's at github calm slash coding train
slash intro to data and api's there is a
bit of a description here and a bit of
an outline so I am going to be working
on this outline and making
adios out of order and then kind of
synthesizing stuff together and making
an intro video and hopefully by the end
of April beginning of May the whole
thing will be completed so that's what
this playlist is things are gonna appear
out of order give me feedback I might
reduce some stuff add some stuff but I
would say the central place for you to
give me feedback is to come over here
and go to the issues and I'm certainly
gonna leave comments in this video but
go over here to the issues and post your
thoughts and ideas if you are a teacher
who teaches this stuff and can give me
ideas and thoughts about what would be
specifically helpful that you would love
to have as resources to point your
students towards that's in particular
what I'm looking for
okay thanks very much and I'll see you
in this playlist for some amount of time
should you choose to be here if I okay
all right ah boy my watch just told me
what four times five is okay so I did
that that's good I probably should have
mentioned the learning link check but
check I have I'm looking for a message
here it actually is telling me that the
stream rate is good right now
which is kind of unbelievable I'm
hesitant to check the chat and I know
that this could be fleeting I just want
to see something
got it
got it got it got it so anyway I should
also mention that this new playlist that
I'm developing is supported by YouTube
itself through the learning incentive
grants so this is good like looking back
into my email to see what I'm supposed
to say allowed to say okay um I I kind
of want to like check the chat again if
I see this black channel that it's
stable dare I pull up the chat so I this
will fit in somewhere in narrative see
totally figure that out yet so what I'm
gonna attempt to do right now is just do
a short video tutorial like no more than
10 minutes there's gonna be 45 minutes
I'm sure just about the function fetch
okay let me make this bigger okay
oh hello to Egypt that's kind of amazing
to me that there are people watching in
Egypt thank you I'm armor if I'm apology
oh it's red I see red I see red that's
not good okay I'm gonna just keep going
with hello in this tutorial I am going
to talk about the function fetch
so the function fetch the JavaScript
function fetch which is a JavaScript
interface for accessing and manipulating
parts of the HTTP pipeline whoa I hold
on it starting over
hello in this video I am going to talk
to you about the function fetch and this
is a building block a building block for
many of the examples that I am going to
demonstrate to you and show you how to
do throughout the course of these videos
I think
well I like that it's okay at least it's
lagging so that nobody can really see
what I'm doing anyway hello in this
video I'm going to talk to you about the
function fetch and this function fetch
will serve it as a building block for a
lot of the different examples and other
topics that I talk to you throughout
this series working with data and api's
so what is fetch okay so it's a global
method that you can call in javascript
in the browser so you know maybe there
are some browsers that don't yet support
fetch and this is a consideration as you
deploy a project to a large worldwide
audience but for right now we can kind
of make the effect is something we can
write into our JavaScript code and fetch
will fetch something it will get us it
does this HTTP hypertext Transfer
Protocol thing to request data or
actually you can use fetch it seems
counterintuitive to send data as well so
uh okay hold on I have to I have to fix
my whiteboard hold on I have to fix the
whiteboard and take off the drop the
message about all the dropped frames
okay okay coding train today is
sponsored by the common cold
I should have muted my microphone but I
decided to not leave my microphones you
could hear the sounds the authentic
sounds of the common cold one thing I
should recommend is when you have the
common cold consider trimming your beard
because everything's gross with all
gross
all right let's diagram out let's talk a
bit more about the function fetch fetch
fetch is a function that you call by the
keyword the function name fetch and you
can give it more than one argument now
the easiest way to use to give it one
single argument and this is a path so it
could be a path to our local file it
could be our URL path and you're saying
hey I would like this uh
or this text data or this JSON data or
this tabular data it's comma separated
value file any kind of data you can
fetch it optionally you can give fetch a
second argument which is really like a
bunch of configuration options so in the
case where you actually want to use
fetch to post data to what you want to
do is go into the body and pull the data
out in some format that you want and
I've made I pre made I wrote a list here
of the kinds of ways you can do that so
you can get let might understand so
maybe if you're just loading a text file
you're loading a Shakespeare play it's
in a raw text file or URL you could then
ask for that data as text if it's JSON
data which is probably going to be the
primary example the primary scenario and
almost all of these examples throughout
this um you would ask for the data as
JSON blob is super interesting and
actually I think the first example I
want to demonstrate to you today is use
blob blob kind of means I just want a
blob I just want the binary just what
the data itself so for an image that
works really well because I just want
like the the binary data of the pixels
give that stuff to me that's a blob
there's also form data which you can
imagine if there's some if if you're
fetching date if you're ma'am hmm I
don't want to say about that
oh there's also form data and array
buffer and those might be some scenarios
that we look at at some point also but
wha how did how does this whole process
happen so it's a two-step process the
first process is to give
the path then the body comes back and
then you need to ask for one of these
things and the way to to sequence these
events everything in JavaScript with
fetch happens asynchronously meaning
you're waiting for something to happen
and you'll get a callback an event but
the fetch function works with something
called promises and promises is a way of
handling asynchronous events that's part
of JavaScript es6 so if you've never
encountered promises before you could
pause this video right now and I have
I'll link you to some other videos I've
made about promises and some other
resources and then come back but the key
thing is that when when a promise is
resolved when the asynchronous event is
completed you then then you then it's
funny that I'm writing the word then you
can then ah this is making me crazy
I'm just curious about that lag oh it's
green it's green and by the way there
are people I see people in the chat
saying I can't handle all the lag please
go do something else with your day this
will be available later in archived form
all sorts of stuff I don't want to give
myself more room here or why with this
way I don't want to start over now that
have an idea of what I'm doing but
whatever let me just at least go back
here
so how do you handle this asynchronous
event how do you write code that you
that acts on the data when it's voted
and the way that that works is by using
the keyword the function then and this
is how you handle events with promises
if so if I say fetch I give it say I
have a local file that's an image
rainbow dot JPEG I can say dot then and
I can add a so when I this function here
is going to be code that executes when
it has finished loading the file the
tricky thing here is I don't have the
data ready in a format that I want so
once it's loaded I have to write a
function that then calls either blob or
JSON or text in whatever to basically
indicate what format I want the data to
be prepared for me in and that triggers
another asynchronous event so I can say
dot then and here is where I can
actually use the data so here's what I
want to say for this convert the data to
a blob which triggers another promise
once it gets resolved then I can
actually maybe show the image so this is
the narrative to do this with these even
newer keywords in JavaScript called a
weight and async and I will kind of show
you that really quickly at the end of
this video because I might use that in
some examples is the process fetch the
path fetch fetch give it a path to your
data image tags JSON etc wait for the
response ask to prepare the data in or
map that you want then get it in that
format and use it it's read again
let's write some code so I'm doing
something which I haven't done very much
on my channel oops hold on sorry let me
actually open this stuff up
okay
let's write some code so I'm doing
something that I haven't really ever
done on this channel before come here I
should say like might happen in previous
videos let's write some code so I'm
doing something that I do pretty rarely
on this channel which I just have a
plain index.html file and I'm gonna
actually put my JavaScript in that file
in a script tag then the HTML elements
are here and there's no dependencies so
fetch is Native you know I am using the
most recent version of the Chrome
browser so fetch is available to me in
chin so I also happen to have in the
folder hold on let me just pull that up
I happen to have in the directory with
the index.html file a image called
rainbow JPEG and this image is a also
happen to have in the same directory as
my HTML file a an image file public
domain image file of a rainbow so this
is the file that I load with the fetch
function so we can see there's only
thing right now is I have an h1 element
I have an any image element the source
of that image is empty the ID is rainbow
and I'm conflict so if I go to the
browser hit refresh you can see I comp
console.log about to fetch your rainbow
and then it says fetch an image that
should really say rainbow a rainbow ok
so now what do I want to do I'm going to
call the fetch function and I'm going to
pass it rainbow JPEG so let's just
refresh the page no but how do I
actually get the stuff so I said that I
need to do then right the idea is now
I'm gonna say then and I'm gonna deal
with getting the stuff here so let me
just put a function in here an anonymous
function and in here I'm gonna say
function has an argument I'm gonna call
it response so this is the respond the
wrong window and nobody can tell
so let me put in an anonymous function
and in that function I'm gonna say
console.log oh and this function should
take an argument that argument is a
response I'm gonna call it response I
could call it anything I want like I'm
even spelling it wrong I could call it
unikitty but I'm gonna call it response
because that makes sense that's where
when when the promise has been resolved
when I get the stuff so let's just say
console.log response let's refresh the
page and look there it is so there's
lots of information headers the URL all
sorts of stuff in here and this is the
body I need to figure out I need to
parse through what's in the body of this
response in a way that I can use and the
way that I'm going to do that is with
the blob function so now I'm gonna say
return response blob and I'm gonna
streamline this code if you're if you've
done JavaScript programming before and
you're like you're like why aren't you
using the arrow syntax and I'm gonna
streamline this code in a minute but I'm
gonna kind of write it in the long
winded way first so returning response
dot blob
means there's an S and I can chain them
and I think what I'd like to do is put
this down well it's fine I'm gonna save
and I'm gonna write another there we go
I'm gonna write another function let's
actually call it a a blob here and let's
say console dot log blob so now you can
see this is called a promise chain I'm
fetching the rainbow then when I get the
response
I'm convert blob of data and then let's
look at that blob of data let's look at
what I got wrong
whoops the camera went off
by the way if you're just tuning it now
they working but I'm kind of pushing
forward anyway just because I've got
some stuff that I've got to do start
getting on these videos one let's this
is actually really just based on the the
example put out by Mozilla themselves
let's look at what they do in their
basic fetch name oh I have to do URL
create object URL that's right yeah okay
so the true story here is that I can't
just insert the blob drainage dot source
image source expects a path really
usually you put you know I could
actually just put image dot source
rainbow jpg and you know we're gonna see
that rainbow there but that's not what
I'm doing here I'm trying to line
demonstrating this is a little bit
absurd II I don't want to demonstrate
the process of loading the file and so
loading the data of the file itself so I
need to turn that data into path itself
and I think I can say that through URL
create object URL and then image so I
need to make a URL out of that blob so
let's look at this and we can see there
we go there's the image and I'm just
just just so you see what it looks like
I'm going to console.log image source
and you can see that's actually well now
hold on that's not what I want to do
just curious what's this do No
yeah whatever let me do this part again
let me pull up the documentation page so
we have that
sorry
so the truth that the story here well oh
it's green again everyone I look over
the screen and people can actually maybe
see me the true story here is that I
can't simply just assign a blob of data
to an HTML elements source property so
what I need to do here is I actually
need to create a URL out of that data
and in fact that's what's expected there
I mean I could actually just put the
string rainbow dot jpg since the files
there and that's a path but that's not
what I'm doing here I'm trying to
demonstrate the fetch function so I'm
loading a local file getting the data so
see with that file and then turning it
back into a URL path then I can insert
into a Dom element so the way to do that
is with a particular function called a
create object URL so this function is a
function that takes a file blob or media
source object and creates an object URL
from it so now I can say URL URL create
object URL blob and now this is the
whole process
fetch the rainbow turn the return the
body of the response from that fetch
operation to a blob of data turn that
blob of data into a URL and insert it
into an image elements source attribute
and here we go back to here alright so
this is the whole process but let's do a
cups here to streamline the code I could
have written it the way I'm about to
show you originally but I'd like to step
through things incrementally so one
thing I could do is I can use arrow
syntax which is a shorthand way of
defining a function instead of using the
keyword function I can say equals equals
greater than which oh right and then
here I can also do the same thing with
the blob so this is a way of sort of
streamlining shorthand the function now
another thing I can do is I don't
actually need to have this console dot
log so I can actually remove these curly
brackets and write and and remove the
return keyword and actually just write
it like this
so when this is a really nice shorthand
any error that occurs throughout this
entire process will end up down here so
I don't have to have a handling thing
for every single one and you thought
this video was over let's make one more
small improvement on this let's actually
run this and make sure it's working but
oh-oh unexpected token error so I'm
always making syntax errors when I'm
writing code this this needs a
parentheses right one more parenthesis
there because oh and this should look
like this ah there we go
so this was all function I was so close
that was way off when I just wrote there
so hopefully I didn't confuse you there
but sometimes I leave this nice for you
to see the mistakes and kind of maybe
correct them in your head while you're
watching a go but so this is I'm taking
the error and in fact cuz this is just
one line of code I could also streamline
this and get rid of this semicolon and
now this is our final final result
except for one more thing that I'm gonna
do I'm gonna fetch the rainbow I'm going
to turn the response into old I'm gonna
get the blob I'm gonna insert it in the
Dom element and if any error happens you
do that and now I'm gonna refresh and
look there we go we affect the rainbow
now you know what fetch does just
because I can I'm good as a little bit
longer I'm gonna do one more thing if I
wanted to I could write my own function
called fetch rainbow find that function
as a sync and I have a set of videos
that goes through how this works in a
bit more detail async sorry async
function fetch rainbow and so you I'll
refer you to those in this description
of this video as well but basically what
this allows me to do is call fetch using
the keyword a wait so a wait is a
keyword that allows me to write a
sequence of that return promises without
using dot vent so I can say just
constant response equals fetch
rainbow this is an asynchronous function
so I need to say oh wait
then I can say constant blob equals oh
wait
response blob and then I can just do
these last two pieces right here and now
we can see this is exam code but I'm
using a weight and the async and await
keywords so I'm writing an async
function called fetch rainbow I fell I
convert it to a blob then I insert it
into the Dom element and let's just see
if this works we still have the day all
right so hopefully this video gives you
a sense of what the fetch function is
how you use it how it integrates with
JavaScript promises as well as and
weight keywords and this will give you
the sort of foundational element for
when fetch appears in all sorts of other
examples and tutorials that involve from
an API or some a local file or other
things and in fact even though fetch is
something that's just here in the
browser I'm going to show you fetch in
server-side program with JavaScript in
know chess as well in a future video
thanks for watching alright let me say I
probably should have added the error
handling here
yeah let me see
well it's still the lie I thought maybe
the lag would sort of clean itself up
yeah I've tried to fix um s snake ass
did he try to fix it I tried to fix the
lag many times I think it has to do with
my cold frankly so let me I'm gonna and
I wonder how I'm gonna add a little bit
of stuff one more thing about writing
your own asynchronous function using the
async keyword this function right
everything's happening asynchronously in
here this is really just what's a
syntactic sugar to make the way you
write your code easier to read and
follow but ultimately it's all about
asynchronous events so this in fact by
definition automatically returns a
promise so I could just do something
like say return yay right this is very
silly but I'm just gonna return the word
yay and then I could add if I wanted to
check to have an event for when this
finishes I can actually say dot then I
can say response console dot log
response and then I can also say dot
catch go to another line please I could
say dot catch and error console console
dot log error so this is a very simple
way of doing some type of error handling
where I have now written the async the
async function to use fetch to use fetch
and when it's done I could return more
information right I could actually
design a whole sort of like protocol and
do stuff here but I just want to see
that it worked to console along that or
if there was an error to console.log the
error and I should get in the habit of
saying console dot error instead of
console dot log for an error itself okay
to run this yeah and still works alright
so this video hopefully what I've done
now is shown you how to use the fetch
function what is the fetch function what
does it do
how it integrates with JavaScript
promises as well as the async and await
keyword these are not the easiest topics
to wrap your head around so you might
want to refer to some of the
supplementary material about promises
and async await but this function fetch
will serve the basis for so many other
examples that you'll see throughout this
series whether it's loading you know a
CSV file of some tabular data it's
loading a JSON file from an API URL
you're going to need the fetch function
and in fact the fetch function works
you're a very loud piercing high-pitched
noise and in fact the fetch function
also can be used in node now it's not
natively available in nodejs like it is
in the browser but there's ways of
gaining access to it and at some point
when server-side program to become
something we use here as well I will
show you that too so maybe if you're
trying to think of an exercise to do
take exactly this code use your own
image could you load multiple images
more than one can is that high-pitched
sound coming through I have to wait till
it goes away I think someone's like
wheeling furniture in the hallway and
it's like squeaking it's like the
highest pitched sound ever
like oh I got snakes name wrong maybe
it's just snake oh that high noise came
through oh I'm gonna record the ending
to this again I probably should just
come back and do this whole thing
see let's see what happens now maybe
everything just needed to freeze and
crash which is what just happened that
was definitely an issue on my end where
the open broadcast studio froze and oh
this and I am not seeing the chat right
now so I have no idea what's going on
this has been quite a livestream day and
I'm seeing green so I think the quality
is quite good right now ironically maybe
that's all we needed all right
unfortunately the very bad news is when
open broadcaster EO crashes it corrupts
the recording to disk file so all of my
like oh don't worry our recording goes
to disk there must be a way to recover
it because if I look at the file it says
well notice our desktop it says it's 2
gigabytes so there's a 2 gigabyte file
there it just didn't the video didn't
get closed out properly so I'm not able
to open it but maybe there's a way to
recover it if anybody knows please get
in touch
how to recover a record to disk file
that's corrupted wide open broadcaster
vo crashes please let me know
ironically everything was working now
let me try to do my little n spiel
thanks X Nick I'd be worth the bet
tasteful toasty rights might be worth
mentioning you can fetch rainbow then
console.log Oh instead of yes yes that
is true okay
oh ffmpeg will let me recover the file
with broken end of file okay that's good
to know that'll be great if that works I
will try that if para Tosh if you could
maybe get in touch Daniel at the coding
train com if you know any F ffmpeg
commands that's my sort of publicly
available email address for this channel
that you can write to okay
well I still see in green this is kind
of amazing I thanks tasteful toasty I'm
gonna mention that so this wraps up this
particular video this is the code that
I'm gonna leave you with with one minor
change it was pointed out to me recently
that I could even streamline this a bit
further because if all I'm doing is
taking the response and passing it
through a function like console.log I
can actually just reference the function
itself and I can do the same thing with
the error so this is actually yet
another slightly streamed will hide way
of doing this and in the end in
JavaScript there's always one more way
you could remove a tiny little bit of
code but sometimes I like to write it
out in longer winded ways to be really
clear and explicit of what's happening
let's make sure this really does work
still works okay so this is the code I'm
leaving you with it uses the fetch
function to pull data from a local file
but that could be a URL path it it then
takes that file converts the data in the
body to a
Bob takes that blob and makes a URL out
of it and inserts it into a Dom element
so we can see the image in the in the
window itself in the browser page itself
so what I would say to you is first of
all try to get this to work yourself use
your own image file what happens if you
load a text file could you load a text
file and then display all that text in a
paragraph element that's a great
exercise for you to try what if you want
to load three image files could you do
that in the loop with an array how would
you do that so those are a couple
exercises that I suggest that you try
following watching this video and I will
include solutions to those also in a
links that are available in this video's
description so thanks for watching and
see you in the next video so Aria Mon
asks on line 30 why didn't you do slash
star instead of slash slash you know I I
don't have a good reason there's really
never a reason for anything I do other
than arbitrariness and what I'm used to
but I have like muscle memory for doing
this which is a shortcut NBS code
command slash I probably could configure
it to command slash use the slash star
because via everything you can do in BS
code that's what I'm used to okay so I'm
gonna put this aside this will become a
video tutorial about fetch I might just
come back and do it again but this is
going into I have now made my first
video for the data and API series this
is coming somewhere in here oh boy this
might actually be like the first video
now that I think about it so I have to
think about where this fits cuz I didn't
actually use JSON data but but this this
will go somewhere in here okay alright
the stream seems to be working right no
lag is there any lag right now cuz
Oh Oh I did this wrong look at me
always doing it wrong yes of course I
did it wrong I meant to do that right
like this is what I meant to do
ah I will do that one more time okay
here we go
third time's the charm or in my case
30th time is the charm
this wraps up the video this is the code
that I'm gonna leave you with I will
point out there is and it was point this
was pointed out to me I I like to write
things often in as long-winded way as
possible to be clear and explicit about
what's going on for teaching purposes
but this this is what's also sometimes
referred to as a lambda function this
equal this arrow function syntax because
I'm taking the response and passing it
through console dot log I can actually
just pass in two then the console log
function itself the name of it as well
as in catch just pass in the console dot
error so this is this this is even
condensing it down even further but of
course if I needed to do more custom
stuff I'd have to write a full function
definition in there but let's just run
this to make sure it looks but let's
just run this to make sure it still
works and it does all right so what are
some things that you can do with this
now now that you know how to use the
fetch function try this exercise using
exactly this code load a local txt file
and display the data from that txt file
in a Dom element instead of using an
image another thing you might try is
what if you have three images could you
do this somehow in a loop could you
write one function that does all three
images how would you handle that so
those are some exercises that you should
that I would suggest completing before
you move on to the next video and I will
also include solutions to those
exercises in this video's description so
thanks for watching and see you in the
next video in this series of videos that
you're watching goodbye alright just get
it right this time
and now the stream is working it's noon
I really have to go in like a half an
hour my energy is sort of picking up
though I'm gonna do my Angry Birds
challenge because I got a I gotta leave
today with something more than what I've
got so far that's because of the lag it
took me and whoops an hour and a half to
just do like if hopefully what is
ultimately just a 15 minute video about
the fetch function
okay alright everyone we're gonna have
some fun now
oops what is password here sorry I have
to look up ah really all right I have to
look up the password in my password
manager give me a second here okay what
is the minimum size code I can get away
with can I get away with this 36 point
can I get away with 32 point pull this
over a tiny bit because I could
permanent leave this open and
it's amazing that this stream is totally
working now 30-point would probably find
is this a reasonable code size I really
shouldn't I I don't like to use the web
editor for challenges that are kind of
complicated that I might need to do a
lot of like serious debugging so
hopefully this is okay usually use a
bigger font but let's see so let's do
this okay
No 600 be fine all right all right
everyone let me get the camera went off
I'm gonna do something very ill-advised
right now but I'm feeling my oats
feeling my strength returning to my body
my coffee is completely empty that's bad
I'm getting notifications popping up
just give me a second here
this is such a bad idea
[Music]
pretty sure that's the right URL yep
oh oh I forgot I need my coding trained
characters oh I might be able to stay
till one yeah I need my coding trained
characters where are they just give me a
second here
[Music]
so this URL I think has a mistake in it
this is not the minified version it's
looks like the minified version maybe
it's not
if dot min to the URL like this no I
think I'm right because I've got matter
Minjae s there yeah this is the non
minified okay okay okay
No
oh oh I can just type in unpackage calm
I didn't rise I could do that that's
what you're saying I can just do unjust
type this in it redirects me and then I
can ah thank you
Oh so I'm gonna do that great even
better I'm gonna do that
I don't even gonna keep track of that
all right
okay oh I wish all right I'm sorry to
disappoint some of you who were
particularly David I know who was hoping
that I would talk about making a
processing library that's unfortunately
not gonna happen today but I'm gonna try
to do this coding challenge I'm gonna
let this be one video and I'm gonna
really hope that the edited version of
this is less than an hour and that the
non edited version of this is also less
than an hour but we'll see how this goes
hello welcome to a coding challenge
Angry Birds although my birds won't be
angry they're gonna be loving loving
Birds but maybe they won't even be Birds
they'll be like cute little coding
trained characters but that's not the
point I am going to program a version a
much simpler simplified version of an
Angry Birds style clone I'm gonna use
p5.js I'm gonna use a physics library
called matter chess and I'm gonna get
started in one moment but first let me
diagram out what I'm going what I need
so I'm gonna use an object-oriented
programming approach I'm going to need
something called like a box so this will
be a box class I'm gonna need something
like a bird we'll just call it a bird
for right now this will be the bird
class right the birds I mean it could be
pigs or not but the point is I need that
oh and I also need the ground so I'm
gonna start my simplified Angry Birds is
going to have a single box a single bird
the box is sitting on the ground I'm
going to want to toss the bird at the
box and knock it over and from there
glorious games throughout the universe
that you will make maybe will follow I'm
gonna do all this in the P 5 web editor
which usually it's a pretty complicated
project to try to do but I'm gonna I'm
gonna do that anyway and then if I have
time I think I'm gonna want to try to
attach this particular bird in a
slingshot like why use a constraint some
type of spring-like connection to a
little post so I could pull it back and
let it go so let's see if I could get
all of that
and I'm not going to break out into song
right now as much as I am tempted to do
so all right so first I'm not gonna work
so I'm gonna give this the physics
library matter is gif this is the p5 web
editor I'm going to use p5 for all of
the drawing stuff and I'm gonna use the
physics library matter AS for handling
all of the physics now matter doc Jess
does have rendering built into it but
I'm gonna do things my sort of way of
combining both libraries so that I can
do all the rendering custom in p5 and
maybe by the end of this video have some
my coding trained characters inside of
this little game that we make alright so
first I want to take an object-oriented
approach and I'm gonna do add file and I
want to add I need a bird a s and I'm
gonna I'm gonna make something called a
box j s and I think I'm gonna be able to
use the box for both the I'm gonna use
the box class for both this thing that
can actually get knocked over and the
ground which needs to be something in
mobile static so what does a box need to
have a box needs to have it needs to
have an X needs to have a Y needs to
have a width and it needs to have a
height and I'm gonna require that all of
those arguments are passed in via the
constructor then I'm going to and so I
need to put the arguments in here X Y WH
and I need to what do I need to do I
need to I'm gonna write a show function
and in here I'm just gonna say I'm going
to use fill to make it white and I'm
gonna say rectangle this dot X this dot
y this dot W this dot H okay so this is
the basic idea of a box class with no
physics this is just the data about a
box and this is me drawing it so now in
the in the main sketch I'm going to say
let a ground I'm gonna have a global
variable called ground I'm going to say
ground equals a new box and it's going
to be the X is going to be at 0
the Y is gonna be like height minus 20
and the width will be the full width of
the window and the height will be 20 and
then I'm gonna say ground dot show now
it's giving me all sorts of errors like
it has no idea what a box is and the
reason why it has no idea what a box is
is because even though I added a new
JavaScript file I didn't add it to my
index on HTML so let me go and add it to
index dot HTML box yes and there we go
look step one is done I have the ground
the ground is there now the next thing
I'm going to do is I'm going to have a
box I'm going to just call it a box a
box is another new box and I'm let's put
it over to the side in some arbitrary
place and say box - oh there it is I
want it to be tall I don't know what I'm
doing exactly yet but something like
this something like this maybe a little
less you know what so this will be that
it needs to sit over on the ground so
let's put it over a little further and
let's put it further down there close
enough but I want to move it over some
there we go
okay so that's the thing that I need to
throw my bird at now I need another
class I'm going to add file and I'm
gonna call this bird oh look when did I
it's like knows what I'm gonna do in
advance isn't that crazy
I think I've written other things the p5
editor with a bird died yes oh no I
already did that I added it before no
I'm just losing my mind you're watching
me slowly lose my mind while being a
person on the Internet coding stuff
without a timer I'm not using the timer
this time birdy jeaious class bird and
I'm just you know I probably could maybe
use inheritance here where I made some
videos about recently but I'm just gonna
do like a sort of horrible copy/paste
job but I'm gonna change this to an R to
indicate radius because my bird is going
to be a circle and this dot R and now I
can say let bird bird equals a new bird
and it'll be at like you know 50 pixels
over 3
pixels down and with a raise of 25 and
doesn't know what bird is yet again
because I now also need to add bird je s
to my index.html file okay where's my
bird retweet ha ha ha
be like the blue bird who always is blue
I'm just reliving my high school musical
singing days what was that what was that
show anything goes I think anyway
somewhere there's no video on the
internet because I'm too old but if I
was younger there'd be a video on the
Internet of somewhere me in a musical in
high school that aside I've got the bird
so I've got the bird I've got the box
these are all the elements so I have all
the elements that I want in my scene
ultimately I'm gonna want to have like a
stack of boxes and use images to make
this have more personality but the next
thing that I need to do is add physics
now I could use you know I could start
doing adding some functions to do all
the physics myself but I would like to
use a physics engine the matter dot J's
library is released through npm node
package manager so I can go and
everything NPM it's already like
appearing in my cuz I looked for it
before I started this but if I just go
to unpick AG unpackage which is the
content delivery network for NPM
packages and do matter Jas and hit enter
we can see this is the URL for the
matter not Jas library I want to get the
minified version of it so I'm an owl so
admin J s so now I have this particular
URL I can go back to the p5 web better
index.html and I can I'm just gonna like
paste it here for a second I'm gonna
grab one of these these are the script
tags for the p5 library right and so
instead I've got p5 p5 Dom p5 sound and
now I want to add matter chess as a
library so these are now all of my
libraries and all of my custom
JavaScript code and if I go back to
sketch touch yes and bring this back
over here everything's still working
let's make sure the matter dot library
has loaded if I just say console.log
matter we can
yes stuff is coming out here the library
is loaded that would obviously say if I
had loaded that library I don't know
what you're talking about all right now
let's add some physics so whatever I I
have a whole bunch of tutorials about
the matter dot J's library so I don't
need to spend you can where I can refer
you to those if you want more background
but basically I need to establish this
idea of an engine object and a world
object the world is talking about the
environment and then each one of these
things will be a body this will be a
rectangular body this will be a
rectangular body and this will be a
circular body so my classes box and bird
I'm going to make them wrappers to base
to have inside of them a piece of data
which refers to the actual matter dot j
s body so the first thing that I need to
do I think is let's have a a world and
an engine and then I think I say engine
equals matter well I think I better do
this first engine equals matter dot
engine create I don't know I'm guessing
I think that's right I haven't done this
before and then I think the world is
actually created when I create the
engine I can just grab it from the world
so now I have the matter engine and the
matter world then inside of my objects
what I want to do let's just do the Box
first
so here instead of having an X a Y and a
width and height although I think I
might keep the width and a height just
to store it I now want to add this body
equals matter dot dot bodies dot
rectangle this is a function that in the
matter library will create a rectangular
body object for me and I can give it I'm
gonna do this first
like I don't this box object no longer
is going to have its own X&Y
it's just going to give the matter body
the X and the y so I'm going to say X Y
I think this is actually what it gets
and then I need to say matter dot world
dot add to the world this dot body I
need to actually put it in the world hmm
so it's complaining to me oh no sorry so
what happened to the box oh oh I took
out this TEDx that Y so now the whole
point of this is in show I want to ask I
want to say hey matter I want to say
give me give me a position which is this
dot body's position and now I'm gonna
draw the rectangle at paws X and paws
dot Y now there may be a way in fact
that I could dig into the body and get
its width and height but I'm just going
to store those out of convenience for
myself to the size of these rectangles
is never going to change so I can keep
that there is a big issue here though
which is that one is that once I start
adding the physics the box could wobble
meaning it could rotate so I'm also
wanting I'm also going to want to get an
angle and I am going to want to then
draw it with rotation so I'm going to
say push I'm going to say pop I'm going
to say translate paws X paws dot Y and
then the rectangles at 0 0 and I'm gonna
rotate by that angle there's another
little weird nuance here so I like for
myself I like to think about placing the
rectangle with the X Y in the corner and
then the width and the height and that's
the default behavior of a p5 but matter
doctor asks when you make a rectangular
or circular object the XY position for
that object is always in the center so
this actually I've told matter das where
the object is and drawn it in a
different place so I need to reconcile
those two things
so to reconcile those two things there's
a few different ways I could do it one
is first I should say rekt mode Center
so that I'm drawing but now you can see
everything's off in a weird place which
is maybe fine maybe I just need to
rethink where I'm placing the stuff for
example the ground would be now at with
/ - 8 - 10 so that's the same thing so
that's fine
that's one way of doing it and my
rectangle is in a weird place so but I'm
not going to worry about that right now
I'm gonna position stuff and I obviously
could use some math to get it to rest
perfectly on the ground but I'm not
gonna worry about that still there's no
physics happening why is there no
physics happening I created the body I
added it to the world it's because I'm
not running the engine so the what I
need to do draw is my loop so basically
I need to say every time through draw
step forward in time so I think I can
just say engine run no it must be like
this engine dot run engine I could also
look it up in the documentation no I got
for a second
update I looked it up I probably could
have shown you me looking it up but it's
not how do you look this stuff up let me
show you looking it up so if I go here
and I go under engine and I scroll
through here I could be like Oh where's
that engine got run function what is
there how interesting
but that's not to say matter dot engine
but that's actually not what I want I
want to use update I think there's two
different ways of doing things
engine dot run will just set the engine
running but I want to lockstep my p5
animation loop with my matter physics
engine so I'm gonna use update so and
what I'm going to do then is in here I'm
gonna say engine dot update but I need
to say matter engine update and there we
go well did you see that the physics is
happening oh but the ground fell out
below us we're thinking it's ok
everybody we can violate the laws of
physics and create an object with
infinite mass that never moves the
ground can be known as a static it can
be a static object so objects that you
create in matter DOTC ask the physics
engines can be static or dynamic by
default they're dynamic so the tricky
thing here is I'm using the same box
class to describe both the ground and
that rectangle so I could separate them
if they really are different or use
inheritance but maybe and what oh why
not let's use inheritance this will be
fun I've been talking about inheritance
let's use it so I had another file I
don't know if this is the best technique
I'm gonna call it ground and I'm gonna
say class ground oh this there's a
problem with this idea but it's fine
extends extends extends extends what am
i extending box and then I'm gonna say
constructor it's going to get X Y width
and a height I'm going to say super X Y
width and height so now this is ground
is a class that inherits everything from
box if you don't know about inheritance
I'll refer you to my video about that
and I can go into sketch and I can now
say
ground equals new ground and it's not
defined
all right now what still still still
class ground class ground constructor
ground is not defined Oh Oh what have I
done wrong
[Music]
where's my chat where's my help
ground up Jas ground up Jay s-class
ground extends box boxes not to fight
oh wow something really crazy happened I
kind of forgot that the order that
usually doesn't matter for me because I
don't have anything really happen until
the setup function and draw and
everything has loaded but I can't
reference the ground dr.azz javascript
file before box such as because it's
extending box and as its loading the Dom
its kind of look at the box file first
so this actually is one of the rare
instances where I've got to put this
script tag before that one no no that's
the bird yes this is gonna work any
second now yes okay oh it still goes
away so now I need to figure out how do
I just change one thing to make this
static can I do this this stop body is
static equals true okay so this is the
idea of I have a whole other kind of
body that extends box it does everything
the same way but I can set an additional
variable is static to true and so now
when this runs we've got our Angry Bird
box thing over there and now we're ready
to start working with our bird okay
so let's work with our bird now so we
need to get rid of the X in the Y I'm
gonna say this stop body equals matter
dot bodies dot circle X Y R I'm going to
do the same thing I'm not going to worry
about rotation so let me I'm gonna you
know I probably I'm gonna sort of cheat
a little bit by just copying the
is over because I'm gonna feel like
typing right now and then just change
this to circle and this dot R and there
we go and then I also should say matter
dot
no no just yeah matter dot world dot add
this stop body to the world or this dot
body to the world
there we go you can see what's rolling
away all right excellent
so now here we're kind of almost there
all I need to do is be like wait toss I
want to be able to toss this thing so I
want to be able to toss this bird over
here to this rectangle how do I do that
i okay maybe I do an if statement to see
if I click the mouse inside it then I
grab it well what are the nice things
that matter dot J s provides is this
very general thing called a mouse
constraint so I can add I'm gonna add
and this is a little tricky I'm
definitely gonna have to look this up
I'm gonna call this M constraint or like
Mouse thing for those let's use M
constraint for Mouse constraint and then
I'm gonna say M constraint equals matter
dot all right we're gonna have to look
this up so we're gonna go here under
constraint and what I want is a mouse a
mouse constraint this is what I want I
want a mouse constraint create engine
options okay so this is what matter dot
Mouse create constraint create so I'm
gonna say mater dot mouse constraint was
capital Mouse constraint dot create and
give it the engine okay so look at this
options dot mouse was undefined options
dot element was undefined may not
function as expected so matters is is
giving me a nice warning here explaining
that while you made this mouse
constraint but you need to tell me where
you're going to be clicking the mouse
and where I am clicking the mouse is in
the canvas so I could like it's as the
canvas as a Dom element does it have an
ID well one of the nice things about
using p5 is
I can just store in a variable the
result of create canvas which is canvas
stop which is this canvas object and I
should be able to now say I should be
able to give it some options and I'm not
sure and then so I can add a second
argument here which is options and I
don't I think I need just give it mouse
no I'm just gonna put things as null and
then element no hmm so maybe this is
canvas alt can't read property button of
null one of these is like the canvas
element timeout for a second
yes yes alka thank you I'm gonna do that
aliasing
Oh
alright I'm back after looking up if
what I need to do so what I forgot is
that I need this mouse so I need a
separate mouse object that had that I
can use to create and manipulate those
mouse inputs one of the interesting
things there's a live chat going on
right now as I'm recording this and alka
wrote a nice suggestion for aliasing all
these matter dot things you notice how
I'm trying to write matter dot matter
not matter dot everywhere so I'm gonna
actually just go over here and take I
can I can use this I forget what this is
called but this is kind of a newfangled
JavaScript thing where I can basically
just make a nice list of all these
objects I want I'm an engine world mouse
constraint and I'm going to maybe use
constraint and I can just set that all
equal to matter so basically this is me
aliasing everything that's matter dot
engine matter dot world matter dot
bodies so in theory I should be able to
just say engine now here this makes
things a little bit easier just mouse
constraint here so my code is a little
bit more succinct and I'll go back and
fix that in other places as necessary
but what I need here is a mouse and I
need to say constant M matter Mouse I'll
just call it mouse equals Mouse dot
create canvas alt so I need to make a
mouse object with the Dom element
associated with the canvas and then I
believe I can just put this here under
options and now here we go and we bring
this all the way back dare I say oh no
oh oh what did I forget I probably have
to add it to the world world dot add
world
mm constraint yeah look now I can pick
this stuff up and I can toss it oh look
what I can do better
yay Oh goodbye okay so in some ways I
could consider that I'm done right this
could be the end of the video you could
make your own version you could add some
graphics but let's do a little bit more
with this timeout for is like I need to
blow my nose
this is disgusting vile of my dirty
tissues over there okay so all right
Simon I did see Simon first posted in
the chat about aliasing and then I'm
using the syntax the update then Alko
replied with some different syntax so
apologize apologies for the miss
reference there
yeah
I'm thinking what am i doing next year
that's add let's add the slingshot I
think I should add the slingshot right I
think I'll add the slingshot or should I
add the more boxes let me add more boxes
what's left to do I want to add a few
more boxes I want to put images instead
of these just these boxes and circles
and I think I should try to add a
slingshot even though right now I could
kind of just toss it
but let's okay well the first thing
would be just adding more boxes so I'm
gonna change box two boxes and I am
going to now have a little for loop i 0
i is less than 3 i plus plus and then
I'm gonna say instead of a single box
I'm gonna say boxes index I equals a new
box and then Here I am going to then say
for let box of boxes little for loop
draw them all so now you can see oh look
at that what's so crazy is when they I
start them all at the same point that
two objects cannot appear cannot occupy
the same space in the world of physics
so they like burst off from each other
but let's do something like say 300
minus I times 75 which will stack them
so now I have a little stack of boxes
and then I can toss it in there we go I
couldn't knock them over
Oh over so this is there something you
want here to have physics engines work
and how I'm going to create some balance
in the system and you know one of the
things there is I probably need to
increase the number of iterations per
update in order for it not to be able to
move so fastest to jump over the stuff
but let me just run this again I'm gonna
really see if I can knock this thing's
over yeah I knocked them over I could
also play around with the the properties
like restitution and friction
which are physics attributes of each of
these objects a restitution being
elasticity or bounciness so maybe
towards the end of this video I'll try
adding that but now we're in pretty good
shape
so let me add the slingshot so there is
so what I did right now is I created
this idea of a mouse constraint and a
mouse constraint is this very generic
constraint that just like anytime I
click on something it'll make a little
spring-like connection between where I
click the mouse and the object so I can
move it around but what I want is
actually to introduce a constraint maybe
right here that's fixed and only
attached to the bird and bird itself
just say that again because I just hit
my mic in case that made some horrible
noise make it could make a constraint
that's fixed and only that's fixed to
this point and only attached to this
particular bird and I think it's
probably smart for me to wrap this into
a class because I'm really going all in
on this object-oriented programming
approach so let me make another
javascript file called sling shot j/s
and let me just write out the outset
remember that I need to refer to sling
shot a s then class sling shot so what
does a sling shot need so it needs I
think it needs an x and a y like where
is the point from which this object will
be attached and then it needs oh no no
that's not where these go needs an X and
a Y and then it needs a body like what
people are asking about my age in the
chat just thing I use a very soft focus
it makes me appear much younger you'd
see if you took about that video of me I
don't actually but on the street there's
anyone whatever alright um what was I
saying I need a point in a body so now
I'm gonna create let's call this this
stop sling call it equals constraint dot
create and then options I think this is
how that works
and this should be constraint constraint
so I'm gonna make up some options now so
I need to configure that constraint so
the constraint can be something that's
between two bodies or between a point
and a body so I'm going to make it
between a point which is I'm gonna have
to look this up a pause for a second I
have to so I need to look in the
documentation
I said matter that engine and draw okay
[Music]
yeah yeah I knew that sorry
the two things I want to be connected
with this constraint are a point which
I'll call point a this is in the in the
matter digest documentation specs point
a which is an object with an X which
will be what I pass in and a Y which
will be what I pass in and then also it
needs a bot to be connected to something
else body B so I think it could be body
a and body B or point a and body B
there's different ways you couldn't
figure it but I want a point at a body I
could make another body that's a static
body I guess but a point is the
equivalent to that so then the body is
going to be oh I don't think I need an
object you're just this particular body
and that doesn't know semicolons then I
want to say world dot add this to the
world
this dots link and the other things that
are part of a constraint I believe I
forget that actual is stiffness like how
would the it's like a spring connection
how stiff is it so I think that's
actually just called stiffness and let's
actually look in the matter J has
documentation constraint and under
properties body a damping ID label point
a point B render render
ba-ba-ba-ba-ba-ba-ba-ba-ba stiffness a
value of 1 means the constraint should
be very stiff a value of 0.2 means the
constraint acts like a soft spring so
let's just try just to start with let's
try point 5 and then a length is very
important what is the rest length of
that spring let's make it like 20 pixels
okay so now I've created this slingshot
I also think it would make sense for me
to draw it so I'm going to do a show I'm
going to make a show function and I'm
gonna say stroke 255 and I'm gonna draw
a line well let's do let's do let's make
pause a equal this dot sling dot Point a
and pause be equals this dot dot sling
body dot position these are the two
things that the sling the string the
spring the connection the constraint is
attached to so draw a line from pause a
dot X pause a dot y pause be dot X pause
B dot y hmm oh I'm not I haven't so I
think but I'm writing this class I
didn't even make the slingshot so now I
need to go into sketch KS and I'm gonna
make a variable called slingshot I'm
going to say slingshot equals a new
slingshot and I need to give it a and a
y which where did I make the bird fifty
three hundred let's just put it at the
same place and then I need to connect it
to the bird's body you can see already
look this is kind of like stuck
somewhere right this is great but let me
draw it because I think that'll make it
more obvious slingshots show and what
did I call it slingshot show slingshot
show up pause B cannot Oh body B body B
it's point a and body B so if I do this
right you can see there it is now okay
there's some goofiness here so one thing
that's really weird is that if I drag
the mouse off the mouse constraint gets
confused and thinks it's stuck so that's
just an interaction design problem and I
have to iron out at some point let's
change a few things like let's make the
bird much smaller let's let's move
everything over a little bit just to
give me a little space here so now we
can see and maybe I should make that
rest length a little bit longer there we
go and maybe the stiffness should be a
little bit less there we go so I'm
pulling this back the idea is I'm going
to pull it back and let go and I want it
to fly mmm interesting why is it kind of
popping there is that the stiffness oh
yeah maybe I wanted even less stiff okay
so we're getting there I have this
slingshot now now how do I release it
whoa I have to come to come up with in a
way of releasing this oh dear so when I
release the mouse hmm how do I do this
if it's moving at a particular speed
if the velocity reaches a certain
magnitude let's try that
I need a way somehow to launch this bird
off of the slingshot like the slingshot
should be broken and it should well this
constraint should be broken and it
should go flying so first let me at
least create a mechanism for that
so let me write a function here and I'll
call it fly and I think if I just say
body um
this dot sling body be equals no look if
I just detach the body then the thing
that's attached to it will go flying so
let's just try in let's just add just as
a test a key pressed function if key
equals space then slingshot fly so again
I need to figure out when it should be
flying but if I just hit the spacebar
ooh
cannot read property position of null
slingshot line 24 so okay so only if
this starts like if there is a body
attached then should I bother to draw
the line okay so I need to also not draw
the line if there's no body so let me
run it and then hit there we go
we can see now could I possibly time it
like now my interaction is I have to do
this yeah but I shouldn't have to hit
the spacebar right I shouldn't have to
hit the spacebar so how can I determine
a time where I should have it fly what
if I were to get it's the body's speed
right so can I say console dot log body
B sorry
what if I could somehow get what if I
could what if I could look at the body's
velocity wait a sec I'm getting some
suggestions so I don't want a pirate
aschen the chance tank make it so when
you release the mouse the event triggers
that's not going to work I don't think
oh I can't say world dot remove world
dot this sling but I want to keep the
sling because I'm gonna reattach it okay
point 9 seconds later yeah I could do a
set timeout that's an interesting idea
so a suggestion came in the chat to just
look at when the mouse is released I
don't think I think this isn't gonna
work
timing wise but let's let's try it what
if I just write function Mouse released
which is a global p5 event for when I
release the mouse and there I could just
say slingshot fly so now I'm pulling
this back and release the mouse see it
didn't have a chance to move I before it
could start pulling it so I could use
like set timeout this is kind of
ridiculous I could and then like do it
in like 50 milliseconds later
is that right maybe it maybe should be
more like a hundred milliseconds later
oh great that worked
weirdly just giving it a little time
later I was going to go through this
whole thing of testing its speed you
know what this is good enough I think
you could probably those of you watching
you might want to come up with a
different solution but I'm surprised
that this actually worked just a little
set timeout just give it 100
milliseconds later thank you to beta
tester 704 who maybe was the one who
suggested so this is great we have
hangers now one thing I should say is
like at some point I want to be able to
like put
put have a new bird and so there's a
variety of ways I could do that let's
use key pressed we'll just use a key
press right now and I could say I could
say this I could remake the bird and
then I could say a slingshot dot attach
this bird body and then in bird I'm
sorry in slingshot I could say attach
get a body and I could say this dot
sling dot body B equals that new body so
here now what I should be able to do is
I should be able to let it fly
knock the stuff over and then after I
want to probably detect when it should
do this I can hit space oh sorry yeah
whoops space and then oh there isn't
there's a big flaw here in my system
I'm not gonna worry about it this is
good enough because I could like first
of all I can use the mouse constraint
the mouse constraint will let me do
anything and then I can also release
when I release the Box also the bird
gets released but you the view these
things can be cleaned up
these are interaction design problems
there are better solutions but I've got
this is kind of exciting I've got the
basics of Angry Birds here all my rights
you should utilize the concept of
potential and kinetic energy for it it's
of just a pure projectile thing so I
would love to see somebody make a
variation on this and and submit it to
the coding train comm there's a way that
you can submit your versions to end
doing that but I just got one more thing
I want to do I want to add some images
to this I could add sounds but that's
not really me I'm gonna add some images
so give me a second I'm gonna be right
back with some images
[Music]
now how do I get it to this yeah
ah so Simon Says if I say world remove
world this sling it would keep the sling
just remove it from the world and I
could add it back in that is that's
actually and then I could actually just
reuse the same bird but oh there's
another big problem yes before I add the
images there is kind of a big bug here
that it really should fix which is that
when I put the new bird in there's
actually another Bert that old bird is
still here I'm just not drawing it
anymore maybe I want it there right it
should actually is there or maybe I
should remove it but probably before
right now I should just say world dot
remove bird body world and it's always
it's the other way around so I believe
this
right let me let me see if I can show
you what I mean right I'm going to shoot
this over there now notice this is here
it's going I'm not gonna see it anymore
but I'm gonna try to shoot it right over
there again see how it hit the invisible
thing so let me remove it and that
should that should fix that so if I do
this and it's there and then I do this
again oh I do this again anyway you can
see it's gone it's removing it so there
are different ways that I could approach
this assignment in the chat is pointing
out that instead of just making the body
be of the slingshot null I could
actually remove the slingshot
I could reuse the same bird by just
resetting its position so again you
might make have a different take on this
refactor this in a different way but
I've got the basic idea down now I want
to start adding images so what I've
pulled up is I have my coding train
characters um let's see this makes sense
what's what would be good oh we should
definitely use the this dot for those
like rectangles and then maybe what I
might have an angry bird this looks kind
of angry or this maybe we'll use this
little this little square thing to fly
okay so let's grab the let's so let me
let me edit these files a little bit
be right back cuz there I couldn't do it
in Photoshop and then I could like
actually trim it to the edge but I'm
just gonna do this myself good enough
I'm gonna call this the dot I'm going to
do image size let's make it like 75
pixels high so 34 by 75 okay oh did I
cut off its top I think I did I totally
did
there's a function in Photoshop like
trim that I could use just lazy
75 no no I know I know I know
30 75 33 by 75 is the dot
I guess I'm cutting off its top I don't
care
dot and then this will be my bird oh but
I should have something's worth circular
that's fine
this should be oh you know what I can do
oh I have the emoji ones that's what I
should be doing
actually I've a 30 by 30 so let me just
get this I'm changing my mind let's move
this over here
oh this is already 30 by 30
and so wait let's use let's use this the
semicolon let's look at the emoji one
this is what I meant - let's grab this
one and let's do the oh maybe this will
be good this will be good let's use this
one or is the emoji one's gonna be
better
these are a little simpler no I like I
like it being a more of us let's do this
is that the emoji one is the full-size
yeah so there's this is good I guess
because it's
sorry I'm like go spending way too much
time with this use the dot for the bird
upset blocks yeah and let's use the the
equal sign yeah okay this is good
[Music]
okay is this think 100 100 is fine
oops
ah
nevermind I give up
where was that
why-why-why I'm losing totally I'm like
obsessively losing my mind here it's
fine okay go back here thank you
yeah clearly all right so I have all of
these coding trained character image
designed by Jason Haglund thank you for
that I'm gonna use the dot for the bird
it a little smiley dot and the angry
equal-sized sign for the block now this
block is square I think not rectangular
so I'll probably need to do is upload
these images to the web editor so the
way that I will do that is by just going
over here doing add file and then I can
just drag these two images in you know I
could put them in a folder or something
but I'm and then we can see they're
there so now I have dot PNG and equals
PNG and you know they're there's
probably a thoughtful way that I could
think about what if I want different
blocks to show different images but I'm
just going to in a very simple way use
the preload function of p5 I'm going to
have a variable called dot image and a
variable called box image and I'm going
to say dot image equals load image dot
dot PNG and box image equals load image
what was what does it called equals dot
PNG and let's first just change the bird
to show instead it doesn't instead of a
circle and that a fill I'm just gonna
say image image and then I'm what was
the name dot IMG Lulu and then I want to
say image mode center and then I'm going
to have to say this this dot R and this
should be the start time
- really if I'm thinking about that as a
radius so there we go so we can see now
I've got the little dot it's so tiny I
should make it bigger what size did I
give it I gave it the size of 16 I think
the image is actually a hundred by 100
so I could do this that's like very
large but so let's make it 25 so this
will be a good start
and I think what I would prefer to do
also is draw the slingshot behind the
bird okay so now I have my dot there it
goes now I just need to replace those
blocks so the boxes when I make the box
I am in sketch j/s when I make the box
I'm giving them an x and a y and oh no
no no where's that I'm giving them an X
and a Y and a width and a height let's
just let's just make them square right
now I could have an image that's not
square so they're much larger now but
that's fine and then what I'm going to
do is in box let's change it to image
image what did I call it box image there
we go oh we've got a problem so the
ground is is messed up now because the
ground is also the equals so and we also
to say image mode center then the ground
is this like smooshed equals but guess
what not to worry
I used inheritance oh I'm so happy I
used inheritance and I could just
override the show function and there's
probably a more thoughtful way I could
do this but I am just going to put this
all in here and I'm just going to put
this back to rect and back to this and
now there we go
so I now here we go
I have my Angry Birds clothed with p5
and madder Dutch a s and I'm gonna pull
this back release it oh wow wait why did
it make it so small so one thing I
really I really need to do a lot of
refactoring on this because I did
something very silly here where I remake
the perky but I use a different size
which having a hard-coded value here is
pretty bad all right let's try this one
more time
not this sound No ah no stop ah what's
going on
are you hearing music right now no okay
wait wait wait wait wait I have an idea
I have an idea let's add restitution so
I'm gonna go to the bird and when I make
the body I could also add some options
for example one option might be
restitution which is like elasticity
let's give that a value of one value of
100 wait a sec let's look it up in the
documentation body restitution
always positive and in the range 0 to 1
a value of zero means the collision
would be a value would be perfectly
inelastic and no bouncing would may
occur a value of 0.8 means the body may
bounce back with approximately 80% of
its kinetic energy so let's try giving
it a value of 0.8 Oh guess what I can
make up this variable called option
until the cows come home
but if I don't actually put it in
creating the body it's not gonna make
any difference so now let's see how that
changes things there we go it's kind of
like Jenga we're just like slid out a
little bit oh wait a sec okay oh the
things have gone really off the rails
here this is supposed to be twenty five
and let's let's let's let's be a little
bit more kind let's give it point five
and let's also let's also go to the box
box and let's give that also a
restitution okay here we go this is my
Angry Birds game made with PETA - Mater
Dei s and coding trained characters
[Music]
thank you for watching this coding
challenge I hope that you make a much
better version of this with your own
characters your own sounds your own
interaction and maybe you'll even you
know you could just imagine all the
possibilities here so thanks for
watching and please please share with me
what you make check the link in the
video's description for the page on the
coding train calm which will have all
the code for this as well as a
processing version of this hopefully
which is a as well as a place where you
can submit your own version ok thanks
very much and see you soon goodbye ok
what's 110 that was an hour right but I
had to stop a bunch of time so this will
be less night that's all I'll give the
birds some math add some friction yeah I
should add friction give it math all
those things re Aman says mom told me to
sleep as soon as you finished go to
sleep go to sleep
re Aman alright this is done thanks for
watching this Angry Birds coding
challenge so now the stream is working I
feel a little better in congestion feels
even a little bit less and yeah let's
let's I don't think I'm gonna do
anything more with this stop I just want
to play it file save so if you want this
code you can just go directly to this
URL coding train sketches this thing so
I don't even have to upload it to github
it will be there ground should be green
yes and I'm gonna say I'm just curious
full yeh alright here we go oh wait I
need to do some thumbnails
so let's so let me help
Mathieu with a thumbnail although
honestly I think is probably better just
to have some green backgrounds and we
can screenshot this marching cubes is
definitely something I want to do
okay that's good enough I should really
probably do that while I'm not
live-streaming
it would make more sense oops p5 is not
required for the matter library by any
means it's just I'll kind of like using
it matter has its own rendering okay
here we go
what's
wastes like what is going on oh this is
bad cuz I have to click into it first
for focus and then it gets a mouse
released no what's going on
it broke am I losing my mind here did I
mess up the code or does it just not
work that's weird so why did it not work
in full no I just like losing my mind
does it have a problem once I do this no
I was just losing my mind
shouldn't you appropriately crop the
square probably
Oh something is wrong it went off the
edge because the ground of the gopath
hold on
something is wrong here oh the square
wasn't cropped let me fix that I didn't
realize that this image is not cropped
so and now it's actually what is it it
is no didn't I just didn't I just crop
it Oh somehow I didn't save it why
didn't I just did that crop save so now
thank you it is 84 by 100 so let me go
here unfortunately this isn't going to
make it into the video equals let me
delete this file add file wish I had
noticed that and then the boxes are
actually 84 Simon is asking are the
coding trained characters available I
will make them available so where the
boxes 84 so this is gonna be more
elegant now yeah that's why they were
like wider still they're acting
super-weird
do I have a mistake or is it just really
not cropped at the bottom yeah I think
it's right it's just awkward gifts the
batter dot body set mass body body mass
times 4 can I just do this this stop
body x equals 4 no dumbass maybe not
[Music]
matter dot body set mass body this stop
body just stop body this dot body dot
mass times 4 oh yeah I was good
maybe I should do a little interstitial
here
sorry interrupt I'm about to wrap this
video up but I want to show you two
quick improvements before I finish
the first one is when I the first one is
when I loaded my coding train equals
character it was a square image and
there was actually a lot of additional
extra space on the on the width and so
there was some funny physics happening
that looked a little bit off so I've now
actually cropped and re-uploaded that
image so that it's 84 pixels by 100 the
other thing that thanks to a suggestion
I increased the mass of the bird's body
so the the matter digest will give
element some sort of default mass
probably based on their size and their
geometry and I just take the bodies and
set its mass to its own mass times 4 and
so now if I were to play my game one
more time let's zoom in on this just
been coding func okay oh it was supposed
to be a loving scene they're just
hugging each other as they knock into
each other I don't know does that sound
weird okay back to the end of this video
I should just finish the video right
there never mind about this back to the
end I'm just gonna finish it up right
now
so this is my version there are so many
flaws to what I've done here in terms of
how I've organized the code there's like
weirdness and the physics I haven't
really been so thoughtful about the
design the whole slingshot mechanic it's
kind of off so there's a couple things
you could do from here number one go to
the coding train comm find the page for
this challenge the source code will be
there as well as any other supplementary
links and you can submit your own
version maybe you just want to improve
the way I wrote the code to make it
better organized so that people could
see that maybe you want to make your own
delightful design of a scene maybe you
have a totally other game mechanic and
idea for how the physics of this world
should work maybe you actually want to
build this out to be you have more
features and levels and score there's so
many possibilities so make your own
version of this you don't need to use p5
you don't even need
matter these kind of concepts will
extend to other drawing libraries and
game engines you know phaser might be
one that you would should take a look at
even perhaps up you can check out the
video from cats mall about using phaser
and code pen that's on this channel and
I will see you in a future coding
challenge thank you look bye there's
other properties that need to be updated
and set mass handles it okay puppy pile
bust that Walter Inception yeah okay
I'm which one twenty I said it wasn't
gonna do a three hour livestream today
and somehow I managed to do that I
definitely have to go so what happened
to the sound oh it's just slow alright
everybody thanks for tuning in to this
week's sniffily episode of the coding
train brought to you by the common cold
my nose is red my head hurts
and yet I'm here coding for you I won't
really make this data in api's of course
it's going to happen YouTube thank you
for your support in making this course I
hope you make you all of your own
versions of this I would like to release
these images and Creative Commons
non-commercial yeah just like anyway
so thanks for tuning in bye everybody
[Music]
wait a sec I haven't left yet I haven't
thought there was a question in the chat
our coding challenges are Wednesdays at
the same hour so Wednesdays at 10:30
a.m. Eastern Time is my regular timeslot
I can tell you for sure that two weeks
from today I will not be in New York so
there will be no coding challenge when's
on that Wednesday oh I have something
else to announce I forgot about you I
will mention a week from now I kind of
have a conflict in the boarding so I'm
hoping to still do Wednesday but a
different time so stay tuned about that
so the way to find out yes unfortunately
by subscribing clicking alarm bell you
know you don't have to but if you feel
so inclined subscribe and click the
alarm bell because when I schedule it
you'll get a notification and I usually
schedule the Wednesday time the day
before the night before some time on
Tuesday but you can feel mostly
confident with some small exceptions
that Wednesday 10:30 a.m.
I forgot there's another thing I want to
mention which is that I will be at the
IO Festival which is a festival June 3rd
to fix Oh I'm standing in front of this
June 3rd to 6 2019 that's coming up
pretty fast
and look there I am Daniels Schiffman
creative coding I'm on a mission
apparently I'm trying to read this
myspace really bad I need to I'm so I'm
not giving a conference talk at this
because that's not something I'm very
good at I was just gonna do like a 45
they have a 45-minute time slot I'm just
going to do some live coding so if you
have any ideas for what might work well
in that context with a live audience I
know other people have actually done it
I do this stuff all the time here on
YouTube but it's a little different
performing so to speak in front of a
live audience it's not something that
I've really done so if you have any
suggestions about what might be what
might work well let me know the coding
train what's your twiddle and what
your Twitter handle at Schiffman or at
the coating dream thanks everybody
let's let's take you out with the polar
to cartesian song oh and if you want to
make remix versions of music things
using my voice I really really enjoy
that oh I was gonna make a video about
how to contribute to the coding terrain
comm website I have to go I have to go
next time I'd give them the summer stuff
I didn't get to oh well
[Music]
I'm gonna say once again coordinates
[Music]
coordinates
[Music]
auto-tuned and the internet will fix
that for me
[Music]
coordinates
[Music]
this start this start the start that
this start song never forget the vista
miss somebody composed that song for me