Placeholder Image

字幕表 動画を再生する

  • [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,