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