[Music]
you know never I can never I can never
get it right I could never get it right
here we are starting a new year and I
really thought I had it this time Thank
You Kelly who just sent me a message in
the slack that popped up that I saw that
I was muted okay so I'm welcome back
happy Sun at the end of summer happy
started school back to school happy
almost a Labor Day weekend it is a
holiday weekend a Friday afternoon here
in the United States where I live in New
York City I'm broadcasting live from the
Tisch School of the Arts at New York
University I have I haven't seen the
chat catch up to me and I know that the
chat the live chat that's going on
during the during the stream is usually
about 30 seconds behind so now I see
that someone says Leo says now we good
so I assume that means the sound is
going um could you could hear the music
I think when it was playing before yes
so I have a whole lot of really
wonderful happy things to announce I'm
gonna talk about something called the
p5.js web editor that is the primary
topic today's live stream will be for
the total beginner for the most part
they'll be a few things that I'll do
that aren't that are that involves
things that I that you would have to
know about already in terms of
programming to be able to follow along
in full detail but yeah that's always I
try to have everything friendly and
available to the beginner but today I am
returning to my roots and going back to
create the first intro - you're about to
learn to code for the very first time
videos I'm replacing some of the videos
on my channel that have gone out out of
date so if you're kind of here for the
machine learning lower-level tensorflow
programming stuff that i also sometimes
do go enjoy dinner or breakfast or go
back to sleep whatever it is you were
doing
I um I want to begin today unfortunately
with some very sad news I'm gonna bring
up the web browser here Medan it's only
fitting that I I'm not sure if I
pronounced his name correctly
is a coding terrain viewer for a long
time a member of the slack community
someone who made countless contributions
on the coding train github I was poring
through all of these commits from Marin
I was looking at some of the messages
that Marin wrote Marin sadly passed away
I believe this week I actually don't
know the date I was alerted to this news
on Twitter I wanted to take so the merit
is not something I ever met a Marin I
think though is you know one it is I
don't have anything prepared to say but
I think that what I want to say is that
one of the reasons why I enjoy and love
getting to do this is that the the
material that I put out on this channel
other people find it and they send me
things back they teach me things they're
kind to me and answering my questions
they join the slack community they help
somebody else they contribute on github
you know I do earn a small living from
this channel in addition to the work
that I do at NYU but there's more to it
also than that and Mayer and I think is
someone who really for me even though I
never met him or never spoke voice to
him only chatted through github is
somebody that I really came to know or
feel that I know and I'm really really
sad sort of crushed to hear this news so
today's live stream is dead it to
Meriden is dedicated to Marin I
encourage you to check out the website
Marin dhtml I believe there's a place
where you can leave online condolences
and most of the I'm Erin is from the
Netherlands if I'm correct somebody
correct me if I'm if I'm wrong so I
think if you click on here you'll see
most of it too in Dutch and I'm getting
some notes that maybe my sounds a little
off so I'll look at that for in a minute
so in the future I might try to do a
fundraiser around suicide awareness and
that's something that I'm looking into a
YouTube has a new platform called
YouTube giving but this today's live
stream back to the beginner I think is
appropriate it's dedicated to Meryn I'm
gonna mute my microphone and take just
about 30 seconds of silence you know I'd
ask you in the chat - yeah I know that
everybody watching this is the stream
comes in at a different time laughs 30
seconds 20 seconds later 45 seconds so
take a moment take 30 seconds to take a
break from the chat and I will be back
okay I also want to say that I'm wearing
it's an awkward transition but I'm gonna
go back into coding tutorials as I
typically do on Fridays I also am
wearing this shirt for the made by Tim
choy as part of his project distributed
web of care I was like oh actually just
got that shirt I want to wear it on the
coding train should I wear today it's a
symbol of what I think to me to me I
love what tan is doing with his project
distributed web of care I have to look
over here in my monitors see what's
written on it but a lot of times when we
think about technology we think about
control user machine learn and what
about thinking about care what about
unlearned we're all after all rather
uncomputable so this is a shirt from Tim
choice project distributed web of care I
I'll try to include some links to
Damien's work in video description okay
so there was there was some some a
couple notes about maybe my shirt tag is
ok well that's that's pretty
typical for me there were some notes
thank you Chris Persian for posting the
note in the slack channel about the
National Suicide Prevention lifeline
which is one eight hundred two seven
three eight two five five that's
obviously a United States number okay so
and and thank you moderators for
moderating the chat K week bond in
particular and others of those who are
moderating what everything ok with the
sound before I move on I'm just going to
have a little drink of water check the
white board camera let's see here is it
working it is not on of course when I
drink that water you can really hear it
right it's very like awkward and weird
sounding probably coding train brought
to you by water okay what first of all I
have this chair is like in the shot
which is a problem where can I put it
I'll just put it here white board
everything ok sound is fine over here I
am back going to
I will include links to Aaron's website
and his commits and workout with
according trained in the description I'm
closing this whoops I have foes setting
up some stuff oh and this is a forsen
thing I'm going to talk about and this
another thing I'll mention is that I
have the other thing that sounds a
little quiet sounds okay good you know I
prefer it to be a little bit quiet to be
honest I say won't you be able to hear
it but I'll get a little bit excitable
gonna get a little bit loud and when
that happens sometimes the microphone
can peek or distort and Matt Chea who
does a lot of the video editing for
posting stuff separately afterwards can
always boost the volume it's easier to
boost it then correct it down so if
unless there's a significant problem
with you being able to hear it yeah okay
so I do have some new branding stuff
that's coming along the way you can see
here this there's gonna be some new
t-shirts with this new bouncy letters
coding Train logo I you'll notice that
in the chat there I have new emojis and
icons for the members that's a thing
that's a part of the YouTube membership
program you're interested I you know I
want to believer that point but those of
you who are members of the chat can go
ahead and blast them with those emojis
and so there's new there's a lot of new
stuff coming with new characters and
some new t-shirt stuff and stickers and
things like that okay let's see all
right so let's go here so this is what
you know this is a bit of a tricky time
of year for me as I mentioned many times
already I work at New York University
and so I have classes starting next week
I'm teaching three classes which is a
lot and one of them is on Tuesday from
the meets on Wednesday at Monday's a
holiday but in particular one of the
classes that I'm teaching is the
introduction to programming for total
beginners and I see that there was a new
member that joined alka I think is out
got a new member of the
joined Alka Thank You out guy first the
camera goes off those good timings and
so I need to buy my previous video about
to around here I think well I'm just
gonna start what I got to cover this lap
if I haven't know a laptop so much to
discuss I have new workflow I'm gonna do
a video about the new workflow but I
can't get to that today because what was
I trying to get to here yes I need to go
to youtube youtube.com slash the coding
train and I need to go to oh I could
subscribe to my channel I created a new
Google account just to be logged into
something here subscribe
got another subscriber I'm gonna go to
here there we go I'm gonna go let's just
look here no no not here don't show me
an ad don't show me an ad alright so in
theory and a new member another new
member question is are the lights
flashing at home Meir Shah thank you for
joining fire siya so these are these are
the videos for the learn to code from
scratch you've never coded before course
and they are many of them were made I
would say two or three years ago some of
them were made last year a year ago if
we start getting into the classes with
es6 stuff that I started doing okay
sorry there's something there's some
like weird delay going on that's weird
so like the output of this into my
monitor is behind I don't think that's
gonna cause a huge problem but let me
just test something with you all just to
see if because you is this out of sync
for you I don't care so much but I'm
curious it's a new computer I didn't
notice this when I did my test run
through you're gonna be able to hear me
type because the tie
is kind of loud and I want you to so
when you hear the sound of the letter a
does the letter a up here and I'm gonna
look over here too so for me I see it
immediately and then it appears on the
monitor of what I'm live-streaming a
little bit later
yet when I move my hand it's instant so
there seems to be a little bit of a
delay but I think that's gonna be fine
I mean we have to live with it right now
if that's a major issue for anybody let
me know okay
thank you everybody all these nice
messages in the chat I love seeing that
okay so in theory this fall I intend to
remake all of these videos that's crazy
I don't think I'm gonna do that
but I am at least going to make remake
one point one introduction p5.js
tutorial this workflow video is going to
go away I mean it's not going to go away
it's still gonna exist but that workflow
video is not for a total beginner
instead it'll be about the p5 web editor
which I will talk about then I'll get to
basics of drawing so I want to see if I
can redo today this was a 12-minute
video this was a 15 minute video and
this was a 15 minute view and by the way
when I say redo it's not like I just
went rewatched photos so I'm just doing
the same idea but I'll probably do it in
a different way with different examples
and just with my more gray hair so
that's the so that's the no delay people
are saying everything's fine or it's a
tiny millisecond this is like okay so
that's the core plan what else do I want
to do oh no I want to announce the p5
webinar I'm kind of doing that already
but I will say a few more words about
that I want to do the new intro to code
a drawing tutorial a colored these are
for complete and total beginners so if
you've never coded before ever
today is a live stream to tune into oh
but of course as everything will be
edited and recorded and uploaded later
to
then I have this idea the most I
shouldn't say this now because what if I
don't get to it what time is it now
it's five o'clock I have a I have some
time but I also run out of steam
eventually the snake coding challenge is
the most viewed video on my channel it's
also like I use constructor functions
instead of es6 classes i didn't have the
p5 web editor when i made that i did
some weird stuff in that video that
makes no sense probably so I thought I
would try today as a coding challenge
snake game Redux it's kind of true that
this is just a grab at words because
like I'm sort of curious like why did
that video catch fire and if I do it
again they probably won't but will it
I'm just sort of curious but it also
feels like it's worth worth giving
another crack at so if anybody wants to
tell me that's a terrible idea I will
listen but I probably do it anyway and
then number six on this list we find a
working marker I'm looking at the chat
number six on this list is I want to
make some videos about how to make a p5
course with Google classroom so and this
will relate to me announcing the p5 web
editor so let me get to that I'm not I'm
not announcing the p5 web better the p5
web header has already been announced by
the people who made the p5 web editor I
am pointing you to that announcement
just to be clear so I do work closely
with the processing foundation I helped
to found to create the processing
foundation I've been working on
processing since 2004 and if I go to
medium.com slash at processing org you
can see this recent post hello p5.js web
editor so this is the p5.js
it's just really distracting to me I'm
sorry when I scroll and then it's like I
see at the corner of my eye the
scrolling coming later but I'm gonna get
you
this is the p5 web editor announcement I
do need to deal with this laptop and
putting some green in front of it I
encourage you to watch this promo video
it has I'm just gonna play it without
sound because you will not hear it
oops so gonna let it play so this is the
announcement video it has all the people
who work don't know people who worked on
the project contributed it to it talk
about it look there's me with like a
longer beard and Orioles hat Orioles go
Orioles right maybe
Sabich on the reason why I'm one
dimension Saba Khan has been working on
education outreach for the processing
foundation he has a whole video about
how to do education with p5 and I think
it more sort of an overview and I would
like to do some nuts and bolts of like
you're a high school teacher and you use
Google suite already how can you
integrate that with p5 and the web
editor it's something that I'm doing
this semester here's Cassie who is the
creator of the p5 web editor so I
encourage you to watch these videos on
your own read about it
there is a full overview video with
Cassie of all of the features not well
the bulk of almost all of the features
of the web editor it's about a 20 minute
video of Cassie walking you through
everything I'm not gonna make one of
those myself it exists right here from
the creator of the web editor so I
encourage you to watch that there is a
video here from Mathura who is a recent
ITP alum and researcher and a research
resident who with many other people all
credited in this video Claire Kearney
bopi and Lewis and many other people
have worked on making the p5 web editor
accessible for people who are blind or
have low vision right from the beginning
so you can watch that video to learn
about that and there's a great question
in the chat from Cole which I want to
answer in a second and then there's also
this video about p5.js for educators
Sabra talks about a lot of different
initiatives related to computer science
education in particularly in K through
12 and how how you can use p5.js if that
interest you there's a lot of work going
on with the New York City Department of
Education and the cs4 all initiative
they've been directing the writing of a
new curriculum written by Luisa Pereira
who is also teaches here ITP there's a
whole p5 curriculum I will point you to
that if you but you'll find it in the
description so we this is today is a
wonderful day if you are a teacher if
you are a beginner I think that all of
these resources have been launched in or
out there okay so I encourage you to all
these videos are on the processing
foundation YouTube channel how do I get
to that YouTube processing foundation so
if you don't already subscribe to the
processing foundation I look I'm gonna
subscribe but I'm something like I don't
know what Google account this is that I
just made but so I encourage you to
subscribe to the processing foundation's
YouTube channel and if you have the
means you can also support the
processing foundation's work it's a
non-for-profit charity here in the
United States at processing foundation
org slash support that's not the right
URL slash
support okay so all right so that is
check announce P five web editor let me
quickly answer a question that was asked
about by Cole in the chat and okay I'm
sorry I'm looking at the slack channel
so Cole asked something like I'm gonna
rephrase the question will the p5 web
editor change the process of uploading
coding challenges so I don't plan to
exclusively use the p5 just web editor
on this channel it will certainly become
a core tool my mission is to show a
variety of ways of coding you know again
I do focus a bit on using processing in
p5 and related libraries but I use node
and I'm going to be using Visual Studio
code I'm going to show you some tricks
that I have to use a different terminal
this I term thing that the slack Channel
and people have helped me set up because
I'm very out of date with my stuff so
but if I do a coding challenge in the
web editor it
will facilitate people making their own
versions of it and sharing those very
easily and I will talk about that and
show that as I get into the web editor
itself alright I've got to get into this
material so let me figure out let's get
a good phone okay I got to figure this
out now here's I really really hope I
don't subtly like spend 45 minutes on
this please keep me in check but the web
editors layout is a little bit awkward
compared to how I've usually done my
videos so I'm going to just quickly try
to set something up so first let me get
a good font size those are you watching
how is this font size and so let me know
I kind of feel like it needs to be a
little bit bigger let's go to 36 okay so
let's do here and 400 400 shows up there
one thing I can't do easily if i zoom
that's fine it's okay that I can live
with all right so p5 web editor now
there's two options I'm gonna try
something here this is write it okay
first let's try to get this laptop to go
away so I've got some green paper
cloaking device and this is my extra
laptop where I look at the slack channel
for members it's it too big okay that's
fine I you know I am always erring on
the side of making it larger yes me I am
sue me I saw the CSS modifications to
flip the web editor and also increase
the console oh I didn't now me I am so
me can you put that in like a github
gist because that'll be the easiest way
for me to grab it onto this computer I
played around with it but I didn't
actually do it on the login so if you
could put it like a github gist I'm a
little bit afraid of doing that because
I'm a little afraid if the web editor
looks different on my screen compared to
other peoples
they're going to be confused but I think
it just being flipped is sort of not a
big deal
and I could also acknowledge that the
other thing I could do is I can flip
myself oh but my words on my shirt will
be backwards I guess maybe I'll flip use
some CSS hacks to flip that and we can
make that a Chrome extension for people
who you know it could become a feature
of the web editor itself how am I doing
here with this laptop so far so good
right thought I was asking what's a gist
a github gist is a single page
lightweight way of sharing a code
snippet that is much more lightweight
than creating a full github repository
just the way of like let me quickly
share some code with you right yes this
is green paper I will prove to you it's
green paper there you go now I need okay
let's see you know certainly this is the
kind of thing that I should do in
advance but the way my life works these
days is I get into this room about 10
minutes before I set the time and so I
very rarely yep I think that did the
trick I very rarely I have a lot of I
did spend some time here yesterday at
least getting this new computer working
so I've got a bit of a faster computer I
have an e key that works I would like to
get if I was thinking of getting a
mechanical keyboard was that when when
what was her name
when sorry when new Katsu's was here
okay this is a shorter URL me I okay so
I've got it from me I am so me there was
a bug in it me I am so me that well we
would probably I would love to fix if
possible which is that but let me try
getting that first so me me I am so
me dot so me I am so dot me a dot txt
oh no but I needed so that's good what
was useful to me was somebody made a
version that was like that I couldn't
turn into like a little JavaScript
bookmarklet and I could just press and
it flipped it around otherwise I suppose
I could add this in like by going to the
developer console or something I should
know how to do this right and if I go
down like here into like the styles or
something and I also want to make this
bigger like I can add it here somehow
it's amazing that I don't know how to do
this right that's B dot txt okay so what
I'm going to do this is a little I do
have a video tutorial about making a
bookmarklet bookmarks bar new add page
so I think did it have JavaScript you so
if I add this I mean you can just say oh
no whoops
flip p5 put this in here save and now if
I click this yeah the bug is let's see
if that bug is there I want to be able
to move this back and forth yeah is
there all anybody have any idea of had
how I could fix this so I'd love to fix
that I can live I can live with it for
right now but this would be then people
are going to ask how do I flip it so I
better acknowledge that I'm doing that
I'm going to I can also like yeah but
that's fine how can I remove this
whatever okay let me lock my thing in
here so that good I didn't spend too
much time on that lock oh that looks
like ah
get a little more green right on the
worst tiny bit more green sorry
everybody I'm kind of an idiot because I
don't need all that space but just
didn't do it high enough over here now
I'm gonna need another piece of tape no
easy way to fix that okay well I will
just live with it I think that's okay
the other thing I was gonna do is flip
myself but I think I'll keep it this way
okay one more piece of tape and we
should be ready ah the worst of this do
it evenly I have to like undo it how do
we do there all right can you notice
anything let's let's minimize this and
see yeah
all right of course if I walk over here
it's a little bit weird but that's fine
okay we are in good shape just pretend
there's a pulley that's very good
feedback all right I think I'm ready
I'm just cycling the cameras here
by the way for sale I'm like a NASCAR
driver here with my new laptop just
kidding I mean I'm not kidding water h2o
get back to me all right
um I don't think that I need oops
shoots wrong button okay I don't think
that I need this list written out here
anymore if somebody could help me to
remember it obviously you can take a
snapshot of it but it's pretty obvious
so let me be clear about what I'm doing
here I'm actually teaching at NYU a new
online course for any and NYU undergrad
to sign up for and learn to code it's
all gonna happen online through a Google
classroom and there's lots of features
for interaction and discussion and
sharing of sketches there the videos for
that course are what I'm doing here on
this channel for the public to consume I
have a dream of someday having also a
version of the course like that public
people could sign up for in some way but
I'm not ready for that yet
like to do things small and
incrementally so I am NOT going to be
referencing that course in the public
videos but I do need to make some
specific content I have to hear some
things out so this first video that I'm
about to do will introduce the course
and I don't do scripts sometimes I have
a good mental outline of what I want to
talk about sometimes I just spin my
wheels I'm not really sure what's gonna
happen right now but I am going to just
do my best
can I raise this up a tiny bit and I'm
gonna go to p5.js pork and processing
foundation org and across the state type
work okay oh boy I don't want to be a
process just about this but I need to
make a new video for the homepage of
processing on org okay somebody baked
get me to do that and my phone is
ringing I got a highlighter out the
notifications on this b IM Samia terms
of a pull request request let's actually
let me talk to a cassie who's the
creator of the web editor and see take
her temperature on that and whether
that's gonna get in the way of other
things that are happening but I'm I'm
interested in that as a feature and I I
blow that extra preferences so anyway
let's we'll have a discussion about that
sorry me and Sookie was asked about
whether to like actually pull requests
making this flipping
a feature of the web editor itself okay
let's see what can I go to reference
yeah that's good or exhibition maybe
exhibition will be good okay
I think bothering me that my laptop is
like kind of off but I also want to be
further this way all the way all the way
all the way all the way all the way all
the way all the way perfect
alright I'm ready
okay
I'm gonna wing it that's what I always
do I could always do it again right you
guys Oh too much I remake the content
again I was actually I rewatched about a
week ago my other intro to p5 video and
in that video I said like I said the
middle like boy this is completely
different than my last attempt but I
wasn't live-streaming at the time so I
clearly had done it a few times I also
thought that video was kind of terrible
so anyway alright welcome to the first
video in what is the playlist of many
many many probably too many videos about
learning to code if you have never
written any code before if you've never
programmed before if you don't know
anything about programming it's my
intention for this playlist to be for
you so this is the first introductory
video I'm just gonna talk about the
pieces of the puzzle that I'm going to
use throughout this video series and
show you where all those things are and
kind of a little bit about the history
of those things just to get started in
learning to code learning to code you
don't have to have know anything and all
you need is a computer with a web
browser to follow along you don't have
to download anything install anything
I'm so excited about that now here's the
thing if you choose today August 31st
2018 if this is the time of the
recording there's many videos that
follow this in the playlist many of
those videos were done a year ago two
years ago three years ago they're using
the same exact stuff that I'm going to
show you but the screen is going to look
a little bit different so I'm starting
over because there's a new tool that
just came out today called the p5.js web
editor and it's the tool that I want to
use for people following this tutorial
series so the first few videos will have
that tool in it and the rest of the
videos are just gonna have the same
concepts that you could keep using in
that editor and maybe someday all of
them will be replaced I have no idea I'm
gonna stop talking about that that's not
the important part but I want
make that clear if you happen to be if
you're just one of like race ahead and
see all videos alright so what does it
mean to learn to program what does it
mean to program what it means to program
is to write instructions for the
computer to follow now this can happen
in a number of different ways but you
need a programming language which
provides a syntax okay I was doing fine
but then I I needed to stop for a second
I feel like I can always stop and we can
have an edit point when I'm doing the
thing where I come over here I don't
know why I'm coming over there alright I
will address this Luka asks I'm curious
why are you making a whole other series
when you've already done it it's a very
valid question and I'm not confident
it's a good decision to do this in terms
of you know give an infinite time it
would definitely make sense but I do
think it's important it's hard for
people to follow that tutorial series if
they because there's not a sort of
central I want to I want to restart it
with the p5 web editor so okay okay okay
what does it mean to program the
computer what it means the program the
computer is to write a set of
instructions for the computer to follow
you right now as a human being could
write me a set of instructions to follow
you could say do some jumping jacks and
you could say touch your nose and touch
your head and like I don't know stretch
your hamstring muscle which is the thing
that I really need to do with all these
backups but that aside what were say
talking about oh that that's the kind of
thing that we could do with each other
as human beings but there's something
interesting about that right if you said
to me do some jumping jacks I'm able to
do them you could say
thank you much for being an editor I
didn't have an editor in the past um you
could say do some jumping jacks you
could say jump up and down with your
hands going up and your feet going out
you could say please would you do some
jumping jacks or jumping jacks do
jumping jacks do you could say in all
sorts of different ways and through kind
of human interpretation I could
understand what you're trying to say and
interpret it and follow your
instructions programming and program the
computer to do something is a different
process you have to be very very
specific and you can't get things out of
order or make a slight mistake or miss a
word or miss a piece of punctuation and
this is called syntax this is like
probably the least interesting thing to
start talking about when you start
talking about learning to program but
the reason why I was thinking about it
is because you need a particular
language in which to communicate with
the computer and languages can be high
level or low level meaning they can
sound more like common language or they
can sound more technical and cryptic
they can be manipulating the internal
memory and guts of the computer directly
or they could be just writing some
instructions or something that sounds
like English but then is translated by
some other system this tent up against
was good I'm gonna start this part over
let's give me like a there's gonna be a
couple Mulligan's on this eventually
I'll get into the rhythm of this
yeah pseudocode yes describe right you
should start with pseudocode that's a
good Kelli Murphy is giving me a good
some good suggestions I just want to
kind of hit the bell okay so what does
it mean to program so what I mean by
programming coding is writing
instructions for the computer to follow
up and you might think of that and in
this course the way that I'm going to
start it's going to be all about writing
instructions for the computer to draw a
picture now there's many different
applications of coding related to data
and sound and music and text and web
sites and but the place that I'm going
to start in this course is drawing
pictures and animation it's not the
correct way or the best way even to
learn to program but it's the way that
can be that I'm comfortable with and
that I think is well suited for certain
audience and perhaps you watching this
if not I don't know so I might say
something like draw a rectangle and
that's the instruction and then the
computer draws a rectangle to the screen
I might say something like draw ten
rectangles and then the computer would
draw ten rectangles to the screen this
is much like how you might say to me do
a jumping jack and I would do this or do
ten jumping jacks and I would do ten
jumping jacks well there was something
about stretching my hamstrings as I said
earlier looks a good joke think I cut
out yeah this is getting better
this is a better I'm gonna get the
hamstring thing good I think I have it
in my head now have you guys ever seen
the movie Groundhog Day
welcome to Groundhog Day
[Music]
all right so what does it mean to
program the computer so what it means to
probe computer is to write a set of
instructions for the computer to follow
and the way that I'm going to frame that
for the purpose of this course is all
about writing instructions for the
computer to draw pictures so in other
words you could imagine a window on the
computer screen and you're providing
instructions for things that should
appear in the window draw a rectangle
draw a blue rectangle draw ten
rectangles draw a rectangle in a circle
that erected on a circle and alternate
the colors black and white black and
white black and white there are so many
ways that we could think about how UB
might in English or whatever your native
languages instruct the computer to
follow some algorithm and algorithm
being a series of steps to execute to
solve a problem writing code is code
instructions to execute an algorithm a
series of steps to solve some Tunica
problem now in this course we're not
gonna necessarily stop but I'm hopefully
you might solve some problems but you
can also just play around an experiment
and make beautiful pictures and that's
where we're gonna start but we need some
way of doing this together drawing a
rectangle drum circle the computer
doesn't understand that you and I could
understand that if we speak the same
language or even if we don't we might be
able to use body language or some other
way of kind of human intuition to
communicate but the computer requires
specific syntax and the syntax that you
need the syntax is defined by the
programming language you choose to write
your code in and boy oh boy oh boy you
know Google go have fun googling what's
the best programming language to learn
in 2400 and that doesn't make any sense
to 20 20 40 whatever time in the future
that you're watching this video I don't
I'm not gonna worry myself with any of
that stuff I'm gonna pick something I'm
going to pick a programming language
called JavaScript the reason I'm going
to pick it is because it
that's the one that I know a little bit
and it also happens to be one in which
there is a particularly Brer II and I'll
talk about what that is that is a
library of code of helper functions of
things that will help you along in
JavaScript called p5.js and this is a
particularly Brer II that's created by a
nonprofit organization called the
processing foundation I'll include lots
of links about the process foundation
all of its initiatives it's an
open-source project which means it is
all they're available all about how
p5.js works is all available for you to
learn and find out about and as a
beginner one of the missions of p5 is
beginners learning the code cannot
aren't just users of p5 but can be
contributors to p5 so you can
participate in helping to make this tool
that you are learning to use I encourage
you to get involved with that and I'm
happy to help facilitate that so by the
way p5 gas also grew out of another
project that's part of the processing
foundation which is just called
processing it uses this is very
confusing i Raza must stop talking about
different programming languages I can
it's built on top of a programming
language called Java which sounds a lot
like JavaScript and in fact JavaScript
was named JavaScript because at the time
Java was like this super cool thing to
use and it still is for me I suppose I
mean I like it but I don't know if
you've ever been to one of those
webpages where it's like giving you lots
of error messages about a Java applet
it's not so well suited for sharing on
the web and JavaScript is the
programming language of the browser so
if you want to make this strange picture
which is Square Circle Square Circle
Square happen in the browser by writing
instructions in JavaScript you can use
the p5.js library you can share it
instantly with your friends with your
family with your co-workers with your
fellow students you can get feedback I'm
going to show you how to do all of this
in this video series pause pause pause
pause pause
now again it's important to note this is
not the only way to learn to program you
know if you were here in the room with
me out ask you to just like shout out
the names of other programming languages
do you know about you might say like
Python or C or C sharp or COBOL or PHP
oh oh I don't know something else there
Java blah blah blah we could keep going
on and on and these are in no particular
order my goal for you in this course is
to learn about the concepts of
programming to be creative with
programming to discover how to realize
your own ideas through coding and both
and this is a nice place for us to start
we're gonna get the benefit of be able
to put our stuff instantly in the web
browser and if someday you discover some
of these other tools make sense for
other projects they would like to learn
this is going to give you a foundation
of knowledge for that in this playlist
in this series and all the videos that
I'm going to make them and I'll walk you
through learning to code you will also
select by accident learn a little bit
about something called HTML and a CSS
HTML and CSS or the other pieces of the
puzzle for making something appear on a
web page I'm going to focus focus focus
on JavaScript and you're not gonna see
anything about HTML and CSS for quite a
while but there's these underlying other
mechanics for how content is formatted
and styled to appear on a webpage so
while this is not a web development
course because think about web
development you might by accident learn
to do some web development by taking
well you're really taking this course
but by watching these videos and
following along yeah like what if I
missed this is actually being recorded
right now as part of a live stream let
me go check to see if there's any
questions all right
no I forgot I should have mentioned like
scratch or blockly that's a good dose
some good feedback in questions all
right looking in the chat I do have a
CSS tutorial and I will be I'm yes so my
goal I had a regular schedule but I hope
to be here every Friday continuing doing
this stuff and other things too if
you've ever written COBOL Neal's writes
if you've ever written COBOL PHP will
come the greatest language of all time
yeah I shouldn't have gone down a list
of programming languages all people are
gonna talk about
I forgot jQuery that's not a programming
language it's like a people hungry all
right all right enough with the enough
with the enough with the require 8 so ok
so let me pull up the I just want to get
that medium post up again so I can
reference it
oh my god well hello kinfolk sorry
all right
I'm sad I'm very sad that the joke with
the stretch you got the hamstrings of my
back problem is not gonna make it into
the final I'll have to live with that
math arrow in the way here okay all
right uh all right all right let me move
on with this I think that was fine it
was it is what it is and now I'm going
to move on all right so I'm wrapping up
this first video this sort of
introduction I suppose I should probably
introduce myself a little bit if this
happens to be the first video that
you're watching I no no no I don't need
to draw forget about that all right so
I'm wrapping up this video and then the
next video it's really where I'm to get
started I'm gonna show you this is what
you type and this is what happens and
this is why what this happens when you
type it and this is what happens if you
type it this way this breaks it but this
way fixes it and we're just gonna rinse
and repeat and rinse repeat do that over
and over again for all the little
fundamental pieces of building blocks of
learning to create your own software but
I want to just show you a few URLs that
you can sort of poke around and read
about before you move on to the next
video if you're interested so this is
the p5.js website this is the website
that has a place where you can sort of
learn about the p5.js project this
reference page is gonna be very
important because it's the place we're
gonna look up like I forgot what's this
thing does we're gonna look at the
reference page this learn page has some
additional tutorials that you could look
at there's lots of examples here that we
could click around and play with I'll
just show you one right now let's go to
soft body and you can see like oh this
looks fun so this is the kind of thing
that you're gonna learn how to do how do
you draw a shape with an algorithm how
do you define a set of steps to draw
something and then how do you control
its motion and behavior I don't like
that I picked that
let me try that again we could pick a an
example to look at like the game of life
here the game of life is a particular
type of generative algorithm I'm gonna
run it again which involves lighting up
cells on a grid black white black white
based on what's next to it and creates
this fun biological crazy
that's one what's one that I I'm just a
flocking one why am I just why I always
should just do the one we could
pull up one of these examples like I
could click on this one called flocking
and you can see oh this is kind of slow
that is no no bad game of life was
better what is with all these game of
life is better
snake game oh my god there's a snake
game example Oh convenient you stuck
here okay Nicole like sweaty like really
very stressed out I would go back to the
game of life I could just click I could
just click on example like game of life
here and we could see ah this is the
code ah what is what is going on here
this looks crazy look at all this syntax
and punctuation and stuff by the end of
this whole playlist of series this will
make does that does ever make sense to
anybody looking at code that you didn't
write I'm not really sure but you will
start to understand what the pieces are
what is the process for building up a
particular project like this and this is
a well known algorithm called the game
of life it's a mathematical algorithm
that involves you know how cells on a
grid turn black or white based on what
the other cells are doing it's kind of
like this bacterial like stimulation so
oh there's so many things we can do I
actually have a whole video tutorial
building this up from scratch you could
go and find but stay with me here so
this is the p5.js website once again
automated p5.js was made actually one
other thing I want to point out here is
I want to go here on community I think
it's a p5 has a really wonderful
community statement which is really
important so I encourage you to go to
the p5 just commune your statement and
read it p5 chess is created by the
processing foundation I'll show you the
processing foundation runs the
fellowship program and here's a whole
lot of people Lauren McCarthy is the
creator of the p5 just library you can
learn more about the how does this how
did this project come about by looking
at the processing foundation website the
original processing project which is the
Java based platform if you're looking
for inspiration I'm particularly
recommend this exhibition page where you
can find really lots of interesting and
beautiful interactive projects made with
code ok now
here's the part that I'm so excited
about because this is like branding this
is a project two years in the making but
it's brand new in terms of its
announcement today at the time of me
making this video the p5.js web editor
this is an editor that you can use that
you can use and write code in the
browser save your projects share your
projects with look there's that David
life thing again
with without anything they don't need to
download anything at all and I'm gonna
show you how to look there I am that's
weird and I'm going to show you how to
use the p5.js editor while you're
learning to code I do want to mention
that if you are interested in all of the
features of the web editor watch this
video by Cassie terre occasion this is
not a beginner programming video but
it's a video for people who might know a
bit about programming already to see
what the things a web editor can do
actually walks you through every all of
the features accessibility is a core
feature of the p5 web editor if you are
low vision or blind there are a lot of
features built into the web editors
allow you to code with it and matura
talks about all the people who
contributed to that effort and those
accessibility features in this video as
well as if you are a teacher and you
want to teach with p5 maybe you want to
use these videos or make your own or
write your own curriculum sabor Khan who
does education outreach for the
processing foundation talks about that
in this video and I am planning to make
my own series about how to use the p5
web editor and Google classroom together
so if you're interested in that stay
tuned I'll be making a video on that
okay so now this is the p5 web editor um
there it is so well look this is some
code that doesn't look so bad function
setup what does that create canvas what
is that background 2:20 what does that
function draw what is that this is all
the stuff that I'm going to talk about
precisely in the next video so in the
next video I'm gonna show you what kinds
of things can you type here what ends up
happening over here when you type them
and why and we're just gonna go from
there video after video after video
adding
piece than this piece and this piece and
by the end you can make your own
interactive animated game artwork data
visualization who knows you're going to
be much more creative and come up with
something much better than I could
possibly imagine right now okay
so if you're excited about that great
keep on watching there's also lots of
other things in the world besides
programming like so you could go do that
stuff too and especially like being with
people and hugging your neighbors and
stuff like that that sounded weird I
have you for that somewhere I'm gonna go
now I have to stretch my hamstrings
because I have got some back problems
and that's gonna help I see I got that
in there alright see you all later in
the next video and everybody in the chat
is talking about which programming
language they love the best for whatever
reason alright
that's gonna be okay right me I am so me
do I need to do I need to re say
something else at the end there yeah
that's gonna stop with the dab
requesting cuz I it's it's too much noiz
in the chat so I'm not going to do it
let's see Oh getting text method on me I
just got a text message from Cynthia
Nixon
the New York governor's race I was like
oh the big sin is texting me in any rise
no I don't think that's a personal
message oh right
I think it went well Thank You Marshall
okay so this is what the good news is I
have gotten past what is the harder part
for me slack channel participants when
I'm done with the live stream today if
you are there
could you please remind me I need to
make I need to stay a little longer and
make a quick intro for the actual NYU
course that just talks about the NYU
bureaucracy stuff it's you're not
missing anything I just need to not
forget that because I the course
launches on Tuesday this is not the
eraser that I use and I want to make
sure I have that okay
alright ok so it looks like I got a
super chat thank you to mr. Uggla help I
am watching an insane man Babylon indeed
that is exactly what you were doing
[Music]
ok alright so
all right Oh into p5.js org all right
okay I'm gonna do drawing I got a couple
talking about drawing coordinate systems
and shapes in this video alright oh wait
so I guess I'm gonna do this flip thing
that's weird that might but I think
maybe I still need to like I mean the
thing is if I'm going to do this then
what's the point of doing the flip thing
I mean I could just leave it like this
but I could also do this and flip and
then and I could kind of more come over
more this way and then I have more I
don't know how do i oh there it is yeah
like I could do this and then like if
I'm just whoa
and then you know if I'm saying like
just try to figure this out so I mean
talking about the code we see it over
here I mean I can kind of do this and
imagine that I'm referencing the screen
anybody have any feedback about the
layout thing like so these are my
options like kind of use just part of
the screen and stand kind of off to the
right but have the code over there so
it's okay if I'm a little bit in front
of this while I'm talking I think this
is the best because then I could sort of
back off and talk about this or I can
kind of move over and talk about this I
think I'm gonna leave it like this for
right now but at first I'm gonna do this
so the video starts oh it's like this I
know you guys I know everybody watching
is about 30 seconds behind me so oh I
should have been that I guess I need to
make something about signing up for an
account all right so let me
oops no at the moment that the reason
why I don't want to do that yeah there's
some okay
so the one problem I have people are
commenting on the layout stuff and it's
a little bit unfortunate but I have no
idea what you're referencing because you
are like 30 to 45 seconds at a different
time so so Matthew I don't know what you
meant and there's also the dark theme I
think yes let me just check that there's
dark which I could use but if I do that
I definitely need to use the high
contrast I think I think this actually
looks better on the on YouTube the white
one all right I'm gonna I'm gonna leave
I'm gonna use my own instincts here and
I'm gonna do it like this
yellow on left then code then window Oh
got it
editor on right okay
oh boy this is way too hard for me to
decide coding on the right canvas on the
left okay great so I'm gonna do this but
I'm going to leave myself a little bit
of buffer zone here okay the reason why
I went to incognito mode was to have a
view of it without being logged
okay
coating on the right canvas on the left
okay great that's what everybody seems
to be saying
all right you're wrong what time is it
oh it's not even six o'clock that's a
good sign
because I think this will be pretty fast
you know I waste so much time in between
I appreciate everybody saying let's use
the dark theme I'm a little bit
concerned about how that's gonna look
just in terms of my seeing it on the
monitor it looks weird but you guys are
you are all actually watching Yeah right
hi let me just try it
settings yeah this is actually pretty
good so I think I'm gonna leave it like
this high contrast people are okay with
a high contrast so I'm gonna change it
to that though just to show show that
feature this is the dark I think it
needs to be the high contrast now we
prefer the high contrast all right light
theme looks better on YouTube
so I'm looking for in the slack channel
kind of do this real quick
sorry everybody this is kind of
important to get this right
and in the in the poll that I just
posted in the slack Channel
when I say dark no dark means the high
contrast I'm not gonna do the dark
without the high contrast I don't think
that's right as a colorblind person I
appreciate the high contrast okay okay
seems to be the popular one okay so just
so everybody knows I am having it start
like this cuz this is what you're gonna
see by default and I will switch it
alright thank you for everybody for
bearing with me here all right okay I
got a good start with this
hello I'm back so this is the first
video where I'm actually gonna start
coding in p5 with the web editor that's
those weirdoes very good hello I'm back
so this in this video I'm going to start
coding in p5 with the p5 just web editor
for the first time on this coding train
YouTube channel so if you go to you
should what if you're following along
you should go to editor p5.js org and
you will see something that looks like
this now I'm in an incognito window here
because I want to show you what it looks
like being logged out what you're going
to see on the top right you're gonna see
login or signup so if you've already
made an account you'll want to log in
but more likely you if you're watching
this for the first time you're going to
want to click on signup this should be
its own video because I think I need to
I think I think if I'm gonna have a
video about drawing with p5 you
shouldn't have to watch like even if
it's just 5 minutes long about setting
up that this probably should have been
in the previous video but too late
alright sorry let me just give me one
more time here ok hi
so before X I know I said that in the
next you watch the previously I said the
next video I'm gonna start coding
apologies I'm not gonna start coding
just yet I didn't do one more thing I'm
going to show you how to get set up with
the web editor itself so the first thing
you want to do is go to a web browser
I'm using the Chrome web browser but the
the and I'm on a Mac but you could be on
any other computer and using a different
web browser as well you want to go to
the URL editor dot p5.js org that's
where you want to go you can follow
along and go there right now
what you're gonna see is something that
looks like this this is the web editor
and you can actually just start coding
but I'm going to show you what these
things mean but like what if I change
this background number to zero and then
I run up here and there's this button
here this this button it looks like a
play button like I'm gonna play on my
old timey VCR well really this is gonna
run that code and I'm gonna see well
look at this there's a square with a
black background over there
if I change this to 100 and I click play
again who that the color of that change
where they say 100 comma zero comma 200
now the colors purple so I'm off I'm off
the train is off the tracks but I'm
going to come back and explain what all
these things are how you type them why
you type them and what they mean later
but the thing is like this is my opus
now I have made this beautiful wonderful
p5 sketch and I wanna share it with the
world
I can't I can't I could go to file and I
can click Save but it says in order to
save sketches you must be logged in so
at the moment the editor doesn't have
any way to save something without you
having an account you can play around
but what you'll want to do is go to sign
up so if you you might already have it
account you can go to log in I'm gonna
click sign up and here what you can do
is you can create a username and email
and a password and if you are if you
don't have your own email address you
know you you can and you have a parent
or somebody else that you can ask to use
their email address to sign up that's
what I would suggest doing so you want
to create that account you don't need to
use your email other than just for the
signing up so once you've signed up and
you've logged in you're now I'm going to
leave this you're gonna see something
like this now I created an account
called coding train and it will say
hello comma the username that you picked
so you'll see that you can go onto here
under my account you can see there's
things like my sketches my assets this
is something that will if I'm gonna show
you how to you can use images and sounds
and upload videos to the editor those
are things that would appear in my
assets settings I'm gonna show you in a
minute but now we're in p5 itself now I
want to go back to my beautiful opus
where I don't know why yet but somehow I
changed some numbers and I got this
beautiful color over there
now I can go to file save once I've done
that this URL up here is a you URL
forever that that is my sketch and in
fact I can go right up here to sketch
notes file share and you can see look
now I can share the code for my sketch
here
I can actually share a full-screen
version of the sketch let's look at this
look here's my beautiful sketch so now
I'm going to show you how to make more
interesting things and then share them
without the code and then this is
something called an embed so if you have
a blog this is something where you can
actually take your sketch and embed it
into something else I'll come back and
show you this stuff maybe again as we
get further along and I'm not going to
worry about it too much right now okay
so we've got it here's the thing what is
the name of this project what is the
name of this project if i zoom in here
the name of the project is unbiased shoe
so this is one of my favorite things
about the p5 web editor it will
auto-generate a name of each sketch for
you now the truth of the matter is you
probably want to have some practice of
renaming and naming it something that
describes what it actually is I can
click this pencil icon and I can call it
coding trained editor demo I can hit
enter and now the sketch has that name
the URL this name is not part of the URL
for sharing that sketch it's just a name
for you to keep track of if you ever go
to for example file open actually I want
to it's telling me I don't want I need
to save it first so I'm gonna go to file
save and then I'm go to file open oops
didn't save I found a bug
and file open my account my sketches why
why is it not saving weird hold on
everybody
save project saved
I remember this happening I remember
this bug we're gonna fake it for the
purposes of this
weird so it shouldn't be it's saved it
shouldn't be I don't know what's going
on I'm gonna choose not to worry about
this yeah there we go I'm gonna choose
not to worry about this and just ignore
it for a little bit yeah
yes it probably is saving it's just
sending the prompt anyway we're gonna
have to investigate that so Matt to you
grab do some magic editing here so I
could save it and then I could go I
could so so I could now go I could now
go to file open and I could see look
these are other sketches now a measly
friend is some sketch I must have
created that I forgot to rename 10 print
is something that I was creating so you
can see these are the sketches that I
have made I could go and browse my other
ones okay now here's the thing for me to
make my tutorials I want to I want to
adjust a few settings visually for how
it looks to make it easier for the
viewer to see it and so I'm gonna go
here under settings and one thing I
could do under settings I've already
changed the text size to 36 I'm gonna go
to this high contrast theme and then I'm
gonna close X here we're gonna see this
is a nice high contrast theme it has a
dark background it also is easily
viewable for anyone with who's
colorblind in any visual impairment so I
think it's going to be nice for the
video tutorials to use that theme I also
would prefer to make sure that I'm not
standing in front of the code by
accident so I'm gonna do something a
little bit weird that I've been at
happen to mention in this video I'm
going to move the code window to the
other side this is not a feature of the
editor I have someone coding trained
contributor sent me some code that I was
able to hack the browser and I can put
the code on the other side and I can see
the preview over here so I am going to
sorry if you bear with me for a second I
am now in my videos I'm going to have it
look like this at some point that might
become a feature of the editor if other
people need this ability to flip where
the locations are or if you really need
to know how to do that I'll provide some
instructions in the video description
about how to run add a little button to
your web browser to
you flip this back and forth but I'm
gonna leave it this way I think this is
gonna allow me to code in a way that you
can see the code over here and if I'm
standing in front of the output every so
often no big deal okay again this was
not comprehensive if you want a
comprehensive overview of all of the
features of the web editor I will link
to the processing foundation playlist
there's three videos about p5 and the
band the web editor Cassie the Creator
the web editor does an overview matura
talks about the accessibility features
and there and there and there's a video
about education with p5 from soccer as
well so okay so now if you somehow made
it to the end of this long rambling
video I will really code in the next
video in the next video I'm going to
talk about what are the commands the
instructions what is the syntax of
JavaScript with the p5.js library to get
things to appear right over here see you
there
oh yes sorry I forgot to show that you
could log in with github or Google I
think the mean is that a big deal that I
missed that
let me tack that on here just gonna log
out
one more quick thing that I want to
mention actually thank you to some live
viewers who pointed this out if you
don't want to sign up for a new account
you can actually log into the p5 web
editor with an account that you already
have with Google or with a website
called github which you don't know what
that is there's some other videos you
could watch but you don't see those on
the signup page so those don't show here
but if you go to the login page you can
see these options here
login with github or log in with Google
so that's another way of logging in to
the editor I wonder if that can be
spliced in the middle not to you if you
can figure out a way to splice that in
the middle that would be great is there
a possibility to get to share code with
other users absolutely you absolutely
can okay I'm sure I miss stuff I'm doing
my best all right flip didn't remember
it doesn't remember like how I do that
but that's fine okay why is it not
saving this is a little bit distressing
that this this seems to be a bug that
this should go away oh thank you Austin
for that bookmark
yeah all right I don't know what's the
deal with the saving thing but I'm gonna
choose not to worry about it yeah weird
oh wait hold on let's just see okay no
problem
and
okay all right what do we got six
o'clock we're doing well we're doing
well every time I walk over here to
cycle the camera my phone is on the
floor charging and I see all these
notifications I got to turn it upside
down so it's really distracting me
turning it upside down okay
it also does autosave alright okay yeah
this couch is still running but you
should be all that people are saying
like maybe it's not saving because the
sketch is running I don't think so
it's it's it's meant to be able to save
and reload and while it's whether it's
running or not that shouldn't affect its
ability to like save okay by the way
doing this where is the oh yeah this is
over here now that's a little bit weird
mm-hmm so one thing that I don't love
about what I just did is but I'm not
going to get to that until later so yeah
that should probably by the way in this
bookmarklet thing we should probably
have the sidebar open up here if
somebody wants to help with that
hello okay it's time it is time to start
talking about and writing some code
what's going on here it you can see
already that there's this function set
up function draw what is that stuff
there's curly brackets there's
parentheses let's hold off on that for a
second let's not get too worked up about
that let's focus just for a moment on
create canvas parentheses 400 , 400
closed parentheses semicolon I'm going
to write that out in a generic way I'm
gonna say something like instruction
another word for that might be command
and the truth of the matter is the
actual technical name for what I'm
writing here is a function name function
name instruction instruction parentheses
some number comma some other number
I don't know comma some other number
comma
well let's not put that there close
parentheses semicolon this is the syntax
for executing an instruction for the
computer to follow the name of the
instruction parentheses that open and
close followed by a semicolon in some
number of things in between that number
of things could be 0 it could be 1 it
could be 2 it could be 3 occur before it
depends so now if we go back to create
canvas we can see look the instruction
is create canvas parentheses 400 comma
400 so ask yourself pause the video for
a second what does 400 mean and what
does 400 mean I mean it means the number
400 but like why isn't them referring
what is it doing okay are you back did
you think about it well one way to try
to figure this out is for me just to say
well why don't we just change the number
to 235
then ran the program already I have to
tell it to rerun the program well it's
half as wide but just as tall mmm by the
way there's this interesting button over
here Auto refresh huh
so notice how I change the code and then
I had to run it again
that was a little bit inconvenient I
mean there's it's not so bad I'm happy
to do it as often as I need to but
things might be a little more convenient
if I select that because now what if I
change this to 300 whoops 300 change
this to 400 when I change this to 800
it's always going to update the drawing
the result of the instructions here what
if I have that auto refresh clicked and
I'm gonna go back to 400 and 400 so what
those numbers define is the width and
height of this thing called the canvas
this is the drawing canvas it's the
thing that we're going to write
instructions to draw stuff in to move
things around interact with things all
eventually and the syntax for making
this is create canvas foreigner 400 it's
interesting there what happens if I
delete this well so p5 by the way we'll
always put a canvas there for you if you
forget to say create canvas it made a
canvas there for you but it just didn't
know how big to make it so it takes some
arbitrary size probably 100 by 100 but
let's put that back there's 400 by 400
there's a really important thing that I
want to talk about but let's come back
over here so create canvas this is the
function name let's use the real
terminology you can think of it like a
command create canvas that's your
command these are called the arguments I
think earlier I didn't actually say this
but if you were giving me instructions
to do some exercises and you said do
some jumping jacks I would say how many
you need to modify you need to provide
parameters for how I should execute the
instruction the instructions create the
canvas with a size of
400 by 300 pixels meaning create a area
on the screen that I can draw to that's
400 pixels wide 300 pixels high if the
concept of pixels is new to you on a
computer screen every single color that
you see is if you zoom way into it as a
single dot now there's all sorts of
weird funny business going on because we
have all these high-density displays now
that have multiple pixels for every
pixel but all that aside the idea here
is if I were to zoom way in
wait-wait-wait-wait-wait way in and
count all the dots there'd be 400 of
them and there's 400 wide and let's
change this to 300 just so we can see
that's a little bit different 400 by 300
so this is the idea now we have to ask a
really important question I've totally
forgotten to bring this up what is the
difference between JavaScript we haven't
even really gotten to the drawing stuff
yet but don't worry we will JavaScript
and p5 is create canvas p5 or is it
JavaScript is 400 comma 300 p5 or is it
JavaScript this is not an easy question
to answer and it's a question that I
hope will resolve itself for you over
time as you program more and more and
learn about other libraries besides p5
that work with the JavaScript language
but the key thing is here the language
the syntax the fact that you need
parentheses and commas and semicolons
and names of functions go here that is
the JavaScript language to call a
function in JavaScript is to write the
function name followed by parentheses
with commas for the arguments and a
semicolon
that's JavaScript create canvas is a
function that exists that is defined
inside of the p5 library so if you did
not have p5 if you weren't using the p5
web editor here in some other
environment and you wrote create canvas
you might get an error message saying I
don't know what create canvas is all
programming environments and editors
allow you to import other library
but the p5 web editor has done this for
you so the fact that we can execute p5
commands right create canvas and there's
a lot more of them means it is because
we're using the p5 library the way we
execute that command where the semicolon
goes where the parentheses go where the
commas go that is all the JavaScript
language itself the syntax I hope that
gives a little bit of clarity there's
more to it than that you'll have many
more questions but hopefully I'll keep
answering that as we go all right so now
where can I find out about other
commands that I can write besides create
canvas and when I say commands I really
mean functions but I like to use the
word command at least at the beginning
because it's it's a little clearer to
talk about what it just we're actually
doing here you and me but technically
these are functions that we're calling
okay all right so the answer to that
question is the p5.js website if I go to
the p5 Geoff's website and I click on
this tat this this link called reference
this link on reference has every single
function that's part of the p5 library
so somewhere on here I could do a find
we can find create canvas and I could
click on create canvas and learn more
about Korea canvas this is known as the
documentation programming languages and
programming libraries and frameworks all
they should at least have documentation
where you go to read about how the thing
is supposed to work I could sit I could
make like thousands and thousands of
videos and just go through every one in
one of these and explain it to you but
learning to program is not just learning
how to write the instructions and the
syntax it's learning how to read
documentation so the functions that I
want you if you're watching this video
series which I guess you are to follow
first are the ones that are under 2d
primitives this is where we're gonna
start there are lots of functions that
go and explore them all don't listen to
me
but for your first exercise after you
watch this video just limit yourself to
triangle rect which is short for
rectangle quad which is an
shape that has four vertices to it four
sides edges point which is a single
point line which is a line ellipse which
is a fancy name for circle but it could
be sort of squashed or an arc so all of
these are could probably needs its own
video to talk about artworks back so but
you can explore these experiment with
them let's start with let's just make a
guess let's start with rect for
rectangle and I let's not even click on
it yet I'm just gonna go over here and
now the drawing now I need to talk about
what setup and draw are what are these
blocks of code why do they start with a
curly bracket and and a bracket I'm
gonna come back to that for right now we
should understand that setup is the
place where create canvas code that's
the beginning we're gonna set up our
canvas draw is the place where I'm gonna
put my stuff to draw stuff to the canvas
there's more to it than that but that's
the way to think about it right now so
I'm going to go in here and I'm going to
say all right I'm gonna zoom back out
our ECT find out what it means to me I'm
going to put some numbers in there shot
him out you're not you can't hear you
sorry I'm gonna say like 150 25
nothing's there yet 75 senator 85-75 ah
look at that suddenly there's a
rectangle there so even just through
guessing right we know the name of the
instruction rectangle rect or ect we
know that we need to then put maybe some
numbers in between parentheses and then
end with the semicolon we could just try
be weirdly like what can I put another
number there whoops I messed up can I
put another number there oh yeah oh look
at that
what did that do so what if what's going
on so you know what I'm gonna actually
take the time to explain the rectangle
function to you then we're gonna look at
the reference page and then I don't need
to do really the other ones because you
can then do this for yourself you could
type the command in you can type the
numbers in you can turn play around and
guess you can read the reference page
and try to fix it then you can ask me
questions in the comments and hopefully
I'll be able to respond to you all right
so let's come over here so let me take I
need an eraser time
for a second we can edit this let's take
a little break for a second to strike
and drink a little water this is like
really long by the way does anybody have
a guess as to like just this drawing
video like how much time I've spent so
far I mean I tend it's like take way too
much time I think but I think this is
like important pieces for the total
beginner yea denne denne asks could you
put the background function and set up
as well yes so this is definitely
something that I'm going to come back to
and I think it's there in the future
videos but you absolutely could put the
background function in setup yeah all
right all right I'm not getting any
answers to that question that I asked
which I don't even move what the
question was all right let me tackle the
camera since I'm over here I sure that
line actually I should have done line I
kinda want to go back and do line but
it's fine yeah all right
okay so I need to give myself oh space
here and what I want to do is draw the
canvas for you then what I want to do is
write out this function rect and I'm
gonna say 100 what did I what did I put
actually in here I put 150 25 75 150 25
75 so how do these arguments define the
way to draw a rectangle right
our ECT means draw a rectangle here are
the properties of the rectangle that I
want to see in order to understand what
these numbers mean we need a little bit
of background knowledge about this
two-dimensional space itself of the
canvas we need to think about something
called a Cartesian coordinate system so
a Cartesian coordinate system named for
the French mathematician Rene Descartes
Cartesian is a way of describing a
two-dimensional space and saying like
this spot can be identified by this
quote-unquote
XY position or this horizontal and
vertical position you if you've taken
some type of math or geometry class for
ten depending on where you are are
you're sort of learning the worlds of
journey you might have seen a graph that
looks like this with some ticks on it up
and down and you might have learned like
oh this is something called the x axis
and this is something called the y axis
and if I say here's a point three comma
four I go this it and this is somehow
the point 0 0 the origin the centre 3
comma 4 would be 1 2 3 go up and then 1
2 3 4 refers to this position right here
within the Cartesian coordinate system a
2d canvas being drawn by p5 is also a
Cartesian coordinate system but it's a
little bit confusing because
this default the standard way accorded
system in with pixels and computer
graphics define does not look exactly
like this the equivalent of this zero
zero being the origin is actually up
here at the top left and this is the
x-axis horizontal this is the y-axis so
if I were to say three comma four and
try to find that pixel I would have to
go one two three pixels over and one two
three four pixels down three comma four
would be this pixel right here the truth
of the matter is are really really tiny
right this is very similar to a piece of
graph paper and that might be a way of
kind of like playing you know you could
stop and go get a piece of graph paper
and try to like you know draw a big
canvas on it and try to position where
things are that's the idea of what we're
doing here the pixels are really tiny so
in many ways so so so if you have two
more imagine like this is 0 this is
pixel 0 and the width is 400 and this is
gonna this is gonna make you a little
bit crazy
the last pixel is actually pixel 399
well that's so weird think about that
though and a little bit off on a tangent
here that's not but it's kind of it
comes up again and again let's say it's
five pixels wide there are five pixels
but the first pixel is 0 0 1 2 3 4 5
fingers but I only got up to 4 so I this
is like foreshadowing this is gonna come
up but again again counting from 0 is a
thing that we do a lot in programming
which is a little bit different because
like 1 2 3 4 5 but there 5 things but
there's 0 1 2 3 4 all right so pixel 0
pixel 399 so what does this mean 150
this is the X location of the rectangle
and 50 is the Y location of the
rectangle so let's just guess maybe one
of a pixel 100 is about over here
pixel 50 is about over here so that's
this pixel here that's 150 this is the
width of the rectangle and this is the
height of the rectangle 1 even that's
about 25 pixels
maybe that's about 75 pixels
so that is how we define the rectangle
the first two arguments are the XY of
the top left the third argument is the
width and the last argument there is the
height and there we see the rectangle I
clearly didn't draw this perfectly but
if we come back here we can see that's
exactly what you see right here and I
could start changing these numbers
around and I could say 150 and I could
say 75 and I can move it over to 175 and
it's gonna be over there and I can move
it up to zero and it's going to be there
so you can see this is what you can play
around with now changing those numbers I
gotta I gotta get something off my chest
what we're doing here seems telling this
is what programming is are you crazy it
would be so much easier for me to do
this in insert you know commercial
software that makes images or drawings
here but I don't want to bus market for
free anyway that the answer is true
this is only just the way I want to
start the whole point of programming is
to write algorithms and instructions for
saying things like spin around move up
and down bounce off the edge how could I
turn this into a puzzle game pong where
that's actually the paddle that moves up
and down we're gonna get I'm gonna get
there but so this is a little bit of
like not really how programming works
but it's a good place to get started and
feel comfortable and so basically you
know what I'm Simon tis if you choose to
accept this is to make your own drawing
make your own drawing maybe make a
drawing of somebody a friend of yours or
someone in your family a little portrait
of them are self portrait or do
something abstract or draw a landscape
or something that you know so I won't be
on it so just try to make now make make
a drawing and how are you gonna all I
did was show you a rectangle I've been
like talking for like two and a half
hours I don't think I was this rectangle
on the screen so how are you gonna do
more than that I'm gonna leave you to it
a little bit but but and let me show you
how to how to get get get further so I'm
gonna go back to the p51
that's here for I'm gonna go to the p5
reference and I'm gonna click on the
rectangle function right this is where I
am remember p5.js org slash reference
I'm gonna click on the rectangle
function and we're gonna say first we're
going to see here's a nice little
example so visit with the very least I
could just take this and copy it shoot I
have to go back here and I could copy it
into my code and we could see okay
that's what the exhibit is that look the
same as what's here yeah kind of this is
a smaller canvas but so right here oh
look this there's like another argument
and it's round and there's all the
others so this is what you can explore
but the point here is that what I want
to look at is this is what's really
important this is known as documentation
this is saying this is the name of the
function and these are the arguments X Y
WH these are other arguments the reason
they're why during their square brackets
is they're optional so you you have to
use an X Y width and height you can
optionally add more arguments and here
it's going to tell you what they are X
is the x coordinate of the rectangle
that's exactly what I explained to you
over here Y is the y coordinate W is the
width H is the height and then there's
these other optional ones for rounding
the edges and I'm gonna I'm not worried
about that too much rectangle is maybe
not the best one to start with because
extra added complication but I could
easily just go over and now click on say
line and I can see oh look at this this
is what it looks like the function name
is line it takes four arguments this is
what I get what are those arguments x1
y1 x2 y2 x is the x coordinate of the
first point why like why is y1 is the y
coordinate the first point oh yeah a
line is the thing that connects two
points look at that I've connected two
points with a line so now I can come
back here and by the way oh my god Z I
could get into 3d let's not get into 3d
right now we'll save that for another
time so I'm gonna go back to the editor
and I'm gonna say something like line
zero zero 400
there we go look at that there's a line
oh and maybe I want it to be 403 under
because I wanted to go to the other side
or I wanted to actually be like 0:50
there's the line right you can see now
that line is appearing it is a line that
connects two points zero comma 50 and
400 comma 300 now okay something is
really bothering me about the code don't
be like me don't be much more forgiving
and relaxed about the world but I cannot
tolerate the fact that this line of code
right here is starting over here and
this one is starting a little bit over
here code in I'm kind of joking around
and look there's a space here but
there's like no space after this comma
one thing that you'll that is important
to note is this is going to work no
matter what if you if your code doesn't
line up or you put a lot of spaces in or
a few spaces in these types of things
white space meaning space and return and
tabs and all those those things do not
affect the way the code runs but they do
kind of make the code a little less
readable and p5 has a really nice
feature under edit tidy code which you
can also do shift tab which will kind of
fix the indentation and white space for
you so I'm gonna press shift tab right
now oh and everything is all lined up so
I encourage you to use shift tab you
know save after you've done that I
didn't mention by the way that you can
see when it's last been saved right up
here it says just now that'll change
into like a minute later and it also has
autosave which you can adjust here in
the settings autosave on and off that
sort of important little feature just to
quickly mention all right so we're
almost almost ready to finish this video
one thing one thing I got it sorry so
first of all ah why is the background
too pink
and why is the rectangle white and the
line is black well I haven't talked
about color and also that's the topic of
the next video we these are arguments
that define the dimensions and the
location of shapes but those arguments
don't seem to define the color so we
have to look at how do we define color
the clue to that is somewhere in here
right background the function must be
the background color that's coming play
around with that on your own if you want
but that's what I'll talk about in the
next video the other thing is look at
this the line looks like it's going over
this rectangle what happens if I take
this line of code I'm going to use
command X for cut and command V for
paste now look at this zoom on in the
line is behind the rectangle so layering
the layering of the shapes what appears
on top or behind has to do with the
order of these lines of code the order
that the code happens is is very
important to how a program runs that's
important right now just drawing some
shapes playing around experimenting but
this is a crucial concept that will come
up especially once I want to animate
this stuff so that's that's I'm that's
gonna come how does this square move
around how can I interact with the mouse
and the order is gonna become even more
important then okay so here's your
assignment make your own picture use
only don't listen to me and use whatever
you want but if you want to constraint
use only what's here under 2d primitives
and yeah and maybe not arc or the play
with arc and I'll have to make a video
about arc or something and mmm let me
kind of show you one more thing do I
want to show you one more thing I think
so I'm gonna be really useful so I got
to show you one more thing where is this
one okay attributes these are some other
functions that you might be interested
in exploring and I'm gonna come back to
strokeweight for sure some of these as
we talk to talk about color but at least
one rect mode and ellipse mode are kind
of important so I'm gonna just show you
something about rex mode which is that
remember how I said that this XY defines
the top left location of the rectangle
sometimes it's much more convenient to
draw where a square rectangle is by
setting the center of it and so that can
also be done let me show you what I mean
by that for example the center of the
canvas right what's the center of the
canvas if it's 400 wide and 300 high the
center is 200 by 150 right so I'm gonna
put this rectangle at 200 150 and then
I'm going to make it 150 wide and 150
high huh that's weird
oh it's not in the center oh but the top
left is in the center but what if I want
the rectangle itself to be centered well
I could figure out the math for that I
go okay so then it's like 125 maybe it's
like that's shifting it over but I can
use an attribute sorry and the attribute
rect mode is another function I can type
Center in here this is an instruction a
function to set the mode of drawing a
rectangle to Center which means now look
at it there it is in the center okay so
that was another important so maybe in
your exercise you might want to use rec
mode in ellipse mode as well we could
click on this and we could see look
there's corner there's corners there's
radius they're Center so there's a few
other ways of defining how rectangle is
but I think for the most part you're
just gonna want the default way which is
corner or Center which is Center okay
you know when I said I was gonna do
these videos I sort of imagined doing a
whole bunch of like two or three minute
ones I've completely failed at this this
has became kind of a long one about
drawing but hopefully you've got the
basic idea and I look forward to seeing
what you make you can share links to the
p5 sketches you create after watching
this video in the comments so I'll click
on them and look at them and that'll be
exciting
okay thanks for watching and see you in
the next video where I'll talk about
color alright how are we doing everybody
I'm feel like I'm actually okay on time
at 6:30 we just guess I've been live
streaming for about two hours and three
hours is my r2 limit but I think I can
do about a bunch more things all right
you know somebody I can't remember who
somebody on Twitter maybe sent me all
this like really useful feedback look
this up and I forgot to look at it right
before I started whoops and the camera
went off that's good so that wasn't more
than half an hour
I've seen the chat I don't know how far
I'm gonna get today people are asking
questions are you playing to do the
whole tutorial today I don't know what
counts there's the whole tutorial I'm
gonna do the color one today then I
think I'm done I don't know how many of
the other ones all redo line is off the
canvas there is no column 400 right okay
okay
um sorry I got distracted I I was like
trying to find somebody's tweets sort of
looking at Twitter way too much stuff
going on I'll be back
let me just see if I can find it because
there was like really good feedback in
there and I'm toy look again at the
wrong time
link to corresponding original videos in
the details okay
updated with es6 notation so that's good
because I'm not worrying about that yet
oh all right so these are these are good
feedback but it's actually not
necessarily related to what I'm doing
right now so that's okay okay so anybody
who was watching this who's like
actually a total beginner anybody out
there a total beginner watching this
following trying this yourself running
into anything okay Oh No press back who
is in the slack channels asking do you
mean my feedback from last stream no
that feedback is also really good that
was about the workflow setup stuff and I
do want to look at that
it was feedback about how I since I'm
redoing some of my older beginning
videos things that I could do to make
them better and the feedback there that
I just found on Twitter was more about
like the stuff that's later on so okay
so now what I'm going to do is let's do
the color thing
[Music]
all right by the way of that eye problem
you know this I guess I am Who I am you
are what you are but I do feel like that
was way too long okay all right so let's
let's talk about color let me cycle the
cameras
okay
all right
yeah we got well let me save this let me
do duplicate encoding train color
all right all right hi why is the
background pink that is the question
that I would like to answer in this
video
color color is the next thing you
probably may have to watch the last
video you hopefully made some beautiful
interesting or not that's beautiful but
you made your own drawing and you're
proud of it I'm proud of you for making
it now you want to add color you can
looked ahead of how to do it and started
adding color anyway but you didn't
I'm gonna show you how to do that now
before I do that I do want to mention
some other kind of logistical things
that I've kind of forgotten to mention
so one thing is whenever I create a
sketch with the p5 web editor I'm gonna
put a link to that sketch in the video's
description so you could go down to the
video description and click on it and so
if you go to the link to the sketch
you're actually going to go to a page
it's gonna look just like this it's kind
of the same code if you hit play it's
gonna have the same output now you might
have different you might not have the
the dark theme with high contrast turned
on so your layout might look a little
different but ultimately the code is
going to be the same but when you you
won't have a save option because you're
looking at a project that's made that I
made in my account that I've shared with
you so let me bear with me for a second
I'm gonna be right back so this is going
to edit
so I'm just gonna go to some other
sketch of mine so many oh my goodness so
many schedules sketches I want to find
something really simple this so I'm back
now this is a another sketch that I've
made for another course and I'm gonna
kind of get to all this stuff and how
all this kind of stuff works but even
now look at all this complicated code it
kind of might make some sense to you
right o-line you know about that ellipse
you know about that what's this X&Y this
is all stuff we're gonna get to but this
is a sketch called oscillation by nature
of code which is a different account so
if I I can edit this code right I could
say like line you know 100 and then oh
it's doing something slightly different
I'm not sure what exactly but I can't do
I can't there's no save option where's
the save option you're gonna want to go
to file duplicate and suddenly you're
gonna see that it says oscillation copy
by the coding train and I could rename
this and I could say oscillation demo
for YouTube or something and I've
renamed my sketch but this is how when
you go to a sketch that I've made you
will come to a page that says you know
color example by coding train and you
will then do file duplicate and start
writing your own the truth of the matter
is if I'm doing so simple you don't
necessarily need to duplicate my code to
keep doing it but that's an important
piece as I go through future vision I
want to mention that at the outset of
this video okay I'm gonna leave I'm not
gonna worry about that I'm gonna go away
now we're back here color
how does color work on the computer you
know I should have thought of this
before it started recording this video
but here's here's what I'm gonna say it
with three syllables are G B remember
this RGB RGB R stands for red G stands
for green B stands for blue the way that
you create a digital color is by mixing
some amount of red some amount of green
and
some amount of glue so that's that
that's where I want to start but we have
that's the concept how do I apply that
concept to function names and arguments
of those functions well actually guess
what we have done that already in here
there is a function that is talking
about color background is a function
that draws a solid color over the entire
background of the canvas and there is
somehow 220 sprinkles of red 0 sprinkles
of green right RGB those are the
arguments and 200 sprinkles of blue and
when you sprinkle that amount of red and
that amount of blue you get this pink
but let's just go with this what if we
take out all the blue you can see that's
pretty red what if I take out all of the
red now it's black what if I just put
some like really big numbers in here
like just guess like a thousand look at
that now we've got white to all the
colors all mixed together make white
that's weird right because if you like
worked with paint and you were to mix
all the color all like a whole lot of
paint together you get this like brown
muddy color get darker and darker this
is the way that the color mixing is
working here it's like mixing light so
it's more than that the analogy here is
I have a red flashlight a green
flashlight and a blue flashlight and if
I shine all those flashlights together
in the same spot they mix together it's
additive color the more we add up all
those colors the brighter and brighter
it gets but actually this is kind of
wrong the fact that I'm putting a
thousand in here so the idea here is
we're sprinkling a certain amount of red
and a certain amount of green and a
certain amount of blue by the way there
are other ways to set color I'll get to
that this is not the only way some of
you watching it like what about I heard
something about HSB color and well
there's all sorts of other ways to do it
but this is the fundamental basic way
the amount that I want that I can
sprinkle has a range none no red none
more red is zero the maximum amount of
red is 255 by the way how many numbers
are there between 0 and 255 if you keep
the 0 0 1 2 3 4 it's too
thirty-six again we're back to this
weird counting from zero thing so
there's a 256 possibilities 0 through
255 so now we can go back and we can
kind of see let's come back to this and
see all right 0 let's go back to 0 0 0
let's do 200 let's do 255 we can see
that it's blue let's do 100,000 it's the
same blue so p5 is kind of smart enough
to know when you call the background
function if you by accident put a number
in there that's bigger than 255 just
consider it 255 now you can customize
those ranges for yourself and there's
reasons why you might want to do that
again I'm going to come back to that you
could look up the function colormode for
how to do that but let's just stay with
the default a red a green and a blue so
I'm not the I'm not really very talented
visual design wise so I'm not going to
talk to you about how to pick beautiful
colors that work well together yeah I
hopefully you can find you you're gonna
have that talent yourself I bet or you
might find some other resources but this
is how it works
our GB one thing you might notice is did
you notice how when they were all 0 it
was black and when they were all 255
those white what happens if I make them
all like 100 it's like this gray color
when R equals G equals B when the red
green and blue values are all equal this
is something known as greyscale color
greyscale color is a color it's with
notes it's the saturation is a term
that's D saturated it's a color but it's
gray 0 through 255 0 being black 255 in
white for shorthand all of the color
functions and there's more of them allow
you to if you want to do a grayscale
function you can skip having all three
and you can just use one so if you put
one argument in the background function
you're assuming a grayscale color let's
make note of this because there are a
lot of different ways so let's assume
that there's some type of color function
right background being the one that we
know right now if it has one argument
this
is grayscale if it has three arguments
this is RGB and you can make a gray
color with the RGB being equal but this
is the way that you can call any color
function now what other color functions
are there let's go to the p5 reference I
don't know why I don't have that open
anymore let's look for color oh look oh
so many things so many things said
exciting ah so we want there's a lot of
stuff about creating and reading color
and I'm definitely gonna come back to
that stuff this is really what we care
about set in color so these are now you
want to write make your new sketch your
next assignment is to use any and all of
these stroke no stroke no Phil Phil
maybe color mode clear huh background so
background we know about oops I clicked
on it by accident but that's nice we're
looking at the reference but we don't
fill and Stroke are the next concepts
that I want to talk about so let's say
we have so what are the color function
so color functions could be background
that's one here's another one Phil
here's another one stroke if this is our
canvas and the shape we chose to draw is
an ellipse with the ellipse function
phil describes the interior of that
shape stroke describes the outline the
outline of that shape so let me show you
what i mean by that
so if i come by come back to the editor
and i'm gonna get rid of the line and
i'm just a with just this rectangle
leave background at 100 what I'm gonna
do is right before I draw the rectangle
I'm gonna say fill and I'm gonna say 0 0
255 look I should show you about the
console in errors I can't believe I'm
showing you about that yes right look at
this it's blue the interior of that
shape is blue
now I'm gonna say what's the outline
it's black so by the way the default
fill in p5 is white and the default
stroke outline is black but I could now
say stroke 0 255 0 and I'm already
driving myself crazy with my
inconsistent whites mates that we can
zoom in and see the outline is now a
green color so the interior the fill is
blue the outline is green what if I were
to do another shape like an ellipse and
put that at like 50 50 175 oh look it's
also green on the outside and blue on
the inside Oh what if I want that
ellipse to be a different color Oh what
if I put like down here fill 0 255 0
well it didn't work why didn't that work
I'm saying Phil green not ellipse
well order order remember order the
ellipse
let's move the ellipse over you see how
the ellipse is on top of the rectangle
it's because it's drawn after it but you
need to set the color of what you're
about to draw notice how fill and Stroke
are right before the rectangle well
that's set to blue that's set to green
the ellipse is still picking up that
fill and Stroke it's going to be this
like it's like you're saying hey
computer thing that's drawing the stuff
pick up this pen and I told it to pick
up this green pen for the interior I
meant to make it red but I told it after
it already drew the ellipse so let's
make this red because that's what I
wanted to demonstrate but if I go and I
take this and I put it before it
suddenly it's red so look at that so I
kind of want to group things I could add
some the idea here is I can I can make a
stroke that's like 255 so that's just
using grayscale color so you can see
like ah the interior here is blue the
outline is green the interiors red the
outline is white there we go
you probably have a lot of questions ask
them in the comments there's a few more
things I need to come
this video why why why why when we
looked over here in the reference is
there a no fill-in no stroke and by the
way I encourage you to go and look at
these reference pages and read them
because you'll find the things that I'm
explaining to you are explained there
and probably more clearly and it also
has examples
why is there no fill-in no stroke well
you might think to yourself oh what if I
don't want this circle to have an
outline no outline of that circle please
oh I'll just put 0 in here write 0 must
be like no outline but remember 0 is not
no outline 0 is an outline that is black
and this is why instead of stroke if I
say no stroke then suddenly there's no
outline so no stroke means no outline
and I could say also instead of Phil no
Phil means no Phil look at that so I'm
just seeing the background color come
through because I'm only drawing the
outline of that shape now I'm gonna go
back and put the fill in what's and I
realize there's a few other things I
want to talk about ok so remember I said
there were lots of ways guess what
there's another way I could have 1 2 3 4
I could have 4 the fourth argument is
and I so RGB is not the whole picture
there is also our GBA and a stands for
something called alpha ok alpha I feel
like I should I wonder if I should
divide these videos up to shorter chunks
yeah I mean it kind of want to like coz
alpha could be its own video I'm gonna
leave it long for now that's just the
way I'm doing it today think back and
redo nice ok yeah alpha a which stands
for alpha alpha is a word for
transparency meaning is the color
see-through what does daddy
mean right transparency so by the way
the same range right 0 to 255 for the a
255 is the default meaning that color is
just all aver it's another word by the
way is opacity so this idea of kind of
making the color a little bit
transparent so it starts to blend with
what's behind it now of course this is
all about just creating the illusion of
that 30 there's no blending of the
colors nobody painting your computer
screen it's just a single pixel with a
certain color but p5 knows that if you
want it to appear transparent it knows
what colors behind it can figure out how
to make that illusion happen so for
example if we come over here for this
ellipse right this ellipse that's red
what if I were to add if I were to say
comma 255 here nothing has changed I'm
adding that alpha value if I put 0 there
it's gone if it's fully transparent I
can't see it at all if I make this 100
look at that you can see how it sort of
looks light and it's blending with the
background and blending there so maybe I
want to just give it a little bit more
175 and you can start to see that there
so this is something you can play with
transparency so just to finish this
whole thing off
I can have one argument for anything
background fill and Stroke is a
grayscale color 0 to 255 3 arguments is
an RGB color with 100% opacity it is
fully opaque it is not at all
transparent if I add the fourth argument
I get an RGB color with some amount of
transparency and by the way if I just do
just a little bit of an aside here if I
just use two numbers then I'm having
greyscale with some alpha so it's a
grayscale value with some alpha so
that's important to know as well so
those are all of the options let me see
what have I missed here okay clear
background let's not worry about that's
much more important when we clear is
important when we come to Anna
so I'll come and look at what clear does
once I'm doing some animation stuff but
color mode is kind of interesting I
should probably do a whole separate
video about that I encourage you to
click on it and look through some of the
documentation for what you can do with
color mode but basically color mode
allows you to change the way that you're
describing color with an alternate
format well I don't want to set the RGB
in value maybe I want to set something
called a hue or a saturation or a
brightness I'll make her trying to make
a video about what HSB color is maybe I
have one already and which gets all
linked to it and then it color mode also
allows you to say like what if I want
the range to be between 0 and 100 it's
easier for my mind to think about that
but I don't think you necessarily need
to use color mode right now but I'm
letting you do
ok so now what is your assignment if
you're watching this and you're gonna
make something take your drawing and
give it clerk fill it with color set the
background set the set to fill and
Stroke of different shapes I want to
give you just one more we give you one
more little treat here if I add a
function called stroke weight this is a
function that's not setting the color
but you know I'm trying to show you that
the outline of this let me make the
outline of this is like red and I've
kind of like I can't even see it
that's weird we make it blue
oh you know why because I put this I'm
so much more to show you that the
outline is blue but I have to like zoom
all the way in to show it to you what if
I add this thing called stroke wait I
just put the number 1 in there well what
that number 1 means is the outline of
the shape is 1 pixel wide it's a thin 1
pixel wide outline I could make that 8
and suddenly it's much thicker so and
you know I can zoom in just to show this
to you
I could be sort of insane and make this
like 24 or 105 you know it's only like
the stroke is like wider than the actual
shape itself but the point is just to be
able to if you want to adjust the width
of
outline that's something you can do with
these strokeweight function
thanks I so what I want to do is show
you something about code comments and
errors this is really important I've
kind of been skipping over that I'm
gonna do that I'm gonna make a video
really about that separately in with
with the people I'm just web editor and
that will be coming next okay so it so
that's something it's gonna you probably
watch that before you do your project or
afterwards whatever but that's gonna
help you a little bit just kind of
keeping things organized and managed
okay so I'll see you soon yeah
was there a sound problem there so I
oh yeah
no sound bromo how long is the stream
going to last I am a baby at another
hour at the most
I'm not sure oh building is
probably completely closed the only
person left all right
it was very subtle didn't notice it okay
so great so I'm gonna assume that's fine
oh all right
so I need to do something about comments
and okay all right everybody
all right all right I have to do one I
really need to do this comments and
errors hi so I have so far made three
videos in this series about learning to
code from the very beginning with P 5
and the P 5 web editor and I kind of
have been avoiding showing you what
happens when you make a mistake which I
really should not have done that's the
thing I really should be showing you
right for the beginning but I didn't and
I also haven't mentioned to you
something called code comments and both
of these things are fundamental to how
you might create a p5 sketch one that
you might work on or a period time and
return to later so let's first look at
the console and errors so there's this
whole extra section down here that I've
ignored I've been talking about this is
where you write your code the play
button execute the code and this is
where you see the result of your code
well what do you see down here what you
see down here is messages that are
things that are related to what's
happening in your code that might be a
mistake or something that you add you
want to specifically put a message there
so I'm going to show you there's a
function called print I'm gonna say
print and I'm gonna say hello and I'm
putting this in setup because I want
this just to happen at the beginning and
this again I will come back to later so
this being in the code suddenly in the
console we have this down here the idea
the console is not something so if
you're making a project that you imagine
users using like a game you wouldn't put
the score of the game here you would
want to draw the score somewhere on the
canvas or there's actually a way you
could put the score below the canvas
something for the user to ultimately see
but if you just want to be able to see
what the score of the game is and kind
of like for yourself while you're
developing the console is for you the
person who's writing the code or your
friend who you're sharing the code with
or your teacher or whoever I mean it's
something that anybody using the p5 web
editor can see but when you finished it
and you
on your own website which is maybe
something I'll show you how to do that
console wouldn't necessarily appear so
in addition to be able to put your own
messages anything that you do wrong is
going to be down there now
one thing that's really important notice
how no stroke has a capital S look no
stroke also doesn't even have any
arguments in here like it's just open
and closed parentheses because there's
no way to modify it that's something I
didn't mention notice how there's commas
here if I could get anything wrong like
if I delete this comma look at this
now I'm also getting error messages in
here now this is it won't go I don't
even hear that sound did that did it
just buzz buzz look error message so
here's the thing whenever you see the
red error message
first of all just take a deep breath
sometimes the error message is lovely
it's like tells you exactly what's wrong
and you can and it tells you how to fix
it and this might be a case on caught
six syntax error missing parentheses
after your argument list sketch line
eleven oh look line eleven missing
frenzies sorry you know what it really
should say missing comma so this is the
thing the thing that's generating the
error the web editor of the JavaScript
language the browser all of these pieces
are figuring out what to put down there
it doesn't always guess correctly so we
the next thing is I can see like
unexpected a parenthesis we could kind
of like see it there but we're gonna
have to guess what's wrong it's actually
a comma sometimes you'll get an error
the message that totally makes sense I'm
gonna change this from stroke weight
with a capital W to stroke weight with a
lowercase W and this I'm not getting
such a great error message but this is a
really important one uncaught reference
error stroke weight is not defined
well but why is it not defined I watched
a video from Daniel Schiffman and he
said that stroke weight is a function
from the p5.js library it's not part of
the JavaScript language but it's a
function of the p5.js library and I
could call it in my code
if I'm using the PAI just way better we
just drew but because programming is in
JavaScript is case-sensitive it doesn't
know what it is without the capital W
and notice how the editor is syntax
highlighting it for you
so strokeweight suddenly it turns blue
this is by the way no different than me
saying like oh I want to write a
function called unicorn magic o uncaught
reference error unicorn magic is not
defined because it's not a functions not
part of the p5.js library or any other
library that i might be choosing to use
as part of my project there are other
functions that you can call by the way
that are just part of JavaScript
inherently that you get when you use
javascript and p5 adds functions to that
so that's an error you're gonna see a
lot it's it's because you've misspelled
it maybe you got a capital wrong or it's
just something you thought was in p5 or
some other library using but it's not
there at all so here's an interesting
thing I'm going to just take out all the
semicolons or like some of them no error
message I'm having like heart
palpitations right now because the
semicolons give me comfort but the truth
of the matter is the semicolons are
somewhat optional in JavaScript they
indicate where the end of the line is
the end of the line of code background
100 is where is it it's there but
JavaScript can usually figure out where
the end of line of code is even if you
don't include this the semicolon the
weird things I'm going to show you
something kind of interesting if I were
to put let's say rect mode up here on
the same line the code runs just fine
the same way JavaScript actually thinks
of that as two lines of code because
semicolon me at the end of the line
then the next line but if I delete the
semicolon now all this lost it can't
figure it out so this is why it's
generally good practice to use the
semicolons it's like a safety net like
I'm really explicitly saying where the
end of the line of code is but you might
you like really just you should have fun
and just like not using colons but I
can't help it and also I have to do the
tidy code thing now there okay so that's
errors on the console there's another
thing I want to talk about in this video
maybe I should make it another one I'm
so confused about whether to make short
ones or long ones but I'm going to talk
about it right now
no I'm gonna do it in the next one I
wanna shock I think I should make these
shorter I think it's better to make
these shorter somebody's gonna tell me
that wasn't that long
people just talking about the buzz
talking about the buzz shy should I do
another image I should I keep going or
make it the next video like if you were
a student you're in high school you're
watching these on YouTube would you
rather have the longer ones are a bunch
of shorter ones long no I mean I find as
bits 20 minutes it's fine short and
curly this is a very scientific way of
pulling we just see you write something
into the chat they see Kelly is typing
and I feel like Kelly is going to say in
flack something really meaningful and
I'm waiting all right I'm gonna I'm
gonna
yeah about 50 miles shorter long yeah
that's true CJ right shorter is better
for searching finding what you need I
think the comments is its own thing so
I'm going to I'm gonna do that or I know
I said at the beginning of this video
that I was gonna talk about the code
comments but I'm not going to that's
gonna be in the next video and do that
separately so you can look at them
individually and this videos title
should probably just say like console
and error messages so you won't will
turn up in your search alright so if you
want to the next thing that I think is
useful to you and like working on your
assignment to your project for this
first set of videos is understanding
what code comments are and how to use
them I'll do that in the next video okay
here I am so in this video I'm gonna
talk to you about code comments and how
you can write comments in your code for
just you are your friend and the human
beings who are look at your code to read
or actually to like quickly disable and
re-enable certain lines of code all
sorts of exciting things you can do with
code comments I'll show you how to do
that in the p5 web editor but this is a
universal concept any programming
language or environment that you choose
to work in we will have a feature of a
way of writing stuff in your code that
is ignored by the computer that's
executing the instructions and is just
there for you to review if you like took
a break for a for a year and you come
back or to remind yourself with
something so let's look at that so
anything that I write into the p5 web
editor with a slash slash immediately
that line becomes what's known as a
comment so let's like like what if I
were to write something okay so this is
the green rectangle in the center so the
idea of a code comment and you can see
that it is highlighted it is gray it
does not have the syntax highlighting of
the executed this means that when the
computer is executing the instructions
and I never explicitly said this but
it's important line by line one after
another it ignores this that is just
there for me the human being to read so
this can be useful if you were doing a
self-portrait you might
like this is where I'm worked on my nose
and this is where this is the code for
drawing my chin and this is the code for
drawing my ears you don't even have to
do it as a sentence oh I could just say
like you know red red circle you might
also write a note to yourself like later
I want to make this circle animate and
actually a convention of science right
to do I mean that but you know that
doesn't mean anything but so there's all
sorts of things you could write in the
code comments so I encourage you
easier said than done and I don't
necessarily follow my own advice but I
encourage you to get in the habit of
writing code comments your future self
will thank you it's certainly something
that as a teacher I try to do as much as
possible because I want to explain the
code in line so people can looking at it
can follow what certain pieces are doing
and typically I put the comment that's
describing what's happening after it
okay so that's how code comments work
but there's another sort of neat trick
to code comments that I'm not mentioning
which is that if a code if a comment is
the thing that's ignored why not use
slash slash in front of something like a
function call so I could for example do
slash slash and suddenly the line of
code with the rectangle function is
grayed out and the rectangle is no
longer in my canvas so this is a thing
that I can do because before do you
notice how when I wanted to demonstrate
stroke wait so I have to pause for a
second because I getting getting
notifications on my watch that's really
distracting me I'm gonna take it off I
will look at these I think it's an
important message but it's it's way too
distracting my watch is buzzing me okay
sorry about that this is gonna be
awkward edit but I'm gonna coming I'm
gonna sort of repeat what I was saying
and it'll hopefully get spliced together
in a way that makes sense before when I
was showing you what if I wanted to use
no stroke instead of stroke what I
actually did was I deleted stroke and
then wrote no stroke in there and I was
able to sort of like undo my way back
but often what I want to do and I'm
gonna do that right now often what I
want to do is say like I let me quickly
disable the stroke and then show you no
stroke so here I'm kind of saving what I
had before because I may want to we
enable it and then and adding in
something new and then now if I want to
put the stroke back I can delete that
and I can delete the slash slash and now
the stroke is back so and I can even do
things like I can like highlight this
whole section and I can say command
slash and the whole thing is like
commented out I can say command slash
again and the whole thing comes back so
this is a really just useful technique
while you're working to kind of speed up
your workflow you can kind of leave some
stuff in your code that you don't want
to see but you might want to pull back
come back later and you'll sort of
figure out how to manage this best but
the primary reason for comments is to
add things in your code about what
you're doing and this could be for
teaching or it can be notes to your
future self and I might say that things
that you might want to consider doing is
you know code example by you know you
know Daniel Shipman you can do things
like this the coding train maybe you put
like a URL in here like this is the kind
of thing maybe you have some information
like and it's what your license is like
please share and use you know there's
technically you can add a software
license that's part of the comments and
I don't want to get too far down that oh
let just explain to people what they can
use it for but this is the kind of thing
that you can also use code comics for to
put something at the top that's kind of
announcing what it is credits and
usually I would do things like this code
is based on everything you know I
learned from you know Lauren McCarthy
and Cassie Tara Cajun creator of the
editor you know I would really often
like I'm always crediting where I got my
name because so much about coding is
finding examples and changing something
in the example learning to code is doing
that and so I always like to try to give
credit you know sometimes a legal
requiring because I give credit with p5
everything is open-source and you and
licensed in such a way to all the
examples that you do are not required
under any legal anything to give credit
but it's nice to give credit when you
can I always try to and if I forget - if
you see something I made I forgot to
give credit please let me know so I can
have it okay okay there's some more
stuff there's other fancier ways you can
add comments but I'm gonna I'm not going
to go into that right now I'm just
noticing in the chat so well you know
all in good time I can't get to
everything in every video so that's code
comments you are ready if you were if
you were taking this somehow as a course
this would kind of be the end of the
first module you've learned about a
little bit about what p5 is what
JavaScript is how to sign up for an
editor account how to draw shapes how to
set colors and how to read error
messages and add comments so make a
sketch save it share it share it with me
in the comments share it on Twitter
let's talk about bet ways that we can
share these things with each other and I
look forward to seeing what you make and
if you continue watching this series the
next stuff that is to come is going to
show you about how to animate the stuff
and interact with it with the mouse okay
I will see you soon
and hope you enjoyed these videos
everyone's doing they have to do the
star slash slash star do I really have
to it seems like a whole can of worms to
open Oh been dug this how do we share in
the comments we can't put in a link so
you can put in a link if you put in a
link it'll stop the youtube comment
system will often flag it and it'll show
up when I look at the channel moderation
as like a possible spam comment I I will
approve them if they're a link to the
web editor so it just won't show up
immediately I have to look at my
messages now because it looked like
there was something important so
apologies
oh okay
sorry I just I'm a little bit later
getting home and I thought coding train
is brought to you by a very kind family
who doesn't mind when I keep being later
than I say that's what all that buzzing
was so I think I've got to start
wrapping up but but but I am going to
I'm gonna do that snake game coding
challenge alright
oh I didn't duplicate this but that's
fine I will work that out
hold on I'm gonna do something a little
bit weird here I mean I'm not too
worried about keeping track of this code
actually you know what I don't think
I'll clean this stuff up later I'm not
too worried about the alright hold on no
no no let me let me let me do what I
meant to do so I'm gonna back I don't
know how long the undo is but I'm gonna
back up to the end of the color video
which i think is about this
so that's coding train color then I'm
gonna do file duplicate I don't think I
need this but coding train comments
console and I'm gonna say print hello
here and I'm gonna hit save and
hopefully that oh oh and then I'm gonna
get this oh whoops
let me get this
just gonna have to finish this up
and I'm gonna say print hello hope so
this should be fine so later when I'm
putting links
into the video description I'm going to
say file open yeah so I have coding
train drawing coding train color
oscillation demo encoding trade comments
console so these will be the things that
I'll link in the video description yes
thank you Kelly I should do that now I
can't do that though live broadcasting
all right I'm gonna do my best
now why that closed everything alright
I'm a little bit concerned but let's
so I am going to
I I think for this coding challenge I am
NOT going to flip the editor because I'm
going to need to use this over here and
so I'm just gonna try to see how it
works like this and that's plenty of
space for me so let's try this so I'm
gonna say snake coding challenge so I'm
gonna try to make the snake game again
today is the day today is the day of
just redoing everything I've done before
so unfortunately I don't have time to do
a video about using Google classroom and
the p5.js web editor I've got to add
that to my list and hopefully I can be
done with this coding challenge in 20
minutes
Oh Austin says fix the sidebar in my new
bookmarklet I'm a little concerned I'm
just gonna try it like this is I'm a
little bit concerned about people like
seeing it all different but and also I
just I'm pressed for time so thank you
for that I'm gonna play around with that
flippin thing in the future future video
okay you know I actually don't have to
do the thing I could do that other thing
I need to do this weekend I could do it
not in this studio so so let's see okay
I am so not prepared for this and I'm
totally exhausted I'm gonna be over here
drinking my non branded water product
we need to erase the whiteboard so you
might need to use it
okay here we go here's my attempt to
make another video with a million views
most of my videos look like five to ten
thousand views that snake there you go
look it up that snake game video it's
always at the top of my analytics and
just forever it don't know why but okay
all right let me cycle the cameras
hungry I haven't had dinner this is uh
this is a recipe for disaster but I'm
doing it anyway happy back-to-school in
his August 31st school for me starts
next week on the Kodi train I'm going to
do have to do it classic again I'm going
to attempt to do a coding challenge can
pick the snake game and yes I have done
this before but I'm I'm going to do this
in order to celebrate something that was
announced today the p5.js web editor so
the p5 web Jazz official web editor is
out and I'm gonna try to go nice thing
about this is when I code this at the
end of it stop the sound effects at the
end of this you'll be able to just go
directly to this URL which I'll include
in the video description and hit
duplicate you have to make an account
for the web editor hit duplicate and and
then make your own version of it from my
code and sure that would be so I will
include all about how to do that in the
video description and I'm gonna give
myself about Oh watch isn't on there's
no timer but I actually have to go home
very soon so I'm about 20 minutes which
of course is gonna take longer than that
but let's see how it goes alright so
however long this video is is however
long it takes
hopefully there'll be no edits every
once a while like you know it just has
to be an edit cuz the whole system
crashes
I better get coding snake game have you
ever played the snake game the idea of
the snake game is there is a canvas you
are a dot or like a little square on
that canvas another doctor or another
little square appears which is a piece
of food
you want to move you can only move to
the right up or down along grab that
piece of food once you grab that piece
of food a new piece of food appears
somewhere else and you get a little more
on your tail you get another piece of
your body and you get the next piece of
food it gets longer it gets longer and
anytime you hit the edge if you run into
one of the edges you die the game's over
or if you hit another part of your body
and be honest about tartar as your body
gets longer and longer that's the snake
game that's what I'm gonna code so in
order to do this I'm gonna use object
oriented programming in my previous
version of this coding challenge
I used Lexus constructor function thing
and now we have es6 classes I want like
a happy sound so one thing I'm gonna do
is I'm gonna show you by the way if you
want to know all about the p5.js web
editor check a link to a medium article
that is in the video's description and a
whole bunch of videos from the
processing foundation there's a nice
video with caste ter occasion created
the editor describing all of its
features but one feature is that I can
go over here and find this little thing
this little tick less than greater than
two times whatever it is and I could say
add file and I'm gonna add a file I'm
gonna call it snake jf and now I have a
file called snake doc is where I can
create a snake class now if you've never
done object-oriented programming before
the idea is that this is a template for
this snake object I'm gonna make in my
code and has a constructor function I
will refer you to my tutorials about
program objects wearing with es6 classes
now but in order for I need to actually
go into index dot HTML so that the page
when I run the code is actually using
both sketch dot Jas and snake touch yes
so that's there so now I have sketched a
s which is just a oh and I need to see
this a 400 by 400 canvas and a snake Jas
which has nothing in it but what I'm
gonna do is I'm gonna say let snake and
in setup setup being where the code
starts in a p5.js sketch snake equals
new snake so I've made a new snake and
what do I want to do I want to update
the snakes location every frame
and I want to display it so the idea
here is I want to say snake dot update
and I want to say snake show I'll use
show as a meaning show yourself display
what is this snake dot update is not a
function
oh come on I have to write the code for
it yes I have to write the code for it
so if I'm going to write a function
called update that means I have to put a
function in the snake class called
update and then I have to put a function
called show no I'm done coding challenge
complete snake game not also this is
like the skeleton of the code but I
actually need to put stuff in here and
I'm gonna hit shift tab to tidy up the
indentation okay hmm what do I need so
I'm gonna do something a little weird I
know that what I need is an array
because even though the snakes position
you could think of as like a single X Y
location
I boxed this the last time I did this
really what I want is an array because I
want to keep track of a list of all of
its locations and maybe the first
element and probably more easily the
last element of the array when there's
only one thing is it's the sort of head
of the snake the front part of the snake
so I'm gonna do that I'm gonna say this
time to call it a body is an array and
then I'm gonna say this dot body index
zero but one thing is is create vector
now create vector is a function in p5
that creates a vector object and that
vector object has an x and a y so I'm
going to create it at 0 0 and then in
update I'm going to say this dot body
index 0 dot X plus equal this dot X
speed I'll call it X speed or X
direction or something and this dot body
dot wha is using that zero dot y equals
this dot Y direction oh this is so ugly
but it's the way I'm doing it right
instead of having a this is a little
weird like really if it's just like one
thing that's moving around I just have
an x and a y instead I have a body index
0 X and a body index 0 Y because later
I'm gonna get to add more pieces to the
body so if I run this what's this dot X
direction
style y direction it doesn't even exist
so those are going to be variables that
tell me is the snake moving to the right
or left is the snake moving up and down
so those values this dot X dir is I'll
start them at zero so there's zero and
so and then show I'm going to do
something I'm going to say what do I
want to do showing the snake is drawing
a rectangle I'll do something a little
bit weird so I'm gonna draw again
eventually it's gonna become a loop
because I'm gonna be drawing all the
pieces of it but let's just start with
putting in the x and a y and I'm just
going to say I'm gonna make it ten this
is gonna be a little weird actually
ten by ten the rectangle and I'm sorry
that you can't see all the code
let me I'm not I'm not used to doing
challenges with the web editor so let's
see if I can make this a little bit
wider there we go
so okay rectangle and then I'm gonna say
fill 0 just to make it black and look at
that already I see there I better save
this oh saved a minute ago it's
auto-saving that's wonderful there it is
right there let me make x-direction one
uh whoops two equals by accident look
it's moving now right because the idea
update the bodies heads Y X location is
increasing right if I made this 100 it's
moving really really fast 10 it's moving
pretty fast if I change this back to
zero it make this one is moving down I
could do all sorts of weird things make
that five but that's now no longer in
the snake game the snake game by
definition I can only move horizontally
or vertically so I'm going to start
these at zero and then I'm also just
right now I'm going to change this to
one good I'm gonna explain me to do this
in a funny way that I think might work
well it's a tiny little dot a 1 pixel
dot that rectangle I am going to now in
sketch I'm going to have the keyboard be
the controls so I'm gonna say key
pressed oh I forgot how to do this
already so like if key equals
up what is it in p5 basically keep rest
is an event that whenever I press a key
this function happens that I can check
what she did I press but I totally can
never remember how to write this
function so let's try to look at the p5
reference somebody maybe in the chat
will tell me let's look at key pressed
if value equals zero know if key code
equals left arrow this is good this is
what I want it's a key code so key is
for like the which character I press but
if I'm using the arrows I need to use
left arrow right so let me actually just
grab this I'm gonna say if key code and
I know I could use a switch statement
I'm just not going to right now okay
please don't don't at me that's what I'm
supposed to say somebody taught me that
who's younger than me cue code equals
left arrow key code equals right arrow
doing a terrible job of paste paste down
arrow up arrow no no Auto format there
we go
okay so now what I want to do is if it's
the less left arrow then snake dot set
Direction this is the way I did it
before I remember left is negative one
to the rule negative one along the X and
zero along the Y so I'm going to write a
function that's like saying set the
direction so this is for left this is
for right
this is for down this is for up negative
one okay
tidy code so I think this is the right
idea depending on which key I press move
the snake in that direction
so now I can say I can write this
function set direction and I'm getting
an X and a Y and I'm just saying this
dot X Direction equals x and this dot Y
Direction equals y so whatever comes in
the function sets those things people I
can see the chat over there please do a
switch David no duplicate my code and
change it and make us would make it
better use the switch statement okay so
now I'm gonna do this let's zoom in here
let's see if this works
oh come on no I have to click over yes
down look at this so now it's working
right so I'm pressing all the keys and
I'm moving it around perfect now I need
to deal with something I don't want to
have to like zoom him it's like so tiny
so ultimately there's an issue here like
I want to think about the snake in units
of one here's my snake it moves one
pixel over it moves one pixel over it
moves one pixel over but I have a canvas
that's 400 by 400 and I probably want to
draw it as like a 10 by 10 thing so I
want to have a variable I'm gonna have a
variable I'm gonna call it our easy
short for like resolution can you see
that and I'm just to make that 10 so
that variable and actually to be honest
I could just use you know what I could
do I could just use the scale function
I'm just gonna use the skill so I was
gonna use math and I was gonna always
multiply its X location by that
resolution and multiply it and use the
resolution for the width but the truth
of the matter is p5 has a scale function
so I'm gonna say let resolution equal 10
and then in the draw function I could
just say scale by resolution and what
that's going to do and notice like see
look look at that I can change this to
50 I can make this 10 I can make this
100 it's just scaling it up and if I
move this to there and so now if I make
this 10 and I move to the right it's
actually moving every 10 pixels also
because when it changes by one it moves
10 and I could what I might want to do
is you know you or might want the
animation to go really fast but I'm
gonna change the frame rate to 5 just to
slow it down so we can see what's what's
it's a little tricky here when using the
p5 web editor is I need to click over
here to give this preview pane focus so
that it gets the key commands so now you
can see it moving over and this you know
this can the frame rate typically I
don't want to like slow the frame rate
nation down but this is a way I can
control the speed of the sketch so this
is what I'm gonna do okay so now I need
okay so I need to have a food a piece of
food so I'm gonna make the piece of food
a just a vector that's some R and I
could make a food class but I think
that's overkill I'm gonna make it okay
so here's now a tricky thing I want the
food okay let's say my by sketch is 400
by 400 and really so really my world is
40 by 40 but I scaled it up by 10 so I
need a variable to keep track of the
actual dimensions of the world so I'm
gonna say I'm gonna use W now I don't
know I'm starting at Pala columns or I'm
gonna say W equal I'm gonna actually
just put let W and let H here so I'm
gonna say W equals floor with divided by
resolution what is this width divided by
resolution is 400 divided by 10 which is
40 and the reason I'm using floor
there's just gets my math is off I want
W to be an integer a whole number that
will take off the decimal place H equals
floor height and of course it's a square
so I don't really need to have two
separate values but your window might
not be a square there okay so so now
that I have that why was I doing this
again oh the food because now I want to
get an exposition and guess what I run
before I'm gonna write a function food
location food location and what happens
in this function is I pick an X which is
floor random W and a Y floor so I need a
spot random H right I need to find a
random spot for the food and set that
there and then in draw I'm gonna make
the food
a red I'm standing a little bit in front
of code but hopefully this is okay and
I'm gonna say rectangle
food X food y1 1 so you know I guess I
could make it a point or something with
this it's just everything is a view of
unit 1 scaled up okay can i oh and I
need to actually call at the beginning
food location and why is it oh it's not
RIT so you know what I need to do here
is I need to say no stroke that stroke
is getting scales in a strange way so
this is actually 10 by 10 pixels it was
much bigger because with a stroke there
that's getting scaled as well so now we
can see
let's if I click over here we can see
and eventually come on get that piece of
food ok so now but so this is working
they gave us working this is good this
is much better than I did before hopes
to do this a second time even though
that was like a couple years ago let's
make this 20 just because I want to be
able to see it better
ok so that's good and we just make sure
things are lining up excellent so now I
need a test I'm gonna say snake dot eat
food so that means I need a function and
let's put that though I don't know the
order matter so much I'm gonna put this
here and I'm gonna say eat food I'm just
gonna make an argument called position
so basically the food is getting passed
in here and I'm eating the food if now
this is really probably a bad idea
because you never know in JavaScript if
you've really got the number like 3 or
if by accident you have the number three
point zero zero zero zero zero zero one
but I'm going to test in theory if the
XY of the head of the snake is the same
as the XY of the piece of food if
they're equal I should be eating the
food so let's let's just see if that
works so I'm gonna say if so first let X
equal let's just
put this in a separate variable let y
equal this stuff going to get that head
of a snake location if x equals positive
I then return true and also say console
console I or say for it because I
console a lot of print food eaten okay
so let's see if this works it's a little
bit dangerous a little bit treacherous
and I'm gonna say return false otherwise
and then in the sketch I'm gonna say if
if I'm gonna have this return something
if you eat the food then you just need a
new food location right so immediately
we should pick a new random location all
right let's try this I missed it I can't
get it oh so that's working all right so
I think all my flooring of the numbers
you know maybe I need to have some
better if this this seems to be fine so
I'm gonna live with that I'm happy with
it okay so now we are so close what do I
need to do this is going very remarkably
well that's a sure sign for something to
go wrong I'm gonna say this dot grow if
I eat the food I want the snake to grow
if I'm calling a function that I intend
to be part of the snake object within
the snake class I need to reference it
by saying this grow and so that means I
need to write another function grow and
what that means is I want to expand the
array okay okay well this is the tricky
part this is where everything went wrong
before I'm not even looking at the chat
there's a chat going on I'm sure I would
screaming at me I'm gonna add another
variable this dot le n for length length
of the snake and it starts as one so is
that a minimum I know
when I want to grow I want length to go
up by one so I want the length to
increase and they need to add something
onto the array add something to the end
add something to the beginning this is
unclear to me so first of all let's try
so so let's just try saying this dot
body dot okay so first let me get the
last I'm thinking about this you know
what I think this is gonna be I think
actually this is simpler than I think
let's just try saying this dot body dot
push create vector so I'm just gonna
push a blank vector into it like I know
I need something else in the array so
let me just and push you something to
add to the end of the array maybe I want
to put it at the beginning I'll figure
that out in a second
but I'm just gonna push to the end of
the array and actually I'm not realizing
the flaw in that but that's okay yeah so
actually so pushing I could put it in
the beginning and that would actually
work
I think but okay I think we're gonna
figure this that I'm like trying to
think it through
so that's easier than thinking through
just coded so what I want to do now this
whole thing so first of all shut what
this means is anytime I want to draw the
snake I don't actually want to draw I
don't want to draw just a single
rectangle I want to draw all the
rectangles so I'm gonna say and I could
use like a for of loop or something but
I'm just gonna say I'm just gonna use a
regular old fashioned this dot for loop
this dot body dot length I plus plus and
then this loop will go around here oh oh
no oh no oh no I've killed the editor
I've killed the editor let's pray
autosave works by the way the editor has
infinite loop protection in it so I was
like not ring about making this happen
but I have now called
infinite loop and I've totally frozen
the page I'm not sure why I didn't get
the infinite loop protection but what
I'm gonna have to do and we're gonna
pray let's see let's let's just pray I'm
gonna get this I'm gonna close the
window you won't let me close and I'm
gonna just go back to it let's see when
it lasts Otto so I'm gonna quickly quick
off this Auto refresh and where did I
last leave off ah that's not so bad so
the last time it auto saved was here
and I'm going to I'm going to retype my
loop more carefully without having auto
refresh on but I is less than this body
dot length I have to move this now back
all the way over here I plus plus and
I'm going to auto format that and I'm
going to say this dot body dot I this so
now I'm drawing every element in there
okay like so now I'm gonna hit save
project is saved so I have that oh I
lost what I wrote and grow live and
learn to move this over here alright
because I had this open that's why so
this actually comes back here what time
is it 7:45 okay we're good we're good
we're good
I got stuff I got stuff so grow what did
I do in that I said this dot body dot
push create vector and I said this dot
length I don't know if I need this
length variable to be honest because by
definition the length of the array is
the length variable it was so sad and
then did I add that it and then I added
that too let's see I lost some code
you're not working you're not really
coding if you don't lose some code every
once awhile to an infinite loop okay
so here we're good now this is what's
gonna happen here is really weird but
I'm gonna get the food oops I missed the
food so interestingly why am I not
seeing I would imagine that I would see
another so one thing I would guess that
I'm gonna see another appendage but it
would just be at 0-0 put oh look at me
look at this push
create vector and create vector at zero
zero let me just do that so that if we
rip so what we're gonna see here is this
there we go so that second part of the
snake is there but it's up there so what
I need to do now is when I'm updating
the snakes location this is I'm gonna
comment this out for a second the first
thing that I want to do and there's
shift okay there's an array function
called shift I forgot what I last time I
did this I didn't use that I just
manually moved all the spots in the
array let's look at array JavaScript
shift I don't actually know what this
function does but everyone was telling
me I should do it shift one two no look
at that that's so perfect so this is
what I want I want to shift all the
elements down one and I guess I'm losing
one so let me just see about let me see
if I understand this so just in the
console and we practice this let array
equal five six nine 105 so that's what's
in the array and if I say array shift
whoops no that's what it returns did it
shift it but it shifted oh so it's just
giving me the thing that it got rid of
and then it's making it one less so this
is perfect because it's exactly what I
need oh I love it
so actually all I need to do every time
an update is say this dot body dot shift
and then that's moving everything over
and then the last spot so one thing I
need to do is let me save where it
currently is so let me pop it does pop
pop doesn't remove it from the array
right so if I say array dot pop that
gave me the element five but the array
still oh no that got rid of it how do I
get something off the end without
removing it
so unshipped adds from the beginning
that's interesting how do I get the last
element without removing it yeah that's
what I'm
this is what I'm planning to do grow
yeah so update is shift and then I want
to want to get well I'm just gonna do it
the manual way this dot I'm just going
to say let head equal this dot body dot
and this dot body dot length minus one
that's the last element dot copy so this
is me taking the last element and making
a copy of it and then what I want to do
is say head X plus equal this X
Direction head dot y plus equal this dot
Y direction and then I just want to put
that back on so I want to like save
where it was and then move that and then
the body is all there yes so I'm being
told this is actually how to do it so
that's the last element copying it let's
so I just want to see something here for
a second let's see if this works so why
do I need something else let me just see
what I've got here so one thing that I
want to do what's wrong here this dot
body index this 10 dot cannot read
property copy of undefined so do I not
have oh because I'm doing it after shift
and if I'm shifting something with zero
yeah if I'm shifting signature so shift
has to happen after right cuz if it only
has one thing in it I shift it it's gone
okay so this is working now I look at
that so this worked and it made it
longer but because I it created it back
at the start so I need to keep that
location when I grow it so the same
thing I need to do here in grow what I
want to do is not add what I want to do
is do this exact same thing and then
push right I want to take the last one
and add it to the end so I need to just
duplicate where it was before to the end
I think this should do the trick
yep is it am I like going one step
behind by accident I'm not sure well
that's pretty good you know why the food
oh oh you know what it's not to getting
it until I get to the back why because
eat is always checking this one I need
to check the last element same thing
this is very awkward the way I'm doing
it and I'm sure somebody will make their
own version that's less awkward but I
need to check the location of the head
against the food here we go let's try
this one more time
snake game go there we go and up yeah
this is better okay great this is
working alright now guess what one more
thing I need to know when to restart the
game when do I die
so I'm going to do I'm gonna do a
function called like check you know
check for death or like end game and
what I need to do is I need to check if
the head intersects with any of the
other positions so the head as we know
is well it's this this is a little bit
weird what I'm doing that's the last
spot and now I can say for let I equals
0 I is less than this stop body dot
length minus 1 I don't want to check the
head against itself I plus plus I'm
gonna say let part equal this body index
I and then I'm gonna say if we care we
went off for the purpose of dough
editing we can we if part index if part
x equals x and part dot part dot y
equals y then return true the game is
over or if X is greater than what was it
W minus 1 right
it's gone off the screen or X is less
than 0 or Y is greater than H minus 1 or
Y is less than 0 then also return true I
should probably check that first because
if you're off the edge I don't need to
check I don't need to check any of the
body parts oh but I need to first get
the x and y values so I'm doing
something a little weird where sometimes
I'm using like the vector and then I'm
saying paused at X and positives I'm
pulling out the X&Y from the vector and
then at the end I'm going to say return
false so let's see if now I can get
endgame to work so in here I'm gonna say
also now at the end if snake dot endgame
I'm just gonna say print print end game
and I'm gonna say background to 5500 and
no loop so I'm just gonna completely
shut down the p5 sketch if the game ends
so this is not just thing what you want
to do first interaction design but I'm
just testing the feature so the first
thing I might do is just try to go off
the edge so I'm gonna go off the bottom
yeah okay so that works so going off the
edge at least the bottom like I should
probably test the other edges whoa what
just happened there and I took my Auto
refresh off I'm gonna put that on so if
I go off the top ooh that didn't work I
probably had a mistake somewhere in
there yeah oh why this should be Y OOP
that was a mistake ok so yeah all right
hopefully that fixed that I'm gonna and
now what I need to do so one thing I
need to do just to be able to test
better is I'm gonna add something I'm
gonna add the mousepressed function and
I'm gonna say this snake dot grow so
anytime I clicked in the house I'm gonna
grow the snake so I could do it so
test this feature oh whoops
shoot oh and you know what I should set
the snake in the middle so the snakes
location should probably be initially
the W divided by 2 and H divided by 2
and I've got to keep everything in
integer so I've got to put floor in here
just in case all right so now let me
well why did that oh because when I grow
the head becomes the same location as
the other part of the body and then I
check to see if the game is over but
shouldn't it fix it with oh but if it's
not moving so I got to move it first
I mean this should be ok no oh because
if I click to get focus oh this is so
set this is like a silly debugging thing
so I'm what I'm gonna do is I'm gonna
have it grow with the spacebar not
mousepressed
else if key equals space I'm just trying
to do this to debug it and so I can do
whatever I want
now click over here and I move it so I'm
gonna make it longer so now let's see if
it dies yep okay great so I think I
finished this game really what I want to
do is come up with an end screen or
restart the game or have some sort of
score let's see
before I go how long I can play it
before I die
hey oh let me just show you something if
I go I'm gonna hit save if I go under
this is a feature of the web better if I
go file share I'm gonna go here and I'm
gonna grab this full screen URL I'm
gonna grab it I'm gonna open a new tab
and now it's just the game I'm going to
make it bigger for fun times I'm gonna
click in here and ready I'm going to
play the game
goodbye make your own version look for
the link sign up for a p5 web better
account hit duplicate make your own
version share it in the comments there
will be a coding training comm page
which you can also share it this is much
too easy I'm gonna be here forever
I'm gonna look at that well this is
working I made the game I can go home
now
let's just see how long this goes for
okay I die I don't know why I died I
thought I hit backwards so a good thing
I hit backwards the game is over thank
you thank you so that might be a bug
that I want to fix so that actually be
hit best but I guess you should lose the
game if you hit backwards I don't know
you know you can make the design more
interesting you can do all sorts of
things you can now make your own version
of the snake game in p5 in the web
editor instantly share it thank you to
the prospect foundation casting Taric
Asia and all the people who made
contributions the p5 web editor and all
people have worked on p5.js over the
years I'm so excited to be able to make
tutorials and coding challenges with
this I will still use my other workflow
and I will use processing but I hope you
enjoyed this video and I'll see you next
time on the coding training all right
all right so let me if anybody wants to
get this right now this is it
Thank You CJ for the claps so I have to
go I'm gonna just quickly send a text
message
oh sorry this is like did you believe
you're watching a live stream and I'm
like a texting my family to work out
child care arrangements I get oh my wife
is going to some concert tonight I can
actually
so hold on almost done
[Music]
I really shut off the stream before I do
this okay sorry I sent the important
messages but each should be after update
still yeah I probably made some mistakes
whoa what happened here what did I do
oh because I made it bigger there let's
look for mistakes Oh bug dot
snake dot each should be after okay so
um thank you everybody who has been
supporting this channel I'm excited that
I'm doc next time will be next Friday
most likely I will probably be
continuing more beginner stuff but I
have a lot of other things to get to so
things that are coming this fall are
tutorials on word Tyvek Oh actually next
Friday I have some surprise tutorials
that I'm making that have to do with
machine learning and training a model
those actually won't happen during a
live stream for some technical reasons
but you look for those on the channel
they will come out so I might be
recording some of those on Friday but
and they'll be out you know be out by
Monday but not on a live stream but I
will still do hopefully a live stream on
Friday with some other stuff in it so I
think yeah people are asking the chat
when what I don't have a sense of what
my schedule is going to be but I do not
teach any of my classes on Fridays so
that's typically the best day for me to
do a live stream and I will try to
alternate some in the morning and some
in the this sort of afternoon early
evening time depending on as I know that
like it just sort of helps different
people different time zones be able to
watch the videos okay so thanks
everybody
yes oh I definitely want to do a video
about having an AI beat the snake game
yes 40 Tetris is never gonna happen but
thank you for the suggestion me I am
Samia alright so thank you everybody
you'll notice that if you join to be a
member
the coding training you get access to
new emojis I send you some stickers stay
tuned for new t-shirts with new designs
this is a new logo the designer is Jason
headland Jason hey Glen calm this is
still kind of somewhat of a working
draft and I will see if I can answer one
or two questions still how many people
are watching by the way right now I mean
what I'm gonna do I'm in just in case
things crash I'm gonna hit stop
recording there's now the whole
livestream has been recorded to disc
coding training piece to repeat
processing p5 there's actually another
secret sticker on the bottom someone's
asking Wow Oh guess what
three blue one brown which is a channel
on the YouTube which has wonderful
content is going to release a video
about quaternions very soon and I do
solemnly affirm with the very sacred
train whistle that I will do a video on
quaternions at some point based on
whatever three blue and brown does and
when I say at some point
I mean sometime in the next 25 years but
hopefully sometime this year who created
p5 p5 is created by the original theatre
p5 is Lauren McCarthy the project itself
is a has been built by a large
collaboration of many people the p5
community and go the p5 website and the
p5 github to see who all those people
are and the processing foundation raises
money to help maintain the p5 library
you only get the so I have patreon this
is a very confusing thing and maybe
someday I'll have a better system I have
both patreon and YouTube it's for
memberships YouTube memberships you get
the emojis and the icon and stickers you
can also get the stickers with patreon
members and an invitation to slack
channel so youtube's membership is the
equivalent of five dollar-a-month
patreon but if you do the five
dollar-a-month patreon you don't get the
YouTube stuff the only reason you might
want to do patreon is if you prefer the
platform and if you want to do one of
the higher level pledges where I'll mail
you some books and stuff like that but
just be aware that those higher level
pledges it takes me quite a while to get
this stuff to you you should get it
within a year that's that's sort of what
I'm promising but as I do a mailing
every few months this live stream has
been up for at least three hours and
yeah so once again I just want to say
that this live stream is dedicated to
the memory of coding train contributor
enthusiast Madden I'm very sad about
hearing about the news of Americans
death this week and but I wanted to
mention that again at the end because
his contributions and his spirit really
meant a lot to me in the channel in the
community and I talked a bit more about
Maron and showed the website at the
beginning of the livestream so when this
gets archived you can go back and see
that and I'll put links to information
about Meriden and his web site in the
image chat okay alka says I can't wait
for the 50th anniversary coding train up
sewed with the introduction of
quadrillions thank you everyone I have
not had dinner I clearly need to have
dinner and I'm going to hit stop
streaming I'm gonna go and thank you
everyone for your support I'm checking
my notifications on Twitter and let's
look at my mentions on Twitter I got to
find my is dashboard okay so my
dashboard says two hours 56 minutes and
30 seconds so almost three hours and
here's the chat I'm gonna just type in
the chat goodbye all see you next week
bye and good night by the way this is
the computer that has the broken a key
this is the old coding train computer
this is the new coding train computer
see you next week
okay and I am now going to click this
button that says stop streaming and when
I click that I awkwardly just disappear
goodbye