[BELL DINGING]
Hello.
Welcome to the first video in what
is a 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 going to 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 31, 2018--
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
going to 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 going to stop talking about that.
That's not the important part, but I
wanted to make that clear if you happen to be-- if you're just
want to like, race ahead and see all the videos.
All right, so what does it mean to program the computer?
So what it means to program the 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 10 rectangles.
Draw a rectangle, then a circle, then a rectangle, then 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 you mean might in English,
or whatever your native language is, instruct the computer
to follow some algorithm.
An 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 difficult problem.
Now, in this course, we're not going to necessarily solve--
but hopefully you might solve some problems--
but you can also just play around and experiment and make
beautiful pictures, and that's where we're going to start.
But we need some way of doing this together.
Drawing a rectangle, drawing a 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 two thousand four hundred
and-- that doesn't make any sense.
Two 20, 2043, whatever time in the future
that you're watching this video.
I'm not going to worry myself with any of that stuff.
I'm going to pick something.
I'm going to pick a programming language called JavaScript.
The reason I'm going to pick it is
because it happens to be one that I know a little bit.
And it also happens to be one in which there
is a particular library, and I'll talk about what that is.
That is a library of code of helper functions of things
that'll help you along in JavaScript called p5.js.
And this is a particular library that's
created by a nonprofit organization called
The Processing Foundation.
I will include lots of links about The Processing Foundation
and all of its initiatives.
It's an open-source project, which means
it is all there 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 to code 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,
and I encourage you to get involved with that,
and I'm happy to help facilitate that.
So, by the way, p5.js 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 realize.
I'm going to stop talking about different programming
languages in a second.
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 web pages
where it's, like, giving you a lot 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 coworkers, with your fellow students.
You can get feedback.
I'm going to show you how to do all
of this in this video series.
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
I would ask you to just like "shout out
the names of other programming languages you know about."
And you might say, like, Python, or C, or C#, or COBOL, or PHP,
or 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 this is a nice place for us to start.
We're going to get the benefit of being
able to put our stuff instantly in the web browser,
and if some day you discover some of these other tools
makes sense for other projects that you would like to learn,
this is going to give you a foundation of knowledge
for that.
In this playlist, in this series and all of the videos
that I'm going to make them, I'm going to walk you
through learning to code.
You will also, somewhat by accident,
learn a little bit about something called HTML and CSS.
HTML and CSS are the other pieces
of the puzzle for making something appear on a web page.
I am going to focus, focus, focus on JavaScript,
and you're not going to 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 web page.
So while this is not a web development course--
because I don't know anything about web development--
you might by accident learn to do some web development
by taking--
well, you're not really taking this course--
but by watching these videos and following along.
All right, so I'm wrapping up this video.
The next video is really where I'm going to get started.
I'm going to show you hey, this is what you type,
and then this is what happens, and this is why
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 going to rinse and repeat and rinse repeat
and do that over and over again for all
the little fundamental pieces and 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 going to be very important, because it's
the place we're going to look up, like, "I
forgot what this thing does."
We're going to 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 could just click on example, like Game of Life here,
and we could see ah, this is the code.
Ah, what is going on here?
This looks crazy.
Look at all the syntax and punctuation and stuff.
By the end of this whole playlist of series
this will make, you know, does it 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 how cells on a grid turn black or white based
on what the other cells are doing.
It is kind of like this bacterial-like simulation.
So oh, there's so many things we can do.
I actually have a whole video tutorial
building this up from scratch that you could go and find,
but stay with me here.
So this is the p5.js website.
And once again, I want to mention p5.js was made--
actually, one other thing I want to point out here
is I want to go here on community.
P5 has a really wonderful community statement
which is really important, so I encourage
you to go to the p5.js community statement and read it.
P5.js is created by The Processing Foundation.
I'll show you The Processing Foundation--
runs a fellowship program.
And here's a whole lot of people.
Lauren McCarthy is the creator of the p5.js library.
You can learn more about 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 in particular 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 brand--
I mean 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 and write code
in the browser, save your projects,
share your projects with-- look, there's that Game of Life thing
again--
without anything.
They don't need to download anything at all.
And I'm going to show you how--
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 Tarakajian.
This is not a beginner programming video,
but it's a video for people who might
know a bit about programming already
to see all the things the Web Editor can do as she walks you
through 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 Editor
to allow you to code with it.
And Mathura 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,
Saber 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 it in that, stay tuned.
I'll be making a video on that.
OK, so now this is the p5 Web Editor.
There it is.
So, ooh, look, this is some code.
That doesn't look so bad.
Function setup(), what is that?
CreateCanvas, what is that?
Background(220), what is 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 going to 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 going to go from there.
Video after video after video, adding this piece, then
this piece, then 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.
OK, so if you're excited about that, great.
Keep on watching.
There's also lots of other things
in the world besides programming,
so you could go do that stuff too.
And especially, like, being with people
and hugging your neighbors and stuff like that.
I think that sounded weird.
I didn't mean for that to sound weird.
I'm going to go now.
I have to stretch my hamstrings because I
have got some back problems and that's going to help.
Ah, see, I got that in there.
All right, see you all later in the next video.
[BELL DINGING]
[MUSIC PLAYING]