all right oh I've so I've just been
afraid okay yeah but I in theory that
would be better to get that working and
I should have you able to do that okay
we're gonna start streaming you're
probably already streaming right now
hello I was gonna say good Friday
afternoon is it yeah no because a good
Monday morning is your thing oh it's
Good Friday but good Friday is like a
holiday so it sounds a little weird
anyway choo choo I don't have by the way
I don't have any like opening things or
closing things I was watching
captain disillusioned who says like you
know so captain captain is Lucia's a
YouTube youtuber oh he makes videos
about how other people fake videos fake
videos yes well he's like a visual
effects artist and shows how other
people made like a fake trickshot video
that's actually anyway he says love with
your heart use your head for everything
else you say good Monday morning
somebody else Oh like gibreel I've never
watched a realist videos he's another
youtuber he says always feed your
curiosity okay wait I should say hello
hello everyone hi my name is Dan yes
that does not a health hazard I don't
mind well that's actually Jesus yeah I
would really like to get coding trained
Brandon train whistles that's like a
thing so we're here for a very special
Friday livestream I'm just gonna I've
got two laptops going I'm gonna just
check nobody is saying anything like the
audio is not working the sound is not
working people are saying what's this so
welcome my name is Dan this is mpj from
fun fun function hello if you're not
familiar with the Fun Fun Fun Fun Fun in
function channel and also there's a you
have like sort of two channels is that
right yeah exactly
so we have
right yes kind of it's yours is 600,000
subscribers I fun function it's 180 mm
I've been running it for like 3 years or
something it's very focused on like the
joy of learning and like being being a
little bit more about it's like
vulnerable and yeah having fun with
programming and like accepting that it's
horrible everything goes horribly awry
all the time dem tips is kind of the
same thing we took it over a year ago
home from Travis Nielson right running
it for many years it was called dev tips
for designers initially and it's a lot
more front and focused than functional
right so it's it's yeah it's basically
more tooling and more for people who are
just getting into development from other
other supply designers and your a based
I'm so in case people aren't familiar
you are can you just tell a little bit
about yourself and your background and
where you're based and stuff that you've
done yeah so so then apparently I don't
have to introduce you know people are
saying your audio is love alright so
let's let's just it's not muted let me
well what I think this is the best place
to adjust it so let me first turn my
talking 1 2 3 4 5 is that okay
wait I don't know I turned I think I
turned no way that should be like
yourself oh I don't know which was which
I turned mine off yeah alright cool so
alright let's let's get it up so now I'm
talking it's at level 40 if I scream a
little then it distort like but this
should be fine see what the street says
and yeah yes it's it's this is level 40
as 40 okay that sound good to me at what
point yeah that is why I that is why I
said 40 sorry
but you said before you have 40 new ones
at level 4 yeah yeah
so since like in PJs boys it's coming
through dance at Microsoft
that's right now that's impossible
oh wait Matt sure who does a video
editing says can't watch right now it's
very important they're at the same audio
oh yeah this is probably true no now
we're gonna move to 50 yeah so
oh no not 50 you're at 40 yeah so I'm
gonna move mine to 30 so my mic is now
at 30 and we're gonna just let's just
count to 10 1 2 3 4 5 6 7 8 9
tantor how is that so counting to 10 how
is that everybody we have now we have to
wait 30 seconds this is great it's like
this is good practice for me because I
want to do way more live streaming right
yeah I find that this it actually works
really well for me I really like the
higher energy of the live stream and
it's less like the interactivity with
people and you're like yeah turn on your
mic 6 level yes but the same level of
like hearing the thing is like this
what's actually going into the computer
is one thing all right
us aren't being treated separately
they're only being treated separately
here because I have a very like
non-sophisticated said yeah it's
actually just going through this is like
a left and right channel which I've
mixed down tomorrow yeah because our
mics are also a different distance yes
oh that might actually be the whole
thing yeah I have different mics to
whatever like too loud soon though but
we've are talking yeah it's so people
are saying it's good I'm gonna check so
I have there's two chats going on here
one is the YouTube chat this is a slack
channel for patrons sounded good from
here right all right so we're gonna
trust that this is fine yeah and you
know what we're good
we'll come on to this another day that's
true we'll do this together that's true
many times oh yes I think for sure okay
so we were back to I asked mej to
introduce himself a little bit AHA's
background
oh yeah that's her so I originally
actually from a theatre background okay
I sort of me too yeah really yeah I
don't know what counts as an actual
floor background yeah did but yeah I did
a lot of amateur theater like my teenage
years and I then went to Terry College
yes not in college but High School the
thing is nine nine to ninety year nine
to twelve in school and then I learned
programming and started an e-commerce
business ran that for a couple of years
tank that then started doing consulting
and eventually on ended up at Spotify I
worked there for what was it five years
oh well and during that time I like
procrastinate a lot from working on it
spend a lot of time writing Cora posts
and that is how I like my how I gained
my internet fame which are then
translated to Twitter and then
eventually somewhere on that start a
YouTube channel called fun fun function
and that's sort of where I am right now
and at present you are actually doing
fun fun function as you're kind of like
full-time
yes exactly yeah that's amazing yeah
it's great fun it's also dreadful to not
have your own boss yeah like I kind of
employed a boss in David so he can
realize it's the person thing it's like
no you have to send the invoice like so
out of the corner of my eye I'm like
tech checking the there's a lot of like
disagreement about this to check here
yeah everybody every I think we're gonna
be fine yeah so uh try I suppose unless
something goes like horribly awry
maybe now we can turn the chat from
talking about something other than the
audio yeah it is a big rap ologies for
the echoing any sound quality by the way
is completely my fault just to be clear
about that yeah so just to give you an
idea here like I come into this room and
it's like there's a lot of echo in this
group and you know why there's a lot of
echo I'm gonna show
there's a lot of echo like because these
soundproofing pads are just lying around
on the floor where they're not like
doing anything like they should like you
have these nice mic put them up okay
what if I just like stood over here and
held one yeah that would help my tank
actually but they should like you should
pass them up you know I don't know all
right so we don't so as usual I have
done no preparation for this because we
actually met earlier today to like
potentially prepare but then I just
talked about all sorts and so we didn't
prepare yeah but we were both extremely
talkative people well looks like it yeah
yeah well yes the intentions were good
yeah so the intentions who are actually
bad like what our attention was do not
prepare all right I was like we
discussed like should we prepare know
the relation yes way let's just wait
that's true
it's true huh so I don't like that yes
so what we thought we would try and you
know we'll be here it's for some amount
of time between 30 minutes to I think
probably less than two hours and we'll
see we I thought that what would be
interesting to try would be for me to
teach up the wrong word advised and
introduce there's higher p5.js to mpj
who has maybe never used it before no
never never I briefly looked at
processing because that's it that's yeah
like there's a lot of people from my
audience coming in here right so perhaps
we should talk a little bit okay you are
yeah okay perfect
yes oh great I couldn't have it so let
me first let me try to explain this in a
couple different ways number one is
there is a tool called processing which
is a Java based programming environment
which was developed at the MIT Media Lab
by Casey Reese and Ben fry started the
project
excuse me started in 2001 so that's like
some amount of years ago greater than 15
and so that's actually in many ways how
I got introduced to programming was
through that program environment I've
done some before but that's really where
I started to get involved in programming
and open source and that type of stuff
there was a point to what I was saying
yeah okay so um so I did where we are
right now where the two of us are
standing is on the ninth floor of the
Tisch School of the Arts which is art
school at New York University there's a
film school dance program photography
and a place called ITP
it's where which is a two-year master's
program that's where I discovered
housing as a student different workshops
were given in processing when I was
learning I would just love to make an
interjection of you how insanely cool
this floor like us walk in here and
there's like tons of people doing all
kinds of physical computing stuff with
like 3d printers and things blinking and
like when you walk in there's a wood
mirror like with a little wooden flips
that is controlled by a Kinect so you
walk in front of it and it like flips
all the little wooden boards to create
like a shape of you like a mirror image
of yourself important just like all
kinds of stuff like that it's such a
wonderful and - to walk into you just
feel like ah excited about
I want to make yeah and if you're
by the way if you're looking for that
project it's called the wooden mirror
and it's by an artist named Danny Rosen
who also teaches in ITP and there's lots
of videos and things online I'm sure you
could find comments that actually
amazingly that project was first created
I believe in 1999 which is way before
processing Arduino what did you use it
was just a plain webcam oh so it was a
mapping of the brightness of each pixel
to the angle of each piece of wood with
when when the light is reflecting on it
if it turns up it's brighter if it turns
down it's darker oh so the effect is
much stronger with the Kinect because
it's able to do this sort of background
removal so I think before the connector
usually was like a black curtain or
something that would be there so you
would be able to see the silhouette okay
so yeah so that's how I teach now full
time is fast-forward a whole bunch of
years later and also work on something
called the processing foundation which
is actually a u.s. nonprofit charity
that maintained
a few different open-source platforms
for education creative coding and art
processing processing dot Pi which is
like a Python version of processing and
then most recently a project called p5
GS which was created by Lauren McCarthy
there's the p5 just web editor that
caste Tarek Asian made and so p5 is
probably the JavaScript library that I
use the most on my channel to do quick
tutorials about the basics of
programming and also a lot of like make
a simple like game or do like recently I
did this visualization of the sierpinski
triangle which is a fractal oh really I
can pull it off and then this is the
thing I also do which is every 30 but
the thing about it's really useful
because we know that 30 minutes is
passed
oh that section for the live stream
because we probably that was like 10
minutes beforehand
people are saying system print topic
please so I'm sorry I never have the
chat right here in front of my face
which is kind of toys in the corner of
my eye rambling overflow alright fine
I know ok so what's interesting to me
about this yeah is p5.js is javascript
library that's designed not for this
scenario in a way because of course it
can work in this scenario but it's
really more designed for a scenario
where somebody totally new to
programming yeah enters and maybe
somebody who's interested in art and
graphics and information whereas I think
we're in a situation here we're
obviously not new to programming and in
fact I've done almost like you have a
different set of knowledge and
background of Brunt programming than I
do
cuz I don't really have that
professional software development
experience yeah so what does it mean for
a library that's geared to for beginners
for a software developer to create from
that angle we're gonna yeah so like I
come come into this a little bit from a
background where my brother is an artist
yeah so he's like a proper one like that
he does that full time and I've been
thinking about we have been talking
about like here a me teaching him
programming and do you have some kind of
project together and then processing
like
immediately comes up because it's a it's
a language that is very popular among
artists and so I've been like going like
yeah I should probably do this but I
never get around to yeah so this is like
the best opportunity to do so and the
way like that I've done a couple of
these pair programming links on my
channel and the way we usually set it up
is that one person is the driver and one
person that's the navigator the driver
is the person that is doing the actual
coding and the navigator is the person
who keeps tab where we where we are
going and like the kind of like more
overarching aspect of the task and in
our particular situation we it have been
good that the driver doesn't know crap
about the subject and the Navigator is a
little bit more knowledgeable but the
navigator is not allowed to type
anything like it's just the driver that
is doing it yeah so that's all that's
that's so uh maybe I don't know what the
first thing I tried maybe you should try
to make a p5 sketch without me telling
them anything and see what happens
yeah okay so let's yeah that's you like
okay p5 Lib let's just do that see what
happens thank you we found the website
you're on a an interesting page of the
website because it's not actually the
home page yeah okay likes yes because p5
is a library itself what you found is
like the page about the libraries to use
it like yeah like you know they're in
the right place yeah like you know what
that's actually not how I use it
so this is interesting so the way that
I've always shown people in the way that
I use p5 yeah is by not it's a it's
purely a client-side library yeah but by
not like doing this magic NPM thing I
mean I know I do is like magic NPM thing
a lot of times but I only ever do them
if I'm doing some server-side to to me
like this like really project management
yeah like I to me like it's a non magic
thing yes like script tags and stuff
like that's I don't even know how I
don't remember how that maybe we should
try making your first p5 sketch through
module yeah module is stuff let's I mean
let's let's try this you know I'm gonna
just create an integrated terminal
and yes because okay here's the one
thing is we're standing in front of that
terminal okay and perhaps we should
switch our substitute a browser and flip
us over okay we can do that that's cuz
that is more like they do or what if we
switch the browser to this side yeah
or what if you do that I do have the
capability of doing that but it will
take more time yeah okay all right all
right
and also I don't maybe this is going to
be fine later but that is yeah yeah
pretty small cool okay all right so the
thing is like a question for the
audience here because this is something
like normally I just when I I'm coding I
just tend to use create react app
because even if I'm not you know yeah
because because it's such a fast way to
get an auto reloading environment up and
I could use like HTTP - server here
which is a great NPM modules but yeah
but it doesn't give you auto reducing
live server it is Oh a server awesome
let's do it
so NPM - gee install live server ah yeah
install live server perfect I've been
looking for this okay okay I haven't
been spending I've been thinking about
this several times and I everybody
always tells me just use the like blah
blah blah plug individual studio itself
but oh oh this is wrong in all right so
yes do that yeah
all right you all it's right behind us
here
so yeah I'm pointing to okay so if I
type something here and save this as
like index dot HTML and we do that oh
yeah and I said does it update
that's just typing you the chat by the
way yeah how do I get it out though
oh you just changed the link in the code
yeah but it doesn't update yeah I have
to refresh no that's the whole point of
life server yeah don't refresh so how
should I get it to refresh
only do it for like that does it not
refresh oh yes it's safe it should
refresh on a map and safe does not but
how would it like it would have to
inject some kind of JavaScript here it
for it to work yeah I mean I do it but
caps perhaps I have to actually have
like HTML or something otherwise it
won't know where to inject stuff the
chat will probably solve this for us
eventually see this this is the message
dance still does not know about the live
server via scope engine turn off cache
in the browser someone is saying all
right do that someone a network so this
is well it's actually under settings
yeah there you go you're good yeah under
network no no wonder it's cold disable
cache disabled disabled cache they want
it all right okay let's do this
two hours later but this is why we like
to do elapsing we as well know it works
it's not works yeah interesting okay so
maybe what's the caching but you don't
even have the dev tools open no so it
probably wasn't it was the HTML so I
think it was the HTML thing okay so
great
step one because now it injects this
little job here yeah I needed that yeah
I needed a body tag to inject it yes all
right cool
so p5 you know what and this now now we
are gonna do it with the script tags
because we no longer have create react
that this doesn't happen you have to
create react app to use the modules no
but you need to something that browse
your browser bundle say my god you're
like web pack would be the set exactly
yeah so like create react app has like I
have you got we could be interesting to
try it with recreate I react app you
know what let's do that so I don't I by
the way I know almost nothing about
react so this would this could be our
next collaboration and I'll be the
driver and traveler Maria absolutely
I mean I'm not sure I kind of a
specifically don't cuz I don't want to
have to answer any react quite but no I
it would be great to learn about it yeah
like so it's pretty good and all right
so in solo package it might take essence
ah in the chat rightz you need the HTML
tag so everybody's again they're giving
us the solution 30 seconds later but by
the way everyone should check out Oz ray
Moses work on hands-free browsing KS in
the chat
hi honest would love to be blown work is
amazing no what's that
um he's working on a project called
hands-free I I might begin apologies I'm
probably getting the name of it wrong
yeah but it's using tensorflow Jas and
different machine learning and posing at
different things too but to help people
who cannot use maybe the mouse or
keyboard to browse and use their
computer through gesture and face and
case are you kidding me that is so cool
how do you find that oh hey sorry
Hannah's free J org alright we'll come
back to that way oh cool
okay so let's see see the fun fun fun
training Adam and then we're gonna open
open that folder instead if we can't see
it yet all right so I'm gonna pull this
crap over this is a mess there this is
the one we don't want it so amazing to
see how everybody like uses their
computer in like a different unique
weird ways yeah actually or maybe it's
just me who uses my computer a
completely nonsensical way and everybody
else is like the yeah yeah like
everybody has nobody I think it's a kind
of a like a fingerprint yeah
alright so swords we're gonna have to so
many weird problems I think pretty p5k
yeah but it's gonna be great
fine okay so let's yes let's do this so
all of a sudden we have like 18,000
different files yep
that's that's JavaScript development
Martin jobs gonna and more fun nice ink
pad and write because my
there's index.html and there's sketched
at j/s that's it I mean I I mean that
that is clean I'll give you that but and
then when I have to get it into an
actual app you like it's super annoying
like I'd rather just have a napkin start
and this is the thing it's like yeah
it's a little bit much but I know
exactly what it is and they they are
really good at keeping it stable that is
what's so nice about react that they are
like they don't change things around as
much anymore like I don't I've learned I
learned this like what is it like a year
and a half ago and it's kind of still
the same thing I don't have to relearn
but if today was your first day learning
to program maybe this would be too much
you think so like I don't know if you're
the third it's uh I use like I don't
know when you start learning programming
but when I started learning programming
like when when angular and stuff is
popular like so much stuff like the set
up and you had like these elaborate like
scaffolding blue like Creek react app is
like comparatively like very small
people like give grief about it like a
web pack and stuff but like I think it's
like extremely sweet compared to what I
used to be yes so the from the sort of
creative coding arts angle of bringing
new people in but goal is actually in a
lot of projects like processing mp5 is
to have the least amount of setup stuff
yeah so ball so that basically all
you're doing is writing a single line of
code and seeing a shape on the screen
yeah well anyway okay all right let's
all go moving so do you have yeah so now
we have a development server okay we
have you add P five to this all right so
I already run now npm install P 5 so I
should just be able to import P 5 from
and so these import things yeah is that
yes eight seven six something like you
know yes next I don't remember like but
it's it does it you have to be it will
like does this have to be compiled down
into something or it actually like the
browser with if it supports the whatever
yes adhesive support can just read this
itself good thing good a good question I
don't know what browser support there is
for your statements yet okay
it certainly doesn't support NPM modules
right but I think that the more modern
browsers actually can do import
incitements natively now but it's very
looking at in here everything is gets
bundled into app dot J yes yeah somehow
yeah exactly
yes let me just clear this out and then
we like get like on so that's where you
put like your HTML because a react
component is like a yeah is p5 in the
way that it's designed for beginners to
use it does all sorts of things that
probably a proper JavaScript developer
would really like think is like horrific
ly bad it's like everything is in the
global namespace yeah well I don't know
if that's gonna cause problems inside of
components or something but your is a
way to do a p5 means face like with
instance mode of various things so we'll
see where we get to yeah but I think a
good goal would be like can we just make
a p5 canvas inside yeah so I guess if
the clickbait the title of the stream is
gonna be like you using p5 would react
like that I don't know just figure out
okay and let me just draw it this choice
I want to draw something okay it's just
like how would you draw a sir so one
thing is p5 is looking for you can't
just you can't add like you won't be
able to well I'm confused already
because this is like JavaScript and
there's HTML in here yeah but yes they
think of this as the HTML okay so you
wouldn't all right oh yeah you what you
would have a p5 looks for when the p5
library loads it looks for a global
function called set up okay
what wow
whoa all right oh that was hard for me
dude there's another way you can do it I
wouldn't even know how to do my life
instance yeah all right I might have a
look I don't have that I have to look
that up I know I know it loosely I have
a video about it yeah but you could do
people you probably have to do p5
instance mode I'm guessing all right you
create like a new p5 object and blah
blah blah blah but no I feel like being
difficult can we do that because it's
it's kind of like the thing is like I
part of me wants to like no no yes you
just just do a global and and start
using it but frankly this is what I
would start looking at what I mean this
this live stream is not I think what's
perfect about this live stream what
we're doing is this is for an audience
to learn about how p5 could actually
work yet in the ecosystem of actual web
application yeah I am curious though
just to see if I doubt that this will
actually end up in the global namespace
well it's definitely a security
violation effect
yeah actually okay so function yes and
then what you would say is a create
canvas you would create the canvas I'm
gonna create a canvas element there's
something like purified autocrat no you
just say create canvas okay and then you
give it two arguments like the size of
the width and height of your canvas whoa
how is that where did that come from
yeah I don't know it's a vicious studio
and NPM and create reactive like or
amazing that's amazing I didn't like wow
it's so nice so like at a 310 300 really
and now is there any chance there's a
canvas great camera it's not defined
yeah so it doesn't it's not no because
it's not in the global namespace but now
that that would work so I know cameras
actually do you can type e v dot
background zero and that'll make the
ground black so we'd be able to see it
right now it's by default transparent
did you say peanut background and then
zero like zero and the color is our
Nagin color alright so I don't think
it's finding setup p5 because it we
could look we could inspire know if
there's a canvas global dot setup equal
set up something like that crate canvas
is not a function what happens if you
don't do p v dot anymore alright this is
what it is
okay alright so to do instance mode
we're gonna now watch a
four-and-a-half-hour video that I made
about it by accent no instance mode I
mean you should let me pull this up here
myself
alright cool basically what you want to
do is create a function that gets an
argument called like sketch or something
in it yeah and you could probably do
this in let me just show you yeah so I
mean um basically basically like let me
just show you I mean maybe it makes
sense for you to pull this up on your
screen yeah but the idea is this is like
a pee what you can't see what I'm
showing and let's hang on let's actually
do that so it's on the Whitney pp5 wiki
a p5 wiki I mean I just googled instance
mode p5 and it came up but that's it
that's exactly it
so this is what I guess scroll it up so
it's above us so this this is what now
you all know you can do it yeah I can do
it except I have to look this way now
this is what it helps being the hall are
like Americans all it this is this is
what a regular kind of plane p5 sketch
that would just be in the global
namespace that would get loaded
automatically 9 script tag yeah this now
is kind of writing a function wrapper
that has all the p5 stuff in it and then
you just create a new sorry I'm just
roll this up to create a new p5 instance
ok so this is a
probably what we need to do I'm just
gonna copy this perfect because I'm
JavaScript developer okay okay so the
crisis s okay and this sketch and then
it's gonna create the Porsche for
instance yes so what we're doing here
this is a function yes and in the
function takes the sketch and then it
does so this is kind of a like a setup
function yes it's like a I think the
term for this is like closure
well like no it's a function and we pass
the duration to so like this so because
function seems oh yeah yeah of course
because functions in JavaScript are yes
yes yes yes
so this is like we set up and like I
mean the thing is this p5 was made a few
years ago now and it is is everything is
written with es yeah I've so they would
make more sense now if p5 were updated
for you to be I'll write a class yeah
right sure it was uh yeah you can do it
you know I have a snicker on my machine
here that it says it's like semicolons
cannot say no that's not my whole life
is based around the semicolon saving oh
this freaks out people on my screen so I
haven't ended up doing an entire video
on why semicolons and JavaScript are
optional and they are fine all right
we're gonna do some deep breathing over
here in meditation but no that's not
semicolon is like one of the primary
coding trained characters just deleted
the coding traits that I call it that's
amazing I love that anybody in the chat
have the semicolon like icon yes there
we go there oh so this is a fancy thing
this is a fancy thing
custom emojis with oh I love it with a
mobile dot create canvas would probably
work certainly I am its anyway we moved
on yeah all those like those like your
member yes so I have this we should talk
for about this later because I'm trying
to figure all this out but I use both
patreon and YouTube memberships oh yeah
that sounds very elegant it's very works
really well but and so if they have a
special icon here there are you see yeah
Chevonne asks what about minifying
jeaious without semicolons it works fine
like yes gonna say okay so wait we
should see if this works
oh yeah this room we're doing alright
identify setup has already been declared
oh that makes sense I'm just oh yeah
that was our bold yeah let me just
comment that I would with your
fancy splash star alright oh my god
there we go p5 sketch yeah how would you
put that does it do we care like do we
need to put that inside the components
yeah let's do that actually I would
let's actually yeah do that
there we go there we go cleaning this up
a little bit and my p5 what are we gonna
call this instance drawing like what it
well the term in p5 is you call it a p5
sketch okay and in a way I wonder if it
makes more sense for this to be like P
yeah and then except for that people are
gonna snicker in the chat all the time
when I say PPP ah
but I still think it could work look at
that refactoring man cool yeah sounds
like that so it's like that that's the
sketch and what's interesting about
doing it this way is we could have
multiple p5 sketches all right on the
page so let's actually do this and in
the consumer can do it in the
constructor here oh well something like
that we have to say this job scheduling
I don't have my why do I have this
ridiculous down
bored that plays very sound effects that
I forgot to hook up but that's ok ok
post we need to call super I believe
there we go there we go now we're good
no now we're rocking now we're rocking
ok ok yeah we have a p5 sketch back
behind me inside of a react component
cool what do we do that don't know so
where is this drawing this like it's
just drawing it didn't like so what the
way that p5 works is it it actually adds
to the documents body a canvas
automatically yes and as you say in fact
I mean Theory create canvas you would
think does that but I'm pretty sure that
even if you took this out I don't know I
can use your keyboards Swedish people
are like there's still gonna be a canvas
there oh ok so what it actually does
because in theory you can actually use
p5 without even calling the crea canvas
phone yeah now if you didn't want that
canvas there you would have to call no
canvas
ok now why you wouldn't want that as
unclear at this moment because the whole
point is drawn to a cam well like but
create canvas will then basically delete
the default canvas or resize it or
whatever could I get this to draw like
let's say I have a date like an HTML
element yes I could have get this to
draw inside of a target target target
target socket so so explain to me maybe
first what you mean without the
technical speaks so like yeah but like
do you mean like yours their subtext and
your drawing over it
yeah no I mean if I use this if I was
building a we act composer I would
probably already have an app and you
like have like let's say that you know
whatever and there was a space inside of
the yeah we're having animation yeah
then the create track would create the
the low react component would have to
have a like a render target like a
target like a div or yeah we're like
this is where I want you to get stuff
the processing yet up so you could use
you this you can well you could use a
dot parent and pass it
an ID is that what you're trying to do
yeah that would work that works you
might have to have the p5 Dom library
also okay let's try so in other words if
there was a div with an ID yeah sure
let's just call this like you can you
can you can parent it with yeah yeah
now the the chat will have to help me
with how you get access to these things
these references I mean I could just
it's right but right now like if you put
this back yeah I think you put that back
yeah and then if you do you can chain it
or you can put it into a variable yeah
you can do dot parent and then just as
the or not be a fun pic like exactly the
argument to that function would be I
forgot render target within in as a
string with the hash table okay so like
pretend jQuery oh yeah it's a query
selector yes that's part of the p5 Dom
library okay let's see if this works
you'll need that I think I think you
need the know maybe it worked I think it
worked
yeah I guess I don't know why I thought
you needed to make it this even bigger
yeah so I thought that was what you're
looking to do yeah I think so look yeah
it seems to be rendering inside of the
render tall right like I wanted Oh
perfect by the way you could just use
you do the same thing this is actually
this canvas yeah is a Dom element yeah
in the native canvas element it's I mean
it's actually a p5 element yeah and the
native canvas element is inside the dot
alt property so you could also use any
other JavaScript library magic stuff
brilliant yeah so I think that it's some
people pointing out in react like the
correct ways to use refs here instead
all but yeah we're gonna we're gonna
stay here okay because I don't remember
off the top of my head how to use reps
okay so I guess we should wait they're
actually linking it can you
I hope you know reps and Dom so like
we're looking at the I'm gonna go Rex as
Dom there we go blah blah blah blah blah
blah blah blah blah I don't know what
people write a lot of stuff in the
documentation because I always just
scroll down to the code like okay this
equals my ref equals craic react ref and
then they do that and then you kind of
okay this gets you the node can I
actually give the parents like a node
what is it like yes I actually can so
this is how you do it I think well I
came from the documentation for the p5
Dom library just like showed up there
that was insane yeah like it's really
cool I don't know if it's create react
up or what video actually idea yeah
somebody probably knows react not create
ref and then we just use like down this
got my ref current by the way people are
saying is something you can say whatever
that is this my raft okay so I see and
so it's kind of like a place like a key
object so render render app it's called
that and then that and then we can go
dot here list of render F dot yeah so we
should do this dot render F dot currents
I think this is going to be a little
weird this is probably it I think it's
gonna be fine for now see of current of
undefined this might be let's let's
actually move all of this to render this
is not super good but P dot Creek
I think I'm my suspicious that p5
doesn't know what this not render F dot
current is this stop render it no no no
that's not the problem because they
stock render F dot it doesn't get that
far
you see you cannot process current of
undefined oh yeah so no no no no it's
because this is not we need to do so
yeah this is gone I don't know but no
this is the problem this is this
basically this dreamers like how to take
as long as possible to get a p5 schedule
ready true like you could also instead
of this we couldn't we use the arrow
thing magic syntax somehow yes we could
but I mean you can't do that math out of
a class on yes though you can oh no it
have to be here right no oh yeah
actually we could we can actually use it
inside fast but we that it works to do
here this would solve it yes and then we
do this yes there we go there we go okay
yeah for you that are not familiar with
arrow functions and the difference
between functions arrow function is that
in arrow functions has a slightly
different behavior radius which makes
you makes and bind this to what this was
at the time you created the function
right I'm pretty sure I learned arrow
functions from your video on arrow
functions no you didn't because I
haven't talked about this but that I do
have a video on that arrow functions all
right cool okay all right so now I think
so so to me what would almost be
interesting here I think yeah is I mean
we could go number of different ways one
way we could go is just like let's make
an interesting animation and you'll
learn and try more p5 drawing functions
yeah how colors and use different shapes
but to me what feels unique about this
is the fact that it's inside of a react
app so what I guess I'm curious is could
there be would this be a react app kind
of thing to do where you have some other
component
there's like interface stuff yeah and
that interface controls what's in the
canvas yeah we've gotta change to the
color you start and stop something
moving I don't know yeah like probably
we would we would do it like for now I
think we should do like the interfaces
in the same in command in this component
you can have in sure absolutely happy
okay but then we're talking about like
then we have to like start thinking
about oh how do we manage them safe and
stuff um we're going to redux territory
and that's not like I guess what I yes
so I guess what's that other than every
components but more about making p5 do
it p5 react does work I think it would
be great if we had some kind of button
doing something with p5 okay that would
be a in reactor I think that would be a
great thing to do okay so perhaps like
okay so looking at this thing it we draw
we draw a bright background here now we
do fill it and we create a rectangle yes
so why don't we create a text field that
constantly updates a position or
director okay
and I mean yes gonna like start coding
this and see where we go okay great
perhaps like I'll take you to a lot of
other suggestions in the chat yeah who
might think about it interesting
interface ideas I will keep an eye on
them while you're yeah while you're
starting to code so I figure that we
just do an input here and I'm gonna do
this now ref thing that I just learned
or we learned ref dot input ref wouldn't
you use react that GUI
I don't know how Roo burn wouldn't I um
I don't know I don't know what that is
yeah well so that GUI people aren't I
don't know what react at GUI is but give
me as I can
you know what that goo that GUI is like
a quick prototyping tool to create like
an interface to control a bunch of
parameters so that would be interesting
but there's no to me like I kind of want
to make well I guess it's called react
uh I want to I want to I'm there's this
sort of tension
or be it about b5 I'm going to learn
about react so anyway let's keep going
that's a great suggestion we'll take it
under advisement all right so there's a
yeah so I'm gonna we don't need this ref
I think actually I do we're gonna do
this I'm gonna do like on change okay
and this are gonna give this like this
input changed and when when that is
changed I'm gonna update the state of
the rack components so that can you
explain briefly this concept of state
and react because I hear yes all the
time and I think I know what it means
cuz I I kind of get what the idea of the
state is can we switch yeah yes I we all
do this well you need a minute because I
gonna ignore it all right I've been
doing I would want to do this like wall
says I need to so first I need to do
this setup is so cool and then I guess I
need to erase you like do you know yep
thank you but now there's one in two
will change back and forth alright and
I'm going to erase this you can now hear
and yeah now I'm like it's so like this
it's so amazing then I want to set up
one to give you a marker which I should
have somewhere this is like this is the
kind of preparation that actually is
good to do yeah before you start which
is like looking for the marker yeah
that's that's quality screen material
wait I was using a marker this morning
well stream do you know where we can
find a mark I would be really great
O'Hare's full Marcus Oh breath and
probably don't work okay well just go
through them one by one until we find it
more girly okay so okay so
so in react you think we'd react is that
it's it's a declarative programming
framework right we we have the dome okay
we have the dome
[Laughter]
magic fake negative this is the top yeah
it's like to whiteboard fingers all
right so let's say we have a dog and lit
some buttons in the dorm and stuff
here's a button and perhaps like this
ously the standard reactor sample is
that you have a counter right
it's like numb and it's sis 5 and say
that the number the button is increasing
its gonna increase this this number it's
going to count up so we press that
button that will update the state so it
won't the button won't like
architectural e it won't go and mess
with this number it's going to update
something that it's a state here which
is like the state is kind of like this
abstract representation of the data that
the application uses so in this case it
might be like count and it has 5 so this
will actually always refer to count in
the state so this will like refer to
this and so button won't update this
button will update this so perhaps this
is a better way of thinking about is the
state global across components or
there's a state for each component at
stake for each component got it and when
you're using Redux they you could kind
of like you say like a big tree that is
corresponding to the components but it's
like in this different ways of madness
manageable save and react Redux what's
read up
yeah actually I'm gonna stop myself like
it advanced safe management Wednesday
becomes state is problematic but it's
simple like the the core idea is that
whenever state changes react updates
immediately so you don't have to
you will always like the nice part about
coding in react is that you you won't
have to keep tabs on when to update what
because everything is always updated you
just update the state and whoop
everything is always always correct and
the way that the the innovation that we
react brings us because it's very
expensive to use constantly re-render
the entire gone all the time and that is
why react has this clever diff mechanism
that Allah that figures out the minimum
minimal change to make to the Dom when
updating things so I there's one I think
so that makes sense to me there's an
interesting side question here which is
p5 and out you're aware of this you know
how there was the set up and draw
function the draw function is actually
looping continuously oh behind the
scenes that's doing
requestanimationframe or it up yeah so
is there so this I think will be an
interesting thing that we're going to
encounter does is there some something
we need to worry about in terms of like
how the canvas is updated related to how
the state updates and blah blah blah
like to be honest it's possible that
there's absolutely no benefit to using
react in this this situation at all
right like the probably the only reason
why we wanna use react here is to get P
Phi into an existing application right
in a sensible way at notification use
that VM that users react like right so
like the Dom definitely like because it
probably you doesn't use the Dom and
it's in that way like it's constantly
does the updating all the time well only
for the canvas okay
there's other p5 can interact with the
Dom outside of the canvas and you can
also tell it to stop updating the canvas
I must be on camera you can also tell it
I this is very weird cuz we're like
talking this direction I noticed it's
like that's why I was watching you this
way cuz which I should probably like we
could gonna like fake it pretend we're
talking that that's so well you anyway
oh you can you can control you can say
call no loop which stops the drawers you
can call redraw which triggers a redraw
there's all sorts of custom stuff we
could do yeah
so alright so we're back here yeah maybe
we could so the idea here is you want to
try to move that ready handle whenever
alright so I'm gonna let you keep going
yeah so we're gonna do this input change
thing and if we guess I need to declare
that somewhere let's do that input
change it to me it feels like maybe
there's an issue with having all of the
the sketch in the render function but
render just happens once no render
happens all the time always gonna remake
the p5 ski yeah so we really don't want
that no let's say we're gonna head like
what we're gonna try yeah like what's
figured I'll figure it out figure out
and because they're there is different
life cycles yes and I just did this
point so input changed then we want to
grab the value from from the valley it's
a distal input curve we have not
represent that yet so we need to do that
input graph equals creating a react or
create right there we go and then we go
this dot input rare yeah
but current I suppose and then how do
you get the values now you know that
that's just CF I'm just gonna
console.log that out because I'm not
horrible to see oh yeah we actually have
to okay this is gonna be hard
there we go now I'm changing this field
okay it failed
excellent excellent oh this is so tiny
also nobody can see it not that anyway
necessary
no no temporarily no I can I can I can
I cannot wait which direction is it oh
that yeah mirror okay cannot read
properly input ref of undefined on line
12 yeah of course it's because we are
referenced referencing this and I forgot
to bind it this there this seems like a
lot of this is the object model in
JavaScript okay no no it works now we're
getting input events down here and we're
getting the idea behind my back actually
alright awesome awesome yeah you should
it kind of need a cameraman your streams
I got somebody I would like to somebody
that watch your shot and then like
switch cameras and highlighted stuff for
me like perhaps like in a little in my
ear okay okay okay so now we get this I
should probably
now I should theoretically be able to
set the location to that so this dot
state dot no first of all we need to
update the state sketch are actually the
state of the so we're gonna instead of
using these we're gonna be using nested
state why okay so that works now it
works now all we need to do is to its to
update the state and this should work so
I'm gonna get rid of that so this this
start state that x equals that and then
I'm going to be there stop you have to
use a function called set state oh
because otherwise you won't be able to
detect the different to change and then
you
you just give it the property in the
valve I think this should work now so if
I do like whoa what happened I think
it's freaking out because it's remaking
the whole canvas okay so yeah so we
can't do that but we could if that is an
in render yeah so perhaps we could just
do this complete there is a function in
this video in the constructor no because
these things don't exist yet but there's
a component did mount that happens after
the real components are added to the Dom
so let's let's try that it's a composite
component and dead mount is this it I
guess we're at like four hours now we're
still nowhere at four o'clock I was just
checking we're on it we're only at an
hour
all right so cool let's do this let's do
this and then I go that so what does
hmm-hmm it does something is there an
error message in the console yeah let's
see okay this is the worst place to put
the console can i how do I change this
there first
that's that's probably horrible - yeah
it's the longer like we forgot with
perhaps uh yeah let's no there's no
error message and but like it's like
wait I'm thinking about this and when is
this unchurched when does this happen
component did not component did man
happens after the you know what like
instead of instead of using this input
change I'm gonna try is there's three
there's no there is
because I think I think that the fact
that I'm reverie rendering
oh wait somebody's pointing out that the
Y value gets missing is that true I'm
not sure that I don't think so because
we're just not we're not changing a
y-value but should still be a hundred
yeah
if you don't have to reset why here yeah
because the thing is when I try to type
here it's just nothing is happening I
think it's I think that the rerender is
just messing up my you know like for
simplicity sake I'm gonna like not use a
form because reactant forms is like a
little bit tricky sometimes so I mean
what about like a slider would that be
that's the same problem yeah let's just
but yes just eat the button add one yeah
exactly I didn't leave it a new random
I'm actually there's a nice p5 random
function be curious to see if there's a
way okay I'm gonna go is right clicked
I'm gonna create a button I'm gonna
create a button that when it's when it's
clicked it's gonna move the thingy to
the right it's gonna read like I'm do x
equals this dot state dot X plus five
we're saying you did not set up two way
binding correctly I don't know what that
means but value an input should be this
dot state value
oh that's yes that's probably true let's
try that actually
oh it's hard-coded is 40 yeah yes that's
what you works and that's probably true
okay let's know this let's say dot X
there we go what about you yes oh thank
you I mean there's probably a lot of
people there's a lot of people yeah
there was a lot of people so it's so
hard to keep tabs on chapters yeah um
how do you do that I don't do that you
don't I don't
oh no you do this is actually we caught
this error much quicker than I would
have
I was here by myself yeah um wait can
you see I'm a little bit lost though
screw because we we thought we had a
problem that wasn't a problem yeah so
this is actually exactly what we had
that can go away yeah and then what I
want to see is this mobile few thing is
making me a little bit crazy all right
maybe it doesn't matter
nah that's true let's get rid of that
there we go um so now that that's oh
yeah can i yes there you go that's what
I was there we go okay so now what I
want to watch is I want I want you to
change that number and see if doesn't
look like the canvas so the canvas is
not reading remade the Dom Bella no
still just sitting there and the values
being update exactly and that is because
what is happening here is that how does
this even work
no but see here's the thing if you try
put in setup right P no loop oh yeah
because in P dot no it has to be in the
setup function oh okay
so no loop yeah oh you can't miss number
of the canvas oh it's okay no exactly
and with a capital L no no all right I
understand pregnancy's is a function all
right cool what about that you're young
and you understand what all right yeah
not good enough date no that's true can
we trigger the new well we can we can
say redraw oh then we can do that in
render so can we do that already how do
we get a reference to that oh you would
say where can you say this dot sketch
redraw so then we can actually make use
of the state dipping algorithms of react
like that cannot I mean look we have to
look at the p5 never do it good
processing it to redraw I thought there
was a redraw yeah redraw mommy yeah but
is it on the sketch it's a global
function this does does anybody know
this and so I mean I know what I could
do
I could like do like this super dirty
thing and let go this dot redraw
function and store it away but I would
like something nicer yeah that not work
well I have to go back to the instance
mode thing yeah like this and then I
would cause do this but not work B now
that didn't work either
can't wait probably redraw find oh it's
because I'm doing this this no still not
working
hold on it's not function perhaps it's
we groan so not I mean in the reference
it is not the question is what we're
using instance mode how do you how would
you because it says it but that song oh
no hang on I'm doing this too late hang
on
it's if this start redraw fine because
it's not gonna exist on the first render
I think oh but then we should be able to
do that also if this yeah no and what
now it works we should we'll do with if
this sketch sketch that we oh that's
true so I can't yester dis dot sketch
dot we draw but only if this stuff
sketch exists yeah
oh by the way this apparently exists so
in the chat a bunch of you I've
mentioned there's a react p5 rapper yeah
but I mean I think that this fine to
move to that after you have feel wrong
with this yesterd like how the model
works but I tend to I tend to avoid to
worry that I myself is not able to write
I mean you should you should use a tool
because you don't want to write it not
because he can't because otherwise
you're so screwed when it's also its
last publish was 2 years ago
sure yeah not a great sign but this
works great like this is fast yeah so
nice so but of course with the typical
use of p5 you wouldn't actually do this
like stop the rendering and you manually
tell it to re-render now would let it
animate and and yeah change things I
don't know what a good next step is here
I mean the one hand alright we made a
yeah we've got but I you know we haven't
really made use of like in a way like I
have not introduced p5 to you but you've
barely scratched the surface of any of
it exactly so can we do something what
does 3/5 have Kenny does it have
something like physics or something like
that
that it would be hard to do and so p5
doesn't I mean doesn't have like a
native physics stuff built into it yeah
but you can do basic stuff easily just
with but the main thing that would have
now would be to draw I mean the main
thing it is is a big set of drawing
functions yeah so there's lots of other
shapes there's ways of set a color you
can algorithmically do whatever you can
have a bunch of variables that are
changing as things move around yeah I
don't know man like I guess we could
think I mean so for example like the you
know one idea would be like what's you
know so like what some of the things
that I've done that are like more
popular than like the snake game so
three to four thousand time you
verdict sound yes so what there's a
couple ideas one is go and grab an
existing sort of more comp let me be
interesting to write the flocking
example from scratch but we would be
here that was like I subscribe for
another day
yeah no that's like a topic unto itself
like that kind of a like so but we could
take an existing example and then like
build others like so flocking actually
what's interesting about the flocking
example is that it is a system where
agents like flock with each other around
a canvas and there are a few different
rules that play there's separation
alignment and cohesion and interesting
things can be revealed as you interact
with those different rules so those
those the like changing the rules could
be something you do with us or react
interface II stuff alright and then the
people I would just be rendering the
results of that yeah but we wouldn't be
here
but but I but we know I have that as a
p5 example okay good all right could be
just copy paste the code in oh but then
then and then control it well I could've
but that I like I kind of like the idea
of having something grow yes yes like
it's like it seems like a super
interesting no but dub this isn't a to
canvases interacting would be a useful
thing to do because this is not
something that you can easily do at all
p5 by itself because of the way it's
global mode oh it would I mean so we
don't have like a great desktop spaced
yeah this right we could make this
smaller sir yeah but to have two cameras
side by side that's without not begging
from a single state
okay but still that doesn't really teach
me that so you can this side-by-side
throwing so well we don't when something
leaves one canvas it enters the other
one okay that's actually pretty good
yeah that's a good react p5 math problem
all right let's do it we can do that in
the next 45 minutes no problem I think
we can I think we can I think we can I
think we can fail let's do that like a
lung like failure is to be expected this
is not a tutorial this is not real life
not really yeah let's do it I like it I
like the first thing we need to do is
well one thing is we could get rid of
the form the text box only want me go
and leave it there for historical
reasons I might make use of it but it's
basically just duplicate exactly this in
another component lets or do you want me
to do you want to work on getting this
to animate and let's actually animate a
lot because I think that we have spent a
lot of time as react now yes so my part
of the audience is probably a little bit
bored and what I'd like to see you some
animation okay so you want to just try
to guess how you would animate that I'll
give you a clue this is no loop is gonna
cause you a major problem
yeah it's true so let's actually just
get rid of the no loop I'm gonna just
comment it out for now
oh yes and I'm all I'm actually confused
because typically you wouldn't you would
have the variables that are controlling
the location of the rectangle not part
of this state yeah we just be this dot X
or Y or var X or whatever yeah but I
mean we won't we will have access to
them down the state okay it's just
inside the only point with state winning
is yeah that the hole detection of
render right state I changed right and
you can use it across different well
well it's um it's contained in the
component but what we're gonna do it to
do this it's a container component okay
needs to and then they that will occur
we're gonna get to it but let's say
let's animate this okay so the way this
works is that it seems to have a draw
function which to me seems like
in games like basically des your mom's
on every frame yes is that correct yes
so perhaps I mean I I could yes I mean I
could you have updated update to this if
I thinking in react terms I could just
gradually update the the exposition and
yeah just have it yes
redraw all it that the p5 way to do it
would actually so some of some game
animation frameworks will have a
separate like draw function and a
separate like update function we're like
the math happens in update and draws
right especially if you're like in
OpenGL where you have like this whole
like rendering pipeline thing that
becomes more important yeah here you
could actually just say like this type
state that X plus plus
now do you be done I don't yeah sure so
yeah yeah okay so is that is that the
people that's the p5 way I mean they
normally wouldn't have this guy you have
a state you just have the X variable
sure what I mean okay so that's like do
it that way now that might cause us
problems later if we have this whole
extinct and two different things
you know like that needs to be restored
yes I have the other thing I have the
exact same problem another hit is that
like it's not we add it that way yeah I
have new cameras again that won't have
the problem I'm so happy anyway do you
know what I'm gonna do like convert that
to the react way and just update it's
actually I'm excited so let's see let's
see let's see
so actually like this is already this is
we're not going to need to update the
the p5 code at all because it is already
mapping that x and y position to the
state exactly so all we need to do now
is to figure out how to update the state
so which we can do and we put my weight
which I should get rid of that redraw
function thing right is that like yeah
let's just clean up more minutes here oh
yeah oh that was just crass and let's
get rid of this we're no longer using
this so I'm going to do a lead
a bit or let's just do this
somebody is I'll tell you there is a
comment from the chat I don't know if
this is true canvas and set state is a
bad idea because canvas updates much
faster than slow and async set state it
is possible just don't use says state
everywhere
Oh interesting so canvas by the way by
default is running 60 frames per second
yeah the drum and set status yeah which
makes sense
buddy my mom you know from I'm like a
whatever works kind of kind of person
yeah but no I think that they are they
are absolutely correct I think it
depends on what you animate like do you
need that update frequency perhaps like
if there's a game you probably do yes
but in the in the case of in the cactus
moving things around and like moving
some simple visualization perhaps the
set state is just fine but either way
like this is more of an example to see
you like wafers play around with it and
like I just want to get my head around
processing let's kind of like this yes
yes of course
and let's see set timeout function I'm
just gonna do something that instead of
creating a button I'm gonna I just have
some runs after one second and then
we're gonna do this we're gonna do a set
interval oh you're going to put set
interval inside of set timeout pop it
off it's not really necessary but I said
to and oh these needs to be out of
functions otherwise this is kind of it
be messed up cool there we go I don't
need to do it bad
and then we're going to this dot set
state this is the crazy it's so bizarre
everywhere it's like what are these guys
doing whatever we want this is like X
plus plus no no I don't that's that
timeout set interval this set state and
an object I'm having like I'm having
satellite I having so much fun though I
no I don't think this is a bad thing ah
okay so plus one so and you know okay
everything failed wait well you need a
interval time oh yeah yeah that's true
so something like ten but is that the
right place for then don't you need
another like end parenthesis or
something yeah no okay wait wait wait
yeah no you need to you need don't you
need I don't I feel like you needs curly
brackets
I need nine do ya know you don't need
the curly brackets know what I mean no
so I can't no curly
well you don't need need them but okay
this I thought you only didn't put curly
brackets as it was one line it was like
in line yeah but these are one line it
just it just happens to be like line
breaks it yeah because my perfect
okay let's actually it's but the initial
state ought to be like see over here so
that it okay so look at this now okay
welcome to react like this we don't even
have to think about that I'm gonna do
that again
like let's turn us okay oh and it
started second laters yeah that's axe
right now now did you did you sort of
like in the back of your mind you know
to have it start a second later because
there's gonna be some kind of like a
loading issue or you just wanted to see
it wait a sec yeah I would just want to
see it away that's if you commented that
it would just sort of melee yeah okay I
believe you yeah it's just to believe
you I said I kind of first I thought
about having like a button that started
in lit sins I'm like I'm too lazy to
make a button well solar liner says that
you killed oh I got my character 200
such a good place something help me are
they in the same place on earth
yes captain disillusion did not create
I'm sorry I don't like it a little bit
obsessed with Captain disillusion I
probably need to stop talking about
captain
illusion okay so this is cool yeah so
now the idea would be to add a second
one and have it enter the other one
exactly
so what we need to do is to this
position of of the box yeah it has to we
need to expose that yes through that
component so so I did Oh to another it's
exposed in that it's in the state yeah
I'd like to expose it to another
component state exactly so controlling
from our parent container yeah
state that has two components let's
switch to this one again there so that
week oh that's it's gonna be off by the
way but I'll turn it on all right so so
or not technical problem all right
so ever have any technical problems like
this when another person is of all we
have technical problems all right there
we go there we go so what we are gonna
do where's the thing
yes gonna love having a whiteboard so
it's fun right so fun also good to stand
up like it's just so much energy
yes oh can I make it too right we have
no I no time for a tirade but I don't
know for it you talk to the camera
though yeah so so so they're in I read
this amazing book that is called spark
which talks about the relationship
between exercise on the brain and it
turns out that the reason why we have
brains in the first place is to plan
movement
so there's actually beings in the deep
sea that they have a brain when they are
born and then they find a place to root
themselves and once they have that they
become a plant and then they dislodge
the brain because it's just a waste of
energy so there's a research of kids
that have exercise in school like facade
in the morning and they do much better
after that on purely intellectual
exercises like like math and stuff and
it turns out that this is not because
you get more blood to the brain or
oxygen or anything like that it's
because the brain is active doing
planning of movements so different
activities do are of different impact to
the to the brain so for instance like
things like racquet sports are better at
activating your brain than running for
instance because your brain has to do
much more complicated movement and is
there an aspect of this too that's not
just about like if I'm doing some sort
of physical activity and like within the
next 15 minutes I try to do a mental
task I do better but also like this as a
growth of the brain overall is like
through like child development I would
imagine that there is it's we're
definitely not territorial yeah yeah but
it's like so when you when you're
standing around thinking at your
computer after a while your brain
actually starts shutting down because
the brain is going oh I'm not being used
it goes into sleep mode so that is why
it's so effective here for us to
constantly be walking around because it
means that we are our brains are active
especially when you have to walk around
each other alright anyway anyway back to
this we're gonna have and this is the
page this is our reactor app and the Act
app is going to have two components the
and inside of these components are like
these this game thing like the the boxes
and the outer app is going to come these
are going to expose the exposition so
the outer up here it's not gonna know
anything about what what's inside of
these things it's not gonna know that
they are using processing they're not
gonna use anything it's just gonna know
that it has an X and this thing it's
going to
roll the exposition and once the
exposition has reached a certain point
here it's going to like update start
updating the exposition here it's going
to do like a coordination between the
two cards so that's what you're going to
do so but right now we need to extract
this thing out so that we have like this
little I don't know what we're gonna
call them game box or something great
all right so let's do this okay
I'm gonna create a new class I'm gonna
call this like class a game box extends
components
no not composition the fact that you
called the first component app is
somewhat is meaningless just a
convention yeah it's just there like the
default of salt yeah so if you look at
I'm gonna show you how it's being
rendered so if we jump to index J s okay
you can see here like that it imports
the app God and then you just react
render the app component to inside oh
yeah
so that's all it does by the way a
little aside here it's the p5 web editor
that I've been using most recently is
built entirely with the reactor I don't
know
well it's built on top of it's built
with react okay a counter will overflow
soon what really bothered by the fact
that it just keeps going yeah it's like
far away then okay so I'm going to only
want to win let's get all of this out so
we begin with a render function and in
the render function we need a render
target target it's trying to learn
English
I liked RJ better tache gonna call it
like something
Wow lots of scrolling here now sorry
and we're gonna call this game a game
box and then we're gonna have your end
should have a chain statement yeah we
need to return this and then we're going
to have a constructor and the
constructor is gonna have that that's
where we're gonna do the render if we
didn't do that before but this is proper
way of doing everything you react dot is
this the this is going to be the
individual component with a canvas not
the parent execute code exactly so like
what I'm trying to do now is create it
like this super dumb component that is
just basically just rendering like
whatever profit class as X so this is no
longer gonna like we can actually this
component no longer actually needs state
they can just use the proper e so a way
to do this where we use one p5 sketch
that gets duplicated but they each have
their own their rendering sort
differently or we're gonna actually
create a second p5 now I think that it's
gonna be the two sketches I mean we'd be
probably caught that's a version 7.8 yes
okay so I'm gonna do that and then we
need to do that steal this entire
component didn't mount thing I see and
I'm gonna get rid of this set timeout
interval thing right and it's gonna do
this dot I think it is it this dot prop
chat what's wrong it's it's the same
thing a state it's but it's the stuff
that it's passed upwards like you can
think of it as HTML attributes okay but
what's passed like they might like color
it's gonna be the parent couple guys
also is that's not gonna work yet no not
this is broken at this point working in
a bit too few months to too many steps
at this point but the why
yes four oh hang on we're gonna use this
broth so I'm saying props but I don't
know if that's true
props oh that's probably true yes
actually now not just one person is
thanks oh thanks
excellent I want your shot they're very
fast yes this not props dot X yeah I'm
keeping this around for now yes because
but um no I think we can actually like
comment rate up all this no because the
app is gonna be the parents say yeah so
I'm gonna lose this here it's fancy ice
so I'm gonna do something night and then
you put the other component there yeah
so it's gonna use game I bow alert line
11 I don't know if that's still relevant
but alright to see Gabe a box wow that
could have been of worst I've ever Gabe
Gabe Gabe is outside my box this stuff
render and what is happening here
construct now perhaps I'm what is
happening here quantum read rights I did
what you did make are making in five
minutes in angular yes well wow you can
try doing that without we're not trying
to do something quickly here by now we
are exploring it's a thought experiment
I know P 5mp jános rehabbed p5 and react
come together to save the universe
well like that guy destroyed the Lazarus
or just waste a couple hours that waste
see here oh yeah and also we're missing
a few semicolons okay let's see what
what if they've been happening here I
mean it I do first someone saying call
super know what yeah I did and now oh
it's working there's too
why are there two forums oh wait wait
hang on I actually need to pass the yeah
yeah let's get rid of this let's get you
rid of this one two input boxes and yeah
that's true what's that buying thing do
we still have input change okay that's
better yeah no because I think as we
need to also also pass the X here this
that state x and y i think this will
work
oh and that makes it a prop yeah okay
whoa no whoa okay we're gone okay guys
let's just do this
ah there we go
oh but that's just if you couldn't have
those be could you say x equals this not
State on X like / - whoa that's cool map
oh god that was extremely risky to do a
high-five on stream because it's like
99% of all my high-fives ever failed
miserably like it's just like this
decline oh this person has never done
sports wall all right cool
so now we just need to figure out how to
do the thing where we hmm so so now we
can control this oh do you know what we
have an idea
yeah well so since they're vertically
yeah change it to moving along yeah yeah
yeah let's do that
that's wait I have an idea that's gonna
do this you know like a really
ridiculous sort of way so something like
this and we need to okay let's get our
way we can use I think mod modulo the
modulo operator is going to o translate
of course oh it's actually an easier way
to do this oh no no no I can't
[Music]
there we go yeah all right
I don't I'm gonna put that somewhere
here
well what has happened why isn't what
why that surprised me
no wait it's because I'm dividing this
by where did it go
wait what I'm confused what is why
doesn't this well wait this is the why
200 or the X 200 is off the screen
oh I pick the hole the window is just to
everybody yeah sorry actually 100 Oh
might as well add just four oh it
doesn't matter
I have to say we can change the req mode
to send ever all right so now all you
need to do is say Y minus 200 in the
second one all right I think what are
you kidding I don't think like here
minus 200
[Laughter]
I love it I love it okay okay okay okay
and then what you could do is in the p5
sketch when y is greater than 400 you
can set it back to - you know - it's a
zero or whatever uh hang on then get
quite get that what so I don't know if
it makes sense to do that in this set
probably make sense to do it in this 70
so cheating by the way it's all cheating
yes there's no sir the whole point of
this is cheating we're creating the
illusion of things happening on it can I
talk about my absolute favorite thing in
whenever I think about like you're doing
some kind of hack or something like this
doesn't feel elegant this feels like it
shouldn't be may like then I have this
amazing Twitter quote that is like a
computer is a set a CPU is essentially a
rock that we are fooled into thinking
and I
want to oversimplify this we also had to
put lightning inside of it to work so
this is cinco eliminate corruption do
you know about it it's when you have
these when you have a lake it's like
there's big pockets of carbon dioxide
collecting under the legs and this is a
normal phenomenon and they sometimes
like just bubble up to the surface and
that's fine but sometimes they become
huge and then a small earthquake let's
like yes this launches this enormous
pocket of several metric tons of carbon
dioxide exactly at the same time as you
just got group which has seen somewhat
bizarre and horrible an interesting side
effect that oxygen levels like around
like a several kilometer radius around
the lake drops so low that any life-form
that is dependent on oxygen died no so
you just walking around like this has
killed villages and it's a very rare
phenomenon but it's like a very very
weird type of natural disaster so you're
like this just walking around and then
just due to random things you just die
and I like this this story makes me
sorry
happy for some reason because it reminds
me that the universe owes you absolutely
nothing if something works like the fact
that we have autocomplete here that is
because like there are so many layers of
human effort to create like this yeah
elegant yeah like the universe does not
is not here to please us yes anyway
there's no elegance at top of the
universe the internet is just built up
the duct tape of cobwebs and gum yeah
that's my tie right about that alright
okay so we're gonna let's let's change
it so at least it repeats yeah so
they're what you'll need is probably
when you change the Y to check when it
gets to a certain value to reset it back
to zero yeah so I guess they're not you
can use modulus for that yeah I'm saying
so I always get this wrong
I think the operator itself is called
module oh yeah I want to get is a
is or using a modulus of a specified
number congruent by yeah
on the modulo operation so have you ever
seen this operation 2 % yeah it gives
you the remainder of division so if you
yeah I know this but I don't understand
how it would be applicable so uh so if
you said modulo 400 yeah why is this
state dot y plus 1 yeah Oh 400 when it
gets to 400 when it becomes 401 yeah it
will become 1 400 1 modulo 400 is 1 ok
400 2 modulo 400 is okay by the way
we're doing a sort of not such a great
thing here where we're just hard coding
those sort of like limits of the edges
yeah those should be in like the state
or the it means p5 stores that in a
global variable called with oh wait we
could we can have we can access that
here know what I mean we we could just
passes as props actually let's just call
like this game box and we're just gonna
call it give it like with equals how big
are they they were 200 pics 200 and then
height 200 so then when you call create
canvas you'd want to use those props
exactly but they could be different oh
my guess is so crazy you know I guess it
could be yeah but let's see the bed
that's not right and let's see let's see
so it's it's you're increasing this dot
props props
thank you chat I don't have the chat up
right now let's go where and this
desktop hi people are suggesting making
a pong game which we won't do we're
finished I think we're like within the
wrapping up stage yes yes yes but that
would be an X if we went to here for the
next you know a couple hours then yes ok
so I completely destroyed this by having
well we have to offset the X based on
that change okay that's
of arbitrary ya know what's for
simplicity's sake are artists leave it
doesn't matter but but listen it's the
thing that is the the arrangement of
this is not we could eyeball it it's
yeah and I get to shift it over probably
half the size of my guest but yet oh
yeah you've somehow take the right
number
oh and it probably should be like this
I'm not saying do this but it would be
some type of function of the width of
each canvas yeah but anyway yeah okay so
now we now we can add the modulus thing
in which you could just do where you're
saying this dot state dot y plus one I
think all right so how do I do this you
have to put that all in parenthesis I
believe all right just to apply okay
maybe I'm same modulo some would I say
modulo or modulus all right so modular
and then you know this tower ops dot
height or whatever oh hi times two
because it's got to get through both of
them not height times two
yeah I mean there's definitely she's
here because oh because you want that it
really is the height of one plus the
height of the other so but this that's
fine this is gonna work I think you need
that you should type this because I am
no I'm like no idea where we're going
we're here but is why don't we get an
odd a number here cuz it doesn't know
what the height height is this prop
stuck high does it know that in
component it does it it does so in other
words if I were to do this backs it safe
yeah luckily it's working yeah so why
would this not work it immediately went
to okay so hold on let me just type in
400 yeah oh oh no no here then it's
rasmussen points out there error there
are no props in the up composer okay
yeah because we're in the parent
component or the parent component so
that's the state yeah exactly
this dot state dot height yeah but we
don't have that I'm
it's no no so if you check like where we
like these numbers here you need to put
them as like properties like Oh
put them in the state for now actually
oh you mean so they would go and I have
actually drive access to this yes but no
you don't like but that's my intent
oh so yes press I mean put the width and
the height oh I say oh oh but I could
make I could just do I could make it up
call it something else yeah Widow I
could just say 200 but this is bad
because we have the heart we'd have to
we want some sort of globe some variable
to tie all these things but well I mean
like I actually want it to be the total
oh yeah here which is 800 and actually
we I mean I don't we're not gonna worry
about this but and then because then now
I can say this oh I say this they say
Delta HR age
oh wait oh nope good loops it did but my
math is off yes yeah so you can know
this oh it's because they're 200 huh
yeah I like doubled it twice I'm not
exercising enough that my brain is
shutting down it's 400 each of these I
teach of these is 200 I thought they
were each 400 supposed to be pointy over
here that's 200 that's 200 the total
height is 400 so this is right it
bothers me it really bothered two things
bothered me about this and I probably
shouldn't try to fix ya one is that
we're not accounting for the space in
between there yeah and I kind of want to
yeah the way that I would do that is I
would say like oh by the way where did
annoys me a little bit that we know that
these are now we have state values Vedas
but they're hard-coded so can we use the
state so this is this dot state dot with
ya or W yeah and this is this dot state
dot H divided by two because I made it
totally yeah or I could have and then
now we don't want to move it over
anymore if only I had semicolons all
right so now this is coming through all
right so the one thing that I think I
could say is - oh we don't have the we
also should probably have the width and
height of this rectangle which is 5050
in a variable somewhere yeah but just
but before we do that we should say I'm
just curious if I say like - like 25 oh
wait no I want to account for the pixels
in between so it should like did that do
it's hard to see oh solanine airplanes
out that we're still hard-coded in the
first component yeah oh that's yes so
that's a counter for it but it's like
it's really just a little however many
pixels are in there like I just don't
want it - shouldn't when it reaches the
bottom immediately up here there yeah it
should feel like that blank space I'll
fix it for you so load on you and then
yeah we got the other thing I want to
fix whoa no what are they doing Oh / -
no yeah sorry
and then the other thing so that feels
close I mean I feel like it's a little
bit I'm like really like a lunatic here
it feels like a little bit's a few more
pixels okay yeah we should measure that
thing up anyway actually now that feels
yes but okay then the other thing I want
to do is it should in the shouldn't like
this is the thing this is gonna be very
hard to do when it's when it's go boy
when it's getting to the bottom I need
to get rid of this module modulo thing
because this once it's going into the
bottom we should see it like appearing
at the top
what what I mean okay so I should point
over here so in other words right now
it's way off because I had those extra
pixels so in other words it should
orchard fully leave the bottom and then
appear right now it's fully what it was
doing before I added this another extra
thing is this is really in the weeds
here and I like obsessed about these
things it was leaving the bottom and
then immediately appearing back at
camera so it should actually start at
negative v negative 50 yeah so what its
original value the Y value it's over
here and it should at least first over
there I know cuz now it's entering then
it's gonna go there then when it gets to
the bottom let's at least make it I'm
gonna I'm gonna forget about modulo
because while that's kind of a nice
elegant solution how would I put I would
I guess I would just say what were you
saying we're saying oh I have to use
some kind of like okay hold on I could
just do this right I could say new y
equals new y equals y plus y plus 1 yes
and then if new Y is greater than it's
greater than the properties height thing
this stock props that H plus 50 then it
equals negative 50 and then Y is new Y
what then it
what's negative 50 so new y equals
negative 50 okay okay can I not like
make a new variable there um oh it
doesn't dis not staked out why yeah
what's that why there
oh no why no huh no I think you could do
this as a ternary operator yes yes so I
please save me from my cell something
like this oh this is a plus one minus
800 plus 500 no every operator is
definitely what I want is it this I
think it's kind of like yes I think it
might be the inverse this dot props this
no will forget about new why yeah y plus
plus y right like what y increments
itself 1y and then return the new value
but can you a Y plus 1 yes you're
setting it equal to y plus 1 yes yeah
okay I'm not sure this is a ternary
syntax but I'm not sure if like I'm not
quite following your logic okay so Y
increases by 1 if that value is greater
than the end yeah plus 50 oh okay and it
then it goes back to negative 50 yeah
actually negative 50 otherwise it's just
Y possible so it's the inverse inverse
yeah but you have an extra yeah there
you go
y is not defined Y is why not - fine oh
yeah exactly this top state the Y yeah
and then it's this dot state of Y ah
okay didn't get set to negative 50 you
know again using profs on that state
state that each okay this is super
awesome I'm so happy all right I mean
this is the kind of a ridiculous way of
doing this and it is I mean I sort of
but not that we're say that a lot of
people would not to call this a quit
while we're wave ein snow quickly but
like we're still like functional Olympia
so because what I really want this to do
somebody somebody will do this is well
this is slowly exiting you also see it
venturing at the top but you know you
know yeah oh I'm super happy about this
I think that this I feel like I've
successfully like gotten a better view
about what processing is yeah we should
at least add like a color to it or
something so that you see that there's
some more and then we then I think we
can maybe answer one or two questions
and wrap up yeah was that a color I
don't know what I'm saying sure I just
felt like the I I felt that what what
ended up happening is that we focused
much more unreacted very little on p5
Joey that's sort of a yeah that's fine
and we'll have to come back for OC you
even knew how to do that today yeah like
it's an intuitive API yeah there we go
okay all right well I think yeah I don't
like this now I like to be honest I
think that a lot of the processing
tutorials yes all kind of focus of like
yeah now like do this and yeah and I'm
like yeah but how do I get it into my
application right like this is kind of
like got me started your that way like
following the tutorials yes it's not
gonna be together
yes alright so I know what I often try
to do is take one or two questions that
people have questions
that you want to ask specifically mpj
from fun-fun-fun yeah like if you you
can ask me questions next slides yeah
like if you I probably asked a lot of
questions you're an extreme that they
are miss I
so please just ask them again ma where
can we get the Nordic Jay s 2017-2018
videos I've no idea
normally they go up like last year they
went up pretty fast but you know what
those are oh that's a conference yeah
it's a conference that I hosted in
September Oh amazing is that happen
every year yeah
and it's working Sweden you're in
Stockholm like it's it's like one of the
most well organized conferences it's
just amazing yeah and yeah I've been
hosting at the last few years and it's
been like oh so good awesome we could
make him do it like a p5 session there
yeah you should I like you should
seminar I call proposals can you come to
Brazil Jay s conference well yes
tell them to invite me uh I'm not very
good at traveling so in night and PJ
yeah I'm meaning I will be I will be at
actually I uh I haven't really like
announced this officially not that this
is some big thing to announce but I'm
gonna be in France for a few days in
January and I'm thinking of having like
a meet-up it'll be in Paris oh so so
that's that's coming stay tuned all
announced I've never actually done any
kind of in I mean I've gone to things
and yet up with people but nothing that
was like specifically coding train I'll
also mention that I will be at now I'm
just talking about myself
do I look pointless but I um day-day dot
processing org you can still I wonder by
the way is there a so processing
Community Day is a day of community
worldwide January 15th to February 15
thousand New York City one there's a Los
Angeles one which is this were not that
main one is the wrong way but it's the
like I don't know what the right term is
but that's the one that I'm going to and
then I know there's one in India there's
one in lots to say I wonder if there's
one in
Europe somewhere Lee is there a
Stockholm processing community today
there's a map somewhere here I think if
we scroll down worldwide you will see oh
wow so see wait let's see if we can find
the one closest to you oh there is one
unstuck ok so if you click on that does
it give you more information
PC Dean stop January 26 2018 organizers
yonas and Nordic audio visual artists
there you go so you could go to your
very own to a prosecuted yeah hopefully
I might fear about being stuck on my
item so question what made you want to
collab I like I was in New York and I
guess like figured out that oh - in
New York and I think that we talked
about doing a collab earlier it seems
like a kind of natural fit to be honest
we kind of like have the same attitude
about around Brown development and how
these things are like we were very
talkative and like a motive and it's
like yes it's like I just wanted to meet
you really yeah it was mostly about that
I put ditto I would say that for me what
I mean I don't know that this was
planned this way exactly but for me I'm
really enjoying these types of things
where somebody maybe that's like it the
similar is like spirit and point of view
maybe about a kind of fun relaxed
live-streaming attitude but yet a kind
of different set of knowledge and I
think that's super interesting I also I
I mean I've been watching like a bunch
of your pair of programming things in
there while it's fun to do the goofy and
against by myself and that's kind of
like what I'm doing I think there is
there's a lot more that can happen and
be talked about and can be revealed when
two or more people are trying to like do
the same thing together I noticed also
like I'm there's a channel called coding
garden with CJ NLF CJ is watching but
yeah CJ has I think a series called
newbie quest yeah something like that or
new quest yeah where he tries to help
somebody who's new
programming figure something out I
thought was like a really interesting
format so I'm super interested in
alternative formats this was so fun I
don't see any reason why we couldn't try
to do something similar that's just
happening remotely yeah I especially
like I'm not sure like this is something
like this is an amazing sight yeah I'm a
little bit concerned about I mean know
what's complaining about our sound but
I've been like out of the court of my
eye I see these going red quite a bit
yeah we'll see I mean this works people
watched it enjoyed it so there actually
wasn't a disaster I do think it'll be
interesting I'll talk to Matt Chia who
does newbie Tuesday's Kate week - yeah
matcha Blanchette who does a lot of
video editing for me since I have no
skills in that area but we'll discuss it
see if it makes sense because I think
there's probably like a 30-minute
version of this that might be
interesting for people yeah we'll see we
can maybe make something like that and
release it on a Monday yeah all right
one will Christian part yes there's one
that could be interesting it's been it's
been a sabbatical at your school oh yeah
but like then it wouldn't do me like was
a sabbatical yet it's true like it's
like basically make a video and the like
yeah actually they could be super great
to come back here and you like film some
like with like physical computing stuff
yes because that's so Mitchell and I
love that environment so I guess if I'm
like oh I want to come back here and
like do something more so I think it
feels like a natural fit yes
hey anytime you're in New York you know
that you are welcome here we could try
this again we could try doing something
more crude not was a more creative no
I'm just different different format but
certainly I would also very much like to
go to Stockholm yes I think you will you
live somewhere different than Stockholm
yeah for my tongue I'm gonna be moving
back there I didn't mean to just contain
Sweden Woodstock no no no it's pretty
much it yes it's yeah you should
definitely come I will move to Stockholm
and then
in january/february sh so like we should
definitely do something that so let me
let's wrap up so first of all if people
have questions further questions you can
find mpj on twitter at mpj me MP Jamie
you can find em PJ's YouTube channel fun
fun function or just that appears in the
search on youtube so and especially I
would say like I mean certainly if
you're like a viewer of the coding train
and you want to find videos that have
more software development practice
themed like things I mean there's a ton
of content on your channel so it's
certainly a big more of a variety than
just that yeah but that's actually
that's kind of like what I use it for so
in terms of like what's the new feature
in JavaScript that I don't know about
things like that that I feel like are
there today to my audience the thing
that I would like to push specifically
for and Daniels channel is the machine
learning material because that is so so
so so so pissed so next clip ball for
what there's so many different ideas but
another thing we could do is teach MGM
PJ which is or we just built on top of
tension Florida so this is a project
that I've talked about ad nauseam on
this channel but this is a library that
we're doing in collaboration with some
folks at Google who are work on the 10th
floor yet Jess team to try to meet out
with these or go into the library and
this actually on like p5 is written in
I'll just show like a quick example here
this is allow yes yes you are a Jersey a
t-shirt a t-shirt a t-shirt that's
pretty accurate but um yeah where's the
oh there it's there usually it gets
coffee cup pretty well but so this is
using a anyway I have videos about this
and uses a blah blah blah but this would
also this is written with a
Oh with this sort of like well two-fold
mission to both be a place for like sort
of p5 beginners but also but also
computer keyboard I got it but also it
supports a lot of sort of modern
JavaScript conventions and some song
with NPM and all that sort of stuff so
anyway so this would be another subject
area table I just love it
like I don't fully we'll do more of that
and you also uh still are you still
streaming on Twitch I think that I
should tell people we go look it was a
while ago
like you're gonna we're gonna play
around with the streaming a lot and the
coming here like it's gonna be streaming
it's going to be a huge part of what fun
fun function is yeah and exactly where
we will do it it's still undecided like
they're all advantages which is
advantages with with YouTube YouTube is
like earlier it was such a clear thing
to pick twitch because I was so much
better at it yes but now YouTube is
actually they seem to actually be
committing to the platform quite a bit
so now I'm unfortunately yeah yeah super
undecided well for me I mean we can talk
more about this and another time and to
keep this stream like never-ending but
for me it's like if I were to try to use
twitch now I already like to moving that
over and then having two things will be
tricky but it's definitely something to
think about
alright so thank you thank you I don't
have this is the thing this is the other
thing that I really want I say this ever
an outro I know you don't have one I
just have a I click I mean I do have
this ridiculous thing okay I can teach
you mind that insignia so it's so you
can use your stop and then you can
translate it to the train so that is it
you have just watched an episode of fun
fun function
[Laughter]
Seacrest out that reference notes like
it's okay but then I have to click this
stop streaming button no but then
there's a there's a few more no that's
not it no no we're psyched up to me I'd
replace that guy in the coding traffic
and so that's it you have you just
watched an episode of fun fun function
that's it you have just watched an
episode of the coding tree uh-huh yeah
do it I release these every Monday
morning Oh 800 GMT I released these at
random times during the week with no
consistency whatsoever but you will
forget that you two soups click
subscribe by clicking here or watch
another episode right now by clicking
here but you will forget that so you
should click subscribe so you don't
forget or watch another episode
that's over somewhere here I am mpj
until next Monday morning stay curious
I am I always forget ahead pronounce my
name Daniel Shipman and you are watching
the coding train all aboard all aboard
it's like a welcome thing I need a like
oh yeah what do you say everybody DD
plane no that's a plane what do you say
when you get off of a train oh what's
embark no this is them baby there's like
I know that's getting on it yeah
disembark disembark oh yeah that's
perfect
you're not disembarking from this fan
club but please stand clear all I could
do the New York City thing which is
please stand clear of the closing doors
mind the gap