1.0 p5.js: What is it?

Hello! I'm making a video!

You are watching a video, I think ...

The goal of this video is to
talk about something called p5.js

What is p5.js?

Who should you or might
you be thinking about learning

this thing called p5.js
from the very, very beginner stage

without any experience with
anything else whatsoever

and what might you use it for
and what's going to happen?

Am I making more videos?
less videos? That sort of thing.

So, first let me give you
a little context.

There is this thing called Processing.

Processing is a project
that started in 2001

by Casey Reas and Benjamin Fry

The two of them were students together
at the MIT media lab -

designers, artists, programmers -
trying to make a tool

that could help them
with their own work.

Since then, since 2001, this idea of
'creative coding' - it's a complex term,

but - 'creative applications
through programming'

I like to think of it as 'creative
expression through programming' -

how do you communicate and
express your ideas

while making computational tools -

It's also like - if you know how to
learn to program -

There's a lot of like, "Learn to program!
Learn to program! Everyone's gotta

learn to program! Aah!" kind of stuff
going on these days -

Take a deep breath, relax, you don't need
to know how to program.

There's lots of great stuff
in the world -

you could learn how to play the violin,
that's a wonderful thing,

but there is an aspect of learning to
program that is very powerful in that

that software is something that
drives so much of what we use.

And if you want to not be stuck
just, kind of using whatever software

other people - large corporations -

if you want to be able to express yourself
in new and different ways,

learning to program is a great
way to do that.

Also, and this is gonna kind of
come around full circle here,

learning to program and have the results
of what you program go in a browser

on the web, so that other people can
see those things -

that you can share and distribute
easily - this is a very powerful thing.

So, interestingly enough, when Processing
was first created, it was built on top of

a programming language called 'Java',
which was all the rage back in 2001

and one of the reasons why Processing
used Java is that

you can make these things called applets
and applets would run in the web browser!

So you could program your thing
in Processing, upload it to the web,

distribute it, all the world would see it,
you'd become rich and famous

or, even better, you don't become
rich and famous

but you do something good for the world
- or both, perhaps!

then, that made a lot of sense.

Fast-forward 14 years later, 2015,

when was the last time you saw
a java applet on the web?

If you saw it, it was just basically an
experience with a giant error message

that told that your browser crashed
and nothing worked.

The language these days of the browser
is something called JavaScript.

And I'll say a bit more about that
in a minute

JavaScript allows you to program and
create all sorts of exciting things

that happen in a web browser.
If you're interested in creating unique

and animated and creative web content,
learning JavaScript, learning p5.js, is

something you might be interested in.

Now, [...] some time in the last couple
of years, a bunch of us were talking

and we asked the question:

"What language would you pick if
Processing were being invented today?"

And somebody that answered that question
in an interesting way,

her name is Lauren McCarthy.

So, Lauren McCarthy began a project,
in collaboration with the Processing f...

Processing is a not for profit foundation,
so I was about to say Processing foundation -

[...ramble...]

So Lauren said, "Ok, well, what if
Processing was being invented today

and the language, instead of Java,
was JavaScript?"

So this is what p5.js is, as a project.

I should just briefly mention, there's
another wonderful project

called processing.js.

I know this is crazily confusing, I just
want to briefly mention it.

processing.js is a project started by
John Resig and many other people

have worked on it since then.

processing.js sort of tries to solve this
other problem:

your java code can't run on the web
as an applet anymore,

what if we could behind-the-scenes
translate it to JavaScript

so that it ran there?

But this project, p5.js, is different
in that it is a new project.

We can now think wonderfully and
happily about

that thing called Processing
that I briefly spoke about,

but mostly right now,
for the purpose of these videos,

we can now ignore this.

p5.js is an environment, a simple -
hopefully simple -

and beginner-friendly environment

to help you learn JavaScript,

to make applications, computational,
creative, interesting -

hopefully interesting-
things happen in the browser.

And eventually, you could go in a lot of
routes with this.

You might make art,
you might make data visualization,

you might make websites, as like
a web designer,

there's lots of paths that you might take

from this basic set of videos
that I hope to make.

I think that's just about the
full context.

There's some other pieces to

"how do you make something happen
in the web browser",

you need more than JavaScript, you need
these other things called

HTML, CSS, and JavaScript,

but I think what I wanna do now,
very briefly,

and I'm gonna pick this up in the
next video,

is just look at, open p5.js and
do a few things with it,

just so you get a sense of what kinds of
things it can do.

What would be great is if I had a video
that showed you like

"Here are a bunch of awesome projects
that are made with these kinds of tools."

Don't get me wrong, there's a lot of
really amazing JavaScript framework.

So I think a missing piece here --

Just like Processing was built
on top of Java,

it's a little bit different here

p5.js is not really built on top of
JavaScript, it is a set of...

boy, this is a hard one ...
and I was doing so well! [...]

What I think is useful to think of here
for a moment is p5.js is two things:

One of these things is it's
a library of functions.

So, here's a great way
of thinking about it.

Let's say you want to learn JavaScript.
And you go to Google and you type,

"JavaScipt" - boom.
Whoa! There's a lot of stuff out there.

There's like a million Stack Overflow
posts, which is like

a place where people ask questions,

there's 15 million "this.js" things
you could learn

and there's something called jQuery
and there's so much.

So, one of the goals, I think, of p5.js
is to give you a little bit of a sandbox,

a walled garden, to learn
some of the basics, and for that,

you get a library of functions,

to draw a circle, or draw a rectangle,
or set a color

so you can just use some basic drawing
functions to learn some of these

beginner steps of programming.

The other thing it is, and I think I need
to move over to the computer here,

The other thing it is is this thing here

Sam Lavigne has created something called
the p5.js editor

What this means is an application,
a program on your computer that

you can launch and just start typing
some code in and get your feet wet

and start to experiment and learn a bit
about code, without having to worry about

all of the larger pieces of things that
you need in order to make something happen

on a web page. We're gonna do it very
simply here.

So let's look at that for a second.
So I'm going to launch this.

By the way, I just downloaded it.
I haven't -- I've used it...

but, I haven't on this computer.
So, look:

"p5 is an application downloaded from the
internet. Are you sure you want to open it?"

So now's the time when you could say,
"Eh, I'm just going to play the violin."

Or, "I'm going to go play frisbee
- football - soccer."

But I'm going to open it.
[...]

A newer version of p5 is available.
I don't want to download it right now -

just hit ok. Oops, I do want to download
it right now. Ok.

So this here ...
[getting things opened]

this here is the
p5.js editor.

And if you look at it, it's already
filled in a little bit of code for you.

So you can start to see, "Ah, I have to
learn to program, I have to learn

some strange new language and syntax."

function. draw. parentheses.
curly bracket. curly bracket.

These are some things that will come
to light if you're for the first time

watching this video and looking
at programming.

So I'm gonna do a couple things here
real quick.

One thing I'm gonna do is I'm gonna type
in CreateCanvas and down here under draw

I'm gonna type rectangle and I'm gonna
type some other numbers

and I'm going to zoom back out
and hit play.

And we can see here,

look what's happened.

I wrote something that says,
"createCanvas!"

and what did that do? It made a canvas.

That's the canvas.

Then, down here, I wrote something that
said rect, short for rectangle.

What did it do? It made a rectangle.

So these are the first pieces, the first
things, that I'm going to show you

in the next video.

What lines of code do you start to write,
and what do those lines of code do?

With ps.js here, the first things we're gonna
learn is how to, like, draw a picture.

And, by the way, this canvas is actually a
little mini web browser that's opened.

So as more and more videos come to pass,
we can peel back some of these layers

and see how you might take this and
put it on the web somewhere,

share it, allow people to interact
with it, that sort of thing.

So, this video's ok. B+.

I think I'm going to keep it though
and upload it and

someday there will be a better one...
probably never...

This is the end. I'm gonna make another
video and then upload that too

and you can watch many of them.

And I'm keeping a list - maybe I'll try to
put a link in the description or something

maybe a list of all the videos I'm going
to make.

I'm gonna make a lot of intro ones and
then some project-based ones like

how to take a Google Spreadsheet and
visualize it as a graph in JavaScript and

try to do that in a short 10 minutes.

That's sort of my plan for this semester.